# Image comparison

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/Gspy1K3j5AEXmdQlOcti/2024-02-2212-12-07-ezgif.com-gif-to-webp-converter.webp" alt=""><figcaption></figcaption></figure>

## **For customers**

## **Adding a section**

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/DKHT4Att7AF72lHeQu3i/image-comparison1.png" alt=""><figcaption></figcaption></figure>

In order to add a section, you need to go to **`Customizer`** → **`Add Section`** → **`Image comparison`**.

## **Section settings**

### General

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/BZTTCBfBYfWOhdmCue9M/image-comparison2.png" alt=""><figcaption></figcaption></figure>

1. **`Heading`** - section heading;
2. **`Text`** - section richtext;
3. **`First image`** - the image that will be displayed as a "before image”;
4. **`Second image`** - the image that will be displayed as an "after image”. Use an image with the same dimensions as the first image for the best view of the section;
5. **`Desktop image height`** - the height of the images in the section. The setting has options from 200px to 800px in increments of 50px. There is also an option for **full size** - the image occupies 100% of the width and height of the section;
6. **`Mobile image height`** - mobile image height. The setting has the same options as the desktop.

### Layout

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/8wt7NBBxhwanCTdWU5Yh/Monosnap_Dev-Gain-theme__Customize_NT-_Develop_-_.png" alt=""><figcaption></figcaption></figure>

1. **`Container width`** - a container width of the section. If the “Inherit” value is selected then the container width is based on the group 'Layout' settings in the Theme settings;
2. **`Desktop offset top`** - the **top** indent of the section on the **desktop**;
3. **`Desktop offset bottom`** - the **bottom** indent of the section on the **desktop**;
4. **`Mobile offset top`** - the **top** indent of the section on the **mobile**;
5. **`Mobile offset bottom`** - the **bottom** indent of the section on the **mobile**.

### Colors

<figure><img src="https://content.gitbook.com/content/wp6wpeVynqvtz0WMVrUT/blobs/YVnUSa9Ww3mMFKCHYfbN/Untitled%201.png" alt=""><figcaption></figcaption></figure>

1. **`Drag cursor background`** - the color of the separating line and the icon background;
2. **`Drag cursor color`** - icon color;
3. **`Drag cursor border color`** - icon border color.

## **For Developers**

The [**img-comparison-slider**](https://github.com/sneas/img-comparison-slider) library was used for the section.