You can add an image in two ways:

  • As a background for a section, row, column or text box.
  • As an 'image' element within a column

Step 1: Adding a background

  1. Click on a section, row, or any area you want to add the image background to, to select it.
  2. In the right sidebar, under the 'Background' dropdown and select 'Image'.
  3. Click on 'INSERT NEW IMAGE'.
  4. Choose an image from your file manager or upload a new one.
  5. Click on the image and it will automatically create a background fill for that specific section, row or area component. (Repeat in each individual section)

Step 2: Adding an image

  1. Add a new section to your page or click to select a current one. Within the section, select a column.
  2. Within a column, click on the 'Elements' icon and drag the 'Image' icon on to the column.
  3. Click on 'INSERT NEW IMAGE' on the right sidebar.
  4. Choose an image from your file manager or upload a new one. 
  5. Click on the image to add it to the column.

Pro tip: Read more about sections, columns and different page components here.

(Optional) Step 3: Adding a scroll effect

  1. After adding a background, select the 'Scroll Effect' dropdown in the sidebar.
  2. Select the 'Fixed', 'Zoom Out' or 'Zoom In' scroll effect.
  • Static - A static background will scale the image background to the size of the selected section.
  • Fixed - A fixed background will not scale to the size of the selected section but will instead retain its original size. When scrolling, the relative section will 'rollover' the fixed image background.
  • Zoom Out/In - An image background using the Zoom In or Zoom Out effect will zoom into or out of the image background when scrolling past it on a page.

Pro tip: Using an image background with a relatively large aspect ration (compared to the section) will increase the desired Zoom Out/In scrolling effect. Zoom effects can also be seen by mobile and tablet visitors to your site.

Editing an image

With an image selected, from the right sidebar you can edit the following: 

Title: Add an image title for search engines to read.

Link type: Create an image link to an email address, page, external URL, bottom of the page or top of the page. NB: Make sure to include the http:// part of the URL, when linking to any URL.

Hover: Choose an effect that displays when hovering your mouse over the image.

Adding a caption: Turn caption on and enter the caption in the Text field. Choose where to position the caption and edit the caption settings.

Lightbox:  Turn lightbox on if you'd like an image to overlay the current page in a pop-up when a visitor clicks on it.

Colour: Set a coloured filter to apply to the image.

Corners: Allows you to curve the image corners.

Brightness/contrast/saturation/opacity: Increase or decrease effects from the dropdown next to each.

Related articles

Adding/arranging a page section
Editing the page layout
Adding a video background

Did this answer your question?