[V6] Before and After Images element

About the Before and After Images element

The Before & After Images element allows you to showcase the benefits of your product or service by comparing the before and after images in the same frame.

Add the Before and After Images element to GemPages Editor.

Before we start, you may need to add the Before and After Image element from the library to your Editor. Kindly follow the steps below.

Step 1: From your GemPages Dashboard, select the preferred template and enter the Editor.

Step 2: After that, access the Library on the left side of the top bar.

Step 3: Next, go to the Element tab and search for “Before and After Images”.

Step 4: Click on the element, then the “Add element’’ button.

After that, the Before and After Images element is located on the left sidebar of the Editor, under the Module section. Drag & drop it to your chosen position.

Click on the element to view its configurations in the left sidebar, including the Settings and Design tabs.

Configure the Settings Tab

Image Before & Image After

There are three options for you to upload your image:

• Replace Image: This option lets you choose an image from your computer to upload.
• Browse Gallery: You can pick one from the gallery which contains all of your uploaded images.
• Image Src: This option allows you to input the image link.

Image Quality: This option allows you to decide how your image will be compressed – Lighter or Lightest. However, it’s only available for images uploaded on our server – the UCare CDN.

Click on “More settings” to reveal more options to customize your image. Toggle on the Show Label switch to enable the image label. Next, input your preferred text and select a position for the label.

You also have an option to compare among three images. Toggle on the 3 Image switch to reveal this option.

Default Offset PCT

Use the slider to control the position in which the handle is set. The default number is 0.5, which means the handle is centred in the middle of the Before After Images.

Move Slider By

Decide how the handle can be moved: by Clicking or Hovering.

Orientation

Select an option from the dropdown menu to determine the handle slider direction. It can move left/right (Horizontal) or up/down (Vertical).

Slider Space

Adjust the maximum width the image should take up. The range of this value is from 0 to 200px. You can set it as zero to use the full image width.

Extra Class

If you wish to customize the variant’s content element particularly, please use this field to add a class name and then refer to it in the CSS file.

Configure the Design tab

To style how the element looks, please navigate to the Design tab and follow the instructions in this article.