Body 7 – Image/Video Side-by-Side

Body 7 – Image/Video Side-by-Side

Description

This section has an image or video with a headline and a text area. Add up to three optional links. Choose left or right alignment.

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 for the statistic group/section. 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

  • 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.

Image

  • 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
    • 2MB limit
    • Allowed types: png, jpg, jpeg
    • Images must be larger than 768x432px

Alternative text*

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

Video Embed Code

  • Help Text: Enter a video embed code. Be sure your video includes captions for accessibility. See Videos for more info about embed codes and captions.

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 30 characters including spaces.
  • Help Text: Enter the link text. There is a recommended limit of 30 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.

Available Style Options

Text Orientation*

  • Left
  • Right

Background Color*

  • White
  • KU Steam

Where Can You Use This Section?

The section is available in the following templates and content types:

Templates

  • List
  • Marketing
  • Start

Content types

  • Content Page
  • Landing Page

Using on a Template

  1. Locate Body 7 – Image/Video Side-by-Side in the Body area
  2. Select Edit
  3. Replace the placeholder text with the Headline and Short Text
  4. Select Remove to remove the placeholder image
  5. 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 or add a Video Embed Code
    View ScreenshotAdd an image select the Browse button to upload from your computer, or select the link Open File Browser to find a previously uploaded image or add a Video Embed Code
  6. If using an image set the focal point by moving white plus icon to select your preferred focal point for automatic image cropping
    View ScreenshotIf using an image set the focal point by moving white plus icon to select your preferred focal point for automatic image cropping
  7. Enter Alternative Text if you’ve uploaded an image.
  8. Enter the Video Embed Code if you want to use a video. Be sure to remove the image if you want to use a video.
  9. From Style Options tab and select the text orientation and background color
    View ScreenshotFrom Style Options tab and select the text orientation and background color
  10. Select Save at the bottom left of the page

NOTE: if both an Image and a Video Embed Code are in place the Image will appear. To use a Video make sure there is no Image uploaded.

Adding to a new Content or Landing Page

  1. In the Body area, select Add Body Section
  2. Select Body 7 – Image/Video Side-by-Side, select Add
    View ScreenshotSelect Body 7 – Image/Video Side-by-Side, select Add
  3. Enter the Headline and Short Text
  4. 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 or add a Video Embed Code
    View ScreenshotAdd an image select the Browse button to upload from your computer, or select the link Open File Browser to find a previously uploaded image or add a Video Embed Code
  5. If using an image set the focal point by moving white plus icon to select your preferred focal point for automatic image cropping
    View ScreenshotIf using an image set the focal point by moving white plus icon to select your preferred focal point for automatic image cropping
  6. Enter Alternative Text if you’ve uploaded an image.
  7. Enter the Video Embed Code if you want to use a video. Be sure to remove the image if you want to use a video.
  8. From Style Options tab and select the text orientation and background color
    View ScreenshotFrom Style Options tab and select the text orientation and background color
  9. Select either Save as Draft or Published with the drop-down menu
  10. Select Save at the bottom left of the form

NOTE: if both an Image and a Video Embed Code are in place the Image will appear. To use a Video make sure there is no Image uploaded.

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

  • See Videos for more information about videos and embed codes.
  • General guidelines and best practices for videos
  • Instructions on getting embed codes from YouTube and Media Hub
  • Likely uses for this short text field include: introductory/boilerplate statements and summaries.

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