Skip to content
Praxis by Amadalis

How-to

Layout styles

Download Markdown

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 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

Section titled “Find the right controls”
  1. Open your page in the 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 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

Section titled “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

Section titled “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

Section titled “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.
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.
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.
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.
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.
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.
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

Section titled “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

Section titled “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.
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.
Choose the picture from the media library.
Features Words settings show the chosen drawing with its picture description and caption.
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.
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.
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.
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.
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.
Screen adds a window frame around the picture.
Draft preview with the Docs Walk drawing and its caption inside a dark rounded panel.
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.
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.
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.
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.
A right picture follows the words when the columns stack.

Add rules to a Hero

Section titled “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.
Both rules are optional.
The draft Hero has a short line before DRAFT REVIEW while no line separates the headline and subheadline.
The label rule needs the Hero’s label words.
The draft Hero has a line between its headline and subheadline, with no label rule.
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.
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.
Check the lines with the words at phone width too.
Hero Words settings with Label rule and Lede rule both None.
Undo restores the Hero without these rules.
Section titled “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.
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.
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.
The entry also carries the words, destination and room line for a link row.

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.
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.
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.
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.
Undo restores the earlier column choice.

Draw facts as ruled rows

Section titled “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.
Centered is the usual arrangement for the figures.
Stats Layout has Heading left, numbers right selected in the editor.
The selected heading arrangement is ready to apply.
Stats Layout has Compact proof strip selected in the editor.
The selected strip choice is ready to apply.
Stats Layout has Facts list selected before applying the draft change.
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.
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 whose content is selected for the visitor.

Stats Place list open with In its own band (default) selected and Beside the hero above available.
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.
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.
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.
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.
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.
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).
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.
Stat cards adds cards around the figures.

Give an article a side rail

Section titled “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.
    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.
    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.
    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.
    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.
    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.
    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 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.
Undo returns this page to its earlier layout.

Open a picture at full size

Section titled “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.
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.
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.
Click or press Enter on the picture to open its original file.
The picture viewer is open on the neutral drawing at phone width.
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.
The picture remains part of the page without opening a viewer.

Remove an icon or a card title

Section titled “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.
Choose None to clear this optional icon.
The draft card keeps its title and description after its icon is removed.
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.
Check the card at phone width too.
Features card editor has Icon set to zap, and the First step card displays its lightning icon.
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.
An existing card can keep its description without a title.
The draft Features card displays its description with no title after the saved change.
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.
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.
A new card still needs a title.

Style the site’s shared parts

Section titled “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

Section titled “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.

Watch the header while the linked page loads.
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.

Section titled “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.

Section titled “Menu descriptions and panel intro”

In the 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.

Section titled “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

Section titled “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.
An empty prompt uses Choose one before an answer is chosen.
The unsaved form preview shows Choose one above the Morning and Afternoon answers.
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.
Write the words visitors should read before choosing.
The form preview dropdown shows Choose a visit time and the unchanged Morning and Afternoon choices.
Changing the prompt keeps the actual answers intact.

Work with the copilot

Section titled “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.
    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.
    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.
    Finish the local edit before reconciling the newer draft.
    FAQ Headline and the selected canvas section both show the original notice asking for facts.
    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.
    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.
    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.
    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.
    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.
    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.
    Check that the intended picture and words landed together.
    Phone draft preview stacks the Docs Walk drawing above The supplied drawing and its paragraph.
    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.
    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.
    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.
    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.
    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.
    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. For activating a shared design, see Themes and tokens.