Before After Image Pro Addon for WPBakery Page Builder

Introduction

WPBakery Page Builder is a popular WordPress page builder plugin that provides users with a range of customization options to create unique and engaging websites. One of the powerful add-ons available for WPBakery Page Builder is the Before After Image Pro Addon. This addon allows you to create high-contrast before-after effects on images, making it perfect for showcasing transformations, before-and-after scenarios, or highlighting differences. In this tutorial, we'll explore how to use the Before After Image Pro Addon to create stunning before-after effects in WPBakery Page Builder.

Prerequisites

To follow this tutorial, you'll need to have:

• WPBakery Page Builder installed and activated on your WordPress site
• The Before After Image Pro Addon installed and activated
• Familiarity with the basic workings of WPBakery Page Builder

Step 1: Configuring the Before After Image Pro Addon

To use the Before After Image Pro Addon, you'll need to configure it first. Follow these steps:

1. Log in to your WordPress site and navigate to the WPBakery Page Builder settings page.
2. Scroll down to the "Addons" section and click on the "Before After Image Pro" tab.
3. In the "Settings" section, enable the addon by ticking the checkbox next to "Enable Before After Image Pro".
4. You can customize the default settings for the addon by adjusting the slider values for "Highlight Color", "Shadow Color", and "Shadow Blur". These settings control the appearance of the before-and-after effects.

Step 2: Adding the Before After Image Element

To create a before-after effect in your page, you'll need to add the "Before After Image" element to your WPBakery Page Builder layout.

1. Open the WPBakery Page Builder editor and click on the "Add Row" button to create a new row.
2. In the row, click on the "Add Element" button and select the "Before After Image" element from the list.
3. The element will be added to the row, and you can adjust its settings using the "Settings" panel.

Step 3: Adding Before and After Images

Now that the element is added, you'll need to upload your before and after images.

1. In the "Settings" panel for the Before After Image element, click on the "Upload" button next to "Before Image".
2. Select a file from your computer or enter the URL of the image. Repeat this step for the "After Image" field.
3. You can adjust the image sizes by dragging the corners of the image thumbnails. The Before After Image Pro Addon supports image sizes up to 3000 x 2000 pixels.

Step 4: Customizing the Before-After Effect

The Before After Image Pro Addon offers a range of customization options to fine-tune the before-after effect. You can adjust the following settings:

• Highlight Color: The color of the highlight box that appears on the before image.
• Shadow Color: The color of the shadow that appears on the after image.
• Shadow Blur: The blur effect applied to the shadow.
• Highlight Opacity: The opacity of the highlight box.
• Shadow Opacity: The opacity of the shadow.

Experiment with these settings to create the desired effect for your before-after comparison.

Step 5: Saving and Publishing

Once you're satisfied with the before-after effect, you can save and publish your page.

1. Save the changes to your page by clicking the "Save" button.
2. Publish the page by clicking the "Publish" button or by selecting the "Save Draft" option.

Conclusion

In this tutorial, we've covered how to use the Before After Image Pro Addon to create high-contrast before-after effects in WPBakery Page Builder. By following these steps, you can create engaging before-after scenarios to showcase transformations, highlight differences, or create attention-grabbing visual content. Remember to experiment with the customization options to fine-tune the effect to suit your needs. Happy building!