Reveal
First impressions matter. Don’t just let your content appear – reveal it. The Reveal extension lets you cloak any section, heading, or image with an animated mask that sweeps, slides, or dissolves away on page load. Choose the direction of the reveal, control its speed and timing, and pick a sleek background color or gradient for the cover effect. It’s a simple yet powerful way to add a moment of suspense, polish, and modern flair to your key page elements, guiding your visitor’s focus exactly where you want it.
Directional Reveal Effects
Control the drama of the reveal by picking its direction. Make your content appear as if a curtain is being pulled Left to Right, Top to Bottom, or even from the Center Out. Each direction creates a different visual narrative, perfect for sequencing content or highlighting a hero section with a cinematic touch.
- Classic Directional Reveals: Options like Left, Right, Up, Down for clear, clean entrances.
- Center-Focused Effects: Use “Center Horizontal” or “Center Vertical” for a focused, expanding reveal.
- Set the Starting Point: The animation begins with your content covered, then uncovers it in your chosen direction.
Customizable Reveal Background
The content isn’t revealed from nothing – it’s revealed from a cover you design. Set the Background Type to a solid Color that contrasts with your site, creating a bold dramatic effect. Or, use a Gradient for a more subtle and modern fade-in that blends seamlessly with your page’s color scheme.
- Solid Color Covers: Use a bold brand color or classic black/white for high contrast and drama.
- Gradient Fades: Create a smooth gradient overlay that dissolves away, feeling more organic and integrated.
- Total Cohesion: Ensure the reveal effect feels like a part of your page’s design language, not a disconnected gimmick.
Frequently Asked Questions For Reveal
Will this reveal animation play every time someone visits the page?
Typically, yes – it triggers on the initial page load for that element. However, if a visitor scrolls away and back, most browsers won’t replay it unless the page is fully refreshed. It’s designed as a one-time entrance animation to welcome users, not a repeating effect.
Can I use this on just a heading or button, or do I have to apply it to a whole section?
You can apply the Reveal effect to almost any Elementor element, from a single Heading or Image widget to an entire Section or Container. This gives you incredible flexibility. Imagine a hero headline that sweeps in, followed by a button that reveals a second later.
Is this bad for SEO or accessibility?
No, it’s generally fine. The content is still in the HTML from the start; it’s just visually hidden and then revealed with CSS. Search engines can read it, and screen readers can access it. Just ensure the Speed isn’t too fast, allowing all users time to perceive the content as it appears.
What happens if I set a very long delay? Will visitors see a blank space?
Yes, that’s the intended effect for creating suspense. If you set a Delay of 2 seconds on a section, that section will be covered by your chosen background color/gradient for those 2 seconds after the page loads, then the reveal will play. Use this purposefully, not excessively, to avoid frustrating users.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Glassmorphism
Container Extras
Patterns
Post/Page Duplicator
