Your website

The top bar, left to right

Worth knowing: Undo history is not shared between the three breakpoints in any special way — an undo can move a block on a breakpoint you are not currently looking at.

The three right-hand tabs

Layers headings read “Section 1”, “Section 2”… and, for sections inside a tab strip, “Section 3 · Highlights” — the tab's own name, so you can tell three near-identical gallery sections apart.

Sections vs blocks — the distinction everything else depends on

A section is a full-width horizontal band of the page. A block is a thing inside it — text, an image, a gallery. They have completely different Inspector panels, and clicking in the wrong place is the single most common source of “I can't find that setting”.

Click a block to select the block. Click empty space inside a section to select the section. Press Escape to deselect everything.

Hover a section and its control bar appears at the top and bottom edge: ＋ Add above, ＋ Add below, Change layout, and 🗑 Delete.

Templates ▾ — a whole site at once

Picks a complete multi-page site: The Elopement, The Celebration, The Heirloom, The Essential, The Signature, Jennifer, Lullaby, Horizon, Blueprint, Linen & Light, Atelier, Noir, and more.

Applying a template replaces your current pages. Do it first, before you have work worth keeping — or use the portfolio menu's Save as… to keep a copy of what you have.

Layouts ▾ — one ready-made section

A slide-in panel of pre-built sections, filtered by category. This is the fastest way to build, and unlike Templates it only adds.

Categories: Hero · Cover · Image + Text · Gallery · Video · Video + Photos · Quote · Text · Pricing · Call to action · Contact.

Gallery includes four big-photo-plus-thumbnail-strip layouts — strip on the right, on the left, below with a slideshow, and below on click only. Video includes a films-only arrangement (one feature plus two shorter films).

The same panel opens as Change layout when you use a section's control bar — that swaps the section's contents while keeping its position on the page, and keeps it inside its tab strip if it's in one.

+ Add ▾ — the full block catalog

Twenty block types in four groups. The block lands in the section you are currently working in; drag it where you want it.

Worth knowing: Header and Footer behave differently from everything else in this menu: they are site-wide chrome, so adding one from any page turns it on for the whole site. Their Inspector has a Remove header from site / Remove footer from site button at the bottom.

Section settings (click empty space in a section)

In-page tabs

A tab strip lets several sections occupy the same place on the page, with a bar of tab names to switch between them — “Ceremony / Reception / Portraits” without three separate pages.

Put a section into a tab group with In-page tabs in its Inspector. Once it is in one, its control bar shows ＋ Add tab and ＋ Add section to “<tab name>” — a tab can hold more than one section stacked.

The bar can be styled Underline, Pills, or Buttons, aligned Center or Left, and made a Sticky tab bar so it stays visible while the visitor scrolls.

Worth knowing: Tabs are deep-linkable: ?tab=<name> on the URL opens the page with that tab already selected, so you can send a client straight to their part of the page.

On every block, whatever its type

X, Y, W, and H are stored separately for each of the three breakpoints. Moving a block on Desktop does not move it on Mobile — which is the point, but it does mean a change you made can look like it did not apply if you are looking at a different device tab.

Text

Worth knowing: “Default (sans)” means your Design tab body font, not a fixed typeface. That is why changing the font pairing restyles the whole site in one click.

Image

Button

Shape and Line

Image Grid

Worth knowing: Masonry preserves each photo's real aspect ratio, so mixed portrait and landscape sets never get cropped. Grid crops to a uniform tile — better for a tidy contact-sheet look.

Slideshow

Worth knowing: Autoplay and the thumbnail strip are independent, and that is the difference between the ready-made layouts: with autoplay the big block advances on its own and the strip is a shortcut; without it, the block only ever changes when someone clicks. Either way, clicking a thumbnail stops autoplay for good — the page should not slide away from the photo a visitor just asked to see.

Video

Worth knowing: Browsers only permit autoplay on muted video. If autoplay appears not to work, the video is almost certainly unmuted.

Pricing / Packages

Contact Form

Worth knowing: This form is wired up: submissions land in Dashboard → Leads and email you. No external form service is needed, and you should not point Form action URL at one.

The rest, briefly

Header and Footer (site-wide)

Worth knowing: Because these are site-wide, the panel says “Shared across all pages of the site.” Editing the header on your Contact page changes it on every page.

Font pairing

Nine pairings, each a heading face and a body face chosen to work together. Every one shows a live “Ag” in its own typeface so you can judge it without applying it.

Worth knowing: The body font cascades to all text automatically. To use the display face on a particular text block, set that block's Font to Heading in its own Inspector — the pairing only applies its heading face where you ask for it.

Brand colour

Eight saved palettes as colour dots — Noir, Gold, Terracotta, Sage, Slate, Plum, Rose, Ocean — plus a Custom picker for an exact hex value.

The brand colour is not decoration; it drives buttons and every section whose Color Scheme is Light accent, Accent, or Dark accent. Change it once and those sections all re-tint together.

Individual buttons can still override it in their own Inspector, which is how you get one deliberately different call to action.

Page side padding

A number from 0 to 120, in pixels, applied to each side. It pads the header and footer and guarantees at least that much whitespace between your content and the screen edge on narrower windows.

0 means flush edge to edge. The default is 24.

Worth knowing: This is the setting to reach for when a design looks fine on your monitor but cramped on a laptop — the content is touching the glass, not mis-sized.

Mobile layout — Reflow for tablet & mobile

On (recommended): the published site genuinely reflows at real device widths, and the ▭ Tablet / ▯ Mobile tabs let you hand-place blocks for each size.

Off: the desktop design is scaled down to fit, with no reflow — everything keeps its relative position but the text gets small. Only sensible for a deliberately poster-like single page.

Image protection

Ticking it disables right-click and drag on images. Adding Watermark text also overlays a translucent watermark across the page; leave it blank for click-and-drag protection only.

Worth knowing: The panel is honest about this and so are we: it is a deterrent, not DRM. Anyone determined can still screenshot. For real protection, use a signature baked onto the file — see the Signatures section.

Selected element CSS, and Custom CSS

Selected element CSS is a read-only readout of the block you have selected, with a Copy button. Placement values are exact; visual properties are computed from the live render. It also tells you the selector to target that element with.

Custom CSS is a free-text box for advanced work. Rules are scoped to your site automatically and sanitised on publish — no @import, no script. Write plain selectors; the renderer prefixes them for you.

Keyboard

Saving and publishing — what is happening while you work

Every change saves to your draft as you make it. There is no Save button because there is nothing to remember to press.

Your live site is a separate frozen copy. It changes only when you press Publish. Between the two, the dot on the Publish button turns red to tell you the draft has moved ahead of what visitors see.

Preview shows the draft. If you want to check what the public currently has instead, open your published address in a normal browser tab.

To try something risky, use the portfolio menu's Save as… first. That gives you a second portfolio to experiment in, and only the one marked LIVE is public.

Worth knowing: Undo history lives in the browser tab. Closing the builder and coming back leaves your work exactly as you left it, but you cannot undo your way back past that point.