Before / After

< All Topics

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.

Pro tip
While this widget is mostly seen on Health based websites, that doesn’t mean you cannot use it for your website. Think creative and follow along as per our demos.

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.

Table Of Contents

General Steps

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.

1. Content

Content

Style

We have provided you with three options to choose from. These options define how the slide effect works for Before and After condition.

Horizontal
Vertical
Opacity

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.

Image Size

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.

Image for After option for the Before After widget

2. Style

The Style tab is used for customizing the appearance of all the Before / After widget components.

Options

Alignment

Set the alignment of your Before / After Widget.

Full Width

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.

Separator

Set the separator line cosmetic options by selecting the style, width, color, icon and position.

Label Options

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

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Need help?