Avada Image Before & After Element Examples

The Avada Image Before & After Element allows you to showcase two images side by side in an interactive slider, ideal for demonstrating transformations, comparisons, or progress. With draggable handles, custom overlay labels, vertical or horizontal orientations, and full style options, it delivers a visually engaging way to tell a before-and-after story.

Running ShoeMannequin Hand Holding Running Shoe

This Image Before & After Element is set up as follows: Effect Type (Slide), Before Image Label, After Image Label, Label Font Size (13px), Label Placement (Image Centered), Label Hover Type (Individual), Handle Design Style (Circle With Arrows), Handle Color, Handle Background Color, Handle Offset (50%), Handle Orientation (Horizontal), Handle Movement Control (Drag & Click), and Alignment (Center).

Running ShoeMannequin Hand Holding Running Shoe

This Image Before & After Element is set up as follows: Effect Type (Fade), Image Fade Transition Speed (0.5), Alignment (Center), and Border Radius (7px).

Abstract 3D design with orange and purple spheresAbstract gradient background with pink and purple tones
3D geometric shapes in purple and orangeAvada Before Mockup 4
Abstract 3D design with orange and purple spheresAvada Before Mockup 4
Abstract gradient background with pink and purple tonesAvada Before Mockup 4
3D geometric shapes in purple and orangeAbstract gradient background with pink and purple tones
Abstract gradient background with pink and purple tonesAvada Before Mockup 4

The image Before & After Element examples above primarily showcase the Handle Design Style and Orientation. The general setup is as follows: Effect Type (Slide), Handle Design Style, Handle Color, Handle Background Color, Handle Offset (50%), Handle Orientation (Horizontal/Vertical), Handle Movement Control (Drag & Click), and Alignment (Center).

Examples can include the individual option values set for that particular instance; however, in some cases, not all Element variations can be shown as they may be too numerous. Where a live example cannot be shown, an image representation will be used as a substitute. For more detailed information, please refer to the related Element documentation and videos.

Avada Image Element Featured ImageImage
Avada Carousal Element Featured ImageImage Carousel