This guide walks you through using the Gutenberg Animated Text Block to add motion and emphasis to your website content. Designed for highlighting headlines and key messages, this block allows you to create eye-catching animated text with ease. Choose from a wide range of animation styles, including Typing, Clip, Zoom, Letter Flow, Slide, Bounce, Fade, and Flash. Each animation type comes with its own controls, letting you fine-tune speed, delay, and duration for precise timing. You can also pause animations on hover for better readability and user interaction. With these flexible options, animated text becomes a powerful way to draw attention without overwhelming your design.
Go to the editor’s menu, select Gutenburg Animated Text Block, type in your text, and then adjust its look and position on your webpage
General Settings
Animation Style: Select an animated style with options to have a text animation or highlighted.
Prefix Text: The field to enter text that appears before your animated string.
fancy Strings: Where you add the animated text that cycles through different strings.
Highlighted Text: The field to enter the highlighted text.
Suffix Text: The field to enter the text that will display after the animated string.
HTML Tag: Choose the HTML tag that defines the importance of the text, such as H1 for main headings or H3 for subheadings, affecting both the size and SEO hierarchy.
Align Content: Icons to select the alignment of the entire text block. Options include left, center, or right alignment.
Gutenberg Animated Text Block – General Settings
Additional Settings
Effect: Select the type of animation for the text.
Type Speed: This sets the speed at which the typing animation displays text, measured in milliseconds. The current setting is 100 milliseconds.
Back Speed: Determines the speed of the backspacing effect during the typing animation, also in milliseconds.
Start Delay: Configures the delay before the typing animation begins, in milliseconds.
Backspace Delay: This is the amount of time the text remains visible before the backspace effect begins, measured in milliseconds.
Loop: A toggle switch that allows the text animation to repeat continuously.
Show Cursor: A toggle switch to display a cursor during the typing animation.
Cursor Mark: The character used to represent the cursor in the typing effect.
Gutenberg Animated Text Block – Additional Settings
Highlighted Settings
Effect: Select the type of animation for highlighted text.
Animation Speed (sec): This setting determines the speed at which the highlighted animation displays, measured in seconds. The current setting is 3 seconds.
Animation Delay (sec): Determines the delay of the animation effect during the highlighted animation, also in seconds.
Gutenberg Animated Text Block Styling Controls
Fancy Text Style
Typography: Adjust the font properties of your text, with options to change the font size and family to your preference.
Color: Set the text color.
Background Color: Choose a background color for your text block.
Cursor Color: Select the color of the cursor that appears in the typing animation.
Text Shadow: Add a shadow effect to your text to make it stand out.
Gutenberg Animated Text Block – Animated Text Style
Shape Style
Width: This option allows you to set the width for the highlighted shape.
Color: Select the color of the highlighted shape.
Prefix & Suffix Style
Typography: This option allows you to change the font settings of the prefix and suffix text.
Color: Select the color of the prefix and suffix text.
Background Color: Choose a background color for the prefix and suffix text area.
Gutenberg Animated Text Block – Prefix & Suffix Style
Spacing
Margin: Control the space around the outside of the text block, effectively determining how much room is between the text block and other elements on the page.
Padding: Adjust the space between the text within the block and the block’s borders, which can increase or decrease the whitespace surrounding the text inside the block.
Gutenberg Animated Text Block – Spacing
Conclusion
In conclusion, the Gutenberg Animated Text Block offers a versatile way to highlight important messages and bring visual interest to your WordPress pages. With multiple animation styles and precise control over timing and behavior, you can create engaging text effects that enhance communication rather than distract from it. When used thoughtfully, animated text helps guide attention, reinforce key content, and elevate the overall user experience of your website.
Need Further Help?
Have a question or need assistance? Premium Blocks dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.
