Home / Designing UI Elements

Image

Customer Success Team

Last updated on Sep 10, 2024

The Image UI element displays visual content such as photos, illustrations, icons, logos, or images.

To configure Image:

  1. Go to Styles to modify the element styling features:
  • Select the current condition of the element from the State dropdown:
    • Normal: The default state of Image when it is not being interacted with.
    • Hover: The state of Image when the user hovers over it with the mouse cursor.
  • Make the necessary configuration of principal styling features (see Global Styles).

2. Go to Content to modify the element styling features:

  • Click Change Image to select the image or upload from a computer, free stock (powered by Unsplash), or insert the URL and click Select.
  • Select how Image is resized and fitted within its container:
    • Cover: The image is scaled to cover the entire container, filling it without any letterboxing.
    • Contain: The image is scaled to fit within the container while maintaining its aspect ratio.
    • Fill: The image stretches to fill the entire container, potentially distorting if the aspect ratio is not maintained.
  • Enter the descriptive text in the Alt field.
  • Expand Link and click + Add Link to add items to be displayed on your website and make them clickable for easy access. The items can be external links, products, phone numbers, email addresses, main pages (e.g. FAQ, Home, About), system pages, etc. This enables your customers to easily find the information they are looking for.

     

💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.