The Before and After widget can be mostly seen on websites related to the Gym, Nutrition, Health niche where the idea is to showcase the weight loss journey of an individual. It is an image gallery concept which shows the before and after images. You can also use this to create image comparison to showcase any major difference between the before and after state.
How to use the Before/After Widget of The Plus Addons For Elementor
The Before/After Widget widget is pretty easy to use. Let’s understand how to use this widget in the tutorial below.
Search for the Before / After Widget widget from the Elementor screen in the left and then drag and drop it into the content building area.
After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to this widget. First, click on the Content tab.
We have provided you with three options to choose from. These options define how the slide effect works for Before and After condition.
Image For Before
Set the image for the before condition.
Label For Before
Set the text label for the before condition.
Image For After
Set the image for the after condition.
Label For After
Set the text label for the after condition.
Set your image size by selecting any one option from the dropdown below. Always resize the images properly and select Full option for your image size.
The Style tab is used for customizing the appearance of all the Before / After widget components.
Set the alignment of your Before / After Widget.
If you want the widget to be full width, enable this option.
Mouse Hover Option
Enable this if you want to enable the mouse hover slide effect.
Set the separator line cosmetic options by selecting the style, width, color, icon and position.
Use these options to set the padding, typography, label color, background type, border type, border radius, and box shadow of the labels.
On Scroll View Animation
On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.
View On Scroll View Animation Tutorial