CTA 4 – Overlay Image w/Button

CTA 4 – Overlay Image w/Button

Description

This section is a full-width photo with a color overlay. It includes a headline and a button with optional short text. Choose from three color overlay options.

View this Section in the Section Gallery

Fields and Character Limits

*required fields

Headline*

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

Short Text

  • Character limits: Recommended limit of 150 characters including spaces
  • Help text: Enter the short text. There is a recommended limit of 150 characters including spaces.

Button 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: None
  • Help text: Enter the link text. Avoid link text like Click Here, Learn More and More. See Links for more info, including accessibility concerns, examples and best practices.

Image*

  • Limits: 5MB, 2560 x 1097 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.
    • 5 MB limit.
    • Allowed types: png jpg jpeg,
    • Images must be larger than 2560x1097px.

Alternative text*

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

Available Style Options

Background Color*

  • KU Blue
  • Crimson
  • Night

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:

  1. Locate the CTA 4 - Overlay w/Button in the Body area
  2. Select Edit
  3. Replace the placeholderHeadline and Short Text
  4. Replace the placeholderButton URL and Link text
  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. Enter the Alternative text
  9. Go to the Style Options tab and select the Overlay Color you wish to use
    View ScreenshotGo to the Style Options tab and select the Overlay Color you wish to use
  10. Select Save at the bottom left of the form

Adding to a new Landing Page

  1. Select Add Body Section
  2. Locate CTA 4 - Overlay w/Button, select Add
    View ScreenshotLocate CTA 4 - Overlay w/Button, select Add
  3. Enter the carousel Headline and Short Text
  4. Enter the Link URL and Link Text
  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. Go to the Style Options tab and select the Overlay Color you wish to use
    View ScreenshotGo to the Style Options tab and select the Overlay Color you wish to use
  9. Select either Save as Draft or Published with the drop-down menu
  10. 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

  • Selecting the right image is critical to using color overlays effectively
  • Images should be selected for texture and interest.
  • Be aware of how the text and graphic elements in the display interact with the image.
  • It is best to convert the image to black and white prior to upload.
  • Be prepared to try multiple images choices before making your final choice.
  • Because red on websites is often used for emphasis or to indicate warning or danger, if you choose to use crimson for your overlay, be aware of the type of information you are conveying. Be very strategic about the use of the crimson style option.
  • This is a full-width section. Be aware of the height of this section and how it will impact the likelihood that users find content below the section.
  • This slice when your call to action needs accompanying text.
  • You will lose some details of the photo with the duotone treatment so be sure to choose a photo where the viewer will not miss important visual information.

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