> For the complete documentation index, see [llms.txt](https://docs.scaleflex.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.scaleflex.com/portals/building-a-portal/layout.md). # Layout Choose how a Portal's pages are arranged — navigation, outline and spacing. **Layout** decides the frame a page sits in: where navigation lives, whether there is a page outline, and how much room the content gets. It applies to the whole Portal unless you override it for one page. Open it from the **Layout** tab in the builder sidebar. It has two groups, **Structure** and **Spacing**.

The Layout tab in the builder sidebar, with its Structure and Spacing groups.

{% hint style="warning" %} Changes only reach visitors after you select **Publish changes**. {% endhint %} ## Structure ### Page structure **Page structure** is the frame. Select **Edit** to open the **Page structure** dialog and choose a preset, then **Apply**. | Preset | Navigation | Also has | | -------------------------------------- | -------------------- | ------------------------------------------------ | | **Top navigation** | A bar across the top | — | | **Sidebar** | A rail down the side | — | | **Header with Sidebar** | Top bar and a rail | — | | **Page outline** | A bar across the top | An outline of the current page | | **Header with Page outline** | Top bar | Page outline | | **Sidebar with Page outline** | A rail | Page outline | | **Header with Sidebar & Page outline** | Top bar and a rail | Page outline | | **… · split** variants | as above | The outline in its own column rather than nested | A sidebar suits a Portal with many pages a visitor moves between; a top bar suits a short, linear Portal. The page outline earns its place on long pages and gets in the way on short ones. ### Adjusting the parts Under the preset, four controls let you depart from it: | Control | Options | Notes | | ----------------- | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | | **Header** | On or off | Without a header, navigation lives in the sidebar. | | **Navigation** | **Top bar** · **Sidebar** | Where the Portal's page links sit. | | **Page outline** | **Left** · **Right** | Which side the current page's outline sits on. With a sidebar it can nest under the navigation instead of taking its own column. | | **Widgets panel** | On or off | A panel for widgets alongside the content. | Once the combination stops matching any preset, the structure is labelled **Custom**. A structure that includes the widgets panel carries a **+ widgets** badge. ### Customize layout for this page By default every page shares the Portal's layout — *changes apply to every page*. **Customize layout for this page** breaks one page out so it can differ: a landing page without navigation, say, or a long document with an outline when nothing else has one. The panel then reads *this page has its own layout, independent of the portal*. A page on its own layout stops following the Portal, so later changes to the Portal's layout won't reach it. Turning the override off asks **Reset to portal layout?** first, and restores the Portal's layout. ### Top banner on home page Puts a full-width banner above the layout. It appears only where it can be rendered — on the **home page**, and only on structures that have a sidebar — so you won't see the toggle anywhere else. ### Container width The maximum width of your content on large screens: **Medium (1280px)**, **Large (1536px)** or **Full width (100%)**, which stretches edge to edge. Offered only on multi-column structures; plain top navigation is full-width by definition. Wider is not better. Long lines of text are hard to read — Medium suits Portals that are mostly reading, Full width suits Portals that are mostly images. ### Column spacing The gap between the side panels — navigation, page outline, widgets — and the page content: **Tight (16px)**, **Default (24px)**, **Comfortable (40px)** or **Wide (56px)**. Offered alongside **Container width**, and for the same reason: plain top navigation has no side rail to space away from anything. Tight keeps a dense Portal compact and gives the content more room; wide puts air between the rail and the page, which helps when the two carry similar-looking content and start to read as one column. ## Spacing ### Vertical paddings This is not one value but the Portal's **spacing scale**. Five named steps — **Extra small**, **Small**, **Medium**, **Large** and **Extra large** — each map to a number, and every section picks a step rather than a raw measurement in [Section layout](/portals/building-a-portal/sections/section-layout-and-background.md). So changing **Medium** here re-spaces every section set to Medium, across the whole Portal, at once. That's the point of it: you tune the rhythm in one place instead of section by section. The values run from **2** to **64**, and the steps should stay in order — setting Small larger than Medium leaves sections spaced in a way nothing else in the Portal expects. **Reset** returns all five steps to their defaults, and is available once you've changed one. {% hint style="info" %} **Column spacing** sits in **Structure**, not here: it spaces the page's columns apart, while **Vertical paddings** spaces its sections down the page. {% endhint %}