# Page Builder

The Page Builder is the drag-and-drop editor for designing portal pages. You assemble pages from pre-built components — no coding. Each module in a workflow has its own page, and the Page Builder is where you lay it out.

## Opening the Page Builder

The Page Builder is reached from inside a workflow:

{% stepper %}
{% step %}

### Open the workflow

Workflow Builder in the sidebar → pick the workflow.
{% endstep %}

{% step %}

### Open the module

Click the module you want to edit.
{% endstep %}

{% step %}

### Open the editor

Use the option that opens the module's page in the Page Builder.
{% endstep %}
{% endstepper %}

## The editor interface

Three main panels plus a top bar.

### Left — Component palette

Lists every component available for the current module type, organised by category. Components are filtered by module type (Catalog blocks only appear in Catalog modules; Header Nav only in Header Navigation modules; etc.). Drag a component from the palette onto the canvas to add it.

### Centre — Canvas

A live preview of your page. Click a component to select it; drag to reorder; delete via the component's context menu.

### Right — Settings

When a component is selected, its settings appear here. Some components have a **Configure** button that opens a fuller settings window for advanced options.

### Top — Toolbar

The header has the **Publish** button. Publishing is an explicit action — your edits aren't visible to end users until you publish.

## A 5-minute first page

A simple dashboard:

{% stepper %}
{% step %}

### Layout

Drag a **Row** onto the canvas. This is the horizontal container.
{% endstep %}

{% step %}

### Heading

Drag a **Heading** into the Row. Type *Welcome to your dashboard*.
{% endstep %}

{% step %}

### A grid of cards

Below the Row, drag a **Grid** with 2 columns. Drop a **Card** into each column. Click each Card and set the title and content.
{% endstep %}

{% step %}

### A KPI strip

Below the Grid, drag a **Stats** block. Configure a few label/value pairs.
{% endstep %}

{% step %}

### An action

Drop an **Action Button** at the bottom. Set its label to *View Reports* and configure its action.
{% endstep %}

{% step %}

### Publish

Click **Publish** in the top bar. The page is now live.
{% endstep %}
{% endstepper %}

## Core concepts

### Nesting components

Layout blocks (Row, Column, Grid, Flex) act as containers — drop other blocks inside. You can nest them for richer layouts: a Grid with two Columns, each containing a Heading + Text + Action Button.

### Selecting components

Single click selects a component and shows its settings. Click the canvas background to deselect. For nested components that are hard to click, use the outline tree (when available).

### Configuration windows

Some components have complex options that open a separate window when you click **Configure**. Action Button, Order Lines, Catalog Display, and several others use this pattern. The window holds the depth; the panel stays clean.

### Publishing

Publishing is an explicit save. You can edit, preview the canvas, undo locally, and only publish when ready. After publishing the changes are immediately live for end users.

{% hint style="info" %}
There's no automatic version history — changes you publish replace the previous version. For risky edits, copy the workflow first and edit the copy, so you have a known-good copy to return to.
{% endhint %}

## Tips for new admins

* **Start with layout.** Place a Row, Column, or Grid first; drop content inside.
* **Check the module type.** Components are filtered by module type. If a component you expect isn't in the palette, the module type is probably wrong.
* **Browse by category.** The category hubs in the sidebar (Layout, Content, Action, Entity, Catalog, Product, Transaction, Report, Advanced) are the fastest way to find a block.
* **Test on mobile.** The end-user portal is responsive; verify your layout works at narrow widths before publishing.

## Related

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Common Patterns</strong></td><td>Recipes for the most common page types.</td><td><a href="/pages/nuIC9dFKJRLG7aUU3PNh">/pages/nuIC9dFKJRLG7aUU3PNh</a></td></tr><tr><td><strong>Layout &#x26; Responsive</strong></td><td>How layouts collapse on smaller screens.</td><td><a href="/pages/i16RUpMIJ1hqIym73t8h">/pages/i16RUpMIJ1hqIym73t8h</a></td></tr><tr><td><strong>Best Practices</strong></td><td>Production checklist before publishing.</td><td><a href="/pages/vAbsWdSLiwdLsG7BZSoq">/pages/vAbsWdSLiwdLsG7BZSoq</a></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.in8sync.com/client-admin-guide/active-workflows/getting-started.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.