Gutenberg Animated Text Block Tutorial By Premium Blocks

Introduction

This guide is all about showing you how to use Gutenberg Animated Text Block to add some flair to your website. This tool lets you create animated text, perfect for headlines or important messages. You have two animation styles to choose from: a typing effect that mimics someone typing the text and a sliding effect that makes the text appear to slide in from off-screen. For the typing effect, you can control the speed of the typing and the delay before it starts and disappears. The sliding effect allows you to set how fast the text moves and how long it stays on the screen. There’s also a handy option to pause the animation if someone hovers over the text.

Visit Demo Page

Free Download

Requirements

Before you start with Gutenberg Animated Text Block in WordPress, make sure the required plugin is installed and turned on.

Premium Blocks for Gutenberg – The Free WordPress Plugin.
Recommended* Kemet Full-Site-Editing WordPress Theme.

How to Use Gutenberg Animated Text Block?

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

You can configure the main elements of your text block.

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.
Suffix Text: The field to enter the text that will display after the animated string.
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 prefix text, fancy strings, suffix text and 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.
Back 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 Styling Controls

Animated 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.

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.

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.

Need Further Help?

Have a question or need assistance? Our 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.

Contact Support

Facebook Group

Gutenberg Animated Text Block Tutorial

Table Of Content