How to use the Image element

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

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

 

In GemPages, we have developed an element named Image that allows our users to add the images to their pages within few clicks. The Image element can be found in the left sidebar dashboard on the GemPages editor page.

 

 

Let's explore and learn how to customize this element.

Settings Tab's Parameters

  1. Image


    • There are 3 sources to select an image and upload it to your page:
      • Upload Image: This allows you to select an image from your computer's gallery and upload it directly to GemPages.
      • Browse Gallery: The gallery here actually belongs to GemPages' storage, which can store a specific number of images that were uploaded to GemPages recently.
      • Image Src: We can put the online image source into the Link box, and GemPages will display this on-site.
    • Image Resolution: You can choose the real dimension of your image among the given values in the dropdown menu.
This only supports UCare CDN and Shopify CDN as only 2 listed sources allow us to configure the image resolution via URL link, for example, https://url.com/abc_3000x3000.jpg
If you want to show the title when hovering over the image, please hit More settings at the bottom and type the title into the box.

  1. Dimension


    • Width / Height: This feature allows you to manually adjust the image's width and height by entering the specific values into the box(es).
      We can switch the dimension unit between Pixel and Percentage by hitting the small icon.
    • Circle Image: This brings you another option to customize your image shape to round instead of a normal square or rectangle shape.


      As you can see, this parameter contains the symbol on the top right corner, which means you can adjust the setting for one or more specific devices without affecting the rest. 
      Please be well-noted that all changes should be made on the Desktop first. 
  2. Link


    • Image Link: With this function, you can redirect the customers to the specific URL or perform several actions such as scrolling to a certain section of the page, dialing a phone number, or composing an email, after clicking on the image.

    • Open link in: You can choose to open the selected URL within the same window or in a new tab.

  3. Alt Tag: Each image should have an alt text mostly for SEO purposes. Besides, it is helpful for visually impaired people to know what the image is for.



  4. Alignment: This parameter allows you to determine how the text is positioned within the description box. The three primary types of text alignment include left-aligned, centered, right-aligned.

  5. Extra Class: If you wish to customize the variant's content element in a particular way, kindly use this field to add a class name and then refer to it in the CSS file.

That's it! kindly click here to know more about the Image's common inquiries or get in touch with our delicate customer support via email or Live Chat.  


Was this helpful?