Sections and elements

Every PageStax page is a stack of sections — a hero, a buy box, reviews, an FAQ. Each section is made of elements: headings, text, images, buttons, prices, ratings and so on. Some elements are grouped, such as the items in a list.

Find your way around the editor#

• Top bar — back to your pages, the page name, undo and redo, device preview, Preview, Save and Publish.
• Left rail — Add sections, Layers, Color variables, Conversion tools and Page settings.
• Canvas — your page. Click anything on it to select it.
• Inspector on the right — the settings for whatever is selected, in three tabs: Content, Style and Layout.

While you edit, the canvas is inert: clicking a button or link selects it rather than following it. Press Preview to try the page the way a shopper would, and Edit to go back.

Add a section#

1. Open Add sections on the left rail.
2. Search, or filter by Product, Cart, Features, Reviews, Conversion or Header/Footer.
3. Drag the section onto the page, or press ＋ to add it to the end.

For bigger previews, press Browse library with previews. The Section library lets you filter by Category and Theme; Add puts the section after the one you have selected.

Work with a section#

Select a section and use its toolbar on the canvas:

• Move up / Move down, or drag it by its handle;
• Add a section below;
• Duplicate section;
• Split test this section — see Running an A/B test;
• Save as one of my sections — see Saved sections;
• Hide section — it stays in your page but isn't shown;
• Remove section.

Work with an element#

Select an element to see its toolbar: select its group or section, Copy style and Paste copied style, Reset to the section's default, and Hide element. Items in a list can also be moved up or down and duplicated.

Elements are hidden rather than deleted, so you can always bring one back from Layers.

Layers#

Layers shows the whole page as a tree. Use it to:

• find an element with Search sections & elements…;
• drag rows to reorder sections or move elements between groups;
• rename a section or element (double-click its name);
• hide and show things, or use the ⋯ menu to move or copy an item to another group.

Selecting a row scrolls the canvas to it, and clicking on the canvas highlights the row. With Layers focused, the arrow keys move through the tree and Enter selects.