Sections and elements

Every page of your site is a stack of sections: a hero at the top, then services, prices, a contact form and so on. A special section, the Container, holds smaller elements (titles, texts, buttons, images…) that you arrange freely in columns.

Section types

The Header (menu) and Footer are always present on every page and cannot be moved. Click them in the Structure list to edit the logo, menu links, menu button, footer texts, links and social networks.

Settings every section shares

Select a section and open Appearance:

• Section background: none, a card (slightly lighter), glow or accent color.
• Top/bottom spacing: compact, normal or spacious.
• Title alignment: default, left or centered.
• Section background image and Background image darkening.
• Size & spacing: width, height, margin and padding of the section (see Size and spacing below).
• Section ID: the name used in links, for example #contact. A menu link to #contact scrolls to this section. If you rename the ID, links that pointed to it are updated for you.

Many sections also have their own style options (columns, card style, image shape and so on) in the same tab.

Adding a section

1. In the Structure tab, click the section after which the new one should appear (or nothing, to add at the end).
2. Click Add section under the list, or open the Add tab on the right.
3. Under Ready-made sections, click the type you want.

The new section comes with sample content so it never looks empty, and it is selected so you can start editing right away.

Managing sections

In the Structure list, each section row has:

• the drag handle on the left: drag it up or down to change the order;
• the eye icon: Hide from the site / Show on the site. Hidden sections stay in the editor (dimmed) but visitors do not see them;
• the ⋯ menu: Duplicate, Move up, Move down and Delete section.

Deleting asks for confirmation, and you can always bring a section back with Ctrl+Z.

Elements: building your own layout

The Container (free-form content) section lets you build any layout. Choose a Column layout (1, 2, 3 or 4 columns, or 2/3 + 1/3 and 1/3 + 2/3), then fill the columns with elements.

Element types

Adding elements

Open the Add tab. Under Elements you can:

• Drag an element into the preview. A line shows where it will land: inside a column, inside a box, or between sections (dropping between sections creates a new Container section for it).
• Click an element to add it right after the selected element (or into the first column of the selected Container). If no Container is selected, a new Container section is added.

Editing, moving, duplicating and hiding elements

Click an element in the preview to select it. The Edit tab shows its fields and a toolbar:

• Move up / Move down (the arrows);
• Move to previous column / Move to next column (shown when the Container has more than one column): the element goes to the end of that column and stays selected;
• Show / Hide (the eye) to hide it from visitors without deleting it;
• Duplicate;
• Delete;
• ✦ AI (elements with text): opens the AI prompt on the element's text. See The editor.
• the back arrow returns to the whole section.

You can also change the Element type (for example turn a Text into a Card) and the Column it sits in. The Alignment field aligns the element left, center or right.

Size and spacing

Every element, every section and each column of a Container has a Size & spacing panel: it is in the element's settings and in a section's Appearance tab. Empty fields keep the theme's look, so nothing changes until you type a value.

• Width, Max width and Height: type a number and choose the unit next to it: px, rem, em, %, vw, vh or auto. For texts, buttons and containers the height is a minimum (longer content still fits); images and videos get exactly that height and the picture fills it.
• Margin (the outer ring) is the space around the element; Padding (the inner ring) is the space inside it, between its edge and its content. Each ring has four fields: top, bottom and the two sides. Type 24 (pixels), 2rem, 5% or auto (margins only: auto on both sides centers an element that has a width).
• The chain button of a ring sets the same value on all four sides at once.
• In any field, ↑ and ↓ change the value by 1 (Shift + arrow: by 10; for rem and em by 0.1 and 1).
• While you point at the panel, the preview shows the margin (orange) and the padding (green) of the selection.
• Reset clears the values of the device you are editing.

Devices. The three icons at the top of the panel (Desktop, Tablet, Phone) work like the preview buttons: choose one and the preview switches to that size. The values you then type apply only to that device. The tablet uses the desktop values unless you give it its own, and the phone uses the tablet's (or the desktop's); inherited values show in grey in the empty fields, and a dot on an icon shows which devices have their own values. Tablet means screens up to 1023 px wide, phone up to 640 px.

Columns. In a Container's Appearance tab, Column size & spacing has a button for each column (Col 1, Col 2…): pick one and set its size and spacing.

Good to know:

• An element is never wider than the space it is in, so a large width in pixels does not make the page scroll sideways on a phone.
• The sides are "start" and "end", not left and right: in Arabic and other right-to-left languages the spacing is mirrored automatically.
• A button's width, height and padding size the button itself; its margin moves it.

The Box / grid element

Use Box / grid to group elements, for example three cards side by side inside one column.

1. Add a Box / grid element.
2. In its settings choose the Arrangement: Under each other, In a row, or a grid with 2, 3 or 4 columns.
3. Choose the Box look: no frame, card, glass or accent color. Adjust Inner spacing and Space between elements.
4. Add elements into the box: drag them onto the box in the preview, or add them under Elements in the box.

A box cannot contain another box (one level only).

Images and free photos

Every image field (hero image, section background, gallery, card image…) opens the image picker when you click Choose. It has two tabs:

• My images: images you uploaded (drag them into the window or click Upload; JPG, PNG, WebP, AVIF or GIF up to 10 MB), and free photos you used before.
• Free photos: millions of free, licensed photos from Unsplash or Pexels. You can use them on your site at no cost.

To use a free photo:

1. Click Choose on an image field and open the Free photos tab.
2. Describe the photo in a few English words, for example bakery counter, yoga studio or mountain lake. Pick a shape (landscape, portrait or square) if the place needs one.
3. Click a photo. It is added to your images and put into the field right away.

The same search is in the dashboard under Images → Free photos.

Good to know:

• The photographer's name is shown under each result, and your site's footer credits the photographers whose photos it shows (for example Photos: Jane Doe on Unsplash). This is what the photo services ask for, so keep it.
• Unsplash photos stay on Unsplash's fast servers and are shown from there; Pexels photos are copied into your images.
• Sites made from a template, or by the AI site builder, may already start with free photos chosen for your business. Replace them anytime with your own.
• Your own photos (your team, your products, your place) usually convert better than stock photos. Use free photos for moods, backgrounds and places.

The Free photos tab appears only when the platform has the photo service switched on.

Tips

• Keep one clear goal per section: one headline, one message, one button.
• Use Duplicate to create consistent sections quickly, then change the texts.
• Hide a section instead of deleting it if you might need it again (for example a seasonal offer).