Before and After Images

The "Before/After Swipe" option allows the option to compare two images side-by-side with a slider. Here's a video: Before/After Swipe Training. This swipe should be responsive to touch and mouse events.

How to Add a Before and After Image

Step One - Choose the drop down menu from to the right of the "Add HTML" button to find the list of paragraphs

Step Two - Select the "Add Before/After Swipe" option from the drop down menu

Paragraph drop down menu, before and after is at the bottom

Step Three - Add "Image One" and "Image Two" using the add media buttons

Step Four - *Optional* Add a caption to the "Slider Caption" field below the two images

Step Five - Choose a size for your "Before and After Image". You can choose between Medium, Large, Medium Tall, Large Tall.

The size option for the slider paragrpah

Here's a working example:

Puppies sitting on a field, in a black and white shot — Two puppies, side by side

two laughing puppies in the leaves — Two puppies, side by side

Before and After Images

How to Add a Before and After Image

WebCMS Training