Image

The Image element is part of the Basic Elements in EComposer. It allows you to add and display a single image anywhere on your page. In this guide, you’ll learn how to add the Image element and customize its settings to fit your design.

1. Add image

From the Basic tab, drag and drop the Image element to any position on the page.

2. Configure image

2.1. Content

Choose image: Upload an image from your device or select one from the media library. You can also set different images for each device, including desktop, tablet, and mobile, to ensure the best display across screen sizes.

• Edit: Click Edit on the image to access additional settings. Here, you can preview the image, update the alt text to improve accessibility and SEO, and adjust the focal point to control which part of the image remains visible when the image is resized.
  Note: The Focal Point option only works when Image fit is set to Cover. It will not apply if you use the Crop size option.
• Edit pro: This feature is available on the Pro and Premium plans only. For more details, please refer to the related documentation.

Crop size: The Crop size setting allows you to control the display size of the image. There are four preset size options available to choose from.

Link: Choose how the image should be linked. You can link it to None, Media File, or a Custom URL.

• None: When selected, the image will not have any link and will not be clickable.
• Media File: When selected, you can click on the image to open and view the image file.
• Custom URL: Enter a URL to link the image to another page, or click the icon to select a dynamic URL (such as a Post URL).

Fetch: Select how the image should be loaded and displayed.

• Auto Mode: Automatically adjusts image quality based on the user’s network speed and device.
• Low Mode: Uses a lower resolution to help images load faster while keeping essential details.
• High Mode: Displays images in higher resolution for better clarity and sharper visuals.

Enable Overlay: Allows you to add an overlay layer on the image with text. The text can be taken from the image alt text or entered as a custom text.

Use image caption: Add a caption that will be displayed below the image.

Disable lazy load: Enable this option if you do not want the image to use lazy loading.

Enable highlight on viewport: When enabled, the image will be highlighted as it enters the viewport while scrolling.

2.2. Design

Image:

There are two ways to resize the image: the first is to use the adjustment slider , and the second is to use the resize icon on the image .

• Alignment: Align the image to the left, center, or right. It allowed setting different positions for each device.
• Width: Set the width of the image. It allows to setting of different widths for each device.
• Max Width: Set the maximum width of the image as a percentage. It allows to set different max-width for each device.
• Height: Set the height of the image. It allows to set different heights for each device.
• Image Fit: Resize the image to fit its container. There are five selections.

You can use different below styles between normal and hover state.

• Opacity: Control the opacity of the image.
• CSS Filters: Adjust the image style by changing the CSS Filter scales for Blur, Brightness, Contrast, Saturation, and Hue settings.
• Box Shadow: Adjust box shadow options.
• Border: Select the type of border.
• Border Radius: Set the border radius to control corner roundness. It allows to setting of different border radius for each device.

Hover Tab: The settings under this tab are used to select elements when you mouse over them.

• Animation: When a customer hovers over an animated image, it can change grow, shrink, and rotate. This is enjoyable for the customer and shows that your site is working.
• Transition Durations: Specifies how many milliseconds a transition effect takes to complete. It allows you to change property values smoothly (from one value to another) when hovering.

Caption

This tab is only visible to you if the Caption option in Content tab is enable Use image caption.

• Alignment: Set the caption alignment.
• Typography: Set the typography options for the caption’s text.
• Text Color: Select the color of the caption’s text.
• Text Shadow: Add a shadow and blur to the caption’s text.
• Spacing: Select the space between the image and the caption.

Overlay

This tab is only visible to you if the Enable Overlay option is enabled in the Content tab.

• Typography: Set the typography options for the caption’s text.

You can use different below styles between normal and hover state.

• Opacity: Control the opacity of the image.
• Text Shadow: Add a shadow and blur to the caption’s text.
• Text Color: Select the color of the caption’s text.
• Background: Select the overlay’s background color.
• CSS Filters: Adjust the image style by changing the CSS Filter scales for Blur, Brightness, Contrast, Saturation, and Hue settings.

Image Scrolling Highlight

This tab is only visible to you if the you Enable highlight on viewport option.

• Enter your opacity: Adjust the opacity of the background surrounding the image.