Overview #
The Before After Image Slider allows you to visually compare two images using an interactive slider. Users can drag the slider or interact on hover to reveal differences between images, making it ideal for showcasing transformations, improvements, or comparisons.
The module integrates seamlessly with the Divi Builder and provides full control over layout, styling, labels, animations, and advanced behaviors.
How to Use #
- Enable the Divi Builder on your page.
- Add the Before After Image Slider module.
- Open the Content tab to upload your images.
- Adjust slider behavior, labels, and layout options.
- Customize the design using the Design tab.
- Apply animations or advanced settings if needed.
Content Settings #
Images #
Upload and configure the comparison images.
- Before Image – Upload the original image
- Before Image Alt Text – Accessibility text for the before image
- After Image – Upload the comparison image
- After Image Alt Text – Accessibility text for the after image
Type Settings #
Control the orientation and responsiveness of the slider.
- Vertical Mode – Enable vertical image comparison (On / Off)
- Fluid Mode – Enable responsive fluid resizing (On / Off)
Slider Settings #
Customize slider behavior and appearance.
- Control Starting Point – Set the default slider position
- Slider on Hover – Move slider on mouse hover (On / Off)
- Slider Color – Change the slider handle color
- Slider Shadow – Enable shadow on the slider handle
- Enable Circle – Display a circular slider handle (On / Off)
- Smoothing – Enable smooth slider movement (On / Off)
- Smooth Amount – Control smooth animation intensity
Label Settings #
Configure the before and after labels.
- Show Labels – Enable or disable labels (On / Off)
- Before Label Text – Custom text for the “Before” label
- After Label Text – Custom text for the “After” label
- Show Labels on Hover – Display labels only on hover (On / Off)
- Use Horizontal Position – Align labels horizontally (On / Off)
Background #
- Customize the background styling of the slider container
Admin Label #
- Set an internal label for easier identification inside the Divi Builder
Design Settings #
Before Image Label Design #
Style the Before label.
- Background color
- Font family
- Font weight and style
- Text alignment
- Text color and size
- Letter spacing and line height
- Rounded corners
- Border styles, width, and color
- Box shadow
After Image Label Design #
Style the After label.
- Background color
- Font family
- Font weight and style
- Text alignment
- Text color and size
- Letter spacing and line height
- Rounded corners
- Border styles, width, and color
- Box shadow
Image Filters #
Before Image Filters #
Apply visual effects to the Before Image.
- Hue
- Saturation
- Brightness
- Contrast
- Sepia
- Opacity
- Blur
- Blend mode
Spacing & Layout #
Fine-tune spacing and layout behavior.
- Sizing
- Margin and padding
- Border settings
- Box shadow
- Filters
- Animation controls
Advanced Settings #
The module includes all default Divi Advanced controls:
- CSS ID & Classes – Assign custom identifiers for styling or scripting
- Custom CSS – Apply custom styles to module elements
- Conditions – Display the module based on specific rules
- Visibility – Control display across devices and states
- Transitions – Apply smooth visual transitions
- Position – Adjust relative, absolute, or fixed positioning
- Scroll Effects – Add scroll-based animations and motion effects
These options behave exactly like native Divi modules.
Best Use Cases #
- Before & after image comparisons
- Design transformations
- Photo retouching showcases
- Product feature comparisons
- Visual storytelling sections
Performance & Compatibility #
- Fully compatible with Divi Builder
- Optimized for responsiveness
- Works smoothly across all modern browsers
- Lightweight and performance-friendly
