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.
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
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.
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.
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.
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.
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.
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.