Before/After Slider
Before/After Slider
Welcome to the “Before/After Slider” documentation.
Looking to integrate a before/after slider into your website? Our block 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 block.
Step 1: Open the Editor
1. Go to Before/After Slider template.
2. Click on "Edit" after choosing your template.
class="" alt="">Step 2: customize the content
In this panel, you can easily edit the before and after pictures and captions.
class="flex justify-center items-start h-auto w-auto" alt="">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.
class="flex justify-center items-start h-auto w-auto h-auto " alt="">2. For the split line, you can adjust its width and color.
class="flex justify-center items-start h-auto w-80" alt="">3. In this section, choose the handle icon, customize its size and color, select how it should be displayed, and activate hover animations.
class="flex justify-center items-start h-auto w-80" alt="">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.
class="flex justify-center items-start h-auto w-auto" alt="">Step 4: Preview
Lastly, you can click on “Preview” to see how your before/after slider block looks on both desktop and mobile devices. After this, you can proceed to the next step.
class="flex justify-center items-start h-auto w-auto" alt="">