What is the Animated Word Roller widget?
The Animated Word Roller widget is a powerful and engaging tool that allows you to create dynamic headlines by combining a static title with a list of words that animate and “roll” through a designated display area. This creates a visually modern and captivating effect, perfect for highlighting key features, services, or concepts in a concise and appealing manner. This widget is an excellent solution for any Elementor user looking to add animated typography and motion to their website, making their headlines more memorable and interactive.
Common use case for the Animated Word Roller widget
The Animated Word Roller widget is ideal for creating engaging headlines that dynamically present key information on a homepage or landing page. It allows you to combine a static phrase, such as “We are experts in,” with a rolling sequence of descriptive words like “Web Design,” “SEO,” and “Content Marketing.” This is a perfect way to quickly communicate the versatility or core aspects of a product, service, or brand in a prominent area like a hero section, capturing visitor attention from the moment they land on your site.
Additional use cases
- Showcasing product features: Highlight different features of a product by having them roll through a headline, such as “Our product offers [Durability, Speed, Efficiency].”
- Service offerings: Dynamically list various services your business provides to showcase the breadth of your offerings.
- Emphasizing key attributes: Visually present multiple benefits or characteristics of a concept, person, or organization in a captivating and memorable way.
Requirements
- You need the Marquee Addons Pro plugin installed and activated on your website.
- You can find detailed installation instructions in our dedicated installation blog post.
- Make sure that this addon is enabled so you can find it in the Elementor editor.
- Marquee Addons works only with the Elementor Page Builder plugin, so you will need to have it installed and activated as well.
Add the widget
To add the powerful Animated Word Roller widget to your Elementor-powered website, follow these simple steps:
- Navigate to the Elementor editor.
- Search for the Animated Word Roller widget.
- Drag the widget to your desired location on the page.
Settings for the Animated Word Roller widget
The Animated Word Roller widget offers extensive customization options categorized into three main tabs: Content, Style, and Advanced.
Content tab
The Content tab is where you define the words for your roller and configure its animation behavior.
- Title: Enter the static text that will appear before the animated words.
- Word Lists: Add and manage the list of words or phrases that will animate. Use the “Add Item” button to include more words in the rotation.
- Title HTML Tag: Select the HTML tag for the static title (e.g., H1, H2, div) for semantic structuring.
- Alignment: Controls the horizontal alignment of the entire widget content (static title + animated words).
Additional Options: This section provides controls for the animation behavior.
- Active Word Duration: Sets the time (in seconds) that each animated word remains fully active or visible before transitioning to the next.
- Visible Word: Determines how many words are partially visible in the rolling animation effect at any given time. It’s recommended to use an odd number less than or equal to the total number of words for optimal display.
Style tab
The Style tab allows you to visually customize every aspect of your Animated Word Roller, ensuring it perfectly matches your website’s design.
Title: Customize the appearance of the static title.
- Typography: Controls the font family, size, weight, line height, letter spacing, etc.
- Color: Sets the text color of the static title.
- Text Stroke: Adds an outline or stroke to the static title text.
Animated words: Customize the appearance of the words that roll.
- Typography: Controls the font family, size, weight, line height, letter spacing, etc., for the animated words.
- Color: Sets the text color of the animated words.
- Text Stroke: Adds an outline or stroke to the animated words.
Icons: (Note: The exact origin of these icons from the Content tab is not visible in the provided screenshots. They may relate to separators or decorative elements within the roller animation).
- Size: Controls the size of any associated icons.
- Gap: Adjusts the spacing around the icons.
- Color: Sets the color of any associated icons.
Advanced tab
The Advanced tab provides a comprehensive set of controls that are common to most Elementor widgets, allowing for refined design and responsiveness. Here you can adjust the widget’s layout (e.g., positioning, Z-index), apply engaging Motion Effects (like scrolling effects or entrance animations), customize its Background, add Borders and Box Shadows, apply Masks for unique shapes, control Responsive visibility across devices, add custom HTML Attributes, and inject Custom CSS for bespoke styling.
Frequently Asked Questions (FAQ)
Q: How do I change the speed of the word animation?
A: You can control the speed of the animation in the Content tab under Additional Options. By adjusting the Active Word Duration, you can increase or decrease the amount of time each word is visible, which directly affects the pace of the rolling effect.
Q: Can I use phrases instead of single words?
A: Yes, the Animated Word Roller widget is very flexible. In the Content tab’s Word Lists, you can add any short phrase you want, not just single words. This allows you to create more descriptive and detailed rolling headlines.
Q: How do I make my animated words a different color from the static title?
A: In the Style tab, you have separate controls for the static Title and the Animated words. Simply go to the Animated words section and use the Color picker to set a different color for the rolling words without affecting your static title.
