Adding elements and sections to a page

The Add tab on the left is where everything on a page comes from. Drag an item onto the canvas, or click it to drop it inside whatever you have selected.

Elements vs Layouts

The panel has two tabs:

• Elements — the building blocks you compose with, grouped into Sections, containers & divs (a Section is a full-width band, a Container centres and caps your content, a Div is a plain box you style however you like — plus vertical, horizontal, grid and ready-made column rows), Basic (button, link), Typography (heading, text), Media (image, video, map) and Forms.
• Layouts — whole pre-built sections: navigation bars, heroes, feature grids, pricing tables, testimonials, FAQs, calls to action and footers. Drop one in and edit the text and images. This is the fastest way to build a page.

Use the search box rather than scrolling — it matches both the element name and its group, so typing media shows every media element.

Interactive elements

Under Elements → Interactive you'll find Tabs, Slider, Accordion (and a single accordion item you can drop anywhere), Popup and Lightbox image. They're built from ordinary elements, so you can open them in the Navigator and restyle any part — a tab, a panel, a slide, the popup's close button.

While you're editing, everything is shown: popups sit open on the canvas and every tab panel and slide is visible, because you can't style what you can't see. Press ▶ Preview in the top bar to use them exactly as a visitor will.

Editing a slider

The canvas shows one slide at a time, just like the finished page. Select the slider and use the Settings tab to pick which slide you're editing, and to add or remove slides — a new slide copies the last one, so it keeps whatever styling you've already applied. Tick Play slides automatically to turn autoplay on and set the gap between slides. Press ▶ Preview to try the arrows, dots and autoplay for real.

The arrows aren't fixed either. Select any element inside the slider — a button, an icon, an image — and tick Use this element as Previous or Next in Settings, and it drives the slider. If you delete the stock arrows, an Add the missing arrows button in the same place puts them back, so there's nothing you can do to a slider that you can't undo.

Popups

The Popup element is just the popup — it doesn't bring a trigger button with it, because the thing that opens a popup is usually a button you already have. Drop the popup on the page, then select whatever should open it and use Settings → Popup → Opens to point it at the popup by name.

Closing is just as flexible. Select any element inside the popup and tick Closes this popup when clicked — the × is nothing special, so a No thanks link or a whole image works just as well. On the popup itself you'll find Close when clicking outside the panel, and Esc always closes.

You don't need the Popup element at all: any element can show or hide any other. Give the thing you want to reveal an ID in its Settings tab (say signup), select the button that should open it, and in the Interactions tab set Show or hide another element to #signup. That field takes any CSS selector, so pointing it at a class like .open-signup arms every element carrying that class at once.

Taking a section apart

Dropped sections aren't black boxes. Open the Navigator tab on the left and you'll see the section as a labelled outline — Hero → Container → Heading, Text, Row → Button, or Pricing → Container → Grid → Pricing tier. Click any line to select that piece on the canvas, then restyle it, drag it somewhere else, duplicate it, or copy it into a section you built yourself. That's the quickest way to assemble a page that matches what you want: start from a section that's close, then keep the parts you like.

Columns

Drop 2 columns, 3 columns, 4 columns, or one of the sidebar splits, and edit it from there — these are real grids, so with the row selected the Layout panel's Columns counter adds or removes a column in one click. To stack them on phones, switch to a mobile breakpoint at the top and set Columns to 1; that change applies to that screen size and below, and desktop keeps its columns.

Saved components

Built something you want to reuse? Right-click it and choose Create component. Give it a name and, optionally, a group — the dropdown lists groups you've already used, so things stay tidy. It appears under Layouts → Saved components, under its group heading, and can be dropped onto any page in the site. Its styling travels with it.

Copies are linked: edit the component once and every copy across the site updates. That's why a copy is labelled "Component (linked)" and why you can't edit its insides in place. If you need one copy to differ, right-click it and choose Detach — that turns it into an ordinary, fully editable copy that no longer follows the original.

The Settings tab

With an element selected, the Settings tab on the right handles everything that isn't styling:

• ID — a unique name used for in-page links. Give a section the ID pricing and a link to #pricing will scroll to it.
• Visibility — hide an element on the breakpoint you're currently editing and everything below it. Handy for showing a compact version on mobile only. Hidden elements stay in the page's HTML.
• Element settings — whatever that element needs: the heading level for a heading, the URL and target for a link, which form to show for a form.
• Custom attributes — any HTML attribute you need, like aria-label or a data- hook for your own script.
• Advanced — exclude the element's text from search result snippets.