Hero Content
The hero image area is a great way to create a more visually appealing page. This area can be enabled on any page, however it might not always be best. Reserve the hero image/video for site homepages, top level pages, or single page sites. Doing this can help establish a level of pages, letting the user know they are deeper into your site.
Use the available buttons and secondary text in the hero area for a secondary heading, short message, and to provide users with immediate actions they can take. This is a great way to inspire a user to register, sign up, contact, or whatever action is the main goal of that page.
Content Best Practices
Title
The hero section includes a title that is seperate from the normal Page Title. This title is displayed in bold, italics, and in a different font over the hero image. Use this title exactly like the page title to welcome the user to the page, often times you can use the same text as the page title unless you wish to abbreviate.
This field is shown as optional but we STRONGLY recommend that you include the title so that the hero area is not blank and consistent across all sites.
Description
The description is displayed below the title in the regular font. Use this area to relay extra information about the page or as a subtitle. For example a page about student activities and organizations could be titled "Enjoy WKU" and include a description such as "Engage in student activities and organizations"
Buttons
The buttons in this area can be used to provide a call to action or something that you want to inspire the visitors of your page to do. There are two optional buttons in the hero area. Use the red button style for your primary action, and the gray button for your secondary action. A good example of this would be a page titled "Work at WKU" having a primary button for "Apply Today", and a secondary button for "Benefits". This might inspire a user to get started applying immediately, or learn more about the benefits, both with the end goal of inspring the user to apply for employment.
Image Tips
Recommended Size
1200 x 650
Recommended Format
JPEG
Use Photographs not Graphics
Avoid using graphics, logos, branding, or images with text. Try to use photographs of content that is related to your page. For example a page related to commencement might use a photograph of a student in cap and gown or at the ceremony. Landscapes and photographs of campus often work the best for this area.
Darker Images Work Better
By default hero images are darkened 35%. When using a brighter image you may want to edit it to appear darker so that text displayed over it is more legible.
Keep Subjects in the Center
The hero image is attached to the background and covers the entire area. On mobile devices the area is much less wide. If your photograph contains subjects like people or something specific you wish to show on all screen sizes, keep the focus in the lower section and centered in the image. This ensures that on mobile devices your subjects still show. Consider using a photograph of campus or landscapes otherwise.
Use this hotspot as a guide for cropping images that focus on a specific subject.
This hero image is cropped so that the two subjects of the photo will always show, even on mobile devices.
Keep in mind that all areas of your image will not visible at all times. Due to the responsive behavior of the hero area the image is cropped to best cover the space on that computer or mobile device. There is overlap for areas like the main WKU navigation, as well as extra space for longer titles and multilined top navigations.
Blurring is a Great Technique
Using a photo editor you can apply a slight blur to your hero image. This makes it appear slightly out of focus and keeps the users attention to the content.
Compress Images
Large images can result in a large file size. To reduce your file's size and make your page load even quicker, consider using a file compression service such as tinypng.com.
Stock Images
A collection of hero images has been placed on the university share drive at: S:\\CUSTOM-SHARED\UNIVERSITY-PHOTOGRAPHY\Photos\_Web Hero Images
If you need help creating or finding specific hero content, contact Creative Web Services.
Need Assistance?
The WKU ITS Service Desk is here to help. Give us a call, chat with a representative online, use the Self-Help Knowledge Base and more.
Some of the links on this page may require additional software to view.