Add Images

Overview

Use the Image widget to insert an image into your Website. You can customise images to act as buttons and navigate to other pages or Websites, download files or activate popups. Images are a great way to decorate Websites, show off products or storefronts and create an additional way to communicate with visitors.

Guide

Adding an Image Widget into your Site

Add a button widget onto your Website Builder. To learn more about adding widgets to your Website, see Adding Widgets.

Once the widget has been placed, the Content Editor appears. Click the Replace button to select an image.

addimages_1_en-US.png

Choose between the existing stock photos in the gallery or add your own images using the Upload New Image button in the Choose and Place Images menu.

addimages_2_en-US.png

From here, you can:

  1. Select the folder with images you want to use
  2. Click the "+" icon to upload your own image
  3. Switch to the Full View for more image choice options

See the Image picker article for more information on the image picker.

Image options

The image options are divided into two Editors - the Content Editor and the Design Editor.

Content Editor

addimages_3_en-US.png

 

The Content Editor controls the content of the image - In this tab, you can:

  • Replace the image - change the graphic of the image widget.
  • Edit the image - change image properties by using the Photo Editor.
  • Link the image - Images can be linked to other pages and URLs, popups, anchors, email addresses and downloadable files. When a visitor clicks on the image, they will be taken to the link.
  • Add Alternative Text - Enables search engines to recognise image content. Use this text to describe the image.
  • Add a Tooltip - text shown when a visitor hovers over an image.

Design Editor

addimages_4_en-US.png

 

The design tab is displayed in one window but is divided into three pre-defined sections - Layout, Style and Spacing.

Layout
addimages_5_en-US.png

 

Use the layout section to edit the dimensions of the image. You can make edits to the:

  • Width 
  • Height

You also have the option to keep the proportions of the image. When the "Keep proportion" option is checked, any changes made to the width will also affect the height of the image to keep the image proportional.  

Style
addimages_6_en-US.png

 

Use the style section to add other effects to your image such as:

  • Border style
  • Rounded corners
  • Shadow
Spacing
addimages_7_en-US.png
 

Use the spacing section to control the space of the widget relative to other widgets around it. You can edit the:

  • Outer Spacing - this is the outer Blank Space, indicating the numbers on the outer section of the Blank Space square.
  • Inner Spacing - this is the inner Blank Space, indicating the numbers on the inner section of the Blank Space square.

Global Images 

You can also make content and design changes to your image widgets using the global image design. Changing global elements will change all image widgets to have a consistent design. Any changes to specific individual image widgets will be saved.

Things to consider

When uploading photos to use in your Website, make sure to get permission to use photos coming from photographers, businesses and other third parties.  

Remember that using the image widget does not change the background picture. Instead, it adds a picture onto a row or column. To learn how to add a background picture, read this article

Resources