The Random Background widget for Elementor adds dynamic variety to your section backgrounds by displaying a different image or color with each page load, creating a fresh and engaging visual experience. Designed for ease of use, this widget introduces subtle randomness that enhances the aesthetic appeal of your pages without the need for complex setup. Whether you’re designing creative portfolios, landing pages, or modern blog layouts, the Random Background widget is a simple yet effective tool to bring visual interest and uniqueness to your Elementor designs.
Let’s explore the key features and options available in the Random Background widget for Elementor below.
Add a Random Background Widget to Elementor
This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.
Go to Unlimited Elements and click "Background Widgets".
Search for "Random Background Widget" in the widget library.
Hover over the widget and click Install.
Add Random Background to Elementor Page Section
Click edit container in Elementor.
Go to the "Style" tab.
Click on "Unlimited Background".
Select the background type “Random Background Widget“.
Elementor Random Background Settings
Manage the random background images using the repeater field
- Add – Click “Add Row” to insert a new image.
- Duplicate – Clone rows using ACF Extended or manually.
- Delete – Remove items with the “×” button.
- Reorder – Drag and drop to rearrange rows.
- Edit – Update image details directly in each row.
Opacity
Set the opacity of image.
Title
Type the title for image.
Background Color
Set the background color.
Background Image
Choose an image to display as background.
Background Position
Select the background position from given options.
- Left Top
- Left Center
- Left Bottom
- Right Top
- Right Center
- Right Bottom
- Center Top
- Center Center
- Center Bottom
Background Blend Mode
Select the blend mode for background from dropdown options.
- Normal
- Multiply
- Screen
- Overlay
- Darken
- Lighten
- Color-dodge
- Saturation
- Color
- Luminosity
Set Background Location in Elementor Random Background
In some cases, you may want to move the background widget in front of your content. Determine the placement of the background by changing the setting to your liking.
In Background
Appear behind your content.
In Foreground
Overlay on top of content.
Site Body Background
Covers the entire page background globally.
Site Body Foreground
Overlay all site content (header to footer).
Layout Background
Restricted to a specific section/widget.
Layout Foreground
Overlay a single section/widget.
Usage Examples of Elementor Random Background
Here are some live use cases for the Random Background widget.
Dynamic Block Quote Carousel using Random Background widget.
Dynamic Logo Card with Random Background widget.
Thank you for using the Random Background Widget for Elementor! With its ability to display a different image or color each time a page loads, this widget is perfect for adding visual variety and a fresh look to your Elementor website. If you have any questions or need help getting started, feel free to reach out. For more examples and creative use cases, check out the live demo on our website.
