Widgets

Animated Text

Step-by-Step Tutorial on Using the Animated Text Widget of Zyre Addon

Elevate your website’s design using the Animated Text Widget of Zyre Addon for Elementor. With stylish headings and dynamic effects, you can transform your webpage into a visually engaging experience.

Learn How To Use Animated Text Widget:

Exploring the Features of Animated Text Widget.

Step 1: Drag the widget

From the left panel, search or choose the Animated Text Widget of Zyre Addon and simply drag it into your desired section.

Step 2: Content tab

General:

  • Animated Text Style : You can choose a predefined style from here.
  • Text Type : Select the type of animation (Single, Switched).
  • Before Text : Add static text before the animated part.
  • Animated Text : Define the words or phrases that will animate.
  • After Text : Add static text after the animated part.
  • Display : Set display behavior (inline, block).
  • Alignment : Align the animated text (left, center, right).
  • HTML Tag : Choose the HTML tag for the animated text.

Switched Settings:

  • Trigger On : Choose when the animation starts (on load, viewport)
  • Effect : Select the animation effect for text transitions.
  • Animation Speed : Set a duration value in milliseconds for slide up effect.
  • Pause Time : How long should the word/string stay visible? Set a value in milliseconds.
  • Show Items : Show how many items should be visible at a time.
  • Pause on Hover Toggle : Enable/disable pausing the animation when hovered.
  • Slide Text Align : Set alignment for the sliding/animated text.

Step 3: Style tab

In the Style section, you can customize the Animated Text, Before Text and Suffix Text — but make sure you have added them first.

Animated Text:

  • Headline Typography : Here you can customize the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing for your text. Explore full typography settings here.
  • Color : Set color of the animated text.
  • Background Color : Set color for the background of the animated text. Explore full background settings here.
  • Text Shadow : Add shadow effects to the text.
  • Stroke Width : Set stroke width of the text.
  • Stroke Color : Set stroke color of the text.
  • Margin : Add outer space of the text.

Before Text:

  • Typography : Here you can customize the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing for your text. Explore full typography settings here.
  • Color : Set color of the animated text.
  • Enable Floating : Toggle for enable or disable floating effect.
    • Horizontal Align : Set the horizontal alignment of the floating text.
    • Vertical Align : Set the vertical alignment of the floating text.
    • Left Position : Define the exact left positioning of the text.
    • Bottom Position : Define the exact bottom positioning of the text.
    • Horizontal Offset : Adjust the horizontal offset for precise placement.
    • Vertical Offset : Adjust the vertical offset for fine positioning.

Suffix Text:

You’ll find the same design options for the Suffix Text Section as in the Before Text — giving you full freedom to style it just the way you imagine.

Step 4: Advance tab

If you want to customize the layout, backgrounds, or make your design more engaging, head over to the Advanced section. The Advanced panel is a default Elementor feature. Check out this document to learn more about its features.

Finally, hit the Publish button and watch your stunning Animated Text come to life on your webpage!

You’re all set!

Share: