Search Divi Plus Documentation

Search for answers or browse our knowledge base.

< All Topics
Print

Before After Image Slider

How to Add Before After Image Slider Module

Once Divi Plus is activated, it adds several modules to the Divi builder. 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 Before After Slider.
insert-before-after-slider

Content tab

On the Slider Content section, click Before and upload the image for the before section. And click on the After Section and upload the image for the after section. For text display set Show Label -> Yes and enter the text in the Label field.

This will add the before-after slider to your Divi theme with default values.

Design Tab

Under the Slider Styling section of the Design tab, select Horizontal or Vertical orientation.

Handle offset will let you define the position of the slide. By default, it is 0.5 which is at the center of the image.

Mouse on Hover setting will let you run the slider without tapping or dragging. Just move the mouse to see the slide.

Move on click will enable a click action where the slider will move when clicked at a certain spot on the image.


Handle Color will let you manage the color setting of the handle (separator).

On hover, overlay setting allows adding an overlay of text or gradient along with the option to control the opacity of the color and gradient.

Configure other settings as required.

Here’s the blog post that covers the setup and working process of the Divi Plus Before After Slider module.

Was this article helpful?
0 out Of 5 Stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Previous How To Schema
Next Bar Counter