> 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/sections/working-with-sections.md).

# Working with sections

Add, reorder, rename, clone, hide and delete the sections on a page.

## Add a section

Open the **Sections** panel and select **Add section**. The library opens; browse or search it, then add the one you want. See the [Section library](/portals/building-a-portal/sections/section-library.md) for what each one is.

A newly added section arrives filled with sample content, which you then replace with your own. Which sample imagery you get depends on the [sample content brand](/portals/building-a-portal/sections/section-library.md) chosen in the library.

<figure><img src="https://2536208400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqsq2dR7Fjagf5eTifWZx%2Fuploads%2FJTLVSTcqGXk38KCTNaCa%2Fimage.png?alt=media&#x26;token=0910e6f9-b866-4b55-b7a0-bfee0386e4d4" alt="" width="375"><figcaption><p>The <strong>Sections</strong> panel, listing the page's sections above <strong>+ Add section</strong>.</p></figcaption></figure>

## Reorder

Drag sections in the **Sections** panel, or use **Move up** and **Move down** on a section's toolbar. Some sections don't move — the header, the footer and the sidebar banner are part of the Portal's frame rather than the page.

## The section toolbar

Selecting a section on the canvas brings up its toolbar.

<figure><img src="https://2536208400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqsq2dR7Fjagf5eTifWZx%2Fuploads%2FI3tZpZvw5L5BwrlCXMHi%2Fimage.png?alt=media&#x26;token=07eca5e4-5ec6-4228-aac5-26909c89fa7b" alt="" width="375"><figcaption><p>The toolbar that appears on a selected section.</p></figcaption></figure>

| Control                     | What it does                                                                                                              |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| **Variant**                 | Switches to another layout of the same section, keeping your content.                                                     |
| **Invert colors**           | Flips the section between light and dark against the rest of the page.                                                    |
| **Add background**          | Sets a colour, gradient or image behind the section.                                                                      |
| **Section settings**        | Opens [Section layout](/portals/building-a-portal/sections/section-layout-and-background.md) — width, padding, alignment. |
| **Move up** / **Move down** | Moves the section past its neighbour.                                                                                     |
| **…**                       | The options below.                                                                                                        |

## Section options

<figure><img src="https://2536208400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqsq2dR7Fjagf5eTifWZx%2Fuploads%2FD59nnQiifVu9xnJQjPP8%2Fimage.png?alt=media&#x26;token=1fbfc892-ac1a-49c0-b78c-67dc7a49ceb5" alt="" width="375"><figcaption><p>The <strong>…</strong> menu on a section's toolbar.</p></figcaption></figure>

| Option               | What it does                                                          |
| -------------------- | --------------------------------------------------------------------- |
| **Rename**           | Changes the section's name in the panel. Visitors never see it.       |
| **Clone**            | Duplicates the section, with its content and settings.                |
| **Add to favorites** | Saves it to your library so you can add it to another page or Portal. |
| **Hide** / **Show**  | Keeps the section on the page but out of the published Portal.        |
| **Revert styles**    | Puts the section's styling back to the variant's defaults.            |
| **Delete**           | Removes it.                                                           |

A hidden section stays visible to you in the builder, marked **Section is hidden**, with a **Show** button on it. Hiding is the safe way to take something down temporarily — nothing is lost, and you can put it back without rebuilding it.

<figure><img src="https://2536208400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqsq2dR7Fjagf5eTifWZx%2Fuploads%2F2axUzQfdPyx0RSgWQg8m%2Fimage.png?alt=media&#x26;token=87317d44-ae35-4162-b60d-1d2b46cfc273" alt="" width="341"><figcaption><p>A hidden section as it looks in the builder — still there for you, left out of the published Portal.</p></figcaption></figure>

{% hint style="info" %}
System sections — the sign-in and registration pages — have fewer options: they can't be cloned, hidden, favourited or deleted, because a Portal needs them.
{% endhint %}

## Favourites

**Add to favorites** saves a section with its content under a name of your choosing. It then appears in its own group at the top of the section library, ready to drop into another page. This is the quickest way to keep something consistent across Portals — a contact block, a set of downloads, a standard footer note.

<figure><img src="https://2536208400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqsq2dR7Fjagf5eTifWZx%2Fuploads%2F5Uh2pz0cRv0YWEIwYq1O%2Fimage.png?alt=media&#x26;token=c086f63b-e946-45d1-b8a5-3e0f914dfd42" alt="" width="375"><figcaption><p><strong>Favorites</strong>, in its own group at the top of the section library.</p></figcaption></figure>
