Before After Slider
How to Configure and Style Before After Slider #
Elementor Before and After Slider is creative widget that allows displaying a before and after version of the image with smooth slider. It gives total control on all parts of the widget.
How to Activate Before After #
To use this Sastra Addons element, find the ‘Before After‘ element from the Search option under the ‘ELEMENTS‘ tab. Simply just Drag & Drop the ‘Before After’ into the ‘Drag widget here‘ or the ‘+’ section.
After you have successfully done with step 1, this is how the element is going to look like.
How to Configure the Content Settings #
After you have completed adding the Before After in your Elementor Editor, now all you need to do is to configure the ‘Content’ tab. From here, you will get two sections to design your Before After slider: ‘General’ and ‘Labels’.
General #
From this section, you can choose image 1 and image 2 as your preference. You can change image size, slider direction and trigger. Besides, you can use the drop-down to select one of these as your slider icon: Caret, Angle, Arrow, Long Arrow & Chevron Selection.
Labels #
From this section, you can use the drop-down for display label type. Than you can set image 1 label, image 2 label and position.
Click to see Live Demo #
How to Style Before After #
To customize Before After, click on the ‘Style’ tab, and you will find many different options here.
Divider #
From the ‘Divider’ section, you can set line color, icon color, icon background color and icon border color. Than you can use slider bar for change line thickness, icon size, icon width and icon height with supported all devices.
Moreover, you can styling to border and border radius as well.
Labels #
From here, you can set label color, background color, border color, typography and padding. Besides, you can styling to border and border radius as well.
Final Outcome #
By following the basic steps and a bit more modifying, you can style your Before After as per your preference.
This is how you can easily design before after slider using Before After.
If you require any help, feel free to contact our support for further assistance.
