No results found. Try again with different words?
Search must be at least 3 characters.
- How to update plugin manually through FTP
- How to update UABB?
- How to register your license?
- About Beta Versions
- Will I lose all my design work when I download and re-install the plugin?
- Getting Started with the Ultimate Addons for Beaver Builder
- How can I install the Ultimate Addons for Beaver Builder?
- Automatic Beta Updates
- How to check expiration date of license?
- How to enable / disable Beaver Builder's UI?
- UABB Global Settings
- How to White Label UABB?
- How to enable / disable Live Preview feature?
- How to Hide Templates from your Clients?
- How can I use other modules in Modal Popup / Advanced Accordion / Advanced Tab?
- How to enable / disable modules in UABB to reduce server requests?
- Section and Page Templates don’t look the same when I am using them. Why?
- How can I Begin Building a Page using UABB?
- Troubleshooting Tips for Ultimate Addon’s Font Icons
- White Screen / Blank Screen / 500 Error After Installation
- Fatal error: Call to undefined function array_replace_recursive()
- How to Increase the Memory Limit of your site?
- Fatal error: Class 'FLBuilderAdminSettings' not found
- Failed to download template from Template Cloud
- Haven't received update notification yet?
- cURL error 51: SSL: No alternative certificate subject name matches target host name
- DIY Troubleshooting
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.
![](https://www.ultimatebeaver.com/wp-content/uploads/2022/08/before-after-slider1.png)
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.
![](https://www.ultimatebeaver.com/wp-content/uploads/2022/08/before-after-slider3-1024x461.png)
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.
![](https://www.ultimatebeaver.com/wp-content/uploads/2022/08/before-after-slider4-1024x470.png)
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.
![](https://www.ultimatebeaver.com/wp-content/uploads/2022/08/before-after-slider5-edited.png)
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.
We don't respond to the article feedback, we use it to improve our support content.