See this widget in action here.
Want to grab your visitors’ attention with dynamic, animated text on your site? The Animated Heading widget in aThemes Addons for Elementor lets you display rotating strings of text with typing animations, making your headings stand out and engage readers instantly.
In this guide, we’ll walk you through how to activate, configure, and style the Animated Heading widget in aThemes Addons.
Before you get started, make sure you’ve installed and activated the aThemes Addons plugin on your WordPress site along with Elementor. This widget requires aThemes Addons Pro.
The Animated Heading Widget enables you to create engaging headings with dynamic, animated text effects. Customize the text before, during, and after animation to highlight key messages in a visually appealing manner.
Activate the Widget
This widget is part of the aThemes Addons for Elementor plugin. To activate it:
- Navigate to the aThemes Addons dashboard in your WordPress admin area.
- Search for the Animated Heading widget.
- Toggle the switch to activate it. The widget will now be available in the Elementor interface.
Widget Options
Content Section
- Text Before: Add text that appears before the animated strings.
- Animated Strings: Define multiple strings to animate in sequence.
- Text After: Add text that appears after the animated strings.
- HTML Tag: Choose the HTML tag (e.g., H1, H2, span) for the heading.
- Alignment: Align the heading to the left, center, or right.
Settings Section
- Typing Speed: Adjust the speed of the typing animation.
- Backspace Speed: Configure the speed for backspacing text.
- Backspace Delay: Set a delay before backspacing starts.
Style Options
- Text Before: Customize the color, background, and typography of the text that appears before the animation.
- Animated Strings: Style the animated strings with custom colors, backgrounds, and typography.
- Text After: Modify the color, background, and typography of the text that appears after the animation.
- Cursor: Customize the cursor color.
Usage Tips
- Keep It Simple: Use short, impactful strings for maximum readability.
- Match Your Branding: Style the text to align with your website’s theme and colors.
- Limit Animations: Avoid overloading your page with multiple animated headings to maintain focus.
- Adjust Speeds: Experiment with typing and backspace speeds to find the perfect balance.
That’s it! You’ve successfully set up the Animated Heading widget on your site.
Next, would you like to showcase image comparisons on your pages? Check out our guide on using the Before/After Image widget to learn more.
