Heroes

A hero is the tall opening section of a page: the full width banner with a headline, a background and a call to action that many designs lead with. In Canvas a hero is its own record, built once and assigned to pages, which is what lets three campaign pages share one hero and lets you redesign it in one place. A hero renders directly after the header and above the page title band, and since it usually replaces that band, the assignment panel includes the switch to hide it.

How To Create A Hero

Starting screenthe WordPress admin, Canvas›Heroes.

Choose Add New. A brand new, empty hero offers ready made starting layouts: Hero - Boxed Slider Image, Hero - Fullscreen Background, Hero - Split Showcase Panels and Hero - Video Background. Start from the one nearest your design, because a hero's markup is a complete section, and adjusting a working section is faster than composing one. From there it is ordinary block editing: swap the imagery, write the headline, restyle the buttons. More hero arrangements live in the pattern library under the Hero category, insertable from the Patterns tab of the inserter.

Unlike a header record, which supplies only the contents of a frame the theme draws, a hero record is the whole section: its outermost block is the section itself, carrying the height, background and spacing. Keep that in mind when editing structurally, and it will behave exactly like any other page section.

How To Assign It

Starting screenthe block editor, on the page that should open with the hero.

Open the Hero panel among the page's settings and set Hero for this page. The panel links straight to the assigned record with Edit this hero, and offers Hide page title on this page, which you will almost always tick, because a hero and a title band stacked together say the same thing twice. That checkbox is a shortcut for the Enable Page Title option in Page Title Settings; the two panels drive one switch.

The assignment shows up in the editor as well. Every page and single template carries a Hero block straight after the header, and it draws the assigned hero exactly as the front end draws it, so the page you edit opens the way a visitor will see it. Its sidebar links back to the record with Edit this hero, because the hero's content is still composed on the record itself, and a page that assigns no hero shows a one line note there that no visitor ever sees. Leave the block's Hero setting on This page's hero unless you want one template to always show one particular hero, which is what picking a record instead does.

Assigning a hero also gives a transparent header something to sit over, which is why the two are usually chosen together. A page that opens with a hero keeps the transparent header you set for it, while a page with nothing under the bar renders the header in its solid scheme instead, so a transparent site header stays legible on the plain pages in between. Header Options Per Page covers that safeguard in full.

There is deliberately no site wide default hero. A hero is a page opening statement, not chrome, so every assignment is a page's own decision, and a page without one opens with its title band as usual.

Pitfalls

Heroes share their slot with two other systems, and that is where the questions come from:

• The title band still shows under the hero. Tick Hide page title on this page in the Hero panel, or turn off Enable Page Title in Page Title Settings; they are the same switch.
• A slider and a hero both render. A page can carry both, and the order is fixed: the slider first, then the hero. The Hero panel warns you when a slider is also assigned. If you meant to replace the slider, remove its assignment.
• You expect a hero on every page after assigning one. Assignment is per page. Assign the same record to each page that should open with it; the sharing is the point, the automation is not there.
• The hero looks right in the editor but sits oddly on the page. Its root block is the section, so height and spacing live on that outermost block, not on a wrapper the theme owns. Check the root block's settings before reaching for custom CSS.

What To Read Next

The band a hero replaces is covered in Page Titles. The record type's reference is Heroes.