Using Timber
Menus & Blocks
Menus#
Menus is a WordPress-style editor. On the left you add items — pages, posts, forms, site links and custom links; on the right is the structure, which you drag into order.
- Nesting up to three levels gives you dropdowns.
- Mega menus: attach a Mega menu Block (any HTML panel) to an item and it opens on hover or click.
- Per-item options: open in a new tab, CSS classes,
rel, title attribute, description, hidden. - Audience: show an item to everyone, only signed-in users (admins, editors, read-only), or only visitors (handy for a "Edit this page" link).
- Built-in menus: Header, Footer quick links and Footer legal links. You can create, clone, rename and delete your own, and embed any menu anywhere with
[menu id="slug"].
Dropdown and mega-menu styles and behaviour are included automatically, only on pages whose menus use them.
Blocks#
Blocks (the Code Snippets screen) are reusable pieces of HTML, CSS and JavaScript. Think "Shortcoder + Simple Custom CSS & JS + Code Snippets", built in.
| Kind | What it does |
|---|---|
| Global | Inserts code on every page: in the <head>, right after <body> opens, or before </body>. Optionally limited to one version |
| Header / Footer | Replaces the theme's own header or footer — everywhere, only where the URL contains some text, or only on pages that pick it |
| Block | Reusable HTML for Builder pages. Edit it once, every page that uses it updates |
| Mega menu | A panel that opens from a menu item |
| Shortcode | Any block with a tag becomes [tag attr="x"] or [tag]inner[/tag] |
Variables inside blocks#
{{title}} is escaped, {{{title}}} is raw, {{title|Default}} has a fallback. Built-ins: {{site_name}}, {{site_url}}, {{year}}, {{version}}, and {{content}} for enclosed content.
Consent-aware scripts#
Mark a script's consent category (analytics, marketing, functional) and it won't run until the visitor agrees in the cookie banner. See Privacy & cookies.
System blocks#
Global CSS, Global Header and Global Footer are built in (stored with your Design settings). You can edit them here or in Design, and they can't be deleted.
Design → Theme and Styles#
- CSS library: none, Tailwind (browser build included) or Bootstrap — loaded on every page so you can use its classes in content and blocks.
- Page headers: give the title band of inner pages a background image, gradient, blend mode, height and alignment.
- Styles: a global stylesheet applied to every version (like WordPress's "Additional CSS").