Overview of the Before After Slider module

This page shows you how to add the Before After Slider module to your page and explains every setting in its Content, Design and Advanced tabs, with screenshots. The Before After Slider module compares two images with a handle that visitors drag across, for example a room before and after a makeover. For more details, view the demo.

How to add the Before After Slider 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 Before After Slider 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.

Slider Content

• Image: Upload Before Image.
• Before Image Alt Text: Input the before image alt text.
• Show Label: Control Label Display.
• Show Label Only On Hover: Choose whether to show before label only on hover or all the time.
• Label: Set a custom before label.
• Label Background: Before Label Background.
• Disable Lazy Loading: Whether or not to lazy load the before/after images.

Slider Content (After)

• Image: Upload After Image.
• After Image Alt Text: Input the after image alt text.
• Show Label: Control Label Display.
• Show Label Only On Hover: Choose whether to show after label only on hover or all the time.
• Label: Set a custom after label.
• Label Background: After Label Background.
• Disable Lazy Loading: Whether or not to lazy load the before/after images.

Design tab settings

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

• Slider Styling: styling options for the slider styling.
• Label Text Styling: styling options for the label text styling.
• 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.