How do I compare two photos with the before-and-after slider?

Step 1: Add the Before & After slider block

Click on the plus sign in a column, search for before or slider and choose Before & After slider. At the top of the settings, there is a note: “For the best results, make sure the before and after images have the same width and height.” Take that seriously, see the tips below.

Step 2: Choose the before and after image

Select the photo of the old situation for Before image and the photo of the result for After image. Both are required: with one photo, the block shows nothing.

Step 3: Fill in the labels

For Before label and After label, type a short word that will appear in the corner of the photo, for example, “Before” and “After”, or “2019” and “2026”. The before label is at the top left, the after label is at the top right. Leave them blank if you do not want labels.

Step 4: Choose the Image size

For Image size, choose which version of the photos the block will use. In a wide column, Large or Full size (with photos around 1200 to 1920 pixels wide) looks nice and sharp.

This is how it works for your visitor

The slider starts in the middle. The visitor drags the round button left or right, or clicks on a spot in the photo: the dividing line jumps there. On a phone, dragging is done with a finger.

Tips for good photos

• Same viewpoint: take the after photo from exactly the same spot and height as the before photo. Mark the spot, or use a tripod.
• Same size: crop both photos to the same width and height, for example, 1600 x 900 pixels. The height of the slider follows the after photo. If the before photo has a different aspect ratio, the image will not align correctly.
• Same lighting: photograph in similar daylight so that the difference truly reflects the result.
• Light file: reduce the photos before you upload them, see uploading images in the correct format.

Having trouble?

• I see nothing on the page. Choose both a Before image and an After image. With one photo, the block shows nothing.
• The photos are jumping or do not fit. The photos have different dimensions. Crop them to exactly the same width and height and upload them again.
• The photos are blurry. Choose a larger Image size.
• Before and after are reversed. Swap the photos in the fields Before image and After image.

Read more about images on your website in everything about images and video. Can’t figure it out? Contact us.