Images 7 – 2 Images w/Text & Stripe
Images 7 – 2 Images w/Text & Stripe
Description
This section has two large images each with a headline, text and an optional link on top of a diagonal stripe.
Fields and Character Limits
*required fields
Headline 1 & 2
- Character Limits: Recommended limit of 40 characters including spaces
- Help Text: Enter the headline text. There is a recommended limit of 40 characters including spaces. This field renders as an <h2>. See Headers for guidelines and best practices for headlines and sub-headlines.
Short Text 1 & 2
- Character Limits: Recommended limit of 315 characters including spaces
- Help Text: Enter the short text. There is a recommended limit of 315 characters including spaces.
Link URL 1 & 2
- Help Text: Start typing the title of a piece of content to select it. You can also enter an internal path such as /node/add or an external URL such as http://example.com. Enter <front> to link to the front page. Enter <nolink> to display link text only.
Link text 1 & 2
- Character Limits: Recommended limit of 25 characters including spaces
- Help Text: Enter the link text. There is a recommended limit of 25 characters including spaces. Avoid link text like Click Here, Learn More and More. See Links for more info, including accessibility concerns, examples and best practices.
Image 1*
- Limits: 2MB, 768 x 432 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
- 2 MB limit
- Allowed types; png jpg jpeg
- Images must be larger than 768x432
Alternative text*
- Help text: See Alternative Text for info about writing effective alternative text.
Image 2
- Limits: 2MB, 768 x 432 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
- 2 MB limit
- Allowed types; png jpg jpeg
- Images must be larger than 768x768
Alternative text*
Help text: See Alternative Text for info about writing effective alternative text.
Available Style Options
- None
Where Can You Use This Section?
The section is available in the following templates and content types:
Templates
- Marketing
- Start
Content types
- Landing Page
Using on a cloneable Marketing or Start Template
- Locate Images 7 – 2 Images w/Text & Stripe in the Body area
- Select Edit
- Replace the placeholder text with the Headline and Short Text
- Replace the Link URL and Link text if you want a link. If not removed the contents of the fields.
- 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
- Select Save at the bottom left of the page
Adding to a new Landing Page
- In the Body area, select Add Body Section
- Select Images 7 – 2 Images w/Text & Stripe, select Add
View Screenshot - Enter the Headline and Short Text
- Enter the Link URL and Link text
- 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
- Repeat steps 3 - 7 for Image #2
- Select either Save as Draft or Published with the drop-down menu
- 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 have different size requirements due to variances in display
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