HeadLiner 2.0

http://www.muse-themes.com/products/headliner

Headliner 2.0 is an entirely new widget, built from ground up to add new features and address issues reported with the original HeadLiner.

Turn normal text into compelling headlines with our HeadLiner widget. Single words or phrases are revealed in sequence using slick animated text transitions, creating a powerful effect sure to quickly draw attention and interest from site visitors.

This versatile widget can be easily applied to existing text in sites you’ve already built. Ten transition types ensure that you’ll find the perfect headline effect to suit your Adobe Muse project every time!

  • Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
  • Current Version: 2.1
  • Supported Devices: Desktop, Tablet, Phone

Release Log

  • 2.1: Fixes issues some users reported of muse objects and text becoming misaligned when previewed or published (08/05/2016)
  • 2.0: Widget is entirely rebuilt to add features and improve stability (07/21/2016)
  • 1.3: Additional timing options added to transitions supporting letter spacing (05/04/2016)
  • 1.2: Added new animation style and restored all original styles (03/29/2016)
  • 1.1: Fixed issue causing text to wrap and display vertically (02/12/2016)
  • 1.0: Adds collapsible panel functionality and support for responsive Muse
  • L11.3: Improved widget performance with layers and visibility (10/29/2015)




Setup

  • Drag the widget from the library and drop into your project in Design mode.
  • The position of the widget container determines where the animated headlines will appear. Position the widget where you want your animated headlines.

    If you're using center-aligned text in your headlines, placing the widget exactly in the center of the page gives the best results

  • Think of the widget container as a text box. If you're using long headline phrases, the HeadLiner widget container should be long enough to contain the text without wrapping. As a general rule, size the widget container to match the width of the text boxes you're using for the headline text.
  • Create your headlines by adding text boxes into the project. Add text and style as you like. These text boxes can be placed anywhere in your design - even off canvas. They will become animated where the widget container is placed, and the static text will not be seen.
  • One by one, apply paragraph styles to the headline text boxes. The easiest way is to click on a text box to select it, then add a new paragraph style. Rename the paragraph style something simple, like "headline1". Repeat this process for every headline text box. When you're finished applying paragraph styles, click on each headline with the paragraph style panel open to ensure that each headline has it's own unique paragraph style applied, and that the style names are correct.
  • Open the widget option panel. Open the "Headline Setup" section and enable the number of headlines you plan to use.
  • Enter the paragraph style names you applied to the headline text boxes.
  • The top area of the widget contains the basic animation settings. There are 10 animation styles, Animation Delay - which sets the delay before the first animation begins, and Text Alignment. Keep in mind that this setting is necessary for aligning your headline text left, center, or right. Alignment settings made in Muse will be overridden by this setting. Due to the architecture of Muse and it's relationship with the widget's Javascript and CSS, certain animation styles may appear differently in center and right text alignment situations. If left-aligned text is suitable for your design, it is suggested.
  • The last 3 sections of the widget are specific to the "Typing", "Loading Bar" and "Eraser" animation types.

We performed extensive beta testing internally and with our member base before the release of this widget. We found that the majority of problems people had were usually due to two things:

  • Paragraph Styles: It is important that the paragraph styles applied to the headline text matches exactly what is defined in the widget options panel.
  • Redefining Paragraph Style Attribues: Whenever any style changes are made to text (font style, size, color, etc), the paragraph style is automatically changed. When a paragraph style is changed, it is noted by a "+" symbol next to the style name. The paragraph style has to be redefined to include the change. Otherwise, the changes won't be seen in the animated headlines. There is a redefine style button found at the bottom of the paragraph style panel:

Linking: Links can be applied to headlines. Keep in mind that once a link is applied, link styles will affect the styling of the link text. Click "Hyperlinks" in the top menu to access and edit link styles. Also note that links cannot be applied to animation styles where individual letters are animated separately


Commonly Asked Questions

No commonly asked questions

Known Issues/Conflicts

No known issues or conflicts


Additional Info Links