> 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/the-builder-interface.md).

# The builder interface

Find your way around the builder before you start changing things.

The builder shows your Portal as visitors will see it, and you edit it in place. Selecting anything on the page brings up the controls for it.

## The sidebar

The rail down the left side opens the panels you work in.

| Panel        | What it holds                                                            |
| ------------ | ------------------------------------------------------------------------ |
| **Sections** | The sections on this page, in order. Drag to reorder, and add new ones.  |
| **Layout**   | How the page is arranged — navigation, page outline, widths and spacing. |
| **Style**    | Colours, typography and shape, for the whole Portal.                     |
| **Code**     | Your own CSS, when the Style panel doesn't go far enough.                |

At the bottom of the rail, **Settings** opens the Portal's settings and **Portals** takes you back to the list.

{% hint style="info" %}
On a gallery page every panel is disabled, and on a system page only **Sections** is — those pages take their look from the Portal rather than being arranged individually.
{% endhint %}

## The top bar

| Control             | What it does                                                                                                                               |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| **Page selector**   | Switches between the pages of the Portal, grouped into custom and system pages. Also where you add, edit, clone, archive and delete pages. |
| **Device**          | Previews the page at desktop, tablet, mobile and mobile-landscape widths.                                                                  |
| **Language**        | Switches which of the Portal's languages you are editing. Content is stored per language.                                                  |
| **Publish control** | Publishes, previews or discards — see below.                                                                                               |
| **Your avatar**     | Interface theme and language, and signing out.                                                                                             |

## Publishing from the builder

The button at the top right changes with the state of the Portal: **Publish portal** the first time, **Publish changes** once it is live and you have edited something, and **Preview page** when there is nothing pending.

Beside it, the eye opens a preview in a new tab, and the red icon discards everything unpublished. The caret holds the rest: **Update page**, **View portal**, **Unpublish portal**.

{% hint style="warning" %}
Nothing you change in the builder reaches visitors until you publish it. Until then they keep seeing the last published version.
{% endhint %}

## Editing on the page

Select a section to get its toolbar; select text inside it to get the [inline editor](/portals/building-a-portal/inline-editor.md). What you are editing is always the language and device width currently selected in the top bar — worth remembering when a change seems not to have landed.