Full Width Media Row

Full Width Media Rows are a combination of a full-width image or video, a headline, and some text on a background that expands the full height of the image.

Sample:

Note: This sample is not shown in full width as it naturally is. Full width media rows are best used on pages without side navigation or sidebar blocks

 

Sample Full Width Media Row

Students writing and listening, professor teaching.

How to Create a Full Width Media Row:

  1. Create a Flexible Page
  2. Select the "Edit" Tab on the blue menu bar under the Title.
  3. Scroll to the bottom of the page and select “Add Full Width Media Row.
  4. Insert media by selecting the gray "Browse" button. Media is necessary to create this element.
    • Note: Images must be larger than 1000x400 pixels. Instructions on how to crop images are shown below.
  5. The "Title" text area allows you to create a larger, bolded title. The "Body" text area allows you to add additional text to the Media Row. Note: These are both optional to creating this element.
  6. To insert a link, separate from the body text, use the "Link" section. The "Title" text area is the text that will display, while the URL is the URL of the website you would like to link to. 
  7. Display Settings is where you can customize the appearance and text box color of the Full Width Media Row.
    • Background Attachment: Scroll (scroll with page) or Fixed (page scrolls over image)
    • Background Size: Scale to 100% width (automatic height) or Scale to cover viewport (auto height and width)
    • Text Box Background Color: Transparent, (Light) Translucent white, (Dark) Translucent black
  8. Save

Note: Any full width element will push down sidebar menus to below the content. If you would like to use the full width option on a page that uses sidebar menus or blocks, it is best to use this on the top of the page.

Image Crop Settings

In order for this to display properly on mobile, you must edit the image crop settings by following these steps:

  1. Add a Marquee to the desired Flexible page
  2. Upload an image
  3. Click on the desired thumbnail image
    • For desktop, use Full-width large (landscape crop recommended)
    • For mobile, use Full-width extra small (portrait crop recommended)
  4. Click and drag to desired crop
  5. Save

Fields

  • Title: Title of the full width media row
  • Media: Image or video shown behind text
    • Upload: Upload a new file
      • See image crop settings above
    • Web: Paste in URL of the media (use a YouTube link for video)
    • Library: Select from previously uploaded media
    • My Files: Select from files you previously uploaded
  • Body: Body content of the full width media row
  • Links: Title and URL of associated links
  • Display Settings
    • Background Attachment: Scroll (scroll with page) or Fixed (page scrolls over image)
    • Background Size: Scale to 100% width (automatic height) or Scale to cover viewport (auto height and width)
    • Text Box Background Color: Transparent, (Light) Translucent white, (Dark) Translucent black
  • Additional Options
    • View Mode: Full-width background (content aligned left), Full-width background (content aligned right), or Full-width background (content centered)