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.
- 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.
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.
- 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.
2.2 Hover Image
You can set Image fit, Opacity, Animation, and Transition Durations for Hover Image
This is the result when everything is set up
Leave a Comment