Images 2 – Image w/Text Box & Stripe

Images 2 – Image w/Text Box & Stripe

Description

This section has a large image and text box with a background stripe. The text box includes a headline, short text and an optional link. Choose image orientation and background color for text box.

View this Section in the Section Gallery

Fields and Character Limits

*required fields

Headline*

  • 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 <h3>. See Headers for guidelines and best practices for headers and sub-headers.

Short Text

  • Character Limits: Recommended limit of 180 characters including spaces
  • Help Text: Enter the short text. There is a recommended limit of 180 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 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*

  • Limits: 3MB, 1140 x 641 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 1140x641px

Alternative text*

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

Available Style Options

Text Orientation*

  • Left
  • Right

Text Background Color*

  • White
  • Blue

Where Can You Use This Section?

Templates

  • Start

Content types

  • Landing Page

Using on a cloneable Start Template

  1. Locate Images 2 – Image w/Text Box & Stripe in the Body area
  2. Select Edit
  3. Replace the placeholder text with the Headline and Short Text
  4. Replace the Link URL and Link text
  5. Select Remove to remove the placeholder image
  6. 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
  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. Enter the Alternative text
  9. Go to the Style Options tab, select Text Orientation and Text Background color
    View ScreenshotGo to the Style Options tab, select Text Orientation and Text Background color
  10. Select Save at the bottom left of the page

Adding to a new Landing Page

  1. In the Body area, select Add Body Section
  2. Select Images 2 – Image w/Text Box & Stripe, select Add
    View ScreenshotSelect Images 2 – Image w/Text Box & Stripe, select Add
  3. Enter the Headline and Short Text
  4. Enter the Link URL and Link text
  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. Go to the Style Options tab, select Text Orientation and Text Background color
    View ScreenshotGo to the Style Options tab, select Text Orientation and Text Background color
  8. Select either Save as Draft or Published with the drop-down menu
  9. 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

  • Use this section to bring your image and copy together with a trajectory background.
  • This section works well for longer paragraphs.
  • Paragraphs that are too short will cause the background trajectory shape to create extra dead space that can cause problems with the page flow.

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