How to create a Before After Gallery in WordPress

Looking for a WordPress Before and After Gallery Plugin? Want to show a comparison of two images? In this video, we have shown a complete step-by-step tutorial on how to add a Before - After Gallery in WordPress In this tutorial, we will be using the plugin "Ultimate Before After Image Slider & Gallery – BEAF"

With BEAF, you can easily create a beautiful Before After Image comparison Slider or Gallery. BEAF lets you add unlimited numbers of Before After Slider & Gallery in WordPress. You heard it right, unlimited for FREE. BEAF also comes up with premium high-quality features that will help you showcase your portfolio in a better way than others.

With this Before and After WordPress plugin, You can showcase your before and after work by comparing two before and after images.

===============================================

👉 Features:
Here are the most important features of BEAF. If you need any further information, please feel free to contact us. Below are the best offerings of BEAF:

- Multiple layouts: Display images in Horizontal or Vertical layout.
- Option Panel: BEAF has a built-in easy-to-use options panel. You can add or remove any options from this panel.
- Before – After Gallery: Create 2 Columns, 3 Columns, and 4 Columns Before After Gallery in WordPress with BEAF
- Label Change: Change the Label of Before-After to something you want.
- Label Color Change: You can easily change the color and background of the Label.
- Disable Overlay: You can disable the overlay from the Options Panel.
- Unlimited Slider: You can create an unlimited number of slider
- Mouse Hover: You can move the slider on Mouse hover.
- Titles, Description & Read More Button: You can add Title, Description & Read More buttons on all the above Preview Styles. For Preview Purpose, only two examples are shown below. Note that, from the backend, you can show/hide any/all of the 3 fields (title, description & read more). You can also edit styles (color, font size, alignment) of all 3 fields as shown below.
- Shortcode Generator: After you publish, a shortcode will generate so that you can publish the slider anywhere on your website.
- Support popular page builders: BEAF is fully compatible with popular page builders like Elementor, WP Bakery, DIVI, Beaver, etc. See the list below.
- Alt tag: Add alt tag on both Before-After Images.

================

👉 Pro Features
There is also a pro version of this plugin. You will get more features and advantages on the pro version. Here are a few features of the Pro Version:

- All Free Features
- Additional layout: The Pro version includes 6 Additional Awesome looking Preview Styles.
- Filterable Before – After Gallery: Create 2 Columns, 3 Columns, and 4 Columns Filterable Before After Gallery in WordPress with BEAF Pro. You can add as many 2-3-4 columns galleries as you want. The galleries can be a combination of all the above-mentioned Preview Styles & Single Image Styles. The color and padding of the filters can be edited from the options panel.
- Single Image Slider: You can make a slider using a single image.
- Single Image Slider Effects: The Single image has filter effects like Grayscale, Blur, Saturate, Sepia, etc. The filter can be added on Before or Afterimage.
- Titles, Description & Read More Button on Single Image BEAF, Gallery and Filterable Gallery
- Custom Width – Height – Alignment: Setup Custom Width – Height – Alignment for each slider.
- Auto Slider: The slider will slide automatically.
- Change Read More text: By default, the button is “Read More”. You can change it to whatever text you want.
- Disable slider handle: You can easily disable the slider handle.
- Image Watermarks: Adding Watermark on both Before and After images.
- 3 Image Slider: Create Before-After Slider with 3 Images.

[miguelagawin]

Hm Gallery Generator not working :( — I’m selecting the category but no shortcode when I click on the button.🤔

[augustoleder]

suggestion: Add edge and radius option

[xizzeewebdesign]

Your cursor is jumping all over the place, and there is no narration explaining what you are doing and why you are doing it. Future viewers, set the speed at .5 or even .25 to maybe understand it. For those who created the video, it would be helpful if you zoom in on the areas you are showing. Also, post the directions before you start the steps. If people know what is coming, it lessens the confusion and cognitive load.