Fancy Text Widget Tutorial

Intro

Premium Fancy Text Widget allows you to create animated text and headline statements that can be used for adding eye-catching marketing messages.

Click here to check Premium Fancy Text Widget demo.

Requirements:

• You will need Premium Addons PRO plugin installed and activated on your website.
• Also, make sure that this addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Key Features

• Fancy Text
• Additional Settings

1. Fancy Text

The Fancy text is split into 3 parts:

• Prefix: The text before the animated text.
• Fancy Text: The animated text.
• Suffix: The text after the animated text.

Fancy Text

To add a new word to the fancy text, please follow the upcoming steps:

1. Press on the “Add Item” button.
2. Add your words in the “Fancy String” field.

In addition, you can copy and remove items and click and drag an item to change its order. While making your changes, you can preview the text effect directly in the editor.

Alignment: Align the widget as you want as you can align it to the left, center or right.

2. Additional Settings

Effect

Select from various fancy text effects. Take a look at the demo page from here.

A. Typing

• Type Speed: Set typing effect speed in milliseconds. The default is “30”.
• Back Speed: Set speed for the backspace effect in milliseconds. The default is “30”.
• Start Delay: Select when the animation should start. The default is “30” milliseconds. Example: If you set it on 5000 milliseconds, the first word/string will appear after 5 seconds.
• Back Delay: Select when the text should be hidden. The default is “30” milliseconds. Example: If you set it on 5000 milliseconds, the word/string will remain visible for 5 seconds before the backspace effect.
• Loop: You can enable or disable the loop of the text animation. If disabled, the fancy text will work only for just one time.
• Show Cursor: Enable or disable the cursor that is visible when the text is being typed in. When this option is enabled, you can also change the Cursor Mark.

B. Slide Up

• Animation Speed: Set a duration value in milliseconds for the slide up effect. The default is 200.
• Pause Time (Milliseconds): Choose how long the Fancy Text word/string should stay visible. Set a value in milliseconds. The default value is “3000” milliseconds.
• Show Items: Choose the number of Fancy Text items that should be visible at a time.
• Pause on Hover: If you enabled this option, the slide will be paused when a users hovers over the text with the mouse.
• Loading Bar: Enable loading bar below fancy text.
• Fancy Text Alignment: With this option, you can align the fancy text item to the left, center or right.

C. Zoom Out

• Animation Speed: Set a duration value in milliseconds for the slide up effect. The default is 1000.
• Animation Delay: Set animation delay in milliseconds.Default value is 2500
• Loop Count: Set how many times the animation will happen. Default is infinite.
• Loading Bar: Enable loading bar below fancy text.

D. Rotate

• Animation Speed: Set a duration value in milliseconds for the slide-up effect. The default is 1000.
• Animation Delay: Set animation delay in milliseconds. Default value is 2500.
• Loop Count: Set how many times the animation will happen. Default is infinite.
• Loading Bar: Enable loading bar below fancy text.

E. Auto Fade

• Animation Speed: Set a duration value in milliseconds for the slide-up effect. The default is 1000.
• Loading Bar: Enable loading bar below fancy text.

F. Custom

• Animations: Select the transition animation between every fancy text.
• Animation Speed: Set a duration value in milliseconds for the slide-up effect. The default is 1000.
• Animation Delay: Set animation delay in milliseconds.Default value is 2500
• Loop Count: Set how many times the animation will happen. Default is infinite.
• Loading Bar: Enable loading bar below fancy text.

Style

• Fancy Text
• Cursor Text
• Prefix and Suffix
• Loading Bar

1. Fancy Text

• Color: Select the Fancy Text color.
• Typography: Adjust font settings.
• Background: Feel free to add a background color to the Fancy Text.
• Text Shadow: Adjust Fancy Text shadow using the following controls:
  • Color
  • Horizontal Position
  • Vertical Position
  • Blur
• Stroke Color: Pick a color for stroke around Fancy Text.
• Stroke Width: Set storke width around Fancy Text.

2. Cursor text

These options are only used if the Typing effect was selected from the Additional settings.

• Color: Select Cursor Marker text color.
• Typography: Adjust font settings.
• Background: Add background color to the Cursor Marker.

3. Prefix and Suffix

• Color: Select Prefix and Suffix text color.
• Typography: Adjust font settings.
• Background: Add a background color to the Prefix and Suffix texts.

4. Loading Bar

• Color: Select Prefix and Suffix text color.
• Height: Set height for loading bar.