Advance Image

Author: An Do 601 views

The Image is one of the elements from Basic elements and plays an important role in your sales page. It is used to display a single image. Advance Image will interact with the customer by showing another image when hovering.

1. Content

1.1 General

Link: After clicking on the image, you can either open it in the lightbox or redirect the customer to another link. We have 3 options for it: Default, Lightbox, Custom URL
Enable Overlay: This option allows you to add an overlay to your image. An overlay is a semi-transparent layer that sits on top of the image and can be used to add text or other design elements.
Use Image caption: This option allows you to add a caption to your image. A caption is a text description that appears beneath the image and can be used to provide additional information about the image or to credit the source of the image. When you enable this option, you can enter the caption text in the provided field.

1.2 Image

You just need to choose the Image you want to show in this setting and Crop the size to match your page.

1.3 Hover Image

You need to tick the Display Hover Image option first in order to use this feature. Then choose an image you want to show after hovering this element and crop the suitable size to fit with your website or your desired result.

2. Design

2.1 Image

Width: sets the width of an image.
Max Width: defines the maximum width of an image.
Height: Set the height for an image.
Image fit: used to specify how an <img> should be resized to fit its container. This property tells the content to fill the container in a variety of ways; such as “preserve that aspect ratio” or “stretch up and take up as much space as possible”.

You can set Opacity, CSS Filter, Box Shadow, Border, and Border Radius for both NORMAL and HOVER mode.