Elementor is one of the most powerful WordPress page builders, but what if you want to make your hero background image dynamic without editing the Elementor page every time? In this tutorial, we’ll show you how to connect ACF (Advanced Custom Fields) with an Elementor background section and dynamically load images from the WordPress dashboard. Best part? You don’t need to touch the Elementor layout again and again!
Do you want your Elementor homepage background slideshow to change dynamically — without editing the page every time?
If you’re a developer or agency building Elementor websites for clients, chances are you’ve heard this request:
“Can I change the homepage banner image myself without touching Elementor?”
Good news! With the help of Advanced Custom Fields (ACF) and a small code snippet, you can allow your clients to upload background images directly from the WordPress admin and display them as a background slideshow in Elementor, just like Elementor’s native slideshow feature.
No extra plugin. No layout changes. Just pure Elementor power + dynamic content.
✅ Why Use ACF to Make Elementor Background Dynamic?
Let’s say your homepage has a hero section with a background slideshow, and your client wants to change images without touching Elementor editor. Instead of manually editing the layout every time, you can let them upload images via a simple ACF gallery field.
By default, Elementor lets you set background slideshows using the UI. But that’s static — if you want to change those images, you have to:
- Edit the page with Elementor
- Go to the section style
- Manually remove/add images
This becomes a problem for:
- 🧑 Clients who don’t know Elementor
- 🔁 Frequent updates
- 🔐 Preventing layout breakage
So instead, we use ACF Pro to add a gallery field for uploading images, and use a script to inject them dynamically into the Elementor section.
🧰 What You Need:
- ✅ WordPress site with Elementor
- ✅ ACF Pro (gallery field required)
- ✅ WPCode plugin (or functions.php)
- ✅ 5 minutes of your time!
🛠️ Full Step-by-Step Guide (With Code)
✅ Step 1: Create the ACF Gallery Field
A. Go to Custom Fields → Add New
B. Name the Field Group: Hero Slider
C. Add Field:
- Label: Hero Background Images
- Name: hero_background_images
- Field Type: Gallery
- Return Format: Image URL (or Array)
D. Location Rule:
- Show this field group if Page is equal to Home
E. Publish the Field Group
Now when you edit your homepage in WordPress admin, you’ll see a section to upload background images.
✅ Step 2: Design Hero Section in Elementor (Once)
A. Edit homepage with Elementor
B. Select the hero section/container
C. Go to Style tab → Background
D. Set Background Type = Slideshow
E. Upload 2 dummy images (we will override them dynamically)
F. Important: Go to Advanced → CSS ID and set it as:
my-hero-slider
This is how we’ll target it later in our code.
✅ Step 3: Add Custom PHP Code
- Go to WPCode → Add Snippet
- Select PHP Snippet
- Paste the following code:
add_action('wp_footer', function () {
if (!is_front_page()) return;
$images = get_field('hero_background_images', get_queried_object_id());
if (!$images || !is_array($images)) return;
// If return format is URL, wrap as array
$slides = array_map(function ($img) {
return ['url' => is_array($img) ? $img['url'] : $img];
}, $images);
?>
<script>
jQuery(function($) {
var heroSection = $('#my-hero-slider');
if (!heroSection.length) return;
heroSection.attr('data-settings', JSON.stringify({
"background_background": "slideshow",
"background_slideshow_gallery": <?php echo json_encode($slides); ?>,
"background_slideshow_loop": "yes",
"background_slideshow_slide_duration": 3000,
"background_slideshow_transition_duration": 300,
"background_slideshow_slide_transition": "slide_left",
"background_slideshow_ken_burns": "yes",
"background_slideshow_ken_burns_zoom_direction": "in"
}));
});
</script>
<?php
});
🏁 Conclusion
This method is ideal for agencies, developers, or site owners who want to make Elementor layouts dynamic without breaking the design or giving clients too much control.
💬 Have questions or want a custom implementation? Comment below!