What is the Animated Heading?
The Animated Heading transforms static titles into motion-rich headings. Pick from effects like Slide, Slide Horizontal, 3D Rotation, Construct, Typing, Twist, Line, Wave, Swing, Tilt, or Lean to draw instant attention to key messages without custom code.
Common use case
Highlight your core value proposition in a hero section by animating a single keyword or short phrase to boost scannability and engagement.
Additional use cases
- Cycle through product features/USPs on homepages
- Animate job titles or locations on portfolio pages
- Add editorial-style underline/marker effects to headings
Requirements
- You need the Marquee Addons plugin (Free) 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 Heading to your Elementor-powered website and start creating dynamic scrolling displays, follow these simple steps:
- Open your page or post in the Elementor editor.
- In the Elementor sidebar, use the search bar to find the Animated Heading.
- Drag the Animated Heading from the widgets panel and drop it into your desired section or column on your page.
Settings for the Animated Heading
The Animated Heading offers extensive customization options categorized into three main tabs: Content, Style, and Advanced.
Content tab
The Content tab is where you define the content source for your animated heading and configure its core animation behavior.
Title
- Before Text: Enter the first static part of the heading.
- Animated Texts: Add the middle words/phrases that animate. Click Add Item to include more (1–2 words each recommended).
- After Text: Enter the ending static part to complete the sentence.
- Alignment: Set the heading alignment (Left, Center, Right) with responsive controls.
- HTML Tag: Choose the semantic heading level (H1–H6, p, div, span) to match your page hierarchy.
Animation Effect
- Animation: Turn the animation On/Off.
- Type: Choose the effect — Slide, Slide Horizontal, 3D Rotation, Construct, Typing, Twist, Line, Wave, Swing, Tilt, or Lean.
- Speed: Set how fast the animation runs (higher = faster).
- Pause on Hover: Pause the animation when the cursor is over the heading.
Before Text and After Text
- Font Color: Choose the text color.
- Typography: Set font family, size, weight, transform, line-height, and letter spacing.
- Text Stroke: Add an outline to the text; control width and color.
- Text Shadow: Apply shadow for depth; adjust blur, spread, and position.
Animated Text
- Typography: Set font family, size, weight, transform, line-height, and letter spacing.
- Text Shadow: Add shadow to the animated text; adjust color, blur, and position.
Animated Text Effect
- Effect Type: Choose Fill, Outline, Gradient, or Image Masking to set how the animated text is rendered.
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
How do I add multiple animated words?
Go to Content → Title → Animated Texts and click Add Item for each word/phrase.
Can I control speed or pause on hover?
Yes. Use Content → Animation Effect → Speed and toggle Pause on Hover.
Can I use gradient or image effects on the animated text?
Yes. Go to Style → Animated Text Effect and choose Gradient or Image Masking.
