Get started
Browse the docs

Design your website's sections

Add ready designs, build your own sections, give them backgrounds, and add custom code or interactive blocks when you need them.

Open in ChatGPTOpen in Claude

Your website is a stack of sections. When the ones you have don't show what you want, add a ready design, build your own, or ask the assistant: "add a three-step how it works section", "put a closable bar at the bottom with our holiday hours".

Add a design

Choose Add a section between sections on the preview. Designs are grouped by what they're for (welcome, your story, services, prices, reviews, calls to action and more) and shown in your own colors and fonts. A design goes in with your headline, story and photos where it shows them, so pick the closest one and change any part.

Designs never make claims for you. Prices, reviews and your team come from what you already keep.

Open a section you built and choose Save as design to reuse it. It shows under Your designs in Add a section.

Build your own section

Tap or click any part of a section you built to select it, then use its menu: Edit text, Add inside, Add below, Move up, Put inside, Duplicate, Remove, and its colors and sizes. The section's panel lists every part in order.

  • Columns sit side by side on a computer and stack on a phone by themselves.
  • Your name, phone, address, hours and booking link can show live, so a change to your business details shows everywhere.
  • Under Layout & visibility, Where it goes puts a section above your header, and Stays on screen keeps it at the top or bottom with a close button.

Backgrounds

Open any section and choose Background: one of your colors, a gradient, a curved or wavy bottom edge, or a photo under a shade that keeps the words readable. A background that would make words hard to read is refused, with the nearest color that reads.

  • Services, reviews, photos, team, questions and your schedule start on Auto, which picks a layout from what they hold. Pick one yourself and yours wins.
  • Services can show as cards, a list, a menu, packages, a comparison or by category, each with price options like 30, 60 or 90 minutes. When you sell through bookings, your website shows the same prices booking charges, each option with its own length and price, and add-ons under “Add to your visit”.
  • Paste a social link and your website shows its platform's icon. Show them as icons, labels or buttons.

Custom code and interactive blocks

Most websites need no code. For a look the editor can't make, a section you build can hold its own HTML and CSS. On a computer, choose Edit code in the section. Problems show beside their line as you type.

For something that responds, like a quiz, a price calculator or a countdown, ask the assistant for an interactive block. You change its words and settings yourself in its Settings. It runs once your website is published.

Code the assistant or another AI writes always waits for your OK, even if you chose Just do it. You're responsible for code you approve. Every version is saved, so you can go back.

For agents

  1. Load the site.edit skill. Climb one rung at a time, and move up only when the rung below can't show the request: a catalog section restyled, a design, your own elements, custom markup and CSS, then an interactive block.
  2. Designs: site.catalog with {"kinds": ["designs"]} lists them by purpose; {"designs": ["<id>"]} reads one adapted to the site. Add it with one site.change page op insertSection {"type": "custom", "designId", "tree", "settings", "index"}.
  3. Elements: site.catalog with {"kinds": ["elements"]} gives every type, its settings as JSON Schema, its style keys and the tree rules. Build with insertSection {"type": "custom"} and insertElement, parents first. Bind details instead of typing them (bind: {"detail": "phone"}).
  4. Custom code: read site.catalog with {"kinds": ["code"]} first. Markup is setMarkup, CSS is setStylesheet, a block is insertElement of type interactive, and site.blockCode reads a stored block's code. Every change to custom code answers proposed: give the owner the approveAt link.
  5. Run site.check, then look with site.snapshot at width 390 and 1280 before you propose a section you built or custom code.
  6. When nothing can show the request, tell the owner, offer the nearest thing, and call site.noteGap with asked, ownerWords and offered.