Adding an animated headline in WordPress is a great way to instantly capture your visitors’ attention. It enhances the visual appeal of your website and adds an interactive element that keeps visitors engaged with your content.
With the Heading Animation block from Nexter Blocks, you can easily add different types of animation to text on your WordPress website.
Required Setup
- Make sure the default WordPress Block editor is active.
- You need to have the Nexter Blocks plugin installed and activated.
- This is a Premium block, and you need the PRO version of Nexter Blocks.
- Make sure the Heading Animation block is activated, to verify this visit Nexter Blocks → Blocks → and Search for Heading Animation and activate.
How to activate the Heading Animation Block?
Go to
- Nexter Blocks → Blocks
- Search the block name and turn on the toggle then click Save Settings.
Key Features
- Two Animation Types – You can choose from two animation types – Text Animation and Highlights.
- Multiple Animation Styles – You can choose from multiple styles for each animation type.
How to Use the Heading Animation Block?
Add the Heading Animation block to the page.
From the Type section, you have to select the heading animation type. Here you’ll find two options –
- Highlight – With this, you can highlight a part of the text with animation.
- Text Animation – With this, you can show multiple texts with animation.
Select the option as per your requirements, let’s select Text Animation here.
Then from the Animation Style section, you have to select a pre-defined style. Here you’ll find 8 pre-defined animation styles.
Style 1
Style 2
Style 3
Style 4
Style 5
Style 6
Style 7
Style 8
Select the style as per your requirements.
In the Prefix Content field, you can add a text before the animated text.
Then in the Labels section, you have to add the texts you want to animate. By default, you’ll find two repeater items. Open one repeater item.
In the Label field, you have to add the text.
Note: In each repeater item, you can add one text
You can click on the +Add Label button to add more text.
In the Postfix Text field, you can add a text after the animated text.
From the Duration Timing field, you can set the animation duration. You can use multiple values separated “|” to set different animation durations for individual texts.
From the Alignment section, you can align the text for different responsive devices.
From the Select Style section, you can select a pre-defined style.
How to Style the Heading Animation Block?
To style the Heading Animation block, you’ll find all the options in the Style tab. You’ll find different styling option for different animation type.
Prefix and Postfix – From here, you can manage the HTML tag, typography and color of the prefix and postfix texts.
Animated Text – From here, you can manage the typography and color of the animated text.
Highlight Animation – You’ll see this tab for the Highlights animation type. From here, you can manage the animation duration, stroke width and color of the highlighted line.
Advanced – This is our global extension available for all our blocks. From here you can add a custom CSS class in the Additional CSS class(es) field. If you know CSS you can use this class to further finetune the style by using your own custom CSS.
Advanced options remain common for all our blocks, you can explore all it options from here.
