2 minutes read

Headline rotator Block

Headline rotator Block options:

  • HTML tag – set the HTML tag from h1 to h6.
  • Text before – add the static text before the rotating part of the headline. You can add the text in separate lines.
  • Rotating words/phrases – add the rotating part of the headline text. Use one separate line for each word/phrase you want to switch.
  • Text after – add the static text after the rotating part of the headline.
  • Effect – choose rotation effect from: rotate, slide, type and push.
  • Block position – set the block position to left, center or right.
  • Max. width – set the maximum width.
  • Top margin – set the top margin using any CSS-compatible margin value.
  • Bottom margin – set the bottom margin using any CSS-compatible margin value.
  • Top padding – set the top padding using any CSS-compatible padding value.
  • Right padding – set the right padding using any CSS-compatible padding value.
  • Bottom padding – set the bottom padding using any CSS-compatible padding value.
  • Left padding – set the left padding using any CSS-compatible padding value.
  • Top margin (mobile) – set the top margin on mobile devices (from 800px). Use any CSS-compatible margin value.
  • Bottom margin (mobile) – set the bottom margin on mobile devices (from 800px). Use any CSS-compatible margin value.
  • Font size – set the text font size.
  • Mobile font size – set the text font size on mobile devices (from 800px).
  • Font weight – set the text font weight.
  • Line height – set the line height.
  • Mobile line height – set the line height on mobile devices (from 800px).
  • Break lines – set line breaks between the “before”, “rotating”, and “after” headline parts.
  • Text align – set the text alignment to left, center or right.
  • Text transform – set the text transformation to uppercase, lowercase, capitilize, none, or use the default Customizer setting.
  • Color – set the text color.
  • Background color – set the text background color.
  • Rotating phrase colors – set the text color to rotating phrases individually. Add one color per line, using the color picker below, and the colors will be assigned to phrases accordingly.
  • Animation – you can add animation to your headline.
  • Animation delay (in milliseconds) – set animation delay.
  • Animate anytime this block enters the viewport – you can choose to animate the block anytime it enters the viewport, instead of only once.
  • Class – add a custom CSS class to your headline.
  • ID – add a custom CSS ID to your headline.
  • Style – add an inline CSS style to your headline.