Before and After Slider Gallery

On this page:

  1. Creating a before & after slider gallery
  2. Getting the best result

Before and after sliders are very useful from displaying images such as photography through to cosmetic before and after results.

Creating a before & after slider gallery

Before and after galleries make it easy to show a transformation of your product or service, from how it looked before, to how it looks now. For this to work well, it is important to have your photos set to the same proportions and distance from the focus of the shot.

Gallery title The title that shows above your Gallery.
Show Title Allows you to choose if the title shows, or not.
Width This setting allows you to control whether the width is 100% of the section it is placed into, or only limited.
Height Sets the height of the image set.
Image You can add an image from the file manager, new or existing to both your before and after images. Images will resize to fit the height of the gallery.
Title This is the title that will sit on top of the image in the bottom  corner. This may be something like 'Before' for your before image. 
Show Title Allows you to choose if the title shows, or not.
Alt Alt text is text that is inserted to your code, and helps accessibility programs know what your image is about, as well as search engines.
Description Sets a description will insert below the gallery.

Slide the middle line from left to right to see an example of a before and after gallery by changing a blurred image to a sharp image.

Help Video

This help video below shows you how to create a great-looking before and after gallery for your pages.

Getting the best result

To get the best result from the gallery, ideally you want to either:

  1. take the before and after images from exactly the same perspective and distance
  2. crop your images till they match up, or match up as close as possible.

Can't find the answer you are looking for?

Try using searching below: