Do you want to showcase a comparison between two images on your website? Bricks Ultra: Image Compare element lets you compare two images in a fantastic way. With the help of this element, you can visualize significant changes and maintain the image’s perfect size and resolution. You can get your visitors’ trust by displaying the transformation between two images using the Before and After Image comparison feature.
Usually, for the Before/After effect of an image, people use photo editing tools. But you can achieve this by using the Image Compare element.
Table of Contents
In this post, we will implement a visual comparison between two images. And how you can use Image comparison in the Bricks Builder. Here is an example of what we are trying to achieve.
Note* – You must have The Bricks Builder theme installed and activated in terms of using the Bricks Ultra Plugin.
Step 1: Installation and Activation of the Bricks Ultra Plugin
To use the Comparison Table element, you must first install and activate the Bricks Ultra plugin.
Step2: Add Image Compare to the Bricks Builder
To start with, you must create a page or any template where you want to add the Image Compare element. Now drag and drop the element. You will see the Image Compare element with default settings.
Head over to the “Image & label” section of the element.
Image Compare Element
In the “images & label” section, set the images and labels of the original and modified sections as per your need. And add the “Alt text” to the picture. By default, placeholder images are placed in the element.
After choosing the images, you can choose the orientation style of the section and how it will slide horizontally or vertically. You can trigger the effect either on mouse hover or dragging. You can also change the style of the divider and handler. Furthermore, you can increase or decrease the divider’s width. You can even change the icon, color, and alignment of the handle.
You can alter the styling option of the label as per your theme. Even you will find settings to adjust the text position, typography, color, padding, and margins for the labels.
Final Outcome
Here we are showcasing a few demos using the Image Compare element.
Wrap Up
Bricks Ultra has a significant element that allows visitors to quickly and easily see the differences between images side by side. The use of an “After Before” image comparison feature on a website can be a powerful tool for businesses looking to showcase the effectiveness of their products or services. By allowing visitors to see the transformation from “before” to “after”, businesses can build trust and enhance the user experience, potentially leading to increased engagement and conversions.
You can also visit the demo and documentation of Image Compare Element to know more about it.
If you have any queries feel free to get in touch with us.