Carnegie Mellon University

CMU Web

Marketing & Communications with Computing Services

Hero

The hero area is used for large imagery and can include a single photo, slideshow, silent video or news article. 

If creating a new page, follow the new page steps. For an existing page, click Edit.

  1. Select Yes to include a hero
  2. Complete the hero options:
    • Hero Fills Entire Screen - the screen area is filled vertically
    • Overlay Header in Front of Hero - hero is covered by the header with a transparent effect
  3. Follow the steps for the type you select:
Select yes to include a hero.

News Article (Rotator)

Use for existing articles. 

  1. Select browse  and navigate to the news article you want to feature. It should already exist. 
  2. Click Confirm
  3. Complete the following:
    • Visual Enhancement Overlay - select enable to add a filter to the news article, if the image is low quality
    • Text Overlay Position & Width - select an option for the text box
  4. Click + to add additional news articles (max of four), repeating steps 1-3
Add a news article. (CMS)

Custom Content/Photo (Rotator)

  1. Select browse  and navigate to the hi-res and mobile images
  2. Complete the following:
    • Alt Text - add a description of the image. Required for screen readers and search engines
    • Visual Enhancement Overlay - select enable to add a filter to the news article, if the image is low quality 
    • Text Overlay Position & Width - select an option for the text box
    • Add Link (optional) - choose to add a link in the call to action style and complete the options
  3. Click + to add more images (max of four), repeating steps 1-2
Add a photo to the hero area. (CMS)

Silent Background Video

  1. Enter the YouTube Video ID for the video you are using. Number/letter combination after the = in the URL (https://www.youtube.com/watch?v=1I5i6NO6f7k).
  2. Select browse and navigate to the hi-res and mobile images. Required as alternative when the video cannot play.
  3. Complete the following:
    • Alt Text - add a description of the image. Required for screen readers and search engines
    • Visual Enhancement Overlay - select enable to add a filter to the news article if the image is low quality
    • Text Overlay Position & Width - select an option for the text box
    • Add Link (optional) - choose to add a link in the call to action style and complete the options
Add a silent video (CMS)

Text Overlay Options

Left Aligned

  • Select the left text position.
  • Overlay width (small 1/3, medium 1/2 and large 2/3 of hero). 
  • Add heading and sub text. 
  • Add an optional link.

Centered

  • Add heading and sub text.

Right Aligned

  • Select the right text position.
  • Overlay width (small 1/3, medium 1/2 and large 2/3 of hero). 
  • Add heading and sub text. 
  • Add an optional link.

None

  • Just the image displays, no text.



Caption

  • Add text for a caption. 
  • Captions are not visible when the hero fills the screen.