Source: https://docs.amadalis.ai/composer/composer/

# The Composer: make page drafts, edit headlines and sections

Checked against the product’s code on 7 November 2026.

Learn how to make a page for a sale or edit an existing page in **[Composer](https://docs.amadalis.ai/reference/glossary/#composer)** in the site admin. Create a [draft](https://docs.amadalis.ai/reference/glossary/#draft), change its headline, remove sections you do not want or put words and a picture into two columns. Preview it before publishing. The sale page steps below use ordinary page creation with your own facts.

Before you start, open your site’s admin as described in [Getting started](https://docs.amadalis.ai/get-started/getting-started/#open-your-site). Your role must allow publishing to complete the final step; see [team roles](https://docs.amadalis.ai/account/your-team/).

The Composer lets you edit a preview of the page rendered by your site. Select a [section](https://docs.amadalis.ai/reference/glossary/#section) on the canvas, change it, then review the result. Applied page edits save to a draft.

![The Composer showing a selected Rich text section on a real page.](https://docs.amadalis.ai/images/owners/composer-selection.png)

The selected Rich text section has a purple outline. Check the section name before changing its fields.

## Find or create a page

1.  Open **Composer**. The chooser says **Choose a page to compose**.
2.  Open an existing page to edit it.

To create a page instead, follow [Make a page for a sale](https://docs.amadalis.ai/composer/composer/#make-a-page-for-a-sale) below. The same steps work for another purpose. **Create draft** starts the page with the chosen type’s starter sections; replace their words with your own facts.

Choose [Collection index](https://docs.amadalis.ai/composer/collection-index/) to start a page that lists an existing collection. Its [page type](https://docs.amadalis.ai/reference/glossary/#page-type) starts five basic sections; the designed page template and paged list preset are separate choices.

[![Composer's Choose a page to compose list filtered to Docs Walk, showing Docs Walk First Page as Published, with New page and Describe it to the Copilot.](https://docs.amadalis.ai/images/steps/S007-composer-page-chooser.png)](https://docs.amadalis.ai/images/steps/S007-composer-page-chooser.png "Open full-size image")

Every page opens from this chooser. Search, filter by status, or start a new page.

[![New page dialog with the title Docs Walk First Page typed, the page types filtered to How it works and that type selected, Create draft enabled.](https://docs.amadalis.ai/images/steps/S007-composer-new-page-dialog.png)](https://docs.amadalis.ai/images/steps/S007-composer-new-page-dialog.png "Open full-size image")

New page asks for a title and a page type.

### Who can see the draft

The status tells you who can see the page and whether its latest changes are public. A draft is not public; visitors keep seeing an existing published version while you work on later changes:

| Status | Meaning |
| --- | --- |
| **Draft** | Nothing of this page is on the public web. A page you took offline is a draft again. |
| **Published** | The published version is live, with no unpublished edits. |
| **Published · changes pending** | The published version stays live while your newer edits wait. |

A valid draft-preview link can show unpublished content. Keep preview links private.

Use **All pages** to return to the chooser. The page switcher lets you open another page.

### Make a page for a sale

1.  Open **Composer**.
2.  Choose **New page**.
3.  Enter the page’s **Title**.
4.  Choose a **Page type** with the sections you need.
5.  Choose **Create draft**.
6.  Edit the headline with the sale’s real facts.
7.  Edit the introduction.
8.  Give each button its intended destination.
9.  Repeat the text edit for each remaining section so it uses the sale’s real facts.
10.  Check the draft preview at desktop width.
11.  Check it at phone width.
12.  Choose **Publish**.
13.  Read the approval card.
14.  Confirm only when the page is ready.

If publication is refused, correct the named problem first.

The draft and the published page are separate. Creating the sale page does not publish it. If you need a product or checkout, follow [the store guide](https://docs.amadalis.ai/commerce/commerce/) for that separate setup.

If you saved a change and a colleague still sees yesterday’s words, check the page’s status. **Published · changes pending** means your saved edits are still in the draft. [Review and publish](https://docs.amadalis.ai/composer/composer/#review-and-publish) when they are ready.

Publishing changes to a live page saves them now. Visitors see this within the hour, usually much sooner. While the site’s server is down, visitors may see the previous version of a page for up to a day.

## Select and edit a section

To change a headline:

1.  Click the section that contains it on the canvas. Its outline and toolbar show what you selected.
2.  Choose **Edit text** when it is offered, or double click editable text.
3.  Change the headline.

[![Composer with the Hero headline being edited in place and Done and Revert beside the formatting controls.](https://docs.amadalis.ai/images/steps/S008-composer-text-editor-open.png)](https://docs.amadalis.ai/images/steps/S008-composer-text-editor-open.png "Open full-size image")

Edit text in place.

Press Escape to finish and apply an in place text edit to the draft. Use the formatting controls offered for that field. The [receipt](https://docs.amadalis.ai/reference/glossary/#receipt) provides **Undo** after the edit is applied.

In a narrow preview, the section bar shortens or hides extra labels before its controls wrap. The text editing bar can wrap too.

[![Hero section selected after the edit, showing its toolbar with Edit, Edit appearance and Undo.](https://docs.amadalis.ai/images/steps/S008-composer-text-saved-section-selected.png)](https://docs.amadalis.ai/images/steps/S008-composer-text-saved-section-selected.png "Open full-size image")

The edited section stays selected, with Undo available.

For the selected section’s other fields:

1.  Open **Settings**.
2.  Change the words, entries or layout you need.
3.  Choose **Apply changes** before leaving that selection.

A value you have only typed into the panel is not the same as an applied change.

[![Composer Hero settings with a subheadline, Primary CTA label Read the care guide, Primary CTA URL /care-guide and Apply changes.](https://docs.amadalis.ai/images/steps/S008-composer-settings-apply-changes.png)](https://docs.amadalis.ai/images/steps/S008-composer-settings-apply-changes.png "Open full-size image")

Review the button label and address before Apply changes.

The selected Hero’s editable fields are on the right, with Apply changes at the bottom of Settings.

[![Composer with a Button selected inside Layout, its /shipping-and-returns link in Settings and the text appearance panel open.](https://docs.amadalis.ai/images/steps/S008-composer-nested-element-selected.png)](https://docs.amadalis.ai/images/steps/S008-composer-nested-element-selected.png "Open full-size image")

Clicking an element inside a section moves the selection to that element.

## Add and arrange content

1.  Use the add control near the selected section to open **Add to the page**.
2.  Search with **Find anything to add**, or browse a kind your catalog offers, such as **Sections**, **Elements**, **[Patterns](https://docs.amadalis.ai/reference/glossary/#pattern)** or **Page templates**.

**If your catalog offers sections only:** its controls read **Add a section** and **Find a section** instead.

A section is a larger part of the page, such as a hero or a form. An element is a smaller item inside a layout, such as a heading, image or button. The picker lists the whole catalog and can mark items **Recommended for this page**. Elements go inside a column of a layout.

Use **Move up**, **Move down** or the drag handle to change a section’s order. **Move up** places the selected section higher on the page. An element inside a column has **Move up** and **Move down** but no drag handle. The toolbar offers duplication for a section and deletion for both. Read the confirmation before deleting an item.

[![The Rich text toolbar asking Remove? with confirm and cancel.](https://docs.amadalis.ai/images/steps/S011-composer-remove-confirm.png)](https://docs.amadalis.ai/images/steps/S011-composer-remove-confirm.png "Open full-size image")

Removing asks once more before it happens.

[![Composer insert menu open with Sections selected and Hero, Features and FAQ choices.](https://docs.amadalis.ai/images/owners/platform-composer-add-anything-insert-menu.png)](https://docs.amadalis.ai/images/owners/platform-composer-add-anything-insert-menu.png)

The insert menu on a company page. Choose a section before editing its content. [Open full size](https://docs.amadalis.ai/images/owners/platform-composer-add-anything-insert-menu.png).

[![Structure panel listing two Hero sections named Docs Walk: a first page, the second selected, then the Layout, Recommendations and Form.](https://docs.amadalis.ai/images/steps/S011-composer-duplicated-section-in-tree.png)](https://docs.amadalis.ai/images/steps/S011-composer-duplicated-section-in-tree.png "Open full-size image")

Duplicate puts a copy of the section right below it.

[![The copied Hero now listed after the Layout in the Structure panel, and the receipt Moved Hero down with Undo.](https://docs.amadalis.ai/images/steps/S011-composer-moved-section-receipt-with-undo.png)](https://docs.amadalis.ai/images/steps/S011-composer-moved-section-receipt-with-undo.png "Open full-size image")

Move up and Move down change a section's place, with Undo.

## Work with columns

1.  Select a layout that contains columns.
2.  Open **Columns** in its settings. The row diagram shows the columns and any unused space.
3.  Select a column in that diagram to edit it.

[![A draft Layout section with two columns and the Elements insert menu open in the first column.](https://docs.amadalis.ai/images/owners/platform-composer-sections-and-elements-layout-columns-insert.png)](https://docs.amadalis.ai/images/owners/platform-composer-sections-and-elements-layout-columns-insert.png)

Adding an element inside a Layout column on a draft page. [Open full size](https://docs.amadalis.ai/images/owners/platform-composer-sections-and-elements-layout-columns-insert.png).

Widths can differ for desktop, tablet and phone screens. A column’s width is its share of the row. Giving one column half the width does not add a second column. Add that column separately, then place content inside it.

[![Layout section settings: two columns, Column 1 set to Half on Desktop, with a note that a twelfth of the row is empty.](https://docs.amadalis.ai/images/steps/S009-composer-column-width-desktop.png)](https://docs.amadalis.ai/images/steps/S009-composer-column-width-desktop.png "Open full-size image")

Each column's width is set per device. Here Column 1 takes half the row on desktop.

[![Layout settings with Column 1 set to Full width on the Tablet tab.](https://docs.amadalis.ai/images/steps/S009-composer-column-width-tablet.png)](https://docs.amadalis.ai/images/steps/S009-composer-column-width-tablet.png "Open full-size image")

The tablet width, set separately.

[![Layout section settings with the Phone tab selected and Column 1 set to Full width.](https://docs.amadalis.ai/images/steps/S009-composer-column-width-phone.png)](https://docs.amadalis.ai/images/steps/S009-composer-column-width-phone.png "Open full-size image")

The Phone tab controls the column’s width on a phone.

[![The Button moved into column 2; the inspector lists column 2 with Image and Button.](https://docs.amadalis.ai/images/steps/S009-composer-moved-child-to-column-2.png)](https://docs.amadalis.ai/images/steps/S009-composer-moved-child-to-column-2.png "Open full-size image")

An element can move to another column.

Check the canvas at desktop, tablet and phone widths. The canvas and column controls use different names for the smallest width. At narrow window widths, the page toolbar wraps its control groups onto extra rows.

[![Published page at desktop width: the two-column Layout with text on the left and a button on the right, and a row of three page cards below.](https://docs.amadalis.ai/images/steps/S009-composer-public-two-columns-1440.png)](https://docs.amadalis.ai/images/steps/S009-composer-public-two-columns-1440.png "Open full-size image")

The Layout on the live page at desktop width.

[![Phone view with the shipping button below the Layout text and three page cards stacked underneath.](https://docs.amadalis.ai/images/steps/S009-composer-public-columns-stacked-390.png)](https://docs.amadalis.ai/images/steps/S009-composer-public-columns-stacked-390.png "Open full-size image")

On a phone the columns stack.

## Change appearance

Open **Appearance** for the selected item. It groups its controls under **Surface**, **Type** and **Space**. Surface holds background and text colour. Type holds text scale, font weight, line height, letter spacing and alignment. Space holds padding.

[![Background picker for the Layout section with theme roles, surface chosen, and a note that the text colour will follow to stay readable.](https://docs.amadalis.ai/images/steps/S010-composer-appearance-background-choice.png)](https://docs.amadalis.ai/images/steps/S010-composer-appearance-background-choice.png "Open full-size image")

Appearance offers your theme's colour roles.

[![Inspector Appearance tab: Surface with Background set to surface and Text colour suggested; a receipt reads Background and its paired text colour for Layout, with Undo.](https://docs.amadalis.ai/images/steps/S010-composer-appearance-applied.png)](https://docs.amadalis.ai/images/steps/S010-composer-appearance-applied.png "Open full-size image")

The change is saved to the draft with its own Undo.

[![Hero selected with the inspector's Appearance tab filtered to Type: Text scale reads lg, the other type settings read Theme default; the page shows Published, changes pending.](https://docs.amadalis.ai/images/steps/S010-composer-type-text-scale-changed.png)](https://docs.amadalis.ai/images/steps/S010-composer-type-text-scale-changed.png "Open full-size image")

Type settings for the selected section. Here the text scale is set to lg.

Here lg means the large text size for the selected section.

[![Section padding chooser open over the Hero, with theme steps 1 to 8 and section y, step 8 (4rem) selected, and Cancel and Apply.](https://docs.amadalis.ai/images/steps/S010-composer-space-padding-choice.png)](https://docs.amadalis.ai/images/steps/S010-composer-space-padding-choice.png "Open full-size image")

Space offers your theme's spacing steps, or your own value.

[![Composer Hero selected with Appearance, Space showing Padding 8, Published, changes pending and 2 changes this session.](https://docs.amadalis.ai/images/steps/S010-composer-space-and-type-applied.png)](https://docs.amadalis.ai/images/steps/S010-composer-space-and-type-applied.png "Open full-size image")

Padding 8 is applied; the page still has unpublished changes.

Prefer the theme’s named roles when they fit. That lets the site use a consistent set of colours and type choices. See [Themes and tokens](https://docs.amadalis.ai/composer/themes-and-tokens/) for changes to the whole site’s design.

## Use the page structure

1.  Open **Structure** to see the page as a tree.
2.  Select a section or an item inside it in the tree. It is selected on the canvas and scrolls into view.

Use this for items inside a layout or sections outside the visible preview.

[![Structure panel listing Hero and the Layout with Column 1 (Heading, Rich text) and Column 2 (Image, Button).](https://docs.amadalis.ai/images/steps/S011-composer-structure-tree.png)](https://docs.amadalis.ai/images/steps/S011-composer-structure-tree.png "Open full-size image")

Structure shows every section and element as a tree.

[![Rich text selected in the tree, and the same paragraph outlined on the page with its toolbar.](https://docs.amadalis.ai/images/steps/S011-composer-tree-selects-canvas-element.png)](https://docs.amadalis.ai/images/steps/S011-composer-tree-selects-canvas-element.png "Open full-size image")

Picking an item in the tree selects it on the page.

## Review and publish

Use **Open preview** for an unpublished page. When a page is already published, **View page** opens the published page and **Preview draft** opens your unpublished changes.

1.  Choose **Publish**, or **Publish changes** in the bar above a published page with pending edits.
2.  Read the approval card. It can name new or changed scripts, tracking and form recipients, along with sample copy and links to unpublished pages or missing places on this page. Review those notes before deciding.
3.  Choose the approval or decline action for your case in the table below.

The card can say that a form’s recipients, the live version or some links could not be read. Link warnings do not block publication and do not check outside sites or the shared menus and footer. Review the page yourself.

**If there is nothing new to publish:** **Publish** is unavailable when everything on the page is already live.

| What you are publishing | Approve | Decline |
| --- | --- | --- |
| A first publication | **Publish this page** | **Keep as draft** |
| Changes to a live page | **Publish the changes** | **Keep them unpublished** |

[![Publish this page? card naming Docs Walk First Page and its public address, with Publish this page and Keep as draft.](https://docs.amadalis.ai/images/steps/S012-composer-publish-card.png)](https://docs.amadalis.ai/images/steps/S012-composer-publish-card.png "Open full-size image")

The publish card.

The card names the page and its public address before you choose Publish this page or Keep as draft.

[![Composer with the receipt Kept as a draft. Nothing went live.](https://docs.amadalis.ai/images/steps/S012-composer-publish-declined.png)](https://docs.amadalis.ai/images/steps/S012-composer-publish-declined.png "Open full-size image")

Declining keeps the page a draft.

[![Published Docs Walk First Page receipt, with View page and Take it offline.](https://docs.amadalis.ai/images/steps/S012-composer-published-receipt.png)](https://docs.amadalis.ai/images/steps/S012-composer-published-receipt.png "Open full-size image")

After approval.

The page now has Published status, and the bottom receipt offers View page and Take it offline.

[![Public desktop page with Docs Walk: a first page, a Read the care guide button and the footer below.](https://docs.amadalis.ai/images/steps/S012-composer-served-page-1440.png)](https://docs.amadalis.ai/images/steps/S012-composer-served-page-1440.png "Open full-size image")

The served page.

The public page shows the approved heading and care guide button beneath the site header.

[![Public phone view with a menu button, Docs Walk: a first page, Read the care guide and the footer stacked vertically.](https://docs.amadalis.ai/images/steps/S012-composer-served-page-390.png)](https://docs.amadalis.ai/images/steps/S012-composer-served-page-390.png "Open full-size image")

The served page on a phone.

On the phone, the public header uses a menu button and the page’s heading and introduction wrap to fit the narrower screen.

### Why a page did not publish

Some problems stop publication before a card opens. Read the refusal, fix the named field or section, and try again.

The Composer names sections that still need your facts. Choose a name, fill its note or remove the section, then try again. Other sample words are named separately; their advisory note does not let a page with a facts note publish.

For saved versions from earlier sessions, use **History** beside **Layout**. It is separate from the session receipts below. See [Restore an earlier revision](https://docs.amadalis.ai/content/revisions/#choose-a-saved-version) for restoring a saved draft and its schedule limits.

Draft preview links belong to their own site. If the site’s preview signing key cannot be read, the Composer reports that the preview cannot be shown instead of opening an unsigned draft address. Keep preview links private.

## Undo or discard a change

1.  In the footer, open the change count, such as **3 changes this session**, to see this session’s history.
2.  Choose **Undo** on a recorded change to take that applied edit back. Each recorded change has its available action. An undone edit can offer **Redo**.

Script changes also enter this history and offer receipt **Undo** when available. If the canvas or Settings still show an undone value, reload and check the saved draft before editing again.

[![Receipt Undone: the headline of Hero is back to what it was, with Redo; the page reads Published again.](https://docs.amadalis.ai/images/steps/S013-composer-redo-after-one-undo.png)](https://docs.amadalis.ai/images/steps/S013-composer-redo-after-one-undo.png "Open full-size image")

After an Undo, Redo is offered.

[![Changes this session lists two text edits and one move, each with an Undo button.](https://docs.amadalis.ai/images/owners/platform-composer-how-it-works-show-changes-this-session.png)](https://docs.amadalis.ai/images/owners/platform-composer-how-it-works-show-changes-this-session.png)

The session history for a draft. Each listed change has its own Undo. [Open full size](https://docs.amadalis.ai/images/owners/platform-composer-how-it-works-show-changes-this-session.png).

A publish has a more specific way back. **Take it offline** reverses a first publication, returning the page to draft. Elsewhere, **Unpublish** does the same. The restore action reverses a later publish and leaves the newer edits unpublished. If the earlier version is no longer kept, it takes the page offline instead. This control acts at once, so read the receipt afterwards.

[![Composer Publish these changes? card with Publish the changes and Keep them unpublished, explaining Put the earlier version back.](https://docs.amadalis.ai/images/steps/S013-composer-publish-changes-card.png)](https://docs.amadalis.ai/images/steps/S013-composer-publish-changes-card.png "Open full-size image")

Publishing changes to a live page.

The approval replaces the version visitors see and names Put the earlier version back as the available reversal.

[![Receipt Published the changes, with View page and Put the earlier version back.](https://docs.amadalis.ai/images/steps/S013-composer-receipt-put-earlier-version-back.png)](https://docs.amadalis.ai/images/steps/S013-composer-receipt-put-earlier-version-back.png "Open full-size image")

The receipt of a later publish offers to restore the earlier version.

[![Receipt Put the earlier version back on the public web and kept your changes as unpublished changes; status Published · changes pending.](https://docs.amadalis.ai/images/steps/S013-composer-earlier-version-restored.png)](https://docs.amadalis.ai/images/steps/S013-composer-earlier-version-restored.png "Open full-size image")

The earlier version is live again and the newer words wait as a draft.

For a published page with unpublished work, **Discard changes** asks before removing that work. It leaves the live page in place. Read that confirmation before accepting it.

[![Discard these changes? The draft goes back to exactly what's live. With Discard changes and Keep editing.](https://docs.amadalis.ai/images/steps/S013-composer-discard-changes-confirm.png)](https://docs.amadalis.ai/images/steps/S013-composer-discard-changes-confirm.png "Open full-size image")

Discard asks before it throws away unpublished changes.

Page editing and copilot editing use the same recorded change path. If another change has made an action unsafe to repeat or undo, the platform can refuse it and explain why. Read the receipt before continuing.

## Your next step

Review the draft’s [search settings](https://docs.amadalis.ai/site/seo/), then check the published page at desktop and phone widths after you approve publication.