Heroes

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 small, beautiful place

Big thinking starts here

Begin

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.

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 (Hero block editor icon) 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 Visual Editor, heroes can be added by choosing the Hero pictograph (Hero WYSIWYG toolbar icon) 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.


Technical Details

Heroes can be implemented with the shortcode cl-hero.

[cl-hero headline="A small, beautiful place" vid="https://vimeo.com/377092097/13e9ce1d78"]

Attributes

img

(string) (optional)

The source URL for the hero image or, if vid is set, the poster image. In the case of video heroes, if no image is set, the YouTube or Vimeo poster image is used by default.

vid

(mixed) (optional)

Set the YouTube or Vimeo URL to create a video hero

(default value: none)

id

(string) (optional)

Set a unique id for the element

(default value: none)

format

(string) (optional) (values: super, fullwidth)

Specify the hero format

(default value: none)

animation

(string) (optional) (values: shift)

Set to animate an image hero; this will be ignored if vid is set.

(default value: none)

headline

(string) (optional)

The text for a headline

(default value: none)

subhead

(string) (optional)

The text for a subhead

(default value: none)

link

(string) (optional)

Set a URL to create a button.

(default value: none)

button

(string) (optional)

The text for the button

(default value: Explore)

use_caption

(bool) (optional)

Set to use the Media Library caption

(default value: false)

caption

(string) (optional)

Set caption text; this will override any Media Library caption if use_caption is set to true.

(default value: none)

credit

(string) (optional)

Set credit text

(default value: none)

tooltip

(string) (optional)

Set a tooltip for the button

(default value: none)

class

(string) (optional)

Set custom CSS class(es)

(default value: none)