Key takeaways

In this module, you:

  • A page template controls far more than just visual appearance. It defines the overall structure, initial content, content policies, and layout of a new page — including which parts are editable by authors and which are fixed (like a shared header or footer), as well as which components are available in the editable content area.
  • The page editor has three main areas. The side panel (toggled on and off) contains the asset picker, component picker, and content tree. The page toolbar is always visible at the top and includes the side panel toggle, page information menu, emulator for different screen sizes, and the mode switcher. The editable content area is where you add and manage components on the page canvas.
  • In-place editing and the configure (wrench) icon are used for different situations. In-place editing lets you click directly into a component on the canvas to edit simple text — it's fast and convenient for quick changes. The wrench icon opens the component's full dialog box, which is where you go when you need to change settings, properties, or multiple fields beyond just the visible text.
  • The Style System lets authors transform a component's appearance without touching code. When a developer creates CSS styles and enables them in the template, a paintbrush icon appears in the component toolbar. Clicking it reveals a dropdown of available styles that can dramatically change the component's layout and presentation — for example, switching a teaser from a full-text layout to a card or featured layout — all without any access to code or templates.
  • Updating a template affects all pages ever created from it, not just new ones. If you change a fixed element — like a shared header or footer — that change will propagate to every page built from that template. This is why template changes should be made carefully, and why understanding the difference between fixed template content and editable content areas matters.