• Video Tutorial
  • GemPages Forum
Start For Free
  • Video Tutorial
  • GemPages Forum
homeElements[Editor 7.0] Image element
homeElements[Editor 7.0] Image element

[Editor 7.0] Image element

Easily enhance your website by adding images with the Image element. This article provides a step-by-step overview of the Image element settings, ensuring you maximize its potential.

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 Media section. Drag & drop the element to any position you prefer.

The Settings Tab

1. Image

You have three options for uploading your image:

  • Change Image: Simply hover over the image and select “Change Image.” This enables you to select an image from your computer and upload it.
  • Browse Gallery: You can choose an image from the gallery, which includes all of your previously uploaded images.
  • Source: This option allows you to provide the image link directly.
Please note that in Editor 7.0, images with a size of up to 10 MB can be uploaded. If your image exceeds this limit, please upload it to the File section in Shopify Admin and utilize the provided link as the Image Source.

Adaptive: Allow you to use different images for each screen to enhance website performance.

Preload: By enabling this option the image will be automatically preloaded when the user scrolls near the section containing that image.

2. Size

Full width

Toggle this switch on to make the row stretch to both edges of your page.

Aspect ratio

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

Scale

The scale attribute is used to specify how the image size should change to fit its container. It has a total of 5 values. In this section, we will explore the meaning of each value one by one.

  • 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 down: 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.”

3. Pick link

To direct customers to other pages after clicking on an image, you have two methods:

  • Source URL: Insert the destination URL into the designated field.
  • Pick Link: A link picker window will appear, allowing you to select the desired link. You have two options: either enter the link into the “Custom URL” field or choose from the provided list.

Additionally, you can choose how the link will open:

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

Border

Hit the three-dot button to personalize the border according to your preferences.

Corner

Hit the three-dot button and customize a corner style for your image. 

Shadow

Toggle on this switch if you want a shadow for the image and you will see the options to adjust the shadow. 

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

Alt Text: Input the alt text for your image in the designated box to enhance usability and improve SEO.

Image Title: Enter the image title in the provided box to display it when hovering over the image.

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, get in touch with our customer support via email or Live Chat.

Tags:7.0

Was this helpful?

Yes  No
Related Articles
  • [Editor 7.0] Product Cart Button
  • [Editor 7.0] Product Module
  • [Editor 7.0] Product Variants and Swatches
  • [Editor 7.0] Product Images and Gallery
  • [Editor 7.0] Row element
  • Responsive Product module
footer logo
  • Release Note
  • Privacy Policy
  • Terms of Service
  • Community
  • Video Tutorial
© 2017-2023 GemPages. All rights reserved.
Popular Search:Responsive design, Transfer content, Custom code