Before/After Slider

Before/After Slider

Welcome to the “Before/After Slider” documentation. Looking to integrate a before/after slider into your website? Our widget empowers you to create compelling visual comparisons that captivate your visitors. In this guide, we'll show you how to use the editor to customize your before/after slider widget.

Step 1 : Open The Editor
Step 2 : Customize The Content
Step 3 : Configure Settings
Step 4 : Perview




Step 1: Open the Editor
1. Go to Before/After Slider template.
 2. Click on "Edit" after choosing your template.





Step 2: customize the content

In this panel, you can easily edit the before and after pictures and captions.






Step 3: Configure settings

Here, you'll handle the settings:
1. Begin by specifying a default value, selecting the slide direction, and deciding whether the slide should activate on hover or not.





2. For the split line, you can adjust its width and color.





3. In this section, choose the handle icon, customize its size and color, select how it should be displayed, and activate hover animations.





4. Finally, you can opt to hide or show the caption, choose its position, fine-tune its border, roundness, margin, and padding, and select colors for the background, text, and border individually.






Step 4: Preview

Lastly, you can click on “Preview” to see how your before/after slider widget looks on both desktop and mobile devices. After this, you can proceed to the next step.



Related Articles:
Slider Logo Showcase