Image Element

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.

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

To direct customers to other pages after clicking an image, you can overlay a link on it. You have 2 methods:

• Source URL: Insert the destination URL into the designated field.
• Insert 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: The link will open in the existing browser tab or window.
• New Tab: The link will open in a new browser tab or window.

3. Size

Full width: If you want to  put the photo in full screen, 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.

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

4. Shape

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

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 Advanced Tab

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

How to put text over an image?

If you’re interested in creating a banner with text overlay on an image, we’ve got a video tutorial just for you. Watch the video below for step-by-step guidance.