Adding a Before/ After Gallery

If you want to showcase the changes by comparing 2 images, the Before/ After gallery will be a perfect solution. This functionality suits best for dentistry, beauty industry, construction and interior design companies, etc. The site visitors can pull the handler to the left or right to compare the images.

Here's an example of how you can use the Before/ After gallery:

To add and set up the Before/ After gallery, follow the instructions below.

Adding a Before/ After gallery

1. Open the blocks gallery in the editor, access the Gallery tab and choose wireframe-series-10-gallery block:

2. You can also add the Before/ After gallery as a separate element to existing blocks. For that, hover over the place in the block where you'd like to set a gallery and click on the "plus":

3. Choose the Before/ After gallery element in the pop-up menu:

Adding images to the Before/ After gallery

1. For that, click on the image component and press the Upload button in the opened menu:

2. In the new window you will see the Media gallery of your site. In the Free photos tab you can browse through the stock images by using the keywords. If you want to upload your own images to the gallery, access the My images tab:

Tip: learn how you can change the position of your images or add filters in the article Editing images.

Before/ After gallery settings

1. To access the settings of the gallery, hover over its placeholder and click on the "gear" at the top left corner:

2. In the pop-up menu customize the position of the slider and the handles color:

3. Don't forget to publish your site for changes to take an effect.

 

Done! The site visitors can pull the handler to the left or right to compare the images.

• Related Articles

• Adding and Setting a Gallery

  Use a gallery on your site to create your photographer portfolio, share some company's event or live photos of your products. Five different layouts will help you to choose the best way to present the images. Follow the instructions below to see how ...

• Adding Images

  Adding images to the site is an excellent way to illustrate what your page is about and attract the customers' attention to your company. With the help of our editor, you can add a picture to almost any of the ready-made blocks. Before you begin, we ...

• Adding a slider

  Some blocks on our platform contain a slider allowing you to display images in a carousel where they change manually or automatically. You can add a ready-made slider to your website or enable this mode in existing blocks with a collection. Adding a ...

• Adding site's background

  A good background creates the tone for the website and complements the content. On SiteCliq, you can add an image, a video or a color to the site’s background, and easily adjust it to your needs. Follow the steps below to add a site's background. ...

• Adding a GIF

  A GIF is an image file format commonly used for images on the web and sprites in software programs. In simple words, GIFs are a series of images or soundless video that loops continuously and doesn't require anyone to press play. Learn how to insert ...