Page and Template Designer
The designer is a visual canvas for laying out a page without writing HTML. There are two related ways in. Design page gives one page its own template file in your theme. The template designer opens any theme template on the same canvas. Both need the Basic or Pro plan to save: on Free the canvas opens read only and says “Basic and Pro can save canvas designs”.
Nothing on the canvas is live until you rebuild and deploy, the same as everywhere else. See Publishing and Custom Domains.
Design page
Open a page from the Pages list. Next to Preview there is a Design page button. It is hidden for pages in Tera template mode, because their source has to stay in the code editor. A page that already has its own template shows Edit design instead.
Pressing it does four things:
Make sure the theme is yours to change
A stock theme, or a blueprint that other sites also use, is never written to. WordPuppi asks “Design this page in a copy named …?” and, if you agree, forks the stock theme or copies the shared blueprint into a site blueprint named after the original with “this site” appended, and switches the site to it. Cancelling stops there and changes nothing. See Themes and Blueprints.
Create the page's template
The page gets its own file, templates/pages/<slug>.html, in that theme. It starts from the theme’s templates/wide.html, or templates/page.html if there is no wide template. Everything around the content block is kept. The content block itself becomes a full width wrapper holding the page title (when the page shows its title) and the page content. A page needs a slug first.
Point the page at it
Only the page’s Template is set. Its content and editor mode are not touched, so the body stays byte for byte what you wrote.
Open the template designer
You land on that template file on the canvas. Design it, then press Save template.
The Template select
The Edit Page form has a Template select. Default (page.html) uses the theme’s normal page template. The other options are the page templates the theme offers. You can pick one by hand without opening the designer. Once a page has a custom template, a Design preview frame shows the page rendered through it, with a reminder that the template wraps the content and Edit design changes the layout.
Custom and Standard files
The new template is a file you added, not one inherited from the theme, so in the blueprint’s file tree it sits under Custom Files. Standard Files are the ones inherited from the theme the blueprint was copied from. Those cannot be deleted, and a standard file you have changed is tagged edited. Both tabs show a Design on the canvas button beside each .html file; on a stock theme it is disabled with the hint to duplicate the theme first.
The template designer
The template designer edits one theme file on the canvas. The Tera tags in the file (loops, includes, conditions) appear as locked chips, so saving writes back the file’s own source with its tags intact.
- A template that extends another one only lets you edit what sits inside a
block. Colours and fonts stay in Fonts & Colors on the theme page. - If some tags sit somewhere the canvas cannot edit safely, those elements are locked and a note says how many, with the reason.
- Some files, such as a base layout, are too structural for the canvas. Opening one shows a toast with the reason and returns you to the code editor.
- A stock theme can be opened but only read: “This template ships with WordPuppi and can only be read.”
The toolbar above the canvas has Reload saved template, Save template, and the view switches: Desktop · 1200, Tablet · 820, Phone · 600, Light, Dark, Canvas, and Rendered preview. The rendered preview is a real preview build of your site. Saving rebuilds it and switches you to it.
A save that breaks the theme’s Tera parse is refused, and the parser’s own message is shown verbatim so you can find the line. The canvas keeps your edits when that happens. Styles you set on the canvas are saved into a block of the theme’s stylesheet that belongs to that template, right after the template itself.
Navigating away with unsaved canvas edits asks first.
Blocks and the canvas
The block panel offers the layout building blocks under Basic: 1 Column, 2 Columns, 3 Columns, and 4 Columns, then Text, Link, and Image. Rows and cells use the same classes as the other column blocks, so any theme rule that already targets a row keeps working.
Select something and right click for a small menu: Ask Baxter, Duplicate, Delete, Wrap in a div, Move up, and Move down. Selecting several elements works too. See Baxter AI for asking Baxter about a selection.
Theme colours show up as swatches above any colour field in the style panel, named after the theme’s --color-* variables. Pressing one applies var(--color-name), so the element follows the theme’s light and dark palettes instead of a fixed hex.
The site media picker
Dropping an Image block, or double clicking an image, opens a picker of the site’s own images, newest first. In the page designer, Add image in the toolbar uploads a new one into the Pages folder and adds it to the picker at once. The picker inserts the same media URL the built site serves, so the image works after a build.
Pages you designed in the page designer
Pages that were saved as a canvas design earlier show Mode: Canvas design and an Open in designer button. Their body belongs to the page designer, so the edit form only changes their metadata (title, slug, navigation switches). The page designer works like the template designer, with a few additions.
- Only the page’s content area is editable. The theme’s header, footer, and page title are locked.
- Save design stores the layout, and shows a Built preview (or Saved draft preview for a draft). A page that still holds Tera or form bindings that the canvas cannot represent is not opened; use its source editor.
- Theme variables is a collapsible panel listing the theme’s custom properties in four groups: Colours, Fonts, Widths, and Other, with a Light and a Dark column. Colours use the browser’s colour picker. Save theme variables stores your overrides in the site’s own stylesheet, so the theme files are not changed, and Reset to theme removes them. The count in the panel title tells you how many you have changed.
List blocks and field chips
The page designer can also put your content on the page. For every content type there is a list block, named “Posts list”, “Pages list”, and so on, plus Media list, and a set of field chips for that type’s fields (title, image, link, date, and so on). Drag a list block onto the page and it arrives with a ready made card: the first image, the title, and the summary. Chips only work inside a list block, because that is where an item exists.
The canvas shows up to six sample rows so you can see the layout. Sample rows are decoration only and are never saved. A selected list block has four settings:
| Setting | Effect |
|---|---|
| Entry | All entries, or one specific entry from a dropdown of the type’s rows. Picking one replaces sort and limit. |
| Sort field | Order the rows by one field, or Unsorted. |
| Direction | Ascending or Descending. |
| Limit | Show at most this many rows. |
A date chip also has a Date format setting (the default is %Y-%m-%d). Behind the scenes the canvas saves ordinary Tera, so nothing about the page is locked into the designer:
{% for item in posts | sort(attribute="title") | reverse | slice(end=3) %}
<h3>{{ item.title }}</h3>
{% if item.cover %}<img src="{{ item.cover }}" alt="">{% endif %}
{% endfor %}Image chips render as an image tag only when the field has a value, so an empty image field does not break the page.
Related
- Themes and Blueprints for forking, custom files, and which theme the build uses
- Baxter AI for asking Baxter to change a selection
- Media and Forms for the media library the picker reads from