> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weblium.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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:**
* [Step 1. Adding a “Before/After” gallery](#3-step-1-adding-the-beforeafter-gallery)
* [Step 2. Adding images to the “Before/After” gallery](#3-step-2-adding-images-to-the-beforeafter-gallery)
* [Step 3. Configuring the “Before/After” gallery](#3-step-3-configuring-the-beforeafter-gallery)

### Step 1. Adding the “Before/After” gallery

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. 
​​
| ${color}[#1aa900](Tip:) refer to the article [about adding blocks](/en-us/article/adding-blocks-178s0sh/).

* 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.
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/pislya-angl-1_1t4czkk.png)
| ${color}[#1aa900](Tip:) You can find the Before/After element in the Media tab when adding an element.

||| ${color}[#f97700](Important:) This element is currently unavailable for Flex blocks.

### Step 2. Adding images to the Before/After gallery

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:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/pislya-angl-2_1sjdh64.png)
 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.

### Step 3. Configuring the Before/After 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:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/pislya-angl-3_ys05p8.png)
2. Go to the **Style** tab to activate color overlay and/or a specific filter for the image:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/pislya-angl-4_45vca4.png)
3. In the **Action** tab, you can specify the desired behavior for your image when clicked: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/pislya-angl-5_az16fk.png)
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: 
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/pislya-angl-6_1cyeizg.png)
1. In the new window, you can configure the **marker orientation** (vertical/horizontal), its **color**, and **position** relative to the photos:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/pislya-angl-7_617vfe.png)
2. In addition, you can specify the desired **corner rounding** and add a **shadow** to this element:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/pislya-angl-8_1k4bs2d.png)
[Publish your site](/en-us/article/publishing-a-site-tgxmch/) for the changes to take effect.