Carnegie Mellon University

CMU Web

A service provided by the University CMS Team

CMU Web  ›  How to Use the CMS  ›  Build Your Site  ›  Work with Pages  ›  Hero

Hero

The Hero is a large visual element that can be added to the top of any page, like the ones on this page to catch website visitor's interest. A Hero can be an image, News Article or a silent YouTube video with options to overlay text and add links. Multiple Heroes can be used for a rotating display.

Free Hero images which have been optimally sized and compressed are provided by Carnegie Mellon University. These photographs cover a variety of subject matter, from buildings to carnival to student activities.

If you plan on using your own images, make sure to check out the Optimize Images page for relevant guidelines, tips and resources.

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

Providing two versions of the Hero will ensure the image will render well on both mobile and high resolution screens.

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

Images serve as a backup for circumstances in which playing a video is not ideal, for example on mobile devices where video use a lot of data.

If you do not already have high resolution content for the Hero, we have free Hero images readily available for all CMS sites. See free Hero options.

Display Options

hero-fill.png

  • Image starts from top of screen
  • Crops image to fill 100% of screen height
    • On wide screens, the bottom is cropped
    • On narrow screens, the sides are cropped

Example

hero-overlay.png

  • Image starts from top of screen
  • Crops image to fill 75% of screen height
    • On wide screens, the bottom is cropped
    • On narrow screens, the sides are cropped

Example

hero-fill-no-overlay.png

  • Shows entire image
  • Image starts below top navigation
  • On short screens, image extends below the "fold"

Example

Add a Hero

  1. In the page edit window, for Include Hero Section select Yes
  2. Select a display option (see examples above)
    1. Hero Fills Entire Screen - Hero fills the entire screen (width and height) and is partially covered by the header with a transparent effect. Website visitors can jump down to the page content using the arrow icon at the bottom.

      -If set to No, next option is available-
    2. Overlay Header in Front of Hero Section
      1. Yes - Hero is partially covered by the header with a transparent effect, fills 75% of screen height
      2. No - Hero is fully displayed starting below the header
  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

  1. For Text Overlay select Text Box
  2. For Text Overlay Position, select Left or Right side of Hero.
  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)
  5. Add Link (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.