fbpx

Background Switcher

“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.

  1. Go to Unlimited Elements Widget Library
  2. Search in the search bar for “Background Switcher”
  3. Hover over the widget in the search results and click install
  4. Add your “Background Switcher” widget to any Elementor Page

General Settings #

1
Direction

Choose the direction of the background switcher content

  • Horizontal
  • Vertical
2
Hover Duration

Choose the hover effect duration in millisecond.

3
Show Title

 Show/Hide the title.

4
Show Description

 Show/Hide the description.

5
Show Button

 Show/Hide the button.

6
Responsive Breakpoint

Select the responsive breakpoint for the horizontal layout.

7
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
1
Image

Select an image for the background.

2
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
3
Title

 Type any title to display.

4
Description

Type any text for the description.

5
Button Text

Type any custom text for the button.

6
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.

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!