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.

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 Available Options
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 2 fancy text typing effects “Typing” and “Slide Up”. Take a look at the demo page from here.

These two effects have different settings:

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 hid. 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.
Fancy Text Typing Effect Settings

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.
  • Fancy Text Alignment: With this option, you can align the fancy text item to the left, center or right.
Fancy Text Slide Up Effect Settings

Style

  • Fancy Text
  • Cursor Text
  • Prefix and Suffix

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
Fancy Text Styling Options

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.
Cursor Text Styling Options

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.
Prefix and Suffix Text Styling Options