The Image Element allows you to place static images within a content area to be displayed on your website.  We recommend using .JPEG or .PNG image file types.


In This Article:

Image Element

The most common way to add an image is using the Image Element. You can either click on an already placed Image Element or drop in a new one! 


Placing a new Image Element


Replacing an Existing Image Element

Tips:

  • Images placed with the Image Element will span the full Content Area by default.
  • The overall size of the image is limited to the size of the Content Area.
  • If you delete a placed Image Element, the image file remains within your File Manager to be used again.
  • The Edit This Image button will open our built-in image editor.


Stock Images

You can now access our library of free stock images by clicking the Stocks Images tab and selecting an available image. 

Tips:

  • Once a stock image is placed, it will appear in your File Manager to use on other pages or be edited.
  • You can search specific terms, such as "food" or "ocean", to filter through the available images. 


Advanced Tab

The Advanced tab contains options to customize aspects of the image, such as adding a clickable link, adjusting the alignment, or adding an Alt Text.

  • Display: This determines on what devices the image will be displayed.
    • All Devices: The image will be displayed when viewed on all devices.
    • Full Version: The image will ONLY be displayed when the website is viewed with a computer.
    • Mobile Version: The image will ONLY be displayed when the website is viewed with a mobile device.
  • Align: Align this content left, center, or right inside its containing content area.
  • Class: Assign a CSS class to this image, allowing you advanced control over how it is displayed.
  • Title: The title, more commonly known as a tool tip, is the text that appears when you hover over the image. You can place instructions or other helpful content in this field.
  • Image ID: Assign a CSS ID to this image, allowing you fine control of how it is displayed.
  • Alt-Text: Choose the Alt text that will be displayed when the image fails to load, or when viewed in a text-based browser.
  • Width: You can set the width of the image inside of the content element, and choose percent or pixel.
  • Link: Add a hyperlink to the image.