All Collections
Custom Pages & Title Pages
Creating a Comparison (Before & After) Slider
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

Updated over a week ago

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


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

Did this answer your question?