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
On sites using the Block Editor, 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.
On sites using the older Classic Editor, heroes can be added by choosing the Hero pictograph (
) from the editor’s toolbar. Use the editor dialogue to add content and adjust options. To edit the hero later, double-click the hero preview to show the editor dialogue again.