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.
Fields and Character Limits
*required fields
First image is required
Image*
- Limits: 3MB, 1140 x 814 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
- Locate Images 1 – Basic in the Body area
- Select Edit
- Select Remove to remove the placeholder image
- 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
- Set the focal point by moving white plus icon to select your preferred focal point for automatic image cropping
View Screenshot - Enter the Alternative text
- Add an optional Caption
- If you would like 2 images repeat steps 3 - 6 for Image #2 and remove Image #3.
- If you would like 3 images repeat steps 3 - 6 for Image #2 and Image #3.
- From the Style Options tab:
View Screenshot- Asymmetrical Images* (for two images only):
View Screenshot- Yes
- No
- Caption Orientation*
View Screenshot- Left (for one or two images)
- Right (for one or two images)
- Bottom (for one, two or three images>
- Single Image Size*
View Screenshot- Large
- Small Image on Left
- Small Image on Right
- Asymmetrical Images* (for two images only):
- Select Save at the bottom left of the page
Adding to a new Content or Landing Page
- In the Body area, select Add Body Section
- Select Images 1 – Basic, select Add
View Screenshot - 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
- Set the focal point by moving white plus icon to select your preferred focal point for automatic image cropping
View Screenshot - Enter the Alternative text
- Optionally add a Caption (max. 255 characters)
- If you would like 2 images repeat steps 3 - 6 for Image #2.
- If you would like 3 images repeat steps 3 - 6 for Image #2 and Image #3.
- From the Style Options tab:
View Screenshot- Asymmetrical Images* (for two images only):
View Screenshot- Yes
- No
- Caption Orientation*
View Screenshot- Left (for one or two images)
- Right (for one or two images)
- Bottom (for one, two or three images>
- Single Image Size*
View Screenshot- Large
- Small Image on Left
- Small Image on Right
- Select either Save as Draft or Published with the drop-down menu
- Select Save at the bottom left of the form
- Asymmetrical Images* (for two images only):
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:
- Select the vertical ellipsis to the right of the Edit button at the top-right of your section, select Remove
View Screenshot - Select Save at the bottom left of the form