Image

Image

In a nutshell

The Image element renders a visual asset on a portal page. You configure where the image comes from, how it fits within its container, and how the surrounding boundary is styled.

1. Overview

The Image element places a visual asset on a portal page within a sized, styleable container. It also helps break up text-heavy layouts and gives the page a more polished, visual identity. The image that fills its surface comes from can be uploaded from your local computer or from the existing stock images that Zoho Creator provides. The Image is an atomic element and cannot contain other elements.


Ideal for:

  1. Hero banners and full-width prebuilt page headers
  2. Product visuals and promotional graphics
  3. Logo or brand visual placements

2. Display properties

Property Description
Element Name The internal identifier for this Image element. This name is auto-generated on placing within the designer and can be customized as required.
Image Source This property determines where the image is loaded from:
  1. Stock Images - Built-in images provided by Zoho Creator
  2. My Library - Uploaded files from your local computer

3. Styling properties

  1. Layout *link*
  2. Background *link*
  3. Padding *link*
  4. Margin *link*
  5. Corner Radius *link*
  6. Border *link*
  7. Shadow *link*
  8. Opacity *link*

4. Action properties

The Actions tab controls what happens when a portal user clicks an image and triggers a preconfigured ON CLICK action. The actions can be:

  1. None - No action is performed when the image is clicked. This is the default option for the ON CLICK action.
  1. Navigate To - Navigates the portal user to a destination when the image is clicked. Selecting this option reveals two additional properties.
    1. Page / URL - This is the navigation's destination. You can either enter a publicly accessible URL directly, or select from the list of portal pages available in the dropdown. The dropdown lists all default pages (Sign In, Sign Up, Reset Password, and Create Password) and any custom pages created in the portal.
    2. Open In - This property controls how the destination loads. While Same Window reloads the current browser tab to display the destination portal page or URL, New Window opens it in a separate browser tab.

5. Try it yourself

Add an Image element and try the following:

  1. Set Width and Height to equal values such as 80px each. Apply Corner Radius as Rounded and upload your brand's flagship image in the Image Source to get a circular brand identity.
  1. Configuring and managing portal pages *link*