Comparison Image Element

About the Image Comparison element

The Image Comparison element enables you to highlight the advantages of your product or service by comparing before and after images within a single frame. This element operates similarly to the Before & After Image element found in the prior version. 

The Image Comparison is a flexible element and can be used on any spot on your page by following the steps below: 

Step 1: Access the GemPages Dashboard and select a page for editing or create a new one.

Step 2: Within the left sidebar, locate the Image Comparison element under the Media section and add it to your preferred location on the page.

Configure the Settings Tab

Images

To pick the image you wish to upload, follow these steps:

1. Click on the tab that corresponds to your choice – “First” or “Second.”
2. You have three ways to upload your image:
   a. Change Image: Hover over the current image and click “Change Image.” This lets you select an image from your device and upload it.
   b. Browse Gallery: You can select an image from your gallery, which contains all the images you’ve uploaded before.
   c. Source: This option lets you provide a direct image link.

Layout

Choose your preferred layout for the image comparison – Vertical or Horizontal. 

Slider

Choose the behavior you want for the slider: “Drag” or “Hover.” Then, either input a specific number or use the slider to modify the default display ratio, which is represented in percentages, between the first and second images.

Labels

To enable the display of labels for each image, toggle on this option. Once enabled, you’ll see a text box where you can enter the label for each image. You can also select your preferred position for the labels and explore additional customization options for them at this point. 

Size

Full width: Toggle this switch on to make the Image stretch to both edges of your page.

Ratio: Choose your preferred ratio for the image from the dropdown menu.

The scale attribute is used to specify how the image size should change to fit its container. It has a total of 5 values. 

• Fill: This is the default value of the object-fit attribute. The image will be resized or stretched to fit the size of the outer container, and the aspect ratio of the height and width will change if different from the container’s ratio.
• Cover: The image will be scaled down or stretched to fit the outer container while maintaining the original aspect ratio, but the container will be filled. Note that the image may be cropped.
• Contain: The image will be scaled down or stretched to fit entirely within the outer container while maintaining the aspect ratio of the image.
• None: The image retains its original size without changing the height and width.
• Scale: This value is a bit complex. If the original size of the image is smaller than the width and length of the container, this value is equivalent to “none.” If the opposite is true, then this value is equivalent to “contain.”

SEO

If you want to enhance your SEO, provide the alt text and image title for each image as needed.

Configure the Advanced Tab

For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.