[V6] Image Element

In this article, you will learn about the Image element and how to use it.

About the Image element

The imagery can give depth and context to a description, a testimonial, or story and provide a more immersive experience as our brain can interpret them much quicker than text alone. The Image element allows you to add images to your website within a few clicks.

From the GemPages Dashboard, open a template to edit. You can quickly find the Image element on the left sidebar of the Editor, under the Base section. Drag & drop the element to any position you prefer.

GemPages supports .jpeg, .jpg, .png, .svg, .avif, .webp, and .gif formats. For more information, check out our Image element FAQs article here.

When clicking on the element, you will find its configuration options in the left sidebar, including the Settings and Design tabs.

Configure the Settings Tab

1. Image

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.

GemPages’ limit for each uploaded image is 3 megabytes (MB). If your image file is larger than 3MB, kindly upload it on the Shopify server, then copy and paste the image link. Find the detailed instructions here.

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.

Image Resolution: You can alter the resolution of your image at this point. The feature is available for images uploaded on the Shopify server and GemPages’ UCare CDN.

To show the image title when hovering, hit “More settings”. The Title field will appear for you to enter.

2. Dimension

Responsive: Click on the Desktop icon on the right corner, you will be able to control the display of your image among different devices. It is recommended to make changes in the Desktop version first as other screens will adapt to it.

Width / Height: This feature allows you to manually adjust the image’s width and height by entering values into the fields. “Auto” means that the image is kept in the original size.

You can switch the dimension unit between Pixel and Percentage by hitting the respective icon.

Circle Image: Toggle on this option if you would prefer your image to have a round shape.

3. Link

To send customers to other pages after clicking the image, you can use one of the two methods below.

Image Link: Input the destination URL into the field.
Pick link: The link picker window will appear for you to select the link to add. There are two options for you: enter the link to the “Custom URL” field or choose from the list.

Please note that the custom URL should include “https://” for the link to function correctly. For instance, it should be “https://www.gempages.net” instead of “gempages.net.”

Open link in: You can decide how the link will be opened at this point:

Current Tab: The link will open in the existing browser tab or window.
New Tab: The link will open in a new browser tab or window.

4. Alt Tag

You can enter the alt text for your image here for usability and SEO purposes.

5. Alignment

This parameter allows you to determine how the image is positioned on your page. There are three options to choose including left-aligned, centered, and right-aligned.

6. Extra Class

If you wish to customize the element in a particular way, kindly 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.

That’s it! If you run into any problems when editing, please check out the Image element’s FAQs.