Creating a Comparison (Before & After) Slider

Creative option for showing 'Before' & 'After' images, perfect for retouching or special treatment of images and to showcase your skills

This is available on all our Portfolio Plans and the Comparison Slider can be added to any Custom Page.

Add Section to a Custom Page

1. Add Section and select 'Images'

2. Scroll down

3. Comparison Slider (at bottom)

4. Click 'Add Section'

Comparison Slider defaults

1. Add Image 1

2. Add Image 2

3. Customize Design

4. Save Changes

Add Image 1

1. Drag & drop image to upload

2. Click 'Upload Images' button to select

3. Click 'Import from Format' to add image already uploaded

4. Click 'Import from Dropbox'

1. First image added

2. Add Image 2

3. Add Label (optional)

Both images added

1. Label added to Image 1

2. Label added to Image 2

3. Use slider to view

4. 'Save Changes'

5. Click 'Customize Design'

Change Image and adding an Image Description

1. Click once on image

2. Mini toolbar appears above then you can 'Change Image' or

3. Add 'Image Description'

Customize Design

1. Customize Comparison Slider options for you to experiment with

2. In-app preview shows the options you have selected, customize until you are happy

3. Save Changes

View on Live Site

Experiment with how it will look on your live site, and across different devices.

Customize Design and make further adjustments.

Things to be aware of

• Both images should have the same dimensions

• The images added will not be cropped, or repositionable within the module

Reach us at our live chat or via our email info@format.com if you have any more questions. We’re happy to help!