Canvas Docs

Building On Top Of A Demo

An imported demo is not a locked template: every piece of it is ordinary, editable Canvas content. Turning it into your site is a matter of replacing the demo's words, images and records with yours, and this page maps where each kind of edit happens and which habits keep the site easy to maintain, and easy to clean up if you ever remove the demo.

Where To Edit What

Everything the import created is edited exactly where hand-built content would be:

  • Pages open in the block editor. Replace the copy and images in place, because keeping the demo's blocks is what keeps the design.
  • Site chrome lives under its own menus: headers under Headers, footers under Footers, and so on. Editing the demo's header record changes it everywhere it is used, which is the point of it being a record.
  • Content records are replaced rather than restyled: swap the demo's Portfolio projects, Events, posts or products for your own, and the grids and listings that read from them update themselves.
  • Settings live in Canvas > Theme Options. After a site-wide import these hold the demo's values, and changing a colour or a font there restyles the whole site, exactly as it would on a site you built by hand.

After a site-wide import, a new blank page arrives already wearing the demo's header, footer and styles, because the import adopted them as the site defaults. The fastest way to add a page that matches the design is still to duplicate an imported page whose layout is close, then rewrite it.

Habits That Keep The Site Maintainable

A few practices cost nothing now and pay off later:

  • Duplicate before heavy surgery. When you are about to rebuild an imported page beyond recognition, duplicate it and rebuild the copy, so the original remains as a reference for how the design composed its blocks.
  • Prefer editing records over hardcoding. When a section lists projects, events or products, change the records, not the section. The demo built it that way so the content stays live.
  • Do not import the same demo again over your edits. A second import creates a second set of imported content alongside the first, and it will not merge with the pages you have changed. If a run went wrong, remove it first, then import fresh.
  • Look up design-scoped blocks before rebuilding them. A block you cannot find under Blocks in the reference belongs to the design, and is documented on that design's page in the Designs section, settings included.

Pitfalls

An edited page lost its design when moved to another site. Demo pages depend on the demo's stylesheet, fonts and design-scoped blocks being present. The content travels with WordPress export tools, but the design arrives only through the demo import.

Deleting a demo page broke a menu link. The demo's menus point at its pages. Unpublish or delete a page and its menu item points at nothing, so edit the menu in the same breath.

A record edit did not show up. Grids and listings read records by query, so check the record still matches what the block queries: its category, its status and, for events, its date.

Was this page helpful?