With the Divi Before After Module from DiviExpand, showcase your design brilliantly. Make your webpage more beautiful with the Divi Before After Module from DiviExpand.
You can use our Divi Before After Module by exploring the following steps:
STEP: 01 #
First, select a new row. After that, search BEFORE AFTER IMAGE from the Insert module section, then select it.
Under the CONTENT tab, you will get the IMAGES section.
Upload Before Image and write its Alter Text in the input field, then upload After Image and write its Alter Text in the input field.
STEP: 02 #
In this step, you can fix your slider position. By default, it is in a horizontal position, but if you want, you can make it vertical by turning on Vertical Mode which is in TYPE SETTINGS under the CONTENT tab. You can fix Control Starting Point, Slider on Hover, Slider Color, and Smoothing Amount from the SLIDER SETTINGS option under the CONTENT tab.
STEP: 03 #
In our module, showing labels are optional. Suppose you want; you can put a label on the pictures in this step. To do this, you must go LABEL SETTINGS under the CONTENT tab and then turn on Show Label. You can input Before Label Text and After Label Text from here. You can also turn on Label Show on Hover and Use Horizontal Position from here.
If you want to design the label, you can do it through BEFORE IMAGE LABEL & AFTER IMAGE LABEL under the DESIGN tab. Under the DESIGN tab, you can use SIZING, SPACING, BORDER & ANIMATION features.
STEP: 04 #
Sometimes you may need some advanced features; then, you can implement those things using ADVANCED options, which are very similar to Divi default modules.
Finally, after clicking the Save Changes button, you will see the beautiful before and after pictures on your webpage. You’re Before Image,
You’re After Image.
That’s it!
EXPORT OUR DEMO DESIGN #
If you want to use our demo design, you can do it. To do that, go to our demo design section, then download your desired demo section by clicking DOWNLOAD DEMO. You will get a JSON file in a .zip format.
