🎯 Purpose
This widget lets you create visually striking headings with motion—either by highlighting a specific section of text or rotating multiple text segments—perfect for capturing attention on banners, landing pages, promotions, and more.
âž• Adding Animated Headlines
Drag the widget into your layout.
In the Content panel, start by choosing one of two styles: Highlighted or Rotating.
🔄 Style Modes
1. Highlighted Style
Displays text with an animated highlight overlay.
Sections:
Before Text: Static lead-in text.
Highlighted Text: Text that is emphasized with an animated visual.
After Text: Additional static follow-up text.
Shape options include circle, underline, double line, zigzag underline, strikethrough, diagonal, and more.
2. Rotating Style
Cycles through multiple text phrases in a looped animation.
Sections:
Before Text: Static introduction.
Rotating Text: List of text values that switch with animation.
After Text: Static concluding text.
Multiple animation effects are available (e.g., typewriter, flip, slide, wave, clip, swirl).
⚙️ Animation Controls
Loop Behavior: Choose between infinite looping or a single playthrough.
Duration: Set how long each animation phase lasts.
Delay (for highlighted style): Control pause time between loops.
đź”— Link & Structure Settings
Add an optional link so the headline becomes clickable.
Text alignment: left, center, or right.
Select an appropriate HTML tag (H1–H6, DIV, SPAN, paragraph).
🎨 Styling Options
Highlight
Customize shape color, width, layering order (bring-to-front), and rounded edges.
Text (Static & Animated)
Set text color and typography (font, size, weight, spacing).
Apply text stroke and shadow effects for extra emphasis.
🛠️ Advanced Settings
Includes all familiar advanced controls: margin, padding, positioning, motion effects, entrance animations, responsive visibility, HTML attributes, and custom CSS.
âś… Best Practices
Use animated style only for key content—overuse can distract.
Choose a text animation effect that complements the message and design.
Keep animation duration smooth—not too fast.
For highlighted text, match shape style with brand tone (e.g., zigzag for playful, underline for subtle).
Always test responsiveness to ensure readability on all devices.
đź“Ś Ideal Use Cases
Hero section headlines to engage website visitors.
Highlighting unique value propositions or brand messages.
Drawing attention to calls to action or sign-up prompts.
Announcing promotions or event details in a dynamic way.
In summary, the Animated Headline widget combines bold design and motion control to help your headlines stand out—with options to highlight specific text or rotate through multiple phrases.
