The “Background Switcher” widget helps you to create responsive content boxes, and when you hover over a content box it will change the background for the whole section. You can create many unique layouts with the help of this widget. It also provides lots of styling and customization options, that help this widget to easily blend with the website’s design.
Let’s look at each of the options in the “Background Switcher Widget” below.
Install Background Switcher Widget for Elementor #
This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Background Switcher”
- Hover over the widget in the search results and click install
- Add your “Background Switcher” widget to any Elementor Page
General Settings #
Direction
Choose the direction of the background switcher content
- Horizontal
- Vertical
Hover Duration
Choose the hover effect duration in millisecond.
Show Title
Show/Hide the title.
Show Description
Show/Hide the description.
Show Button
Show/Hide the button.
Responsive Breakpoint
Select the responsive breakpoint for the horizontal layout.
Direction
Choose the direction of items from left to right or right to left.
Layout Settings #
Manage the slides of the carousel using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Image
Select an image for the background.
Image Position
Select the image position to display in the background
- Left Top
- Left Center
- Left Botton
- Right Top
- Right Center
- Right Bottom
- Center Top
- Center Center
- Center Bottom
Title
Type any title to display.
Description
Type any text for the description.
Button Text
Type any custom text for the button.
Button Link
Link any URL to the button.
Background Switcher Widget Styling #
Every aspect of the widget’s design can be controlled through different styling options. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.
Style #
Set the item height, overlay color, border, padding, alignment, and background color of the items’ sections.
Title Styling #
Style the spacing, color, and typography of the title.
Description Styling #
You can set the spacing, color, and typography of the description in this section.
Button Styling #
Here, you can style the typography, padding, color, spacing, border etc. of the button.
Item Overlay Styling #
Style the item overlay and item overlay hover color.
Usage Examples #
Here are some live use cases for the Background Switcher widget.
Video Overview #
For more use cases and examples visit the live demo on our website.
