• Adding a Hero to Your Page
• Hero Image Display Options
• Best Practices
• Video Files in the Hero Area or Masthead
• Image Size Recommendations

Adding a Hero to Your Page

1. Navigate to the page on which you want to add Hero Content. If that page doesn't exist, create a new page.
   
   
2. At the top of the page, you'll see the Hero Content Area. Click on the Add Hero Content button, and select Hero Image/Carousel.

Hero Image Display Options

1. The Hero Image/Carousel options box appears. Here you can add the image, choose the layout, and hide/show the hero using the various options.
   
   
   
   
   
2. To add a single image, click the Add Image button. You are prompted to either choose an image from your Media Library, or upload a new image. Remember - any image you use on your site should have appropriate Alt Text applied to it.
   
   
3. Once you have your image chosen, in the Hero Layout section, several options are presented.
   
   
   • Image Only - If you want to simply display the hero image by itself, leave radio button for Image Only selected.
     
     
   • Headline - If you would like to add a caption to the hero image, choose the Headline radio button. Several more options appear. To have the caption automatically populate from an existing page or post's excerpt field, click that slider. Otherwise, you can use the Headline Text field to insert a brief caption of up to 155 characters. You can also link to a site by clicking the Add a link? slider and inputting the appropriate URL.
     
     
   • Featured Content Inset - You can also add a Featured Content Inset, which creates a picture within the hero image with a caption and link as well. These options are similar to those in the Headline selection.
     
     
     
     
     
4. If you would like to create a Hero Carousel, click the Add Image/Carousel button. A new Hero Image section appears, with the same options for you to choose from.
   
   
5. To remove an image from the hero section, click the minus (-) sign in the right column of the hero section. To reorder the images in your carousel, click and drag the image's left numbered column to where you would like it to go.

Once you are finished with your hero image section, be sure to click the Publish or Update button to commit the changes.

Best Practices

• Hero content takes up a significant portion of your page and should be used with purpose. Most pages do not need a hero.
  
  
• The hero space is 1600 pixels wide and 500 pixels tall. Content that is less than 1600 pixels wide will not scale up and will appear at their maximum width rather than filling the full 1600 pixels. The same is true for content shorter than 500 pixels tall. This may create a "stretched" effect on your images, and reduce the quality of the image that you use.
  
  
• The Hero Carousel adjusts to your browser as well, so if you change your browser width, you’ll see that the image is sometimes positioned slightly differently in the window. It is set to put the center of the image in the center of the frame, so a good recommendation for choosing hero images is to avoid images with important information at the edges.
  
  
• It is recommended that for Hero Image Carousels, use no more than three images.
  
  
• PLEASE NOTE: The Hero Carousel does not automatically rotate. This is a theme decision to address accessibility concerns that a carousel element can create.

Image Size Recommendations

The following image size is recommended for hero banners: 1600 wide x 500 high in pixels.