Adding and Customizing Images

Adding Image/Photo

A photo can be placed into different blocks via  Drag & Drop. To add a feature:

  • In the Site Editor, hover over the left sidebar and click Build:

  • In Features, drag Photo and drop it to the preferred area:

Customizing Image/Photo

Hover over the image to display the  Tooltip and be able to:

Replace the Image

  • Click the Image icon on the Tooltip:

  • Choose the variant on how you want to change the image: Upload from your computer, add from My Photos or Clouds, or use Free Photos:

Crop the Image

There are two options to configure the  Image Cropping:

  • Original (1:1). The image will be displayed in its original size.

  • Resize. Configure the image position and height manually. 

    • To Resize an Image:

    • Click the image, then select Resize.
    • Turn off Device Binding (this function is enabled by default) to configure the option separately for each device: Desktop, Laptop, Tablet, Mobile). 

    Note: If this option is enabled, the position will be similar for all devices. 
    If the option is disabled on a particular device, you can set a different image position on it. 

    • Adjust the Image Scale by dragging the slider at the bottom.
    • Click Apply at the top.

Note: You can align the image on the page via Drag and Drop when using the Original (1:1) option:

Add a Link 

You can link the image to any page of your website, an external URL, file, Email, or phone via these steps:

  • Click the Link icon on the Tooltip to open the Link Settings.
  • Choose the type of the link: Page, Anchor, URL, File, Email Address, or Phone Number.
  • Specify the link.
  • If you want website visitors to open this link in a new tab, turn on the Open in the New Tab toggle.

Advanced Settings

Hover over the image to display the Tooltip. Then click the arrow at the right to display the  Advanced settings.

Add an Overlay

  • Click the Square icon on the Tooltip to open the color picker and select the overlay color.
  • Drag the control to set the Opacity level for the photo.

Add Alt Text

To improve the SEO ranking of your website, you can add the image's  Title and Description:

  • Click the Text icon on the Tooltip to open the Alt Text Toolbar.
  • Add the Title (will be seen by hovering over the image on the Published website).
  • Add the Description (will be seen only in Metadata).
  • Publish the website to apply changes.

Image Settings

Modify Settings of the Image:

Show Caption

You can add an Image Caption and position it according to your preferences. To set the Caption:

  • Click the Settings icon on the Tooltip.
  • Enable the Show Caption toggle.
  • Change the Caption Text by clicking the "Image caption" phrase and editing or re-writing it.

On Click Enlarge

To enable the  On Click Enlarge feature for a single image:

  • Select Settings on the Tooltip.
  • Turn on the On Click Enlarge toggle.

Note: This feature is unavailable if the image is linked to a page, anchor, URL, etc.

Please refer to the video below on how to use  On Click Enlarge:

Image Border

The  Border feature allows customers to add borders to images and change their color settings.

To enable the  Image Border feature:

  • Click the Settings icon on the toolbar.
  • Change the value in the Slide Control to set the border width.
  • To change the bordercolor, click the Square icon on the right to Slide Control.
  • Select the overlay color, and drag the control to set the Opacity level for the Border.
  • Publish your website.

Please Note: If the value on the Slider Control is set to zero, the Image Border feature is disabled.

Radius

The  Image Border Radius setting allows changing the border radius of the Photo feature. Use the Slider Control to configure the image Radius:

Please Note:  Image Border Radius is calculated as a percentage and is shown as a numeric value in the Slider Control. At 0%, the customer will get a square image at 50% - maximum roundness.

Image Shadow

Image Shadow feature will allow customers to add shadows to any image in settings with a shadow toolbar.

To enable the  Image Shadow feature:

  • Click the Settings icon on the toolbar.
  • Change the value in the Slide Control to set the shadow intensity.
  • Click the Square icon on the right of the Slide Control to open the color picker.
  • Select the overlay color, and drag the control to set the Opacity level for the Shadow.
  • Publish your website.

Hover Effects

Hover Effects add dynamic visual effects to the website. It helps to create more engaging and modern experiences for visitors. 

To enable the  Image Hover:

  • Click the Settings icon on the Tooltip.
  • To enable Image Hover, toggle on the Hover Effect button. Choose Hover Animation in the dropdown (Zoom, Shine, Grayscale, Sepia, Blur).
  • Publish your website.