Background Switcher

The Divi Plus Background Switcher Module brings an interactive flair to your website by smoothly changing background images as users hover over content.

To add a module on the page, use the following steps:

1. Create/Edit a Page/Post that uses Divi builder.
2. Create/Edit a row.
3. Click on Add New Module option; choose the DP Background Switcher.

Content Tab

Global Display Setting

Switcher Orientation: Choose between horizontal or vertical layout for your background switcher.

Content Vertical Align: Set the content position to top, bottom, or center within the layout.

Item Height: Adjust the height of each item using a slider to fit your design.

Blur on Hover: Add a blur effect to the background when users hover, adjustable with a slider.

Transition Duration: Control the speed of the background switch with a slider, measured in milliseconds.

Add New Background Item: Click the “Add New Background Item” button to include a new item in your switcher.

After adding, customize each item’s content and design settings.

Title: Add a title for the background item to describe its content.

Description: Include a description for the item to provide more details.

Item Background: Upload or select an image to set as the background for this item.

Background Image Size: Choose how the image fits, such as “Cover” to fill the area.

Background Image Position: Set where the image aligns, like “Center” for balanced placement.

Background Image Repeat: Decide if the image repeats, or select “No Repeat” to show it once.

Background Image Blend: Pick a blend mode, like “Normal,” to control how the image mixes with other elements.s

Item button settings

Show Button: Select “YES” to display a button for the item.

Button Text: Add text for the button, like “Read More,” to describe its action.

Button Link URL: Enter the web address the button will link to when clicked.

Button Link Target: Choose if the link opens “In The Same Window” or in a new tab.

Item Switcher Text Settings

• Title Heading Level: Choose the heading size for the title, from H1 to H6, to set its importance.
• Title Font: Select a font for the title to match your website’s style.
• Title Font Weight: Pick the thickness of the title text, like regular or bold.
• Title Font Style: Add styles to the title, such as italic, uppercase, or underline.
• Title Text Alignment: Set the title position to left, center, right, or justified.