Canvas Docs

Templates, Parts And Patterns

Canvas is a block theme, so the page content you write in the editor is only part of what a visitor sees. The rest comes from a template, which wraps your content, and from template parts, which the template shares with every other page. Patterns are different again: ready made arrangements of blocks you copy into a page. This page explains what each one is, where it is edited, and the Canvas specific twist that keeps you out of the Site Editor most of the time.

A page opens inside its template, so that wrapping is on the canvas while you edit instead of being something you meet on preview. Only the content stays editable there, which is what stops a stray click in the header changing every page on the site.

Templates Wrap Your Content

A template decides everything around the content: the width of the content area, whether a sidebar renders, how a single post or product is laid out. Canvas ships templates for pages, posts, archives, products, portfolio projects, events and more, and many of them exist in several layout variants.

You choose a template per page from the Template control in the page's settings sidebar. The variants have descriptive names, such as "Page - Flush Content", so pick the one whose name matches the layout you want rather than fighting a template with spacing controls. Templates themselves are edited under Appearance > Editor, in Templates, but treat that as surgery: a template edit changes every page that uses the template, which is exactly its point and exactly its risk.

Template Parts Are Shared Regions

A template part is a region several templates share, so it exists once and renders everywhere. Canvas registers five:

  • Header and Footer, the two ends of every page.
  • Page Title, the band between the header and the content that carries the heading, subtitle and breadcrumbs.
  • Sidebar and Sidebar Alt, the widget columns the sidebar templates place beside the content.

Here is the Canvas twist: these parts are mostly plumbing, not the design itself. The Header part renders whichever built header is assigned to the page, the Footer part renders the assigned Footer record, and the Page Title part renders whatever the page's Page Title Settings resolve to. So the everyday way to change the header is the Header Builder, not the Site Editor, and the everyday way to change the footer is a Footer record. Edit the parts directly (they are listed with the patterns in Appearance > Editor) only when you need to change the plumbing itself.

The Header and Footer parts draw with their real structure and styling on the canvas, so the header bar, the logo and the footer bands look in the Site Editor much as they do on the site. One limit is worth knowing before it looks like a fault: where a page uses a header built in the Header Builder or an assigned Footer record, the canvas shows the theme's template part rather than that record, because the record is swapped in as the page is served. Edit the record on its own screen, and confirm the result on the front end.

The Slider And Hero Slots

Every page template, every single post template and the blog home carry two Canvas blocks straight after the header: Page Slider and Hero. Each shows the record the page assigns, drawn exactly as the front end draws it, so a page you open in the editor opens with the same section a visitor gets. Page - Blank and Page - Landing render no header at all, so they carry neither.

Both start on This page's slider and This page's hero, which inherits whatever each page assigns in its own settings. Pick a record in the block's sidebar instead and the block becomes an embed of that one record, shown wherever the template is used. Either way the content still belongs to the record, so the sidebar carries Edit this slider or Edit this hero beside links to manage the records and add another, and editing happens on the record's own screen. A page that assigns neither shows a one line note in the block's place, which no visitor ever sees.

Sliders and Heroes cover the records themselves.

Patterns Are Starting Points

A pattern is a saved arrangement of blocks. Open the inserter, switch to the Patterns tab, and Canvas offers full headers, heroes, footers, content sections and more, with names such as "Header - Floating" or "Hero - Centered Full Viewport". Inserting a pattern copies its blocks into your page, and from that moment they are yours: edit them freely, and the pattern itself is unchanged.

That copy behaviour is the important difference from a template part. A part is a live reference, so editing it changes every page at once. A standard pattern is a one time copy, so editing the inserted blocks changes only that page. Synced patterns (the ones you create yourself under Appearance > Editor > Patterns with sync turned on) behave like parts: one edit, every copy updates.

Pitfalls

The boundaries between these three are where mistakes happen:

  • You edited a template to fix one page. Every other page on that template changed too. Undo it, and either switch the one page to a different template or make the change in the page itself.
  • You edited an inserted pattern and expected other pages to update. Standard patterns are copies, so they did not. If you need one arrangement maintained in one place, create a synced pattern and insert that instead.
  • The header or page title ignores your Site Editor edit. The part you edited is the wrapper; the content comes from the assigned Canvas record and the page's settings. Change the built header, the Footer record or the page's Page Title Settings instead.
  • The Site Editor shows a different header or footer from the site. A built header and a Footer record are assigned to the page and swapped in as it is served, so the canvas draws the theme's own template part in their place. Edit the record on its screen and judge it on the front end.
  • You cannot select the header or footer while editing a page. Only the content is editable inside a template, which is what keeps a page edit from reaching every other page. Open the header or footer record, or the template itself, to change what surrounds the content, and turn off Show template in the page's Template panel if you would rather edit the content on its own.

Continue with The Canvas Block Library for what goes inside the content area, or go straight to How To Build A Header to put this template part knowledge to work.

Was this page helpful?