Images 1 – Basic

Images 1 – Basic

Description

This section uses one or three images with optional captions. For single images, select from three caption locations. For two images, select symmetrical or asymmetrical display.

View this Section in the Section Gallery

Fields and Character Limits

*required fields

First image is required

Image*

  • Limits: 3MB, 1140 x 841 pixels, png jpg jpeg.
  • Help Text: Move white plus icon to select your preferred focal point for automatic image cropping. See Images for guidance and best practices.
    • One file only
    • 3 MB limit
    • Allowed types: png jpg jpeg
    • Images must be larger than 1140x814px

Alternative text*

  • Help text: See Alternative Text for info about writing effective alternative text.

Caption

  • Character Limits: Recommended limit of 255 characters including spaces
  • Help Text: Enter the caption text. There is a recommended limit of 255 characters including spaces.

Available Style Options

For two images

Asymmetrical Images*

  • Yes
  • No

For single images

Caption Orientation*

  • Left
  • Right
  • Bottom

Single Image Size*

  • Large
  • Small Image on Left
  • Small Image on Right

Where Can You Use This Section?

The section is available in the following templates and content types:

Templates

  • About
  • Basic Content
  • Basic + Content
  • Contact
  • List
  • Marketing
  • News
  • Start

Content types

  • Content Page
  • Landing Page

Using on a cloneable Content or Landing Template

  1. Locate Images 1 – Basic in the Body area
  2. Select Edit
  3. Select Remove to remove the placeholder image
  4. Add an image select the Browse button to upload from your computer, or select the link Open File Browser to find a previously uploaded image
  5. Set the focal point by moving white plus icon to select your preferred focal point for automatic image cropping
    View ScreenshotSet the focal point by moving white plus icon to select your preferred focal point for automatic image cropping
  6. Enter the Alternative text
  7. Add an optional Caption
  8. If you would like 2 images repeat steps 3 - 6 for Image #2 and remove Image #3.
  9. If you would like 3 images repeat steps 3 - 6 for Image #2 and Image #3.
  10. From the Style Options tab:
    View ScreenshotFrom the Style Options tab
    1. Asymmetrical Images* (for two images only):
      View ScreenshotAsymmetrical Images
      1. Yes
      2. No
    2. Caption Orientation*
      View ScreenshotCaption Orientation
      1. Left (for one or two images)
      2. Right (for one or two images)
      3. Bottom (for one, two or three images>
    3. Single Image Size*
      View ScreenshotSingle Image Size*
      1. Large
      2. Small Image on Left
      3. Small Image on Right
  11. Select Save at the bottom left of the page

Adding to a new Content or Landing Page

  1. In the Body area, select Add Body Section
  2. Select Images 1 – Basic, select Add
    View ScreenshotSelect Images 1 – Basic, select Add
  3. Add an image select the Browse button to upload from your computer, or select the link Open File Browser to find a previously uploaded image
  • NOTE: Image #1 is required, others are optional
  1. Set the focal point by moving white plus icon to select your preferred focal point for automatic image cropping
    View ScreenshotSet the focal point by moving white plus icon to select your preferred focal point for automatic image cropping
  2. Enter the Alternative text
  3. Optionally add a Caption (max. 255 characters)
  4. If you would like 2 images repeat steps 3 - 6 for Image #2.
  5. If you would like 3 images repeat steps 3 - 6 for Image #2 and Image #3.
  6. From the Style Options tab:
    View ScreenshotFrom the Style Options tab
    1. Asymmetrical Images* (for two images only):
      View ScreenshotAsymmetrical Images
      1. Yes
      2. No
    2. Caption Orientation*
      View ScreenshotCaption Orientation
      1. Left (for one or two images)
      2. Right (for one or two images)
      3. Bottom (for one, two or three images>
    3. Single Image Size*
      View ScreenshotSingle Image Size*
      1. Large
      2. Small Image on Left
      3. Small Image on Right
    4. Select either Save as Draft or Published with the drop-down menu
    5. Select Save at the bottom left of the form

Accessibility

  • Alternative text is required for all images. See Alternative Text for info about writing effective alternative text.
  • Avoid link text like Click Here, Learn More and More. See Links for more info, including accessibility concerns, examples and best practices.

Guidelines and Best Practices

Images 1 – Basic vs. Image – Body 1

There are two ways to insert images on most pages:

  • Images 1 – Basic
    • This section stretches the full-width of available space to display the image and optional caption. Use this option to separate sections.
  • Image – Body 1
    • This content type remains inside the container with the content from your Body 1 – General Content section. Use this option to insert a contextually relevant image within a text section.

Removing a Section

To permanently remove a section from a page:

  1. Select the vertical ellipsis to the right of the Edit button at the top-right of your section, select Remove
    View ScreenshotSelect the vertical ellipsis to the right of the Edit button at the top-right of your section, select Remove
  2. Select Save at the bottom left of the form