|

Before After Slider

The before-after slider is a touch-friendly module that helps you show two versions of an image together. UABB Pro has come up with Before After Slider module that lets you compare two before and after images with Beaver Builder Front-end Drag and Drop Builder. This module also lets you preview how the slider looks on the website while you edit a slider.

Note:

You can enable/disable the icon for each tab appearance option depending on your requirement. Also, you have full control over tab style like tab width, tab focus color, text active, hover colors, and much more.

Insert & Customize Before and After Image Slider

First, go to your web page where you want to use this slider. Just search for the ‘Before After Slider’ in the editor. When you see it (it is enlisted under UABB Modules), drag and drop it into a section in the editor.

Once you drop the module, you will see the default setup of the slider on the left side. You can see the ‘Before’ and ‘After’ modules here. You can insert the before and after images from the media library. Also, you can set the label text for before and after images.

Once you insert an image, you can change its size from the options available in the dropdown.  Generally, the larger the image, the more space it will take. 

Styling options

Go to the ‘Styling’ tab.

Here, you can change the slider bar orientation to Vertical or Horizontal. Also, you can set the overall alignment of the module here. You can set the Comparison Handle color and slider overlay color too. 

Label Options

You can see the labels on the images only by hovering over them. Under the label options, you can set the label text typography, color, and background color. 

Advanced Options

Under Advanced options, you can see the Spacing, visibility, Animation, HTML, and Import/Export options. You can set the required options of your choice here.

Was this doc helpful?
What went wrong?

We don't respond to the article feedback, we use it to improve our support content.

%title %title
On this page

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Ultimate Addon For Beaver Builder Plugin - Modal Popup Form

Free Download

Enter your name & email address to download this awesome freebie.

Free Download

Enter your name & email address to download this awesome freebie.

Free Download

Enter your name & email address to download this awesome freebie.

Free Download

Enter your name & email address to download this awesome freebie.

Free Download

Enter your name & email address to download this awesome freebie.

Free Download

Enter your name & email address to download this awesome freebie.

Free Download

Enter your name & email address to download this awesome freebie.

Free Download

Enter your name & email address to download this awesome freebie.

Free Download

Enter your name & email address to download this awesome freebie.

Free Download

Enter your name & email address to download this awesome freebie.

Free Download

Enter your name & email address to download this awesome freebie.

Free Download

Enter your name & email address to download this awesome freebie.

Scroll to Top