List 6 – Alternating Image + Text List

List 6 – Alternating Image + Text List

Description

This section has a list of alternating sets of images with headlines, short text and optionally up to three links. Choose an alternating background color.

View this Section in the Section Gallery

Fields and Character Limits

*required fields

Headline*

  • Character limit: Recommended limit of 50 characters including spaces.
  • Help text: Enter the headline text. There is a recommended limit of 50 characters including spaces. This field renders as an <h2>. See Headers for guidelines and best practices for headlines and sub-headlines.

Short text

  • Character limit: 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

  • 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

  • Character limits: Recommended limit of 40 characters.
  • Help text: Enter the link text. There is a recommended limit of 40 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*

  • Limits: 2MB, 768 x 549 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 768x549px

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

  • List

Content types

  • Content Page

Using on a cloneable List Template

  1. Locate List 6 –Alternating Image + Text List in the Body section
  2. Select Edit All
  3. Replace the placeholderHeadline and Short Text
  4. Replace the placeholderURL and Link Text for each link you wish to include
  5. Select Remove to remove the placeholder image
  6. Select the Browse button to upload an image, or select the Open File Browser link to view previously uploaded images
  7. 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
  8. Add the Alternative text
  9. Select the Style Options tab, select the Background Color
    View ScreenshotSelect the Style Options tab, select the Background Color
  10. To clear extra links in the list, select the ellipses on the right edge of the row and select Remove
    View ScreenshotTo clear extra links in the list, select the ellipses on the right edge of the row and select Remove
  11. To add more links, select the Add Alternating Side-by-Side List Item button
    View ScreenshotTo add more links, select the Add Alternating Side-by-Side List Item button
  12. Select Save at the bottom left of the form

Adding to a new Content Page

  1. In the Body area, select Add Body Section
  2. Select List 6 –Alternating Image + Text List, select Add
    View ScreenshotSelect List 6 –Alternating Image + Text List, select Add
  3. Enter the Headline and Short Text
  4. Under Link, add the URL and Link text for each list item you wish to include
  5. Select the Browse button to upload an image, or select the Open File Browser link to view previously uploaded images
  6. 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
  7. Enter the Alternative text
  8. Select the Style Options tab, select the Background Color
    View ScreenshotSelect the Style Options tab, select the Background Color
  9. To add more links, select the Add Alternating Side-by-Side List Item button
    View ScreenshotTo add more links, select the Add Alternating Side-by-Side List Item button
  10. Select either Save as Draft or Published with the drop-down menu
  11. 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

  • Length of short text area determines location of the link. Be aware of the length of text and relative position of the link on the page.
  • The alternating display style happens automatically.
  • Use drag order to reorder and determine which entry has which display style

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