Carnegie Mellon University

CMU Web

A service provided by the University CMS Team

Hero

The Hero is a large visual element that can be added to the top of any page, like the ones on this page. We call this a Hero because it's here to save the day from lackluster websites!  A Hero can be photos, News Articles, or a silent YouTube video with options to overlay text and add links. A Hero is optional, but who doesn't need a Hero?

We know that working with large images can be frightening, but just remember a Hero is our friend. Here are some of the top concerns we've heard and why you should have no fear.

AS IF! Heroes are for everyone. If you're not able to obtain high resolution images for the Hero, we have FREE Hero images readily available for all CMS sites. And they're pre-sized so you just need to download, plug and play. Come get your free Heroes!

When adding a Hero to a page you will be required to upload two versions of the same image using the following dimensions:

  • Hi-res (1400x700) - Used for high resolution displays such as monitors
  • Mobile (900x600) - Used for mobile devices and smaller displays

Sorry for the extra work, but providing two versions of the Hero will ensure the image will look great on a variety of displays. You do want your website to look nice for everyone, don't you?

While any YouTube video should work in the Hero, you should only use videos in which you are authorized to use, and which are suitable for silent play (all videos are automatically silenced).

The images serve as a backup for circumstances in which playing a video is not ideal. Not everyone has accesss to YouTube, and if mobile devices streamed videos all day long they'd run out of data and we'd be in big trouble.

Add a Hero

  1. In the page edit window, for Include Hero Section select Yes
  2. Select a display option
    1. Hero Fills Entire Screen - Hero fills the screen vertically starting just below the header; website visitors can jump down to the page content using the icon at the bottom (example)

      -If set to No, next option is available-
    2. Overlay Header in Front of Hero Section - Hero is partially covered by the header with a transparent effect (example)
  3. Select the hero Type you want to use
    1. Rotator - Automatically rotates through a selection of up to four items. Two rotator types
      1. News Article - Feature news articles from your site (example)
      2. Custom Content or Photo - Feature photos and add optional text overlays and links (example)
    2. Silent Background Video - Feature a YouTube video that is automatically silenced and add optional text overlay and link (example)
  4. Follow the steps below for the hero type selected
Screenshot of adding a hero to a page.

Hero settings in the page edit interface.

Rotator News Article

To feature news articles in the Hero you must have an established news section on your site.

  1. Choose Page to browse and select the news article you want to feature
  2. Complete the following settings
    1. Visual Enhancement Overlay - Enable to improve appearance of low-quality image
    2. Text Overlay - Select options for text overlay (more on text overlay)
  3. Click the plus sign (+) to add more news articles (up to four), repeat steps 1-3.

Rotator Custom Content or Photo

  1. Choose File to browse and select hi-res and mobile images
  2. Complete the following settings
    1. Alt Text - Add a description of the image
    2. Visual Enhancement Overlay - Enable to improve appearance of low-quality image
    3. Text Overlay (optional) - Select options for text overlay (more on text overlay)
    4. Add Link (optional) - Add a link in a call to action style; enter Link Text and Choose File to browse and select a page or URL to link to an external site; Open in New Window if linking to an external site or file such as a PDF
  3. Click the plus sign (+) to add more photos (up to four), repeat steps 1-3

Silent Background Video

  1. Enter the YouTube video ID; the video ID is the number/letter combination after the = in the video's URL (e.g., https://www.youtube.com/watch?v=hAdHQCNtGUk).
  2. Choose File to select hi-res and mobile images; required as an alternative when the video is unavailable
  3. Complete the following settings
    1. Alt Text - Add a description of the image
    2. Visual Enhancement Overlay - Enable to improve appearance of low-quality video or image
    3. Text Overlay (optional) - Select options for text overlay (more on text overlay)
    4. Add Link (optional) - Add a link in a call to action style; enter Link Text and Choose File to browse and select a page or URL to link to an external site; Open in New Window if linking to an external site or file such as a PDF
Screenshot of browser showing YouTube video ID

Portion of URL highlighted in yellow is the video ID.

Text Overlay (optional)

Whether you use a rotator or silent background video for the hero, you can overlay text using Centered Text, Text Box and Caption. Character limits for each are provided in the edit interface.

Note: Rotating news articles are preconfigured to use text box overlay, but options for position and width are configurable.

Hero with centered text.

Centered Text

  1. For Text Overlay select Centered Text
  2. Enter Heading/Main Text and Sub Text (optional)
Tip: Not all Heroes are ideal for centered text as text color is white. If centered text doesn't look good on your Hero, try using a text box instead.

Hero with text box.

Text Box - Left/Right Aligned

  1. For Text Overlay select Text Box
  2. For Text Overlay Position select Left or Right
  3. For Text Overlay Width select Small (spans 1/3 of Hero), Medium (spans 1/2 of Hero), or Large (spans 2/3 of Hero)
  4. Enter Heading Text and Sub Text (optional)

Hero with caption.

Caption

  1. For Text Overlay select Caption
  2. Enter Caption Text

Tip: Captions should be used as commentary for the image. Captions are not available when option for Hero Fills Entire Screen is enabled.