Headliner

Setup

  • Place the HeadLiner widget on your page, where you would like the headline to appear.
  • The headline text will be aligned to the left by default. You may adjust alignment in the Design tab now if you wish to work with a right-side alignment. See the Design section below for more details.

WIDGET OPTIONS (CONTENT)

Note: When changing settings in the options panel, the widget will reflect the changes made. The headline text may look odd or out of alignment just after a settings change. You may wait until all the animated headlines cycle, or refresh the page to reset the widget.

  • Open the widget options.
  • Unique ID: Enter a unique name here if you intend to use multiple HeadLiner widgets on the same page.
  • Animated Headline Text: These are the portions of the headline that will be animated. There are 3 by default, but you may add more or delete as needed. Click the item to update the text.
  • Static Text (Before Headlines): This text is the static text in the headline, and should be used when you want static text at the beginning of the headline, and animated text at the end of the headline.
  • Static Text (After Headlines): This text is the static text in the headline, and should be used when you want static text at the end of the headline, and animated text at the beginning of the headline.
  • Either of the above fields can be left blank to achieve the desired effect. Both fields can have text if you wish to have animated text before and after the static text.
  • You may want to adjust alignment settings based on the preferred layout of the static and animated text. See the Design options for more information.
  • Animation Settings: This setting opens an additional dialog box, allowing you to set the animation style for the animated portion of the headline. Some animation styles have individual additional settings that will be seen when selected.
  • Link: This allows you to set a link for your headline. The link is applied to the entire headline (both the static and animated portions)

WIDGET OPTIONS (DESIGN)

  • Alignment settings are important for this widget to display properly. Use of the two alignment options below can ensure proper display of the widget:
  • Static Text Alignment: This sets the alignment of the static text, within the width of the widget container. By default, the widget container will span the width of your page. You can think of this setting as the master control for where you would like your headline to appear: left, center or right. Decide where you would like your headline to appear (left/center/right) and set it here.
  • Headline Text Alignment: This setting should be used keeping in mind what was used in the Static Text Alignment option. Use these combinations for best results:
    • Left aligned headline with animated text at the end: Static Text Alignment set LEFT, Headline Text Alignment set LEFT.
    • Left aligned headline with animated text at the beginning: Static Text Alignment set LEFT, Headline Text Alignment set RIGHT.
    • Center aligned headline with animated text at the end: Static Text Alignment set CENTER, Headline Text Alignment set LEFT.
    • Center aligned headline with animated text at the beginning: Static Text Alignment set CENTER, Headline Text Alignment set RIGHT
    • Right aligned headline with animated text at the end: Static Text Alignment set RIGHT, Headline Text Alignment set LEFT.
    • Right aligned headline with animated text at the end: Static Text Alignment set RIGHT, Headline Text Alignment set RIGHT.
  • The combinations above ensure that the space between the static and animated text doesn’t change based on the length of the animated text, which is variable.
  • Vertical/Horizontal Padding: Sets top and side padding, respectively.
  • Background Color: Sets the color of the headline block background, behind the headline text. This will create a rectangular box behind the headline. It is set to transparent by default.
  • Static/Animated Text Styling: These settings allow styling control of each component of the headline text.
  • Typing Effect / Loading Bar Effect / Eraser Effect: These settings offer further control of the named animation style.