Use heroes to engage with the visitor and create the sense of desire. Hero images and videos should be aspirational. Your visitor should want to be the subject of the hero — or visit it, possess it, experience it, etc. Heroes are frequently used as introductions on prominent landing pages like a college’s front page, but can also be used to introduce sections in longer pages.
Overview
Here’s an example hero:
A hero must contain either an image or a video (looping videos work best). Videos need to be on YouTube or Vimeo in order to work. Heroes can also contain any combination of a title, a subtitle (or body text), and a button, but do not require any of these elements to function. The most effective heroes, however, generally include at least a title to provide viewers context and, where applicable, a button to drive action. For accessibility and responsiveness reasons, the hero image or video should not contain any text of its own.
Heroes can also display a caption and credit underneath them. This can be useful for providing additional context and attributing media to its creator. For captioning images, heroes can use the value of the caption field in the WordPress media library, if desired.
Adding a Hero
Heroes (
) can be added from the block library, under the Component Library section. Hero content can be edited directly, and options can be set in the sidebar.
How to Add a Hero
- Go to Your Dashboard
Log in to your WordPress dashboard. - Open Your Page
From the left-hand menu, click Pages.
Hover over the page where you’d like to add a hero, then click Edit. - Add the Hero Component
There are two ways to add a Hero:
- Option 1: Click the blue + button in the top left corner of the page editor.
- In the search bar, type “Hero” or locate it under the Component Library section.
- Click Hero to insert it at the top of your page (or wherever you’d like it to appear).
- Option 2: Click into the page and type a forward slash (/) on your keyboard.
- A dropdown menu will appear with available blocks and design components.
- Type “Hero” and select it from the list to quickly insert the component.
- Option 1: Click the blue + button in the top left corner of the page editor.
- Add a Hero Image or Video
Within the Hero block:- Click Add Image to upload a new photo, select one from the Media Library, or insert a URL to use an existing online image.
- If you’d like to use a video background instead, paste your video link (e.g., YouTube or Vimeo) into the Media URL field.
- Adjust Your Hero Settings
- Click the Hero component, then select the Settings (gear) icon in the top right corner.
- Click the Block tab.
- Under Format, adjust the sizing to your preferred layout: Default, Full Width, or Super.
- Modify the Image Focus area to ensure the most important part of your visual remains visible across all screen sizes.
- Add Your Hero Content
- Update the Title and Subtitle text directly within the Hero.
- Use clear, engaging language that introduces your department, program, or page focus.
- You can also add a Button block inside the Hero to direct users to another page or resource.
- Optional Adjustments
- Video Link: Replace the image with a background video by adding a video URL.
- Alternative Text: Add a short description in the Alternative Text box to support accessibility for users relying on screen readers.
- Aspect Ratio: Defaults to Original, maintaining natural proportions.
- Width and Height: Leave blank unless you need custom sizing.
- Resolution: Defaults to Large for clear, high-quality visuals.
- Caption: Add a caption for context or storytelling.
- Media Credit: Include credit when using licensed or external media.
- Save Your Changes
When you’re finished, click the Save button in the top right corner of the screen.