Adding and Customizing Images

Note: This article applies to Free Trial accounts created on or after 16 December 2024 and Website, Website+Marketing and eCommerce packages created on or after 18 December 2024. If your accounts were created before these dates, please refer to the article Elements Management.

Engage your visitors with high-quality images and boost your SEO ranking. Upload photos from your computer or online services or choose from millions of professional stock photos.

Adding an Image

Option 1

  • Hover over the desired section and click the Add Element.

  • Choose the Image from the modal that appears:

  • After you choose the element from the list, drag it to the desired section and drop using the grid.

Option 2

  • Hover over the left sidebar of the Site Editor and click Build (+) button:

  • Choose the element:

  • After you choose the element from the list, drag it to the desired section and drop it using the grid.

Moving and Resizing the Image

Please refer to the Elements Management (New Grid) article to learn more about moving and duplicating elements.

Customizing Image

To edit, duplicate or delete the element, click on it and switch between the buttons that appears in its toolbar:

Editing the Image

  • Click on the element and choose the Edit button that appears in its toolbar:

Replacing the Image

  • Click the Image icon on the toolbar:

  • Drag and drop an image from your computer to the Image Library or click Upload Photos:

  • Click Select a Photo to locate an image on your computer or use an image link.

Using Free Stock Photos

You can also use Free Stock Photos:

  • Click the Stock Photos button. 
  • Search for photos using the search bar at the top of the page.
  • Select the photo and click Edit to modify it according to your preferences. Or click Use Image to add the photo to your project.

Creating a New Project

To create a new custom image, click Create a New Project:

  • Select the size and aspect ratio of the image that will fit your purpose:

  • Upload an image from your computer or select one from your Image Library.
  • When finished customizing the image, you can download it or add to the website by clicking Save and Use:

Cropping the Image

There are two options to configure 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 (default) to configure the option separately for each device: Desktop, Laptop, Tablet, Mobile. 

Please Note: All devices' positions will be similar if this option is enabled. If the option is disabled on a particular device, you can set a different image position.

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

Please Note: You can align the Image on the page via drag and drop when using the Original (1:1) option.

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 toolbar. Then click the arrow at the right to display the Advanced settings:

Adding an Overlay

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

Adding 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).

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:

  • Enable the Show Caption toggle.
  • Change the Caption Text by clicking the Image Caption phrase and edit it.

On Click Enlarge

To enable the On Click Enlarge for a single image:

  • Turn on the On Click Enlarge toggle.

Please Note: This element is unavailable if the Image is linked to a page, anchor, URL, etc.

Image Border

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

  • Change the value in the Slide Control to set the border width.
  • To change the border color, 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.

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

You can change a separate Border Location by clicking a special Icon and choosing a preferable option among Top, Left, Right, Bottom:

  • Click the Color Picker to select a color:

  • Pick the Border Color and click Apply.

Border Radius

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

  • Choose a Range of Radius for All corners:

  • You can change a separate Range of Radius by clicking a special Icon and choosing a preferable option among: Top left, Top right, Bottom right, Bottom left:

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

The Image Shadow will allow customers to add shadows to any image in settings with a shadow 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.

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

Hover Effects

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

  • To enable image hover, toggle on the Hover Effect button. Choose hover animation in the drop-down: Scale, Shine, Grayscale, Sepia, Blur.

Duplicating the Image

  • To duplicate the image, click on it and choose the Duplicate button that appears in its toolbar:

  • The duplicate of the element will appear immediately.

Deleting the Image

To delete an image:

  • Click on it and choose the Remove button [Bin] that appears in its toolbar: