91×ÔÅÄÂÛ̳

A hero image is a web design term used to describe the full-screen video, photo, illustration, or banner that welcomes visitors to a webpage. The image always has a prominent place near the top of a webpage, usually extending across the full width of the screen. 

Example below at /students

• Hero images are typically reserved for index pages.
• Hero images are actually background images that stay the same size as media sizes change (example: phones, tablets, laptops, etc.)
• Hero images must be of good quality and cannot exceed 300KB in file size.
  Pixel size should be a minimum of 1960px wide and at least 800px in height.
• Image content should be centered as close as possible both horizontally and vertically to ensure the focus is seen on all media sizes.  Contact Stacey if you need assistance with your hero image.
• Descriptive text and button links can be added to enhance hero images or promote news or events.

Adding a Hero to your Page

If you have the proper permissions, you will see the following Header section on the Edit screen for the page you're working on.

• Expand the Header section.
• Activate the Hero Image by checking "yes".
• Choose your Image file (this must be uploaded to the CMS prior)

Adding Text and Links

• Check "Yes" if you'd like to add a text layer to your image.
• If yes, type in the headline.
• If you're linking to another page, type in the proper URL.
• Type in text for your button link.
• Add a short description/summary in the text editor.