Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

One of the four types of elements on a page are images. Images can be any graphic or photograph in either JPG, GIF, or PNG format. Instead of a static image, you can also use the Image element to upload a video (MP4).

Adding or Removing an Image

Once you have inserted a widget containing an image element, you will see a grey image placeholder. Select the placeholder by clicking on the grey box and ensuring you are in the Elements sidebar (if you are in a different sidebar, navigate to the Elements sidebar by clicking the Element breadcrumb at the top of the page). Inside the Element sidebar, you will see an Image dropdown.

Select Choose to insert a file. FileManager will pop up. Choose a photo from your FileManager, or upload a new file by selecting “Upload” in the upper left-hand corner of the FileManager pop-up (this only works when you are in the Home tab). Once you have selected the photo you wish to use, choose “Add Selected” in the lower right-hand corner.

...

Once you select a valid file, you should see the file path populated in the text box to the left of the “Choose” button. An image preview will also appear above the file path, as well as the option to remove the image. To change the image, simply re-open FileManager by selecting “Choose” once more. Note that if you remove the image, it only deletes the current image from the placeholder. This does not remove the image element itself.

You can add a meta description for your image in the text box below the file path. We recommend giving each image a 1-2 sentence meta description in order to boost your SEO ranking.

Adding or Removing a Video

To add a video, navigate to the Video dropdown. Add a video the same way you insert an image from FileManager or uploading a new video on the Home tab. Note that you can only add MP4 files as videos at this time.

...

  • Autoplay - starts your video automatically upon page load

  • Loop - continuously play the video from start to finish

  • Muted - mute any audio within the video file

  • Controls - provide standard video control options (pause/play, mute, full-screen, etc.). If your video is not set to autoplay, you must apply controls or viewers will not be able to press play to watch your video.

  • Inline - apply a unique style to this individual video

...

Sizing

Set the dimensions of your image on mobile or desktop views by increasing the height and width. Each number represents 1 pixel, though the default increment is 10 when increasing/decreasing size.

Style

Add an Image Border or colored overlay to your image under the Style dropdown.

...

Set the Image Overlay by typing a 6-digit alphanumeric hex code, or by clicking the color picker box. Specify the opacity of the overlay, from 1% (transparent) to 100% (opaque).

If you want your image to link to a separate URL or page section, insert that link in the Image Link textbox.

Spacing

Control the element spacing by adjusting the padding or margin.

...

You can edit both the padding and margins individually for mobile, tablet, and desktop views. Adjust the top, bottom, left, and right side by incrementing numerically. The default interval is 10 pixels.

Advanced

Use the advanced section to specify an Image Class or create a parallax scrolling effect on your image.