Key Features of the Elementor Fancy Text Widget
- Prefix, Dynamic, and Suffix Text: Add a prefix and suffix to dynamic text for a smooth, cohesive message.
- Multiple Animation Effects: Choose from typing, rotating, or falling animations to catch visitors’ eyes.
- Flexible Content Control: Easily add, remove, and rearrange items within the fancy text for customizable content display.
- Alignment Options: Adjust text alignment for different layout needs.
- Full Styling Control: Customize colors, typography, and spacing for prefix, suffix, and dynamic text independently.
- Responsive Design: Ensures animations and text look great across all devices.
What’s Needed?
To use the Elementor Fancy Text Widget, you’ll need:
- Elementor Free Version: The basic Elementor plugin for building and designing WordPress pages.
- Vertex Addons for Elementor: The plugin that provides the Fancy Text Widget.
Install and Activate the Elementor Fancy Text Widget
To activate the Elementor Fancy Text Widget, please refer to our Widget Activation Guide.
How to Configure the Elementor Fancy Text Widget in Elementor
To set up and customize the Elementor Fancy Text Widget, first add the widget to your page, then follow these steps for a comprehensive configuration.
Step 1: Adding the Widget
Drag and drop the Fancy Text Widget from the Elementor panel to the desired location on your page. The widget’s settings will appear in the Elementor editor’s side panel, divided into three tabs: Content, Style, and Advanced.
Content Tab Configuration
The Content tab is where you add the prefix, dynamic text items, and suffix, as well as configure alignment and animation options.
- Fancy Text:
- Prefix Text: This is the text that appears before the animated text. Add a simple introduction or keyword that sets up the animated content.
- Items: Each item within the “Items” section represents a piece of text that will cycle through in the animation. You can:
- Add New Items: Add as many items as needed to display multiple pieces of dynamic text.
- Remove Items: Delete items that are no longer needed.
- Rearrange Items: Drag and drop to rearrange the order of items, controlling the sequence of the animation.
- Suffix Text: This is the text that follows the animated section. Great for creating a complete sentence or statement around the animated text.
- Settings:
- Alignment: Choose the alignment for your text—left, center, or right—to fit with the page layout.
- Effect: Select from different animation effects:
- Typing: Mimics the effect of text being typed in real-time.
- Rotate: Rotates between items, fading one out and bringing the next into view.
- Falling: Animates text with a falling effect, drawing attention to each word in a unique way.
- Interruption Time: Set the time interval between animated texts to control the pacing of each effect.
- HTML Tag: Assign an HTML tag to the animated text (e.g., H1, H2, etc.), allowing for structured, SEO-friendly headings.
How to Style the Elementor Fancy Text Widget
The Style tab provides options for customizing each text element’s appearance, including colors, typography, and spacing.
Content Styling:
- Prefix Text Color: Choose a color for the prefix text that complements the rest of the widget’s design.
- Prefix Text Typography: Customize font, size, weight, and other typography options to style the prefix text according to your brand or design.
- Fluid Text Color: This setting controls the color of the animated (dynamic) text. Make sure it’s eye-catching and contrasts well with the background.
- Fluid Text Typography: Adjust the typography settings (font, weight, style, etc.) of the animated text to enhance readability and visual appeal.
- Suffix Text Color: Define the color for the suffix text, keeping it consistent with the prefix text or using a contrasting color for emphasis.
- Suffix Text Typography: Customize the typography for the suffix text to match the prefix or create a unique look for each part of the text.
Advanced Tab Configuration
The Advanced tab offers additional customization options common to all Vertex widgets, including:
- Margin: Adjust the outer spacing of the widget to control how it interacts with other elements on the page.
- Padding: Set the inner padding around the widget content to ensure proper spacing.
- Custom CSS: Add custom CSS if you’d like to apply further styling tweaks to achieve your desired look.
Final Outcome
The Elementor Fancy Text Widget creates an engaging visual effect that can be used for emphasizing key points, headlines, taglines, or promotional messages. Users can experiment with various animations and styles to create an interactive display that captures visitors’ attention.
