One hero image says one thing. A hero background that rotates through your best three or four photos says considerably more, without adding a single widget to the layout. The Background Slider extension in Master Addons for Elementor replaces a section’s static background with an image slideshow: pick the photos, pick a transition, and the content sits on top while the backdrop cycles behind it.
Here is the finished hero from the demo, cycling through its three photos with a swirl transition:
What the Background Slider extension does #
Once enabled, containers, sections and columns get a Background Slider panel in their Style tab, next to the regular Background section. Flip it on, add images from the media library, and the section background becomes a timed slideshow. Everything about it is configurable:
- Add Images: a gallery field holding the slides, reorder or remove them in the standard WordPress gallery editor.
- Transition: 24 effects between slides plus Random: Fade, Slide in four directions, Zoom In and Out, Swirl, Burn, Blur, and Flash, each with a second variant.
- Animation: Ken Burns motion on each slide, in nine directions, Random, or None.
- Custom Overlay: a color, gradient, or image layer over the slides, plus nine preset overlay styles that keep text readable.
- Delay and Timer: how long each slide holds (5000ms by default), and whether a thin progress bar shows the time left on each slide.
- Random Display, Image Resolution, Cover: shuffle the order when the page is generated, choose the loaded size, and control how images fill the section.
Before you start #
- WordPress with Elementor installed and active.
- Master Addons for Elementor installed and active. New to the plugin? Follow the installation guide first.
- Background Slider is a free extension, so no Pro license is required.
- Two or more images sized for full-width display, ideally similar dimensions.
How to enable the Background Slider extension #
From your WordPress dashboard, go to Master Addons and open the Extensions tab. Background Slider sits in the Animation Widgets group, next to Animated Gradient BG (Pro). Click its toggle so it turns purple, then hit Save Changes and wait for the green “Settings saved successfully” notice.
Open the panel and add the images #
Select the hero container in the Elementor editor and open the Style tab. Expand the Background Slider section with the purple MA badge and switch Enable Background Slider to Yes. The full settings list appears, with an Apply button at the top for pushing changes to the preview.
Click Add Images and pick the slides from the media library. The demo uses three service photos. The gallery editor handles the order: drag to rearrange, hit the X to drop one, or Add to gallery for more.
Pick the transition and motion #
The Transition dropdown decides how one slide hands off to the next. The list runs long: Fade, Slide Left, Right, Up, and Down, Zoom In and Out, Swirl Left and Right, Burn, Blur, and Flash, each in two variants. The demo lands on Swirl Left.
The Animation setting adds Ken Burns movement inside each slide, a slow pan and zoom that keeps the background alive between transitions. Pick a direction or set it to Random and let each slide drift its own way.
Overlay, delay, and timer #
White text on a busy photo needs help. Turn Custom Overlay to Show and lay a color, gradient, or image over the slides, or pick one of the nine preset Overlay styles with patterns built for readability. Below that, Delay sets how many milliseconds each slide holds (5000 in the demo), Timer shows a progress bar for each slide (the slides rotate either way), and Cover makes the images fill the section edge to edge.
The result on the page #
Publish and the hero cycles on its own, exactly as in the GIF at the top of this page: each photo holds for the delay, swirls into the next, and the heading and buttons stay fixed on top. Visitors get a moving backdrop without a separate slider widget, and the section structure underneath never changes.
Where a background slider works well #
- Hero sections. Rotate three strong photos instead of betting the first impression on one.
- Service businesses. Show the team at work behind one headline.
- Restaurants and venues. Dishes and interiors cycling behind the reservation button.
- Portfolios. Recent projects as the backdrop of the intro section.
- Landing pages. Product angles rotating behind a fixed call to action.
Video Tutorial #
Watch the slider built end to end, from enabling the extension to the cycling hero on the published page.
Frequently Asked Questions #
How do I add a background slideshow to an Elementor section?
Enable the Background Slider extension in the Master Addons Extensions tab, select the section, and open Background Slider in the Style tab. Turn it on, add two or more images, choose a transition, and the section background cycles automatically.
What transition effects are included?
Twenty-four plus Random: Fade, Slide Left, Right, Up, and Down, Zoom In and Out, Swirl Left and Right, Burn, Blur, and Flash, each with a second variant. A separate Animation setting adds Ken Burns pan-and-zoom motion inside each slide.
Can I keep the text readable over the photos?
Yes. Turn on Custom Overlay for a color, gradient, or image layer above the slides, or pick one of the nine preset overlay styles. The demo uses a dark overlay so the white heading and buttons hold contrast on every slide.
How do I control the slide speed?
The Delay field sets how many milliseconds each slide stays visible, 5000 by default. Timer only shows a progress bar, because the slides rotate on their own either way. Random Display shuffles the slide order each time the page is generated, so on a cached page the order changes only when the cache clears.
Is the Background Slider extension free?
Yes. Background Slider ships with the free version of Master Addons for Elementor, in the Animation Widgets group of the Extensions tab. The pricing page covers what the Pro plans add.
Does Elementor have its own background slideshow?
Yes. Free Elementor has a Slideshow background type with five transitions, a Ken Burns zoom in or out, lazyload and per-device positioning. Background Slider adds 24 transitions, Ken Burns in nine directions, pattern overlays, random order and a timer bar. The product page has a full comparison table.
Wrapping up #
The Background Slider extension turns a section background into a slideshow with one toggle and a handful of choices: images, transition, overlay, delay. The content stays put, the backdrop does the work, and no extra slider widget enters the layout. For motion without photos, the Animated Gradient Background extension (Pro) covers the same section with color instead, and the full set of Master Addons widgets and extensions is one page away.
