Image Comparison element in Max Addons for Bricks Builder lets you display two images in a single interactive layout. Visitors can move a slider to compare a before-and-after image, making it ideal for showing transformations, edits, comparisons, product improvements, renovations, or design changes.
This element is useful for photographers, designers, agencies, WooCommerce stores, beauty professionals, fitness coaches, and anyone who wants to visually compare two images.
With simple controls and flexible styling options, you can fully customize how the comparison slider looks and behaves.
Getting Started#
Before using the Image Comparison element, make sure the following tools are installed and activated on your WordPress website:
Once both tools are active, you’re ready to add the Image Comparison element to your page.
How to Add the Image Comparison Element#
Follow these steps to add the Image Comparison element to your page:
- Open an existing page in Bricks Builder or create a new page.
- Click Edit With Bricks to launch the builder.
- Inside the editor, click the element search bar.
- Type Image Comparison into the search field.
- Add the Image Comparison element to your page.
- Make sure you see the MAX label in the top-left corner of the element.
The MAX label confirms that you are using the Image Comparison element from Max Addons. Once the element is added, you will see two main tab.
- Content
- Style
Content Tab#
The Content tab contains all the settings required to build and configure the Image Comparison element. It includes the following sections:
- Before Image
- After Image
- Labels
- Handle
- Settings
Let’s explore each section in detail.
Before Image#
The Before Image section allows you to add and customize the first image in the comparison layout. Typically, this image represents the original version or “before” state.
- Image: Use this option to upload or select the image that will appear as the before image.
- Label (Before): This option lets you add a custom label to identify the before image, such as 'Before', 'Original', or 'Old Design'.
- CSS Filters: CSS Filters let you apply visual effects to the before image. Common CSS filter adjustments include: Brightness, Contrast, Saturation, Blur, Grayscale & Hue Rotation.
After Image#
The After Image section allows you to add a second image for comparison. This image usually represents the updated or transformed version.
- Image: Select the image that will appear as the after image.
- Label (After): This option lets you add a label to the after image, such as "After," "Updated," "Final Result," or "New."
- CSS Filters: Apply CSS filter effects to the after image. You can use filters to adjust: Brightness, Contrast, Saturation, Blur, Grayscale, and Color tones.
Labels#
The Labels section allows you to display text labels for both before and after images. Labels improve clarity by helping visitors understand what each image represents.
- Show Label: Enable this option to display image labels. When enabled, labels will appear on both images using the text entered in the Before and After label fields. Typography, Background, Border, Box Shadow, Padding.
- Position: Choose where the labels appear on the image. Available options include: Start, Center, End, and Auto.
- Margin: Margin controls the outer spacing around the labels.
Handle#
The Handle section controls the appearance of the comparison slider.
- Handle Color: Choose the color of the comparison line. This line divides the before and after images.
- Arrows Color: Customize the color of the directional arrows shown on the handle. Arrows indicate that the slider can be dragged.
- Circle Background Color: Change the circular handle's background color.
- Circle Size: Adjust the circular handle's size.
- Handle Thickness: Control the thickness of the dividing line.
Settings#
The Settings section controls how the Image Comparison element behaves. These options allow you to define orientation, slider interaction, and visibility.
- Visible Ratio: The ratio of the image shown before users interact with the slider.
For example:
- A 50% ratio shows equal portions of both images.
- A lower ratio reveals more of the before image.
- A higher ratio reveals more of the afterimage.
This setting helps you control the default preview state.
- Orientation: Choose how the comparison slider is displayed: Vertical or Horizontal.
- Move Slider: This option defines how users interact with the comparison handle: Drag or Move Mouse.
Wrapping Up!#
Max Addons Image Comparison element for Bricks Builder is a simple yet powerful way to visually compare two images.
With dedicated sections for image selection, labels, handle styling, and interaction settings, you can create engaging comparison layouts without coding.