The image element is any image that you upload from your computer or download from the internet and upload to a web page.
For "image" elements, a panel with the following tools opens up:
General settings
Select the element to open the settings for that specific element. A toolbar will appear on the right.
Picture settings. In this section, you can add and modify the image itself. Choose the size of the image: fill, do not scale, fit, cover. You can also choose the shape of the image: square or circle. You can also round the corners.
In the "image optimization" section, you can adjust the compression size or disable image compression.
For 95% of images, normal image compression to the size of the element is suitable. We recommend using the JPG format as it is much smaller, compresses well without loss, and loads faster than PNG. Use PNG if you need to set a transparent background.
In the "alternative text" section, you can add alternative text to the image. This text will be displayed if the image is not loaded or the user is using a screen reading program. It is good for search engine optimization.
Positioning
Read more about the settings in this section in the article "Positioning".
Style
Shadow. Add a shadow around the image, you can adjust the offset and blurriness of the shadow, as well as the color of the shadow.
Border. You can set a frame for the element: radius (rounded corners of the frame), border style (no border, solid, dashed, dotted), border width, color.
Interaction
Click. The image is an interactive element that, when clicked on, the visitor will be redirected to a link. Click the "click action" button and choose from the options offered:
- Add to cart. When the user clicks on the element, the product will be automatically added to the cart. Specify the desired product by selecting it from the list of products. In order for the checkout process to start immediately after the user adds the order to the cart, move the “Quick Payment" slider to the active position.
File download. This action automatically starts downloading the selected file to the user's device. Attach the file by clicking the "Select on the server" button. And download the file from your computer.
Go to checkout page. The user will be instantly redirected to the checkout page. This action has no additional settings.
Go to link. When clicking on the element, the user will be redirected to the selected page. To select this action, paste the link into the field and move the "Open in a new tab" slider to the active position.
Refresh the page. When you click on the element, the user's page will be updated. This action has no additional settings.
Remove from cart. When the user clicks on this item, the product will be automatically removed from the shopping cart. Select the desired product and turn the slider to the active state to completely remove the product from the basket.
Run custom event. You can create any event that will trigger the script. In the configuration settings, write the name of the event. To learn how to set up a custom event, read the article "Types of events in the scenario".
Run JS function. A JS function is a block of code designed to perform a specific task. When the user clicks on the element, the configured JS function will be launched.
- Scroll to section. This action redirects the user to another block on the same page where this button is located. Select the required block from the list to which the user will be directed.
Show pop-up window. When you click on this element, an additional window will be displayed on top of the web page. To learn how to set up a pop-up window, read the article "Pop-up windows".
Zoom image. This action has no additional settings.
Choose the action to be taken when a website visitor clicks on the icon.
Select the action that will take place when a site visitor clicks on the picture.
Conditional show / hide
Read more about the settings in this section in the article "Conditional show / hide".
Advanced
Read more about the settings in this section in the article "Advanced settings".
