Designers often rely on heavy, widget-based sliders for their hero sections, which can slow down page load times and limit design flexibility. Using native Elementor Containers allows for cleaner code and more design control, but by default, they are static layouts.

To solve this, use Div Render Container Slider for Elementor to transform a standard full-width Container into a fully functional hero slider. This approach keeps your DOM light and lets you use standard Elementor widgets inside every slide.

Step 1: Setting Up the Container Layout

Start by creating the foundation for your hero section. Add a new Container to your page and set its Content Width to “Full Width” in the Layout tab. To ensure it covers the entire viewport, set the Min Height to 100vh (or your desired hero height).

Inside this parent Container, add your child Containers. Each child Container will represent one slide. Set the Width of each child Container to 100% and the Height to 100%. Style these child Containers individually by adding background images, headings, and call-to-action buttons using standard Elementor widgets.

Step 2: Activating Slider Mode

Once your layout is stacked vertically (with child containers one after another), select the parent Container. Navigate to the Layout tab and find the “Slider Mode” settings.

Toggle Enable Slider Mode to “Yes”. The plugin will instantly transform your vertical stack of containers into a horizontal slider. You should now see only the first child Container, with the others accessible via navigation.

Step 3: Configuring Hero Settings

For a hero section, you typically want a single immersive slide rather than a carousel of multiple items. In the Slider Mode settings, ensure Slides Per View is set to 1.

Next, adjust the transition style. For a modern hero feel, change the Effect setting to “Fade” or “Slide”. If you want the slider to cycle automatically, toggle Autoplay to “Yes” and adjust the Delay to around 5000 (5 seconds) to give users enough time to read the content.

Pro Tips for Hero Sliders

  • Use the “Fade” Effect: The “Fade” transition often looks more premium for hero sections than the standard slide animation.
  • Optimize Images: Since full-width background images are large, ensure they are optimized (WebP format) to prevent slowing down your Largest Contentful Paint (LCP).
  • Navigation Visibility: For a clean look, you might want to disable “Navigation Arrows” and only use “Pagination (Dots)” at the bottom of the screen.