Overview of the Background Switcher module

This page shows you how to add the Background Switcher module to your page and explains every setting in its Content, Design and Advanced tabs, with screenshots. The Background Switcher module changes the section background image when visitors hover over each item in a list. For more details, view the demo.

How to add the Background Switcher module to your page

1. Open your page in the Divi Visual Builder.
2. Click the gray (+) icon inside a row to add a new module.
3. Search for DP Background Switcher in the module search box.
4. Click the module to insert it. Its settings open on the right.

Content tab settings

The Content tab holds the module’s own settings, grouped in the toggles below. Link, Background and Element Label are the standard Divi options.

Use Add New Background Switcher Item to add items. Click an item in the list to open its own settings; drag items to change their order.

Display

• Switcher Orientation: Choose whether the items are listed horizontally or vertically.
• Content Vertical Align: Select the vertical alignment for the content box.
• Item Height: Increase or decrease the item height.
• Blur On Hover: Enter the blur level.
• Transition Duration: Enter the transition duration.

Background Switcher Item settings

Each background switcher item has its own settings. Click an item in the list to open them.

Content

• Title: Enter the title to show on background switcher item.
• Description: Enter the description to show on background switcher item.
• Background: Adjust the background style of this element by customizing the background color, gradient, image, video, pattern and mask.
• Background Color

Button

• Show Button: Choose whether or not to show the button.

Design tab settings

The Design tab lets you style each part of the module:

• Switcher Text: styling options for the switcher text.
• Text, Sizing, Spacing, Border, Box Shadow, Transform, Animation: the standard Divi design options for the whole module.

Advanced tab settings

The Advanced tab has the standard Divi options: Attributes (add a CSS class or ID), CSS, HTML, Conditions, Interactions, Visibility, Transitions, Position and Scroll Effects.