Easy Move Docs Layout
Easy Move Docs Layout gives your pages a developer-documentation look: A left navigation list that shows the parent page and its child pages, with the current page highlighted. Groups with child pages have an arrow to expand and collapse them. The article with a title box: breadcrumbs, page title an
Easy Move Docs Layout gives your pages a developer-documentation look:
- A left navigation list that shows the parent page and its child pages, with the current page highlighted. Groups with child pages have an arrow to expand and collapse them.
- The article with a title box: breadcrumbs, page title and “Last updated” date.
- An “On this page” list on the right that follows your scroll.
- Tablet: sidebar and article. Phone: a menu button that opens the navigation drawer.
- Single TOC Layout on tablet and phone: an “On this page” button that opens the list in a popup.
- Links and markers use your theme color, or a color you choose.
- The layout matches the width of your theme’s header and footer.
It uses core blocks only. One small stylesheet and one small script load only on pages that use the layout. No libraries and no external requests.
Video guide, showing how to customize it:
Included
- Templates: Docs Page (navigation, article and “On this page”) and Single TOC Layout (article and one “On this page” list). Both work on block themes and classic themes.
- Patterns: Docs Page, Article Header, Callouts, Numbered Steps, Code Samples.
- Group block styles: Docs Note, Docs Tip, Docs Warning.
How to use
Make a documentation section
- 01Create a parent page, for example “Docs”.
- 02In the page settings on the right, open Template and choose “Docs Page”.
- 03Create child pages. For each one, set Parent to your parent page (Page Attributes) and set the Template to “Docs Page”.
- 04Add headings (H2 and H3) to the article. The “On this page” list is built from them.
Single TOC Layout (no documentation pages)
Use this for one long page or a blog post that only needs an “On this page” list. 1. Open the page or post. In the settings on the right, open Template and choose “Single TOC Layout”. 2. Add headings (H2 and H3). The list is built from them. 3. To move the list, go to Settings > General and set “Single TOC position” to Left or Right. Set “Single TOC area width (px)” to change its width. The content uses all the remaining space. 4. On tablets and phones, the list becomes an “On this page” button pinned below the header. Tap it to open the list in a popup, then tap a heading to jump there. The popup closes by itself.
