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 an image to upload

2. Click the 'Upload Images' button to select

3. Click 'Import from Format' to add an 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 the slider to view

4. 'Save Changes'

5. Click 'Customize Design'

Change Image and adding an Image Description

1. Click once on the 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.

Things to be aware of

• Both images should have the same dimensions

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

Still have questions? Reach us on our live chat or email us at info@format.com. We’re here to help!