Articles on: Images
This article is also available in:

Adding a Before/After gallery

The Before/After gallery is used to compare two images on a website. This block will look good on websites where you need to show the results of your work — for example, on a website for a dentist, beauty salon, photo editing service, repair services, etc. Website visitors can drag the marker to compare the two photos.


Follow the instructions below to add a “Before/After” gallery to your website.


Contents:



There are several ways to add this element to your website page:


  • You can add a ready-made block, such as wireframe-series-10-gallery, with this element from the block gallery.

​​

Tip: refer to the article about adding blocks.


  • You can also add this element to an existing filled or empty column in one of your blocks. To do this, click on the add new element icon and select the Before/After element from the list of available elements.

Tip: You can find the Before/After element in the Media tab when adding an element.


Important: This element is currently unavailable for Flex blocks.



The element is divided into two parts, each of which requires you to upload an image. To do this, click on the side for which you want to upload an image, and a context menu will appear at the bottom:

In this context menu, there are two ways to upload photos. First: click on the icon with the image to go to your site's Media Gallery; second: click on the gear icon to open the Media settings, where you can also select a photo to display in the block.


In both the Media Gallery and the Media settings, you will have the option to upload a new file from your device or select an existing one from your site's gallery.



After uploading photos using one of the two methods mentioned above, you can further customize them, separately for each side of the element, in the Media settings:


  1. In the General tab, you can select the zoom mode for the image, flip it horizontally or vertically, and specify alternative text:

  1. Go to the Style tab to activate color overlay and/or a specific filter for the image:

  1. In the Action tab, you can specify the desired behavior for your image when clicked:

The gallery itself also has certain settings that you can control. To open the gallery settings, hover over its container and click on the “gear” in the upper left corner:

  1. In the new window, you can configure the marker orientation (vertical/horizontal), its color, and position relative to the photos:

  1. In addition, you can specify the desired corner rounding and add a shadow to this element:

Publish your site for the changes to take effect.

Updated on: 12/04/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!