How To Use

How To Use Animated Text Block

With the Animated Text Block, you can easily add Animated Text to your website. This allows you to showcase titles, headings, or any content seamlessly, giving your site a more dynamic and engaging appearance.

You can follow the steps below to use the Animated Text Block.

Add to the Page:

Locate the Animated Text block in the block inserter panel, then simply click or drag it into your desired section of the page. Once added, you can customize the content and settings to match your design seamlessly.

Customization:

Let’s explore animated text block settings and styles:

Animation Styles:

Choose from multiple animation themes and layouts to match your design style. Easily pick any option that fits your website’s look and creative needs.

Text Alignment:

Control text alignment with ease to perfectly fit your layout design. Choose left, center, or right alignment for better visual balance.

Max Width:

Set a maximum width for your text to maintain clean and readable layouts. Helps maintain visual balance across various screen sizes.

Animated Text or Content:

Animate text or content to create engaging and eye-catching visuals. Perfect for highlighting key messages and improving user interaction

Animate Loop:

Enable loop animation to repeat text effects continuously. Keeps your content dynamic and visually engaging.

Background:

Add custom background styles to enhance your text’s appearance.

Create better contrast and visual appeal for your content.

Typography:

Customize typography settings like font, size, weight, and style. Ensure your text looks perfect and matches your overall design.

Random Color:

Apply random colors to your text for a vibrant and dynamic look. Make your content stand out with ever-changing, eye-catching visuals.

Text Shadow:

Add customizable text shadows to create depth and emphasis. Enhance readability and make your text visually striking.

Padding:

Adjust padding to control spacing around your text for a balanced layout. Ensure your content looks neat and well-structured on any device.

Border:

Add and customize borders around your text for a polished look. Enhance visual separation and make your content stand out.

Animation In:

Apply smooth entry animations when the text appears on screen. Create an engaging and attention-grabbing first impression.

In Effects:

Trigger animation effects when the content enters the viewport. Enhance visibility and user engagement as text comes into view.

Out effects:

Apply animation effects when the content leaves the viewport. Create smooth and natural exit transitions for a polished experience.

In Sequence:

Animate text elements in a sequential order for a smooth flow. Create a structured and visually appealing animation experience.

Out Sequence:

Apply exit animations in sequence for a smooth and organized transition. Ensure text elements leave the view in a clean, natural flow.

Publish & Go:

Finally, click on the Save button to display.

Now check the Animated Text Section on your page and view it.

That’s it for the Animated Text Block

ShortCode Usage

Use a simple shortcode to display the Animated Text Block anywhere on your site, including posts, pages, or custom areas.

Add New Item ShortCode:

First, you go to the dashboard menu. Click the Add New menu.

After that, you redirect to the block editor page. You can customize to your choice and the final setup.

And then the publish or save button after all the setup.

After that, you go back to the dashboard menu.

When you return to the dashboard menu, you will see the shortcode.

Copy The ShortCode:

Just click now on the shortcode button.

Insert ShortCode & Preview:

Now insert your copied shortcode into your block editor shortcode block. And then save the publish and go to your Animated Text Block page.

And then go to the section page and preview the frontend.

That’s it.