In this guide, we will show you how to use the “Background Switcher widget“ on your Elementor website. The Background Switcher widget allows you to create dynamic and interactive background effects, enabling your site visitors to switch between different background images, colors, or videos. It’s perfect for adding visual interest and enhancing user engagement by making your content more immersive and customizable. With its responsive design and smooth transition effects, the Background Switcher widget ensures a seamless and captivating user experience.
Let’s explore the customization options available in the “Background Switcher widget“ for Elementor below.
Elementor Free Background Switcher Tutorial Video
Add a Free Background Switcher to Elementor
Add a Free Background Switcher Widget to an Elementor Page
Elementor Background Switcher Widget General Settings
Items Source
Determines where the widget retrieves its content (e.g., text, images, or data). You can select from various data sources, such as:
Items – Add content manually within the widget.
Posts – Pull data from WordPress blog posts.
WooCommerce Products – Display products from a WooCommerce store.
ACF Custom Field – Use data from an Advanced Custom Fields field.
JSON or CSV – Import content from external files.
Gallery – Pull images from a WordPress media gallery.
Terms – Use taxonomy terms like categories or tags.
Users – Display information from WordPress users.
Menu – Fetch items from a WordPress navigation menu.
RSS – Display items from an RSS feed.
Instagram – Show content from an Instagram feed.
API Integrations – Retrieve data from connected APIs or external services.
Debug – Show Input Data
Enables or disables the display of raw input data for debugging or troubleshooting purposes.
Layout
Defines the structure system used for arranging items.
Direction
Controls the flow of items (horizontal or vertical).
Vertical Direction on Mobile
Toggles whether items switch to a vertical layout on mobile devices for better readability.
Animation In Duration
Controls how long the entry animation takes when an item appears.
Animation Out Duration
Controls the duration of the exit animation when an item disappears.
Show Title
Displays or hides the title of each item.
Show Button
Displays or hides a button within each item.
Button Text
Defines the label text shown on the button (e.g., “Read More”).
Responsive Breakpoint
Sets the screen width at which the layout switches to mobile or tablet styles.
Direction
Determines the reading direction (Left-to-Right or Right-to-Left) for horizontal layouts.
Split Mode Desktopc
Enables or disables split mode on the desktop, where hovering over one box affects others visually.
Split Mode Mobile
Enables or disables split mode behavior on mobile devices.
Item Image Size
Sets the size or resolution of images used for each item to balance quality and performance.
Show Initial Selected
Determines whether one item should appear selected when the page loads.
Initial Selected
Specifies which item (e.g., first, second) should be selected initially.
Title HTML Tag
Allows choosing the HTML tag used for item titles (e.g., h2, div, span) for semantic or styling control.
Enable Link on Title
Makes the title a clickable link leading to a specified URL when enabled.
Show Image in Content
Displays or hides the image inside the content area, useful for compact layouts.
Enable Remote Connection
Allows this widget to connect with and either control or be controlled by other widgets on the same page.
Widget Name for Connection
Sets or automatically detects the widget’s connection name, which other widgets use to identify and link to it.
Sync
Enables synchronization of item transitions or animations with other connected widgets for coordinated movement.
Sync Group
Assigns the widget to a specific sync group, ensuring all widgets in the same group transition together.
Show Debug
Displays debug information about connected widgets; useful for testing connections but should be turned off before publishing the site.
Title
Sets the main heading for the item. It can also be dynamically sourced using the dynamic tag option.
Image
Defines the primary background image for the item.
Image Size
Determines the resolution or size of the background image.
Image Position
Controls the placement of the background image (e.g., top-left, center, etc.).
Image In Content
Adds a separate image within the content area for additional visual context.
Image In Content Size
Sets the size or resolution of the inner content image.
Description
Provides a detailed text description for the item, with the option to pull from dynamic content.
Button Text
Defines the label or text shown on the button.
Button Link
Assigns the URL or link destination that the button directs to when clicked.
Enable Schema
Enable Schema for the selected widget.
Schema Source
Choose the Schema Source:
From List
Custom
Custom JSON Schema
We can also add a Custom JSON Schema.
Schema Type
Choose the Schema Type:
FAQ (FAQ Page)
List of Person (Person)
How To
Recipe
Courses (Course)
Books (Book)
Items List (ItemList)
Event
Places (Place)
Products (Product)
Tourist Destinations (TouristDestination)
Event Series (EventSeries)
Music Playlist (MusicPlaylist)
Search Results Page (SearchResultsPage)
We are continuously expanding the list of supported Schema types in upcoming releases.
Schema Main Title
Enter a Schema title that describes the action, for example, how to tie your shoes.
Enable Fields Mapping
Enable manual field mapping by roles. Post-related fields are applicable only
When the content is sourced from posts.
Show Schema Debug
Display Schema debug information in the front-end footer.
Elementor Background Switcher Widget Style Settings
Item Height
Sets a fixed height for each item, ensuring consistent visual balance across all devices.
Item Width On Breakpoint
Defines the fixed width of each item when the screen width reaches the responsive breakpoint (useful for horizontal layouts).
Content Padding
Adds internal spacing around the content (title, description, button) within each item box for improved readability.
Alignment
Controls the horizontal alignment of the content inside each item (e.g., left, center, right).
Overlay Color
Adds a color overlay on top of the background image for styling or contrast enhancement.
Border Color
Sets the color of the border surrounding each item box.
Border Width
Adjusts the thickness of the border around each item.
Background Color
Defines the fill color behind the item’s content and background image.
Space Under Title
Controls the vertical spacing below the title, creating separation between the title and the following content, such as the description or button.
Title Color
Sets a custom color for the title text, allowing you to match it with your site’s design or contrast against the background.
Title Typography
Adjusts the title’s font family, size, weight, and other text styling options to maintain a consistent and readable design.
Space Under Description
Controls the vertical spacing below the description, creating a gap between the description and the next element, such as a button.
Description Color
Sets a custom color for the description text to improve readability and match your site’s color scheme.
Description Typography
Adjusts the font family, size, weight, and line height of the description text for better visual consistency and design control.
Button Typography
Controls the font family, size, weight, and other text styling options for the button label.
Button Padding
Adjusts the internal spacing around the button text, defining its height and width for better visual balance.
Button Background Color
Sets the background color of the button in its normal state.
Button Background Color Hover
Defines a different background color for the button when hovered over, adding interactivity.
Button Text Color
Sets the color of the button text in its normal state.
Button Text Color Hover
Defines a hover color for the button text to enhance visual feedback.
Button Spacing
Controls the space around the button to separate it from nearby elements.
Button Border Type
Chooses the border style for the button
Default
None
Solid
Double
Dotted
Dashed
Groove
Button Border Width
Adjusts the thickness of the button’s border.
Button Border Color
Sets the color of the button border to match your design scheme.
Button Border Hover Type
Chooses the border style for the button
Default
None
Solid
Double
Dotted
Dashed
Groove
Button Style
Determines how the button displays, such as inline (content width) or block (full width).
Button Radius
Controls the corner roundness of the button, allowing you to create square or rounded buttons.
Background Switcher Widget Design Examples For Elementor
Here are some live use cases for the Background Switcher widget.
Football Club Tournament Bracket Maker.
Background Switcher with Gallery.
Background Switcher with gallery slider.
Thank you for using the Background Switcher widget for Elementor! This powerful and visually engaging tool lets you create dynamic background transitions that bring your website to life. Effortlessly switch between background images, colors, or videos to enhance user interaction and visual appeal. Designed with smooth animations and responsive performance, it offers full customization options to perfectly match your site’s design and style. For support or inspiration, feel free to get in touch or explore our demo.