Landing pages and the page builder
The home page, the pricing page, the about page and any other page built from sections.
A landing page is a route (/, /pricing, /about, or any path you choose) and an ordered list of sections. Content → Pages lists them; one opens in the page builder.
The page builder
The main area is the page as a stack of sections, each a block: a small sketch of its layout, its name, what it holds ("6 features", "3 columns") and the first line of what it says. Each section is one kind — the catalogue below, and whatever a site adds of its own — and each kind has its own fields.
- Add a section opens a gallery of the kinds — a sketch and a line each, grouped (openers, content, proof, commerce, people, what draws on the site's own data, closers, the site's own), searched from the top, chosen by a click or Enter — and seeds the new section with a plain example. The button at the foot adds at the end; the + on the seam between two blocks adds there. A section with presets shows them at the top of its form ("Start from"): a ready shape laid over the fields.
- Drag a block by its handle to reorder; the arrows move it a step; duplicate and remove are on every block.
- Open a block to edit its fields as a form: a line, a paragraph, a switch, a choice as a row of buttons, a picture as a url, an upload or one chosen from the library, a glyph from a palette (the theme's and Lucide's, searched), a list of lines, a list of records (each a row that opens, with a title of its own, dragged into order, duplicated) — every field labelled in plain words, what is wrong said under the field. Nothing is typed as a grammar.
- Live preview draws the page beside the builder as you edit. Opening a block scrolls the preview to that section and lights it for a moment; clicking a section in the preview opens its block. On a site with more than one look, a switch flips between looks without saving.
You never see or type JSON or YAML; the file is written for you and validated on save.
The page's own fields
Above the sections: the page's title (internal), its route, an optional SEO title (the browser tab; blank means the site's name), the description for search and sharing, and an optional share image.
The catalogue
Every section is generic — drawn in the site's look, with nothing of any one site's meaning in it — and every word it shows is the page's own. The few words a section has of its own (Next, Previous, Close, Show, the email field's states, Step n, Read, the countdown's units, All on a gallery's filters, Add to bag) are the sections scope under UI strings. Many have layouts, and a few offer presets at the top of their form — a ready shape laid over the fields, to start from.
The look of a section
Every section but the Marquee, the Close, the Divider and the Announcement takes the same fold of look fields, under Section look at the foot of its form — so any section can be the dark band, the glowing one, the one that arrives with a blur:
- Tone — paper (the ground), wash (a faint band), accent, ink (inverted: the look's ink as the ground; the eyebrow and the buttons swap to suit).
- Glow — none, a bloom under the cards as the pointer passes (cards), a halo behind the visual (visual), a light at the foot (foot) or in a corner (corner).
- Ground — none, grain, dots, grid, a gradient from the look's light, or an aurora that drifts.
- Spacing — tight, normal or roomy; width — narrow (a reading measure), normal, or full bleed.
- Reveal — how its pictures arrive as it scrolls into view: at once, a fade, a blur that sharpens, a zoom that settles, or tiles wiped in.
- Anchor — an id, so a link can go to it (
/#pricing).
A page may also set progress: true for a thin reading-progress bar along its top. In any string, **bold**, *italic* (set in the look's serif), [a link](/app) and ^^gradient^^ (the accent running to its light) are drawn.
| Section | What it draws | Layouts |
|---|---|---|
| Announcement | One line across the top of the page — a badge, the line, a button, a code to copy — dismissable, optionally sticky | — |
| Hero | An eyebrow, a headline in a few lines (arriving line by line, word by word, or at once), a sub-line, a button and a quiet second one, fine print — and a visual: nothing, a picture, a video (a file, or a YouTube, Vimeo or Loom address, muted and looping), a screenshot in a browser window, in a phone, on a laptop, or a stage the site registers (a component of the site's own, with fields shown only while it is chosen — a diagnostic card, a profile peek). With, when the page has them: faces and a line above the headline, a rating under the buttons, a row of stats, an email field in place of the buttons, App Store and Google Play badges, cards floating over the visual (a card, a chat bubble or a number, at any corner), a row of cards under it all, a scroll arrow at the foot | split · centred (the visual below) · backdrop (the visual behind the words); presets |
| Call to action | The ask: a heading, a lead, a button and a quiet second, an email field into one of the site's forms, ticked points, faces and a count, a rating, a row of logos, store badges, a picture or a screenshot, fine print — whatever it needs; leave a part empty and it is not drawn | centred · split · band · bar (one line, one button) · two cards · a promo over a photograph with a "from" line; presets |
| Countdown | Days, hours, minutes and seconds to a date and time, a heading and a button; with no date, a count from the person's first visit (a launch that is always n hours away); what it says when the time is up | centred · a strip |
| Marquee | A running line of benefits and a second of qualifiers | — |
| Divider | A line, an ornament, or plain space between two sections | — |
| Logos | Names somebody trusts — each a picture and a name, linked or not — washed to one ink until hovered; a rating line under them | a row · chips · beside the words (a grid) · a marquee (two rows the other way round) · tiles |
| Perks | The slim strip of reasons — free shipping, secure payment, thirty days to return — a glyph or a picture (a payment method's mark), a title and a line each | a strip · cards · two by two · one line |
| Features | What it does: a glyph, a title, a line, a picture at the top and a link when it has one; one card highlighted; the cards may turn toward the pointer | cards · plain columns · a bordered grid · a ticked list beside a screenshot · a showcase (one big picture, the features in a row beneath) · flip cards (the picture in front, the words behind) · around a picture (three facts either side) |
| Split | One thing said large: a picture beside a passage (markdown), the picture left or right, ticked points and a button | — |
| Bento | A grid of tiles of four sizes (1×1, 2 wide, 2 tall, 2×2) and six kinds — a feature, a picture (desaturated until hovered, the words on a scrim), a stat, a quote, a list of ticks, a muted video loop — each with a tone of its own and a link; a spotlight follows the pointer | the words above or beside; cascade (the tiles scroll up forever, faded top and bottom); three or four columns; presets |
| Showcase | Three or more features beside one screen in a device (a browser, a phone, a laptop): the picture changes with the feature | scroll (the feature lights as the page scrolls past it) · tabs · flip cards |
| Before / after | Two pictures under one handle the person drags — a label on each side, where the handle starts | wide · narrow |
| Carousel | Pictures with a title and a line each, turned by arrows, dots, a swipe, or on their own | cards in a row · fanned on an arc · coverflow (the sides turned back) · one large with thumbnails under |
| Tabs | A passage per tab, with a glyph and a picture beside it | pills · an underline |
| Steps | The process, numbered: a title, a passage, a glyph or a picture each | across on a dotted line · down with one step lit · alternating pictures · a curved path of picture cards · numbered cards · beside a screenshot in a device · a spine · a timeline |
| Stats | Three or four numbers as written, a label each, a note; a value of stars draws the stars; the numbers may count up as they come into view | a row · cards with a glyph · beside the words (a 2×2) · in the serif, number and word |
| Testimonials | Quotes with a name, a role, a face (initials when there is none), stars, a company's logo, a handle, a video; **bold** highlights a phrase; a stat or two beside the big one; a "see all reviews" link |
a grid · a wall (masonry) · one at a time · a switcher (the faces choose) · a marquee · tweets · chat bubbles · one photograph beside the quotes · a grid of faces (a video opens from each) · a stack the arrows turn |
| Quote | One pull quote, large, with its source | — |
| Pricing | Tiers with prices, features and buttons (a feature written - is drawn crossed out: what the rung lacks); a glyph over a name, a "from" before a price; a row with a sku buys from the page (see Memberships and pricing); an optional toggle (weekly / monthly); the featured rung outlined, in ink or in the accent; under the rungs, a compare table of the plans by their features |
columns · rows (every rung a band) · single (one rung, centred) · a choice list (a radio per rung, one button) · a selector (options ticked add up to a total) |
| Compare | A table: a column per plan or product (one marked, each with a button), a row per thing, a tick, a cross or words in each cell (yes, no, or what to say) |
— |
| FAQ | Questions that open to their answers (markdown), one at a time, or laid open; a mark before each question ("Q."); and a "still have questions?" card with a button and the team's faces | beside the words · stacked · laid open in two columns · beside a picture · two columns with a mark · a picture per question |
| Team | People: a portrait (initials when there is none), a name, a role, a line, links (LinkedIn, X, GitHub, Instagram, Mail draw a glyph) | a grid · circles · rows with a bio · one photograph of everyone · black and white with logos under · tiles with names · a marquee of circles · one person, large |
| Integrations | What it connects to: a mark, a name and a line each | tiles · an orbit around the site's own mark · a marquee of chips · strewn about the words |
| Gallery | Pictures — a caption, a tag each — opened large on a click; buttons to filter by tag | a grid (square, wide, tall or as they are) · masonry · polaroids on a rail · strewn on the table · an arc · a mosaic that widens · a lookbook (a title, a price and a link over each) |
| Video | One video (a file, or YouTube, Vimeo, Loom) with a poster and a caption; nothing loads until it is played | wide · narrow |
| Timeline | Dated milestones — a title, a passage, ticked points each; an item still to come drawn hollow; a percentage in place of a date (a roadmap) | down the page · a column per phase (a roadmap) |
| Articles | The latest writing from the site's own articles — as many as you say, newest first, a tag to keep to — each linking to its page (the articles module) | cards · a list · one featured large |
| Products | Products from the store — all, the featured, a collection, a tag, or named skus — as the store's own cards (the price, an old price struck through, stars and how many reviews), with a link to the rest (the store module) | cards · a bordered grid · a rail that scrolls · a list with a quick add |
| Spotlight | One product, large: its pictures as a gallery, its price and old price, stars, a passage, ticked points, sizes, a quantity and Add to bag, a trust line — and for a drop, a countdown and what is left of the run (the store module) | pictures left or right |
| Collections | The store's collections as tiles — each with its picture, name and count (the store module) | tiles · glyphs · banners · circles |
| Prose | A heading and a passage of markdown, on a reading measure or the full width, left or centred | — |
| Newsletter | A heading, a line and one field that takes an address into one of the site's forms — and a first name too, when asked; faces or a rating beside it | centred · split with a picture · a card |
| Contact | An address, an email, a phone, hours, a map link — and one of the site's forms beside them (the forms module) | details beside the form · the form in a card · info cards above the form · a quote beside the form |
| Footer | The site's mark and a line about it, columns of links, social links (a glyph each), an email field into a form, the legal line ({year} is the year) and the small links |
columns · mega (a call across the top) · minimal |
| How it works | An eyebrow, a heading, three steps with an icon, a tag, a title and a body | — |
| The library, three ways in | One real chapter of one real book, three ways: the text, the summary, the player | — |
| Coaching | What coaching is, a picture of a session, and the way to book one | — |
| The creator | A portrait, a name and role, a statement, a few facts, a button | — |
| Close | The last word: a heading, a button, the glow on the ground | — |
The site footer is chrome and the layout draws it on every page from content/site.md (Settings → Site settings), so no page has to remember it. A page ends without one by saying footer: false — which the landing does, because its close is the ground the whole page has been walking toward and a column of links under it would be an anticlimax. A page that wants a different footer, or one in a different place, puts the Footer section in its own sections and the layout draws none.
A short page still fills the screen: the shell is a column at least a viewport tall and the footer takes whatever is left, so the leftover room on a tall monitor is the foot of the page in the foot's own colour rather than a band of nothing between two things. | Form | One of the site's forms, inline on the page — chosen by name, under an eyebrow, heading and lead of the page's own (the forms module; see Forms) | — | | Entries | A content model's entries — the model, cards or a list, how many (0 for all) — each linking to its page when the model has pages (the models module; see Content models) | — |
Glyphs. Wherever a section takes a glyph (a feature, a perk, a step, a tab, a pricing rung), the form offers a palette: the theme's own twenty and the whole Lucide set, searched by name. The build ships only the glyphs the pages name.
An email captured on a page — the Newsletter, a CTA's field, the hero's, the footer's — is a response to one of the site's forms: name a form that has an email field, and the address lands in Forms → Responses beside every other answer, with the form's own delivery (an email, a webhook) running as it does for any response. A person who is already on the list is told so, not refused.
The demo site shows every one of these at /sections, and a commerce page built from the store's sections at /shop. A look may draw a section differently from its base (a skin — the marquee as a running head, the path as a ridge into the sun) without the page knowing: the page names the section once and never changes with the look.
Experiments on a page
Two pages on one route are an A/B test. The pages know nothing about it; an experiment record (Marketing → Experiments) points at them and decides who sees which. See Ads and experiments.
The close at the foot of other pages
The landing's Close section ends every article and the store's home too, worded by an ad in the footer placement when there is one, else by the site's own words (article.close under UI strings → library). A landing page keeps its own Close as a section.