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.
After placing an Image Element into a Content Area, you will be presented with your website's File Manager where you can either upload a new image or select an existing one already uploaded.
Once you've selected an image, our system will suggest a size based on the Content Area you've placed the Image Element in. From this screen, you can also use the on Edit This Image to access our built-in photo editor or click on Browser Images to select a different image. When you are ready to place the image after it's select, please click the Place Image button.
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.
Container Settings pertain to how the image is displayed within the content area.
- 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 website is viewed with a computer.
- Mobile Version: The image will ONLY be displayed when website is viewed with a mobile device.
- Align: Align this content left, center, or right inside it's 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 text that appears when you hover over the image. You can place instructions or other helpful content in this field.
Image Settings pertain to the actual image itself.
- 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, choose percent or pixel.
Link Settings are used to make the image an active link.
- Link: Add a hyperlink to the image.