About this plugin
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
- Create a parent page, for example “Docs”.
- In the page settings on the right, open Template and choose “Docs Page”.
- Create child pages. For each one, set Parent to your parent page (Page Attributes) and set the Template to “Docs Page”.
- Add 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.
Patterns and callouts
- Patterns: click the + button, open Patterns, choose “Docs Layouts”.
- Callouts: select a Group block, open Styles and choose Docs Note, Docs Tip or Docs Warning.
Change the colors and sizes
Go to Settings > General and scroll down to the “Docs” fields:
- Docs brand color: a color code such as #17c996. Used for links and markers. Empty means your theme color.
- Docs left area width (px): width of the left menu. Default 240. Type 280 for a wider menu.
- Docs middle content max width (px): width of the article. Empty means it uses all the space between the two side columns. Type 800 for a narrower article.
- Docs right area width (px): width of the “On this page” column. Default 240.
- Single TOC position: Left or Right. For the Single TOC Layout only.
- Single TOC area width (px): width of the “On this page” area in the Single TOC Layout. Default 240. The content uses the rest.
Click Save Changes at the bottom, then refresh your page. To go back to the default, empty the field and save.
External services
This plugin does not connect to any external service. It sends no data anywhere, and the code examples in the Code Samples pattern are plain text only.