Adding and Customizing Images

Please Note: This article applies to Website, Website+Marketing and eCommerce packages created on or after 18 December 2024. If your accounts were created before this date, 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.

Please refer to the Adding Videos article to learn how to add and customize videos for your website.

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 resizing elements.

Customizing Image

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

Editing the Image

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

Image Tab

  • The Image tab will open first in the toolbar.
  • To upload a new image, click Change Image to access the Image Library:

  • 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.

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:

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.

Adding Alt Text

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

  • Add the Title (will be seen by hovering over the image on the published website).
  • Add the Description (will be seen only in Metadata).

Shape Tab 

Please Note: You can click the Revert Shape Changes button to undo all actions made within the Shape settings and return the image to its original state.

Aspect Ratio 

Select the Aspect Ratio for your image: 

  • Fit. The Fit setting scales your image to fit within the frame, ensuring that the aspect ratio is maintained. If the image's dimensions don't perfectly match the frame, you might see space around it.
  • Fill. The Fill setting scales your image to fill the entire frame. It might crop off parts of the image if its dimensions don't perfectly match the frame, but it guarantees no space is visible within the frame.
  • Crop. The Crop setting allows you to manually define the visible area of your image within the frame. You'll see adjustable handles on the image that you can drag to choose which portion is displayed.

Zoom

Please Note: The Zoom setting is only available if you choose the Crop aspect ratio.

Refine the position of your image within its frame:

  • Minus (-) Button: Decreases the zoom level, making the image appear smaller within its frame.
  • Plus (+) Button: Increases the zoom level, making the image appear larger within its frame.

Crop by Shape

  • Choose Shape from a variety of predefined shapes to give your image a unique look in the Site Editor:

Adjust Tab

Please Note: You can click the Revert Adjust Changes button to undo all actions made within the Adjust settings and return the image to its original state.

The Adjust settings provide precise control over various visual aspects of your images. You can adjust:

  • Orientation. Rotate your image Left/Right in 90-degree increments or flip your image Horizontally/Vertically along its axis.
  • Light. Control how bright, dark, or defined your image appears. Use the slider control to manage Brightness, Contrast, Shadows, and Highlights of your image.
  • Effects. Add stylistic touches, such as sharpening or vignetting. Use the slider control to manage Intensity, Sharpening, and Vignette of your image.
  • Color. Fine-tune the vibrancy, warmth, and overall tone. Use the slider control to manage Saturation, Warmth, Hue, and Tint of your image.
  • Blur. Apply blur effects for creative purposes. Choose the options from the drop-down among: None, Linear, and Circular. For Linear and Circular options, additional settings will be available: Intensity, Radius, Smoothness, and Position settings for Circular; Intensity, Start, and Smoothness for Linear.

Style Tab

Border

Please Note: The Border settings aren't available if Crop by Shape is enabled.

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

  • To change the border color, click the Square icon on the top left of the slide control. Select the overlay color and drag the control to set the Opacity level for the Border.
  • You can change a separate Border Location by clicking a special Icon and choosing a preferred option among Top, Left, Right, Bottom, or All:

  • Select the border alignment from the options: Inside, Outside, or Center.
  • Change the value in the Slide Control to set the border width.

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

Corner Radius

Please Note: The Corner Radius settings aren't available if Crop by Shape is enabled.

The Corner Radius setting allows you to change the border radius of the Photo.

  • Choose a range of radius for all corners, or change a separate range of radius by choosing a preferable option among: Top left, Top right, Bottom right, Bottom left:

  • Change the curvature of all corners by using the Curvature slider control:

  • You can also select the specific corner to change the curvature manually:

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.

Drop Shadow

  • Click the Square icon on the top left to open the color picker and change the color of the shadow:

  • Change the percentage value to set the shadow intensity.
  • Blur. Change the Blur intensity with the slider control.
  • Position. Change the shadow position with the Left/Right and Top/Bottom slider controls.

Link Tab

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

  • Select the link type from the drop-down: None, Page, Anchor, URL, File, Email Address, or Phone Number.
  • Specify the link (this step depends on the link type that was previously chosen).
  • Select how the link will open for visitors from the drop-down menu, choosing between Current and New tab.

Overlay Tab

Overlay Color

  • Enable the Color toggle to add a color overlay to your image.
  • Click the Square icon to open the color picker and select the Overlay color and its Intensity.

Overlay Filter 

  • In the Filters Settings, you can select from a variety of filters and change the Intensity of the effect:

Settings Tab

Show Bottom Caption

To set the Caption at the bottom of the image:

  • Enable the Show Bottom Caption toggle.
  • Change and manage the Caption Text by selecting the text itself.

On Click Enlarge

To enable the On Click Enlarge for a single image:

  • Turn on the On Click Enlarge toggle.
  • Select the Theme in the drop-down below. You can set an image to display with Light theme or with Dark Theme on the published website.

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

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, choose hover animation in the drop-down: None (set by default), 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.

Layering the Image

To layer elements within Site Editor, follow these steps:

  • Add a new element over the existing one. The newly added element will be on the top layer:

  • Click on the element and select Move Forward or Move Backward options:

Please Note: The Move Forward or Move Backward options are available only when one element is added on top of another.

Deleting the Image

To delete an image:

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