Page and section headings

Choose a template for your page banners and section titles, style them once for the whole site, and switch on breadcrumbs.

On this page
  1. Choose a template
  2. Template options and heading options
  3. Breadcrumbs
  4. Spacing

Your site has two heading blocks, and both are styled once in the Design editor so every page follows the same rules. The page heading is the title banner at the top of a page, above its sections. A section heading is the title block at the top of a single section. You switch each one on where it lives (page heading in Page options, section heading in that section's options), and you style them here.

Choose a template

Open the Design editor and pick Page Heading or Section Heading. The first control in each panel is Template.

There are seven page heading templates and six section heading templates. They are not variations of one layout: one centers the title, one splits the title and description into two columns, one is a single compact row, one frames the title in a box, one sets the title at poster size, one hangs it off a colored band, and one fills part of the screen. Section heading templates run from a plain stacked title to a numbered index, a running head and a vertical side label.

Each template decides where things sit, including the breadcrumbs. Switching template keeps everything you have already set.

Template options and heading options

The controls under the picker belong to the template you chose. Simple is the only page heading template with an Alignment control, because it is the only one that centers; the others set their own alignment. Likewise the Style and Stroke controls belong to the Simple section heading template, and templates such as Split, Plate, Poster and Cover each offer their own option instead. A template with nothing of its own shows nothing there.

Everything below that applies to whichever template is selected: Heading size and Heading weight, Description size and Description weight, the colors, and the spacing. Section headings add an Eyebrow label switch, which shows a small label above every section title. The label text itself is per section: click it in the page editor and type.

Tip: Leave a color empty to inherit your site palette. Set one only where the template's own color does not read well, for example over a page heading background color.

Switch Breadcrumbs on in the Page Heading panel to show visitors the trail to the page they are on, inside the banner. A normal page shows Home > Page name. A portfolio item or a blog post shows the section it belongs to as well, so a reader can step back to the listing in one click. Your homepage shows nothing, because it is already home.

Once it is on you can set the Separator between crumbs, whether the first crumb is the Home label you type or a house icon (Home item), and three optional colors. The Breadcrumb color recolors the whole trail, so set that first and use the other two only for a link or separator that needs to differ.

Spacing

Vertical padding sets the space above and below the page heading banner for the whole site, and Spacing below sets the gap under a section heading.

Warning: If you have dragged the dashed spacing bands around a page heading in the page editor, that page keeps its own spacing and ignores the site-wide Vertical padding. Drag the bands on that page to change it.

Changes here reach your live site when you click Update live site. See The Design editor.