The Animated Headline widget lets you create dynamic and engaging headlines for your website. This widget animates headline text with rotating or highlighted effects, allowing for easy customization of animation effects, speed, and styles to align with your website’s design and branding.
Adding Animated Headline widget
- Find the Animated Headline widget under the Elements section of your 10Web Builder page.
- Drop the widget onto your preferred location on the canvas.
- Configure the widget settings according to your preferences.
Content tab
Headline
- Style: Select either Highlighted or Rotating style for the headline animation.
If the style is set to Highlighted, the following customization options are available:
Shape: Choose from various shapes for the highlight, such as Circle, Underline, Double, etc.
Before Text: Enter text to appear before the highlighted section.
Highlighted Text: Enter the text that should be highlighted.
After Text: Enter text to appear after the highlighted section.
If the style is set to Rotating, the following customization options are available:
Animation: Choose from various animations like Typing, Flip, Slide, etc.
Before Text: Enter text to appear before the rotating section.
Rotating Text: Enter the list of content pieces to rotate through.
After Text: Enter text to appear after the rotating section.
- Link: Add a URL link to the headline. Click the icon to set more link options.
- Alignment: Set the alignment of the headline text to the Left, Center, or Right.
- HTML Tag: Choose the HTML tag for the headline.
Style tab
Shape
Note:
The Shape settings are available only if Style under the Content Tab is set to Highlighted.
- Color: Choose the color of the highlighted shape.
- Width: Set the width of the highlighted shape using the slider.
- Bring to Front: If set to Yes, the Shape overwrites the Highlighted Text.
- Rounded Edges: Slide to Yes to round the edges of the shape.
Headline
- Text Color: Choose the color of the headline’s before and after text.
- Typography: Set the typography options for the headline’s before and after text. For more details, see Typography.
Animated text
- Text Color: Choose the color of the animated text.
- Typography: Set the typography options for the animated text. For more details, see Typography.
Advanced tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.