Sometimes, the best motion is no motion. For premium, luxury, or corporate hero sections, a horizontal slide transition can feel too “busy” or “app-like”. A gentle crossfade is often preferred for its elegance.
To solve this, use Div Render Container Slider for Elementor to switch your container slider to Fade mode.
Step 1: Layout
Set up your Hero Section with a single parent Container and multiple child Containers (slides) stacked on top of each other.
Step 2: Activating Fade Mode
Enable Slider Mode.
- Effect: Select
Fade. - Slides Per View: The Fade effect implicitly forces this to
1, because you can’t crossfade multiple items in a grid simultaneously in the same way you slide them.
Step 3: Crossfade Options
- Crossfade: If there is a toggle for “Crossfade”, enable it. This ensures the old slide stays visible while the new one fades in on top of it, preventing the background from showing through during the transition.
Pro Tips for Fade Transitions
- Ken Burns Effect: Since the container isn’t moving, the content can feel static. Add a “Ken Burns” (slow zoom) effect to the background image of each slide using Elementor’s native Style tab > Background > Motion Effects settings. This adds life to the fade.
- Speed: Fade transitions usually benefit from a slower speed (e.g.,
800msto1000ms) to feel soft and luxurious.