Source: https://docs.amadalis.ai/composer/layout-styles/

# Layout styles

Open a page in **Composer** in the site admin to change its layout and section presentation. This guide also points to the separate theme, site and menu controls for shared design changes.

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

Use [layout styles](https://docs.amadalis.ai/reference/glossary/#layout-style) to give a page a clear reading order. Add a label beside a section, put a picture beside its words, draw an index of links or give a long page an **On this page** rail.

## Find the right controls

1.  Open your page in [the Composer](https://docs.amadalis.ai/composer/composer/).
2.  Select the section you want to change.
3.  Open **Settings**.
4.  Search its fields if you need to find a control.

Words, entries and layout choices appear in their own groups.

For section fields, choose **Apply changes** and read the draft result and its **Undo**. The page’s **Layout** button works separately: choosing a layout saves it to the draft straight away.

A starter or an existing page may already have choices saved. The defaults below describe an unset choice. The [layout styles reference table](https://docs.amadalis.ai/reference/layout-styles/) gives the complete values and section lists.

On a library theme or a site that was not migrated, long section headings and button labels can wrap within narrow columns. A wide rich text table can scroll inside its own box. Check **Open preview**, or **Preview draft** on a published page, with your own words at phone width.

## Choose how a heading wraps

Select a section heading, card title or group title, then open **Heading wrap** in its styling controls. **Automatic** leaves line breaks to the browser. **Balanced** asks for even lines; **Pretty** asks the browser to avoid a lone word on the last line. Apply the choice to that heading and check the preview.

This is your choice for that heading, rather than a theme role. It applies across screen sizes and states. A browser without support keeps its normal wrapping.

## Choose how many steps share a row

For **Timeline / steps**, set **Layout** to **Numbered steps** in section **Settings**, then choose **Steps per row**. **Automatic** fits the available width; **2 per row**, **3 per row** and **4 per row** choose equal columns on wide screens. Tablets and phones still wrap to fit. Apply the section change to save it to the draft.

## Add a section label

In **Settings**, open **Words**.

1.  Fill **Section number** with your own words if you want a number.
2.  Fill **Section label** with your own words if you want a label.

Either can stand alone. Both start empty.

[![Features Words settings show Section number and Section label empty.](https://docs.amadalis.ai/images/steps/S107-p5-section-label-empty.png)](https://docs.amadalis.ai/images/steps/S107-p5-section-label-empty.png "Open full-size image")

Leave these fields empty to omit the section label.

[![Composer Features settings show Section number 01 and Section label Review, with both drawn beside the heading.](https://docs.amadalis.ai/images/steps/S107-p5-section-label-saved.png)](https://docs.amadalis.ai/images/steps/S107-p5-section-label-saved.png "Open full-size image")

Write the number and label you want beside the section.

On a wide screen the label stands in a narrow column beside the section’s heading and body. The label uses capitals and the theme’s monospace font, whose characters have equal width. The number stands above it in italic heading type. Below 1024 pixels, they move to one line above the heading.

On a site that was not migrated, the label keeps its start edge even when the section’s words are centred.

[![The draft preview places 01 and REVIEW in a narrow column beside the Features words.](https://docs.amadalis.ai/images/steps/S107-p5-section-label-wide.png)](https://docs.amadalis.ai/images/steps/S107-p5-section-label-wide.png "Open full-size image")

The number and label share a column beside the section.

[![At 1024 pixels, 01 and REVIEW remain in a left column beside the Draft review heading.](https://docs.amadalis.ai/images/steps/S107-p5-section-label-tablet.png)](https://docs.amadalis.ai/images/steps/S107-p5-section-label-tablet.png "Open full-size image")

Check the label at the layout boundary as well as desktop width.

[![At phone width the number and label sit on a line above the Features heading.](https://docs.amadalis.ai/images/steps/S107-p5-section-label-phone-390.png)](https://docs.amadalis.ai/images/steps/S107-p5-section-label-phone-390.png "Open full-size image")

The label moves above the words on a narrow screen.

[![Features Words settings with Section number and Section label empty and no label column on the canvas.](https://docs.amadalis.ai/images/steps/S107-p5-section-label-undone.png)](https://docs.amadalis.ai/images/steps/S107-p5-section-label-undone.png "Open full-size image")

Undo puts this section back without its label.

These fields are offered on Hero, Features, Testimonials, Gallery, Video, Pricing, FAQ, Call to action, Rich text, Form, Stats, Logo cloud, Image & text, Footer CTA, Team, Timeline / steps, Comparison table, Newsletter signup, Blog teaser, Layout, Recommendations, Live list and Services.

## Choose a Stage band

On **Footer CTA** and **Banner**, the field is named **Tone**. On the other supported types, use **Band tone**.

1.  In **Settings**, open **Layout**.
2.  Open **Band tone**, or **Tone** on Footer CTA and Banner.
3.  Choose **Stage (near black, with glow)**.

Stage draws a dark background, a soft glow and light text. Buttons and cards use the theme’s Stage colours. It is offered on Hero, Features, Testimonials, Pricing, Call to action, Stats, Image & text, Footer CTA, Banner and Layout.

Stage is never chosen by an empty field. The usual default remains: page background for most types, **Subtle surface (default)** for Testimonials, **Style default** for Call to action, **Primary band** for Footer CTA and **Accent** for Banner.

To change Stage colours across the site:

1.  Open **Site**.
2.  Open **Catalogs**.
3.  Open **Themes**.
4.  Choose **Edit** for the intended theme.
5.  Open **Colors**.

The **Stage band** group offers **Stage ground**, **Stage card**, **Stage line**, **Stage text**, **Stage muted**, **Stage heading**, **Stage accent**, **Stage accent text** and **Stage glow**. Empty rows use the theme’s derived colours. Review the theme preview before saving or activating a theme.

## Put a picture beside the words

On a supported section, choose **Picture beside the words** from your media library. The empty default keeps the section’s usual layout.

[![Features settings with Picture beside the words empty (Not set) before choosing a library picture.](https://docs.amadalis.ai/images/steps/S110-p5-picture-empty.png)](https://docs.amadalis.ai/images/steps/S110-p5-picture-empty.png "Open full-size image")

An empty picture field keeps the usual section layout.

[![The media picker, searched for docs-walk-p5-picture, has the neutral Docs Walk drawing selected for the Features section.](https://docs.amadalis.ai/images/steps/S110-p5-library-picture-selected.png)](https://docs.amadalis.ai/images/steps/S110-p5-library-picture-selected.png "Open full-size image")

Choose the picture from the media library.

[![Features Words settings show the chosen drawing with its picture description and caption.](https://docs.amadalis.ai/images/steps/S110-p5-picture-description-and-caption.png)](https://docs.amadalis.ai/images/steps/S110-p5-picture-description-and-caption.png "Open full-size image")

Give the section’s picture its own description and caption.

| Field | What to choose | Default |
| --- | --- | --- |
| **Picture description (alt text)** | Describe what the picture conveys, within the stated 500 character limit. Leave it empty for a decorative picture. | Empty |
| **Picture caption** | A line under the picture. | Empty |
| **Picture side** | **Right** or **Left**. | **Right** |
| **Picture frame** | **None**, **Screen**, **Dark stage** or **Light**. | **None** |
| **Picture width** | **Even** shares the row equally. **Wide** gives the picture more room. **Narrow** makes a slim picture column. | **Even** |
| **Heading place** | **Above both columns**, or **Beside the picture, over the words**. | **Above both columns** |

[![Features Layout settings show Right, None, Even and Above both columns for the chosen picture.](https://docs.amadalis.ai/images/steps/S110-p5-picture-layout-defaults.png)](https://docs.amadalis.ai/images/steps/S110-p5-picture-layout-defaults.png "Open full-size image")

Review the picture’s starting side, width, frame and heading position.

[![Picture side is Left, Picture width is Wide and Heading place is Beside the picture, over the words; the canvas, zoomed to 50 percent, shows the wide picture on the left and the heading over the cards on the right.](https://docs.amadalis.ai/images/steps/S110-p5-picture-left-wide-heading.png)](https://docs.amadalis.ai/images/steps/S110-p5-picture-left-wide-heading.png "Open full-size image")

These choices change the arrangement without changing the picture.

[![Picture width is set to Narrow for the chosen section picture, and the canvas shows the narrow picture beside the words.](https://docs.amadalis.ai/images/steps/S110-p5-picture-width-narrow.png)](https://docs.amadalis.ai/images/steps/S110-p5-picture-width-narrow.png "Open full-size image")

Narrow gives the picture a smaller share of the row.

**Screen** adds a window bar with three dots, a border and a shadow. **Dark stage** puts the picture on a dark panel with a glow. **Light** adds a thin border and soft shadow. **None** adds no frame.

[![The draft preview shows the neutral picture beside the words with no frame: no edge and no window bar, only its rounded corners and a soft shadow.](https://docs.amadalis.ai/images/steps/S110-p5-picture-frame-none.png)](https://docs.amadalis.ai/images/steps/S110-p5-picture-frame-none.png "Open full-size image")

None adds no frame around the picture.

[![Draft preview with the Docs Walk drawing in a window frame with three dots above and a caption below.](https://docs.amadalis.ai/images/steps/S110-p5-picture-frame-screen.png)](https://docs.amadalis.ai/images/steps/S110-p5-picture-frame-screen.png "Open full-size image")

Screen adds a window frame around the picture.

[![Draft preview with the Docs Walk drawing and its caption inside a dark rounded panel.](https://docs.amadalis.ai/images/steps/S110-p5-picture-frame-stage.png)](https://docs.amadalis.ai/images/steps/S110-p5-picture-frame-stage.png "Open full-size image")

Dark stage puts the picture on a dark panel.

[![Draft preview with the Docs Walk drawing inside a thin rounded border, with its caption beneath and a soft shadow.](https://docs.amadalis.ai/images/steps/S110-p5-picture-frame-light.png)](https://docs.amadalis.ai/images/steps/S110-p5-picture-frame-light.png "Open full-size image")

Light adds a restrained edge around the picture.

The full group is offered on Features, Testimonials, Pricing, FAQ, Rich text, Stats, Logo cloud, Footer CTA, Team, Timeline / steps, Comparison table, Newsletter signup, Blog teaser, Recommendations and Live list.

**Image & text** has its own picture controls and also offers **Picture frame**. Use those existing controls for its picture. The full picture group above is a separate choice on the listed types.

[![Image & text settings show its own Picture frame set to Screen, and the canvas draws the section’s starter placeholder picture inside a Screen frame.](https://docs.amadalis.ai/images/steps/S110-p5-image-text-frame.png)](https://docs.amadalis.ai/images/steps/S110-p5-image-text-frame.png "Open full-size image")

Image & text has its own picture controls.

On a phone the picture and words stack. A left picture comes before the words; a right picture follows them. Check **Open preview** at the widths your readers use.

[![At phone width the left picture, in a Screen frame, appears above the section’s words.](https://docs.amadalis.ai/images/steps/S110-p5-picture-left-stack-390.png)](https://docs.amadalis.ai/images/steps/S110-p5-picture-left-stack-390.png "Open full-size image")

A left picture comes before the words when the columns stack.

[![At phone width the right picture, in a Screen frame, appears after the section’s words.](https://docs.amadalis.ai/images/steps/S110-p5-picture-right-stack-390.png)](https://docs.amadalis.ai/images/steps/S110-p5-picture-right-stack-390.png "Open full-size image")

A right picture follows the words when the columns stack.

## Add rules to a Hero

A Hero created from the catalog offers two choices in **Settings**:

| Field | Choice that draws the rule | Default |
| --- | --- | --- |
| **Label rule** | **A short rule before the label** | **None** |
| **Lede rule** | **A rule between the headline and the subheadline** | **None** |

The label rule needs the Hero’s **Eyebrow** words. The lede rule needs its **Subheadline**. A Hero that keeps an imported design keeps that design’s own structure.

[![Hero Words settings show Label rule and Lede rule both set to None, with the supplied eyebrow, headline and subheadline on the canvas.](https://docs.amadalis.ai/images/steps/S116-p5-hero-rules-none.png)](https://docs.amadalis.ai/images/steps/S116-p5-hero-rules-none.png "Open full-size image")

Both rules are optional.

[![The draft Hero has a short line before DRAFT REVIEW while no line separates the headline and subheadline.](https://docs.amadalis.ai/images/steps/S116-p5-hero-label-rule.png)](https://docs.amadalis.ai/images/steps/S116-p5-hero-label-rule.png "Open full-size image")

The label rule needs the Hero’s label words.

[![The draft Hero has a line between its headline and subheadline, with no label rule.](https://docs.amadalis.ai/images/steps/S116-p5-hero-lede-rule.png)](https://docs.amadalis.ai/images/steps/S116-p5-hero-lede-rule.png "Open full-size image")

The lede rule separates the heading from its supporting words.

[![Hero draft preview with a short line before DRAFT REVIEW and another between Compare the same words and its supporting sentence.](https://docs.amadalis.ai/images/steps/S116-p5-hero-both-rules.png)](https://docs.amadalis.ai/images/steps/S116-p5-hero-both-rules.png "Open full-size image")

Use either rule alone or both together.

[![Phone Hero preview with a line before DRAFT REVIEW and another between the wrapped heading and supporting words.](https://docs.amadalis.ai/images/steps/S116-p5-hero-both-rules-390.png)](https://docs.amadalis.ai/images/steps/S116-p5-hero-both-rules-390.png "Open full-size image")

Check the lines with the words at phone width too.

[![Hero Words settings with Label rule and Lede rule both None.](https://docs.amadalis.ai/images/steps/S116-p5-hero-rules-undone.png)](https://docs.amadalis.ai/images/steps/S116-p5-hero-rules-undone.png "Open full-size image")

Undo restores the Hero without these rules.

## Make an index of links

On **Features**, open **Index list** in the entries. An empty list keeps the section’s normal cards.

[![Features has an empty Index list (0 entries, + Add line) and still shows its ordinary cards.](https://docs.amadalis.ai/images/steps/S114-p5-index-empty.png)](https://docs.amadalis.ai/images/steps/S114-p5-index-empty.png "Open full-size image")

An empty Index list leaves the section’s normal cards in place.

For each entry, **Entry shows as** chooses **Group (a number, a name and a line)** or **Link row (one link under the group above)**. An unset entry is read as a group.

For a group:

1.  Fill **Group number**.
2.  Fill **Group name**.
3.  Fill **Group line**.

For each link row:

1.  Fill **Link words**.
2.  Set its destination in **Link**.
3.  Fill **Room line**.

These fields start empty. Each link belongs to the group above it. A link before the first group still draws, without a group heading.

[![Index list entry form with Group selected and Group number 01, Group name Edit and Group line Work on the draft filled.](https://docs.amadalis.ai/images/steps/S114-p5-index-group-fields.png)](https://docs.amadalis.ai/images/steps/S114-p5-index-group-fields.png "Open full-size image")

Start a group with its number, name and short line.

[![Features Index list entry fields with Link words and Room line empty, Link Not set and Choose a page or file available.](https://docs.amadalis.ai/images/steps/S114-p5-index-other-child-fields.png)](https://docs.amadalis.ai/images/steps/S114-p5-index-other-child-fields.png "Open full-size image")

The entry also carries the words, destination and room line for a link row.

[![Index list link row form with Care guide as the link words, the Care Guide page as its destination and Read the next step as the room line.](https://docs.amadalis.ai/images/steps/S114-p5-index-link-fields.png)](https://docs.amadalis.ai/images/steps/S114-p5-index-link-fields.png "Open full-size image")

A link row belongs to the group above it.

The index draws ruled link rows in the section’s **Columns**, whose choices are **2**, **3** and **4**. The normal starter uses three columns. Groups stay together. On a phone they form one column in the order you wrote them.

[![Three authored groups and their ruled links appear in three columns in the draft preview.](https://docs.amadalis.ai/images/steps/S114-p5-index-three-columns.png)](https://docs.amadalis.ai/images/steps/S114-p5-index-three-columns.png "Open full-size image")

The section’s Columns choice arranges the groups.

[![Phone preview with Edit, Read and Review stacked in that order, each followed by a Care guide link.](https://docs.amadalis.ai/images/steps/S114-p5-index-phone-390.png)](https://docs.amadalis.ai/images/steps/S114-p5-index-phone-390.png "Open full-size image")

The groups keep their written order when the columns stack.

[![The same index groups are arranged in two columns after changing Columns to 2: 01 Edit on the left, 02 Read and 03 Review on the right.](https://docs.amadalis.ai/images/steps/S114-p5-index-two-columns.png)](https://docs.amadalis.ai/images/steps/S114-p5-index-two-columns.png "Open full-size image")

Change the column choice to compare the arrangement.

[![Draft preview with Edit, Read and Review in three ruled columns, each with a Care guide link.](https://docs.amadalis.ai/images/steps/S114-p5-index-columns-undone.png)](https://docs.amadalis.ai/images/steps/S114-p5-index-columns-undone.png "Open full-size image")

Undo restores the earlier column choice.

## Draw facts as ruled rows

On **Stats**:

1.  Open **Layout**.
2.  Choose **Facts list**.

Each fact’s label comes first and its value stands beside it. Other Layout choices remain **Centered (default)**, **Heading left, numbers right** and **Compact proof strip**.

[![Stats Layout has Centered (default) selected in the section settings.](https://docs.amadalis.ai/images/steps/S115-p5-stats-centered-choice.png)](https://docs.amadalis.ai/images/steps/S115-p5-stats-centered-choice.png "Open full-size image")

Centered is the usual arrangement for the figures.

[![Stats Layout has Heading left, numbers right selected in the editor.](https://docs.amadalis.ai/images/steps/S115-p5-stats-heading-left-choice.png)](https://docs.amadalis.ai/images/steps/S115-p5-stats-heading-left-choice.png "Open full-size image")

The selected heading arrangement is ready to apply.

[![Stats Layout has Compact proof strip selected in the editor.](https://docs.amadalis.ai/images/steps/S115-p5-stats-strip-choice.png)](https://docs.amadalis.ai/images/steps/S115-p5-stats-strip-choice.png "Open full-size image")

The selected strip choice is ready to apply.

[![Stats Layout has Facts list selected before applying the draft change.](https://docs.amadalis.ai/images/steps/S115-p5-stats-facts-choice.png)](https://docs.amadalis.ai/images/steps/S115-p5-stats-facts-choice.png "Open full-size image")

Choose Facts list for ruled label and value rows.

[![The draft Stats section displays First check beside 01 and Second check beside 02 as ruled fact rows.](https://docs.amadalis.ai/images/steps/S115-p5-facts-list.png)](https://docs.amadalis.ai/images/steps/S115-p5-facts-list.png "Open full-size image")

A Facts list puts each label beside its value.

**Place** appears for a Facts list. Its default is **In its own band (default)**. Choose **Beside the hero above** to place it with the Hero immediately before it.

For a Hero created from the catalog, with **Left** layout and no picture, the facts sit beside the Hero’s words on a wide screen. They move underneath on narrower screens. A centered Hero or a Hero with a picture keeps the facts under its words. Without a suitable preceding Hero, the facts stay in their own band. The facts stay separate when part of the page is withheld, or when the Hero or Stats section is a [slot](https://docs.amadalis.ai/reference/glossary/#slot) whose content is selected for the visitor.

[![Stats Place list open with In its own band (default) selected and Beside the hero above available.](https://docs.amadalis.ai/images/steps/S115-p5-facts-place.png)](https://docs.amadalis.ai/images/steps/S115-p5-facts-place.png "Open full-size image")

Choose where the facts stand in relation to the preceding Hero.

[![The fact rows stand beside the words of the preceding Left Hero with no picture.](https://docs.amadalis.ai/images/steps/S115-p5-facts-beside-hero.png)](https://docs.amadalis.ai/images/steps/S115-p5-facts-beside-hero.png "Open full-size image")

An eligible Hero can share its row with the following facts.

[![At 1181 pixels, Review the draft remains on the left with two ruled fact rows on the right.](https://docs.amadalis.ai/images/steps/S115-p5-facts-beside-hero-boundary.png)](https://docs.amadalis.ai/images/steps/S115-p5-facts-beside-hero-boundary.png "Open full-size image")

Compare the paired result before the narrower layout.

[![At 1024 pixels the facts sit under the Hero’s words, as two cells side by side.](https://docs.amadalis.ai/images/steps/S115-p5-facts-tablet.png)](https://docs.amadalis.ai/images/steps/S115-p5-facts-tablet.png "Open full-size image")

The facts move under the Hero as the available width narrows.

[![Phone preview with Review the draft above two ruled rows: First check 01 and Second check 02.](https://docs.amadalis.ai/images/steps/S115-p5-facts-phone-390.png)](https://docs.amadalis.ai/images/steps/S115-p5-facts-phone-390.png "Open full-size image")

On a phone the facts follow the Hero’s words.

[![Draft preview with First check 01 and Second check 02 in a ruled list below Review the draft.](https://docs.amadalis.ai/images/steps/S115-p5-facts-place-undone.png)](https://docs.amadalis.ai/images/steps/S115-p5-facts-place-undone.png "Open full-size image")

Undo restores the facts’ earlier placement.

For the other Stats layouts, **Style** offers **Plain (default)** or **Stat cards**. A Facts list uses its ruled rows.

[![With Centered layout applied, Stats Style is set to Plain (default).](https://docs.amadalis.ai/images/steps/S115-p5-stats-plain-style.png)](https://docs.amadalis.ai/images/steps/S115-p5-stats-plain-style.png "Open full-size image")

The other layouts keep their separate Style choice.

[![With the same Centered layout, Style is set to Stat cards and the figures sit in cards.](https://docs.amadalis.ai/images/steps/S115-p5-stats-card-style.png)](https://docs.amadalis.ai/images/steps/S115-p5-stats-card-style.png "Open full-size image")

Stat cards adds cards around the figures.

## Give an article a side rail

1.  Open the page’s **Layout** button.
    
2.  In **Page layout**, choose **Article with an On this page rail**. The other choice, **Standard (default)**, keeps the normal sequence of sections.
    
    [![Page layout offers Standard and Article with an On this page rail, with Standard selected.](https://docs.amadalis.ai/images/steps/S111-p5-standard-layout.png)](https://docs.amadalis.ai/images/steps/S111-p5-standard-layout.png "Open full-size image")
    
    Standard keeps the usual sequence of sections.
    
3.  Read the draft receipt. Use its **Undo** to put the earlier layout back.
    
    [![Page layout with Article with an On this page rail selected and a Saved to the page draft receipt offering Undo and Done.](https://docs.amadalis.ai/images/steps/S111-p5-article-layout-receipt.png)](https://docs.amadalis.ai/images/steps/S111-p5-article-layout-receipt.png "Open full-size image")
    
    A page layout choice saves straight to the draft.
    
4.  Open **Open preview** to see the article column and rail. The Composer canvas keeps the standard section flow.
    
    [![The Composer canvas, zoomed to 50 percent, still shows its normal section flow after the article layout is saved.](https://docs.amadalis.ai/images/steps/S111-p5-article-canvas.png)](https://docs.amadalis.ai/images/steps/S111-p5-article-canvas.png "Open full-size image")
    
    Use Open preview to see the article rail.
    
    [![The draft article preview has an On this page rail listing the two unfinished sample sections’ placeholder headings, then Draft labels and Review steps.](https://docs.amadalis.ai/images/steps/S111-p5-article-rail.png)](https://docs.amadalis.ai/images/steps/S111-p5-article-rail.png "Open full-size image")
    
    The rail links come from the article’s own section headings.
    
    [![Article preview at 1024 pixels with On this page on the left and the section content to its right.](https://docs.amadalis.ai/images/steps/S111-p5-article-rail-tablet.png)](https://docs.amadalis.ai/images/steps/S111-p5-article-rail-tablet.png "Open full-size image")
    
    Check the article at an intermediate width as well as on a phone.
    
    [![On this page is expanded above the phone article, with two fact notices, Draft labels and Review steps.](https://docs.amadalis.ai/images/steps/S111-p5-article-list-390.png)](https://docs.amadalis.ai/images/steps/S111-p5-article-list-390.png "Open full-size image")
    
    On a phone the heading links move into a compact list.
    

The rail uses the article sections’ headline words. Rich text can contribute the first heading in its body. A section with no heading adds no rail entry. An **[HTML anchor](https://docs.amadalis.ai/reference/glossary/#html-anchor)** you set under **Advanced** is the named point its link jumps to; otherwise the page makes an anchor from the heading.

Opening Hero, Banner and Gallery sections and closing Footer CTA, Call to action and Banner sections keep their full width. On a narrow screen the rail becomes a compact **On this page** list above the article.

An imported page that keeps its WordPress layout and sidebar does not offer this page layout.

[![Page layout has Standard selected and Article with an On this page rail unselected.](https://docs.amadalis.ai/images/steps/S111-p5-standard-restored.png)](https://docs.amadalis.ai/images/steps/S111-p5-standard-restored.png "Open full-size image")

Undo returns this page to its earlier layout.

## Open a picture at full size

Hero, Gallery, Call to action and Image & text offer **Open full size on click** under **Behaviour**. It is on by default. Switch it off to keep that section’s pictures from opening in the viewer.

**Picture descriptions.** With **Open full size on click** on, a picture control uses its supplied alt text as its name. Without a description, it is named “Open the picture full size”. Fill in what a meaningful picture conveys.

A **Features** card has its own **Picture description (alt text)** below **Image**. In a native card, leaving it empty uses the card title. A new description over the stated 500 character limit is refused rather than cut. Older stored descriptions keep their previous rendering.

[![Image & text Behaviour settings show Open full size on click switched on.](https://docs.amadalis.ai/images/steps/S112-p5-full-size-on.png)](https://docs.amadalis.ai/images/steps/S112-p5-full-size-on.png "Open full-size image")

Pictures can open full size unless this choice is off.

[![Open full size on click is switched off in the section’s saved Behaviour settings.](https://docs.amadalis.ai/images/steps/S112-p5-full-size-off.png)](https://docs.amadalis.ai/images/steps/S112-p5-full-size-off.png "Open full-size image")

Off keeps the picture in place when it is clicked.

Visitors can click a picture or reach it with the keyboard and press Enter. The viewer opens its original library file. Pictures placed beside a section’s words use the same viewer. The photo viewer adjusts the exit mark (**Close**) and arrow icons’ colour for dark themes.

[![The neutral drawing is open in the picture viewer with its Close control.](https://docs.amadalis.ai/images/steps/S112-p5-picture-viewer-open.png)](https://docs.amadalis.ai/images/steps/S112-p5-picture-viewer-open.png "Open full-size image")

Click or press Enter on the picture to open its original file.

[![The picture viewer is open on the neutral drawing at phone width.](https://docs.amadalis.ai/images/steps/S112-p5-picture-viewer-open-390.png)](https://docs.amadalis.ai/images/steps/S112-p5-picture-viewer-open-390.png "Open full-size image")

Close the viewer to return to the draft preview.

[![The Docs Walk picture sits within the phone draft preview, above the page text, with no viewer open.](https://docs.amadalis.ai/images/steps/S112-p5-picture-stays-in-page-390.png)](https://docs.amadalis.ai/images/steps/S112-p5-picture-stays-in-page-390.png "Open full-size image")

The picture remains part of the page without opening a viewer.

## Remove an icon or a card title

For an optional **Icon** in Features, Stats or a List, choose **None** to clear it. The catalog calls that empty choice **No icon**. A saved entry or starter keeps its existing icon until you change it. You can also ask the copilot for no icons.

[![Features has Icon set to None, ready to apply; the canvas still shows the lightning icon beside First step.](https://docs.amadalis.ai/images/steps/S118-p5-icon-none.png)](https://docs.amadalis.ai/images/steps/S118-p5-icon-none.png "Open full-size image")

Choose None to clear this optional icon.

[![The draft card keeps its title and description after its icon is removed.](https://docs.amadalis.ai/images/steps/S118-p5-card-icon-removed.png)](https://docs.amadalis.ai/images/steps/S118-p5-card-icon-removed.png "Open full-size image")

The words remain when the icon is cleared.

[![The same draft card at phone width shows its words without an icon, in the draft preview.](https://docs.amadalis.ai/images/steps/S118-p5-card-icon-removed-390.png)](https://docs.amadalis.ai/images/steps/S118-p5-card-icon-removed-390.png "Open full-size image")

Check the card at phone width too.

[![Features card editor has Icon set to zap, and the First step card displays its lightning icon.](https://docs.amadalis.ai/images/steps/S118-p5-icon-restored.png)](https://docs.amadalis.ai/images/steps/S118-p5-icon-restored.png "Open full-size image")

Undo restores the earlier icon.

On an existing Features card, you can empty **Title** and apply the change. A new card still needs a title.

[![An existing Features card with Title empty and Description still filled, ready to apply.](https://docs.amadalis.ai/images/steps/S119-p5-title-cleared.png)](https://docs.amadalis.ai/images/steps/S119-p5-title-cleared.png "Open full-size image")

An existing card can keep its description without a title.

[![The draft Features card displays its description with no title after the saved change.](https://docs.amadalis.ai/images/steps/S119-p5-card-without-title.png)](https://docs.amadalis.ai/images/steps/S119-p5-card-without-title.png "Open full-size image")

Check the card itself after applying the empty title.

[![Features card shows First step in its Title field and above its description on the canvas.](https://docs.amadalis.ai/images/steps/S119-p5-title-restored.png)](https://docs.amadalis.ai/images/steps/S119-p5-title-restored.png "Open full-size image")

Undo restores the title on this draft.

[![New Features card has an empty required Title field and the message A new entry needs Title; Entries still shows three cards.](https://docs.amadalis.ai/images/steps/S119-p5-new-card-title-required.png)](https://docs.amadalis.ai/images/steps/S119-p5-new-card-title-required.png "Open full-size image")

A new card still needs a title.

## Style the site’s shared parts

These choices affect shared parts of the site. Read each review card and its timing. A theme or shared header change can affect published pages without a new page publish.

### Fonts and small accent text

1.  Open **Theme Studio**.
2.  Open **Typography**.
3.  Find **Font families**.

**Interface** chooses the face for menus, buttons, labels and form fields. **Mono** chooses a face for code, figures and small labels.

Both roles start unset. Leaving them empty keeps the fonts those parts already use. If the Interface font is unset, it uses the body font. Code can use the device’s monospace font. The font library includes **JetBrains Mono**.

Library font files load early, with substitute fonts matched to their size. There is no extra option to enable that delivery.

  [Open the header recording](https://docs.amadalis.ai/videos/steps/S106-p5-header-navigation.webm).

Watch the header while the linked page loads.

  [Open the header recording](https://docs.amadalis.ai/videos/steps/S106-p5-header-navigation-390.webm).

The recording shows the header during this phone navigation.

The page below the header is covered. These recordings show the header during one navigation at each width.

Small accent text uses the theme’s accent ink. The platform can derive an unset accent ink for each colour mode. To set that colour explicitly, ask the copilot to change the theme’s accent ink. There is no dedicated Studio row for it.

### Header link and style

1.  Open **Site**.
2.  Open **Site setup**.

-   **Header link** adds a text link after the menu. Set **The link’s words** and **Where it goes**. Choose **A page of this site** or **An address**. No link is the default. A link to a draft page stays hidden until the page is published.
-   **Header style** offers **Standard** and **Editorial**. **Standard** is the default. **Editorial** uses a taller header, the Interface font and a wide panel for a menu item with groups.
-   **Header button** remains a separate action button.

A header that keeps an imported design may keep that design’s own controls.

### Menu descriptions and panel intro

In the **[Navigation builder](https://docs.amadalis.ai/reference/glossary/#navigation-builder)**, open a link’s details. **Description of** followed by the link’s name adds one line below that link.

For a top-level item that holds groups, **Panel intro** offers **Small label**, **Title**, **Paragraph**, **Link words**, **Link address**, **Card label**, **Card title** and **Card address**. All start empty.

These words appear in an Editorial header’s menu panel. The intro occupies a column beside the link groups on a wide screen. Review the menu draft and its publication separately from a page draft.

### Footer columns

In **Site setup**, **Footer layout** offers **Links in a row** and **Columns**. **Links in a row** is the default.

With **Columns**, each footer menu item that has child links becomes a column, up to five beside the brand. Edit those links in the Navigation builder. **Footer note** adds words in the bar below the columns. It starts empty and is shown only with Columns.

The theme’s footer brand colour can give the site name its own colour. When unset, it follows the footer heading colour.

## Give a dropdown its first words

1.  Open **Site**.
2.  Open **Forms**.
3.  Edit a **Dropdown** field.

**Prompt** contains **Shown before a visitor chooses**.

Leave it empty for **Choose one**, or write your own prompt. The prompt is not an answer and must differ from the choices visitors can submit.

[![The Dropdown Prompt control is empty and its hint says Choose one; the live preview’s Preferred visit dropdown reads Choose one.](https://docs.amadalis.ai/images/steps/S120-p5-prompt-empty.png)](https://docs.amadalis.ai/images/steps/S120-p5-prompt-empty.png "Open full-size image")

An empty prompt uses Choose one before an answer is chosen.

[![The unsaved form preview shows Choose one above the Morning and Afternoon answers.](https://docs.amadalis.ai/images/steps/S120-p5-default-prompt-preview.png)](https://docs.amadalis.ai/images/steps/S120-p5-default-prompt-preview.png "Open full-size image")

The prompt is separate from the answers a visitor can submit.

[![Shown before a visitor chooses contains Choose a visit time in the Dropdown editor.](https://docs.amadalis.ai/images/steps/S120-p5-custom-prompt-control.png)](https://docs.amadalis.ai/images/steps/S120-p5-custom-prompt-control.png "Open full-size image")

Write the words visitors should read before choosing.

[![The form preview dropdown shows Choose a visit time and the unchanged Morning and Afternoon choices.](https://docs.amadalis.ai/images/steps/S120-p5-custom-prompt-preview.png)](https://docs.amadalis.ai/images/steps/S120-p5-custom-prompt-preview.png "Open full-size image")

Changing the prompt keeps the actual answers intact.

## Work with the copilot

Give the copilot the words, pictures and layout you want. For page and section choices, its edits save to the page draft.

-   If the copilot changes a page while you hold unapplied words, the Composer keeps your edit open and offers **Show the latest**. Finish or discard your local edit before reconciling the newer page.
    
    [![Features settings hold the typed words Unapplied local words before they have been applied.](https://docs.amadalis.ai/images/steps/S113-p5-local-words-unapplied.png)](https://docs.amadalis.ai/images/steps/S113-p5-local-words-unapplied.png "Open full-size image")
    
    Keep track of words that are still only in the editor.
    
    [![The notice Your copilot changed this page, so the canvas is out of date offers Show the latest while the local Features words are still in their open field.](https://docs.amadalis.ai/images/steps/S113-p5-copilot-changed-local-words-kept.png)](https://docs.amadalis.ai/images/steps/S113-p5-copilot-changed-local-words-kept.png "Open full-size image")
    
    A newer draft is available; the unapplied words remain in their field.
    
    [![The Composer canvas shows Review the draft above the FAQ and the original fact notice above Features.](https://docs.amadalis.ai/images/steps/S113-p5-latest-page-reconciled.png)](https://docs.amadalis.ai/images/steps/S113-p5-latest-page-reconciled.png "Open full-size image")
    
    Finish the local edit before reconciling the newer draft.
    
    [![FAQ Headline and the selected canvas section both show the original notice asking for facts.](https://docs.amadalis.ai/images/steps/S113-p5-copilot-edit-undone.png)](https://docs.amadalis.ai/images/steps/S113-p5-copilot-edit-undone.png "Open full-size image")
    
    Undo restores the earlier draft words.
    
-   If a build stops before all sections are written, read its account of what remains. When it can read the unfinished sections, it names them so you can ask it to carry on.
    
-   Missing pictures are left out and named. The copilot does not fill a picture slot with a stock placeholder.
    
    [![The copilot request supplies the page’s words and says that no picture has been supplied.](https://docs.amadalis.ai/images/steps/S121-p5-missing-picture-request.png)](https://docs.amadalis.ai/images/steps/S121-p5-missing-picture-request.png "Open full-size image")
    
    Give the words even when you do not yet have an owned picture.
    
    [![The build reply says the picture on the Image & text section was left out, that no buttons or icons were added, and that the page is not public.](https://docs.amadalis.ai/images/steps/S121-p5-missing-picture-account.png)](https://docs.amadalis.ai/images/steps/S121-p5-missing-picture-account.png "Open full-size image")
    
    Read what still needs your picture before continuing.
    
    [![The new draft’s Image & text picture field reads Not set and the supplied words appear without a stock placeholder.](https://docs.amadalis.ai/images/steps/S121-p5-missing-picture-empty-slot.png)](https://docs.amadalis.ai/images/steps/S121-p5-missing-picture-empty-slot.png "Open full-size image")
    
    An empty picture slot is left for your own picture.
    
    **Empty galleries.** On a site that was not migrated, a native Gallery with no pictures is left out of the public page, including its heading and band. That includes a strip whose last photo you cleared. Composer keeps a **Picture** slot while you add images. The draft preview follows the public behavior. A carousel with pictures keeps its empty slides. Pages brought over from another system, called migrated pages, keep their earlier rendering.
    
-   When you provide exact words, the copilot checks which were placed and reports missing or changed words. Review that account alongside the draft.
    
    [![The copilot request names one library picture and supplies the headline, body, picture caption and picture description for a new draft.](https://docs.amadalis.ai/images/steps/S124-p5-named-picture-request.png)](https://docs.amadalis.ai/images/steps/S124-p5-named-picture-request.png "Open full-size image")
    
    Give the picture’s name and the words that belong with it.
    
    [![The copilot’s closing reply reports the two sections, the supplied words and the named picture placed with its alt text, and says the caption could not be placed because this Image & text section has no caption field.](https://docs.amadalis.ai/images/steps/S124-p5-named-picture-account.png)](https://docs.amadalis.ai/images/steps/S124-p5-named-picture-account.png "Open full-size image")
    
    Read the result alongside the draft rather than assuming the picture was matched.
    
    [![Draft preview places the Docs Walk drawing beside The supplied drawing and This picture belongs to this draft.](https://docs.amadalis.ai/images/steps/S124-p5-named-picture-draft.png)](https://docs.amadalis.ai/images/steps/S124-p5-named-picture-draft.png "Open full-size image")
    
    Check that the intended picture and words landed together.
    
    [![Phone draft preview stacks the Docs Walk drawing above The supplied drawing and its paragraph.](https://docs.amadalis.ai/images/steps/S124-p5-named-picture-draft-390.png)](https://docs.amadalis.ai/images/steps/S124-p5-named-picture-draft-390.png "Open full-size image")
    
    Review the result at phone width before publishing.
    
    [![Image & text settings show the saved body, the chosen library picture and its saved Image alt text; the section has no caption field.](https://docs.amadalis.ai/images/steps/S124-p5-named-picture-fields.png)](https://docs.amadalis.ai/images/steps/S124-p5-named-picture-fields.png "Open full-size image")
    
    Check the section’s saved words as well as its appearance.
    
    [![The neutral library picture’s existing description and caption are visible in Media details.](https://docs.amadalis.ai/images/steps/S124-p5-named-picture-library.png)](https://docs.amadalis.ai/images/steps/S124-p5-named-picture-library.png "Open full-size image")
    
    The named picture comes from the site’s media library.
    
-   Instructions about where words belong stay instructions. Ask for the arrangement and provide the text for each part.
    
    [![The copilot request separates layout directions from the exact Hero and Rich text words for an unpublished page.](https://docs.amadalis.ai/images/steps/S126-p5-given-words-request.png)](https://docs.amadalis.ai/images/steps/S126-p5-given-words-request.png "Open full-size image")
    
    Say which words belong on the page and which lines are directions.
    
    [![The draft shows Review one change, Keep the same words, Next step and the supplied paragraph, with no directions added as prose.](https://docs.amadalis.ai/images/steps/S126-p5-given-words-result.png)](https://docs.amadalis.ai/images/steps/S126-p5-given-words-result.png "Open full-size image")
    
    The page keeps the supplied words in their intended parts.
    
    [![Phone draft preview shows Review one change, Keep the same words, Next step and Close the draft when you finish.](https://docs.amadalis.ai/images/steps/S126-p5-given-words-result-390.png)](https://docs.amadalis.ai/images/steps/S126-p5-given-words-result-390.png "Open full-size image")
    
    Read the actual words at phone width too.
    
    Check every supplied sentence in the draft itself.
    
-   A card that expires or is replaced is described in that state. It is not counted as a decline by you.
    
-   Activity names the time zone for its timestamps. Read the status message for the outcome of that action.
    

Changes to the site’s head settings, or their Undo, made in **Head & CSP** can ask for some cached public pages to refresh. An approved change in chat can ask too. Follow the receipt’s timing message; a faster refresh is not guaranteed.

For the complete choices and defaults, see [Layout styles reference](https://docs.amadalis.ai/reference/layout-styles/). For activating a shared design, see [Themes and tokens](https://docs.amadalis.ai/composer/themes-and-tokens/).