In this article, you will learn how to style Before/After module. Please note: this feature is only available in Semplice 5. You can learn more about the features that are included in Semplice 5 here.
Step 1. Add Before/After
From the Modules tab in the editor, drag a new Before/After module onto your page.
Step 2. Add your images
Click on the "Add from Media Library" and select the image that you want to show for the "Before" image. Repeat the process for the "After" image.
Optional: Change default styles
By default, the Before/After module displays your images horizontally. However, you can also easily set the module to show images vertically. Simply click on the module to open the settings and set "Direction" to "Ver":
You can also regulate from what position separator will show your image. To adjust the distance choose the "Start Position" option and change the value.
Additionally, you can also customize the thickness, color, and distance between the arrows. In the "Handlebar" option, you can change the width and color of the separator line (or remove it entirely). Lastly, you have the option to customize the separator arrows.
Artwork credit: Mackey Saturday