Documentation

Welcome to ClayBuilder documentation!

This is where all the parts of ClayBuilder are explained in a bit more depth. Whether you are just getting started or looking for a refresher on a specific feature, you will find everything you need here.

What is ClayBuilder?

ClayBuilder is a website builder that lets anyone create a professional website without needing to know how to code. You build your site visually — dragging in sections, adding components like text and images, adjusting colors and fonts — and ClayBuilder handles everything behind the scenes to make it work on the web.

It is designed to be simple enough for someone who has never built a website before, while still being powerful enough to create something that looks and feels professional.

How the docs are organized

The documentation is broken into categories on the left. Each category covers a different part of ClayBuilder:

• The Editor — everything about building and editing your pages.
• Apps Library — forms, an online store, events, blogs, popups and the other apps you can add to your site.
• Media Library — managing your images, videos, and other files.
• Analytics & Notifications — your visitor numbers and the alerts ClayBuilder sends you.
• Website Settings — configuring your site's details, SEO, appearance, and more.
• Publishing — getting your site live and connecting a domain.
• Settings — managing your account and billing.
• Key Terms — plain-English explanations of any terms you might not recognize.

Need help?

If you cannot find what you are looking for in the docs, you can reach the ClayBuilder support team through the Help Center.

When you create a new site in ClayBuilder you are walked through seven short steps. Everything you choose here can be changed later, so none of it is a commitment — the point is to get you into the editor with a site that already looks like something.

Step 1 — Name

Enter what your site is called. This identifies the site inside ClayBuilder and appears in your dashboard; it does not have to be your final domain name, and you can change it later.

Step 2 — Template

Pick a starting point. Templates are short, publish-ready sites written for a particular kind of business, and they cover a wide range — restaurants and cafes, trades such as plumbing, roofing and HVAC, professional services such as law firms, dentists and accountants, plus gyms, salons, schools, churches, wedding and event businesses, and more.

You can also start from a blank site that uses your chosen colors but has no pre-filled content — just an empty page ready to build on.

Step 3 — Theme

Choose the colors your template will be created with. A live preview of your template shows the colors as you pick them, and Expand preview opens it larger. Pick a ready-made theme, or set each color yourself:

• Header & footer — background and text.
• Sections — the primary and alternate section backgrounds.
• Typography — heading text, body text, and subtitle text.
• Text — the default text background and text color.
• Buttons & accents — button background, button text, and the accent color.

Backgrounds can take a gradient as well as a solid color. Everything here can be changed afterwards under Appearance.

Step 4 — Fonts

Set three fonts, each with its own weight and letter spacing under an Advanced area:

• Site font — your content.
• Heading font — titles and headings, with a text transform option.
• Link font — navigation links, also with a transform option. Your site name follows it until you give the name a font of its own in the header's Brand & Logo panel.

Not every font supports every weight, and the picker says so where that applies.

Step 5 — Contact info (optional)

Add an email address, phone number, and address. Anything you enter appears in your site footer, and you can edit or hide any of it later in Site Information. Skipping this step is fine.

Step 6 — Media (optional)

Drop in files to pre-load them into your Media Library. Skip it and add media later from the editor if you would rather.

Step 7 — Ready to launch

A summary of your choices — name, template, theme, fonts, and any contact info and media you added — with a chance to go back before creating the site. Click Create Website and ClayBuilder builds the site and drops you into the editor.

Where to get help

These docs explain how ClayBuilder works. When you need an answer about your site or account specifically, the Help Center is the place to go — it holds knowledge base articles and is where you open a support ticket.

Reach it from the Help Center link in the navigation bar or in the footer of the ClayBuilder site.

Searching the knowledge base

The Help Center opens with a search box covering guides, billing questions, and troubleshooting. Articles are grouped into categories you can browse, with featured articles surfaced on the main page.

Opening a ticket

If searching does not answer your question, Still need a hand? leads to the contact form. It asks for:

• Your name and Your email — where the reply goes.
• Category — General, Billing, Technical, Bug Report, Feature Request, or Account. Choosing accurately routes your ticket to the right people.
• Subject — a short summary.
• How can we help? — the detail.

Submitting creates a ticket with a reference — a short code identifying it. Keep it; it is the quickest way to point support at the right conversation.

Tracking your tickets

View Support Requests in the Help Center opens Your Support Requests, which lists everything you have opened. Each ticket shows its reference, category, status, when it was opened, and when it was last updated. Status runs through New, Open, Pending, Resolved, and Closed.

Replying

Opening a ticket shows the whole conversation, and you reply in the same place rather than by email, so everything stays on one thread. Once a ticket is settled you are asked How did we do? and can send a short review.

This is the editor — where you will spend most of your time building your website. It is laid out in three parts: a bar across the top, a control panel down the left, and your live page filling the rest. There is no panel on the right; everything right of the left panel is your page.

The top bar, left side

• The ClayBuilder logo — goes to My Websites, the list of all your sites.
• My Websites — the pill showing your site's name. It opens the My Websites window: Find a website, New website, All websites, and for the site you are in, its Website name, its web address (or Not online yet if it has not been published), Manage billing or See plans, and See versions. Only you and your team see the website name; visitors see the site title from Settings. You can rename only the site you have open. Pick another site and Open this website to switch; on the site you are already in, the button reads Keep editing.
• Manage Pages — the pill showing the page you are editing and how many pages the site has. It opens the Pages window, which is where you switch pages, rename them, and set their address and search settings.
• + (Add New Page) and the trash can (Delete Page). See Add Page and Delete Page.

While you are editing a popup, the bar shows Editing popup: and the popup's name, with Back to Popups to return to the Popups app.

The top bar, middle

The device switch — a monitor for desktop and a phone for mobile. Cmd + Shift + V (Mac) or Ctrl + Shift + V (Windows) also switches. See Desktop and mobile.

The top bar, right side

Six icons switch between the main views:

• Editor — building your pages. This is where you start.
• Media Library — your images, videos, and files. See Media Library.
• App Library — forms, a shop, events, blogs and more. See Apps Library.
• Analytics — ClayBuilder's own visitor counts for your site. See Analytics.
• Notifications — with a badge showing how many are unread. Tabs for All, Unread and each kind of notification; the list is grouped by day, ↑ and ↓ move through it, and a Welcome guide is there to start. See Notifications.
• Settings — everything about the site as a whole. See Website Settings.

The views have no keyboard shortcuts; click the icons. The view you are on is kept in the web address, so refreshing or sharing the link reopens the same view.

What is not in the top bar

There is no undo or redo button, no Save button (everything saves as you go), no Share button, no zoom control (mobile view fits itself to the window) and no account menu.

The left panel and the page

The editor itself is split between the LHS — the control panel on the left — and the RHS, your actual page. Nearly everything can be done from either side: the LHS gives you precise, labeled controls, while the RHS lets you click, drag, and type directly on the page. See LHS and RHS.

Smaller screens

On a laptop screen under 960px tall the top bar gets slimmer to leave more room for your page. On a screen under 1150px wide the editor itself is not available — it says it needs a bigger screen — and the other views are reached from a tab bar along the bottom: Editor, Media, Apps, Analytics, Alerts and Settings.

How a page is built

Pages are made of sections stacked top to bottom, and each section holds components — text, images, buttons, shapes. Build a page by adding sections for each area you want, then filling them with components.

Preview and publish

At the bottom of the LHS sit the two buttons that take your work outside the editor:

• Preview Site — opens your current draft in a new tab, shown as a real visitor would see it, without the editing controls. It opens on the page you are editing rather than the home page, so you can check the thing you have just changed.
• Publish Site — opens the publish window, where you take the site live, connect a domain, and manage its plan.

Saving and publishing

Your work saves automatically as you go — there is no save button. What you are editing is a private draft, and it stays private until you publish. Visitors keep seeing the last published version until then, so you can rebuild a page mid-afternoon without anyone noticing.

What is a card?

A card is a container that groups several components into one styled box. Every other component holds a single piece of content; a card holds other components — a picture, a heading, a line of copy, and a button, treated as one unit.

It is the component to reach for whenever a design repeats: a row of three services, a team of staff profiles, a set of pricing tiers. Build one card, and each copy stays internally consistent because the grouping is real rather than four loose components that happen to sit near each other.

The card's own grid

A card lays its contents out on a grid it owns, the same way a custom snap section does — just smaller, because the card is smaller. There are no column, row or gap settings to manage: the card's slots are shaped right on the page, and the grid simply follows them.

Arranging what is inside

A card's slots are moved, resized, added and removed right on the page, exactly as on a custom snap section. A card moves as one piece until you click it; once it is selected, dragging inside it rearranges its own slots. Use Add Empty Box in the card's panel in the LHS to give it another empty slot; it sits above the tabs, with a Show me how link that walks you through moving and resizing. See Moving and resizing slots — a card's slots work the same way, just on a smaller grid.

Where cards come from

In Add Content, the Boxes group holds every card: box arrangements that drop several empty cards in at once, designed boxes that arrive already filled (Feature box, Review card, Price card, Team member and more), and Empty box.

What a card can hold

To fill a card, click the + in one of its empty slots. Cards accept the components that make up a single visual unit:

• Text and Button
• Image and Video
• Shape, Icon, and Drawing (the canvas component)
• Layouts, which split the empty slot you clicked into columns, rows or a grid

A card holds up to 12 pieces. Embeds, forms, and other cards are deliberately excluded — cards do not nest, and Add Content shows no Boxes inside a card. It only offers what a card can actually hold, so you cannot pick something that would then be refused.

Tabs

• Content — a list of what sits in the card, each opening that component's own settings, with a trash button on each row to delete it.
• Border — style tiles, corners, color, thickness, and which sides get a line. A card is usually where a border earns its keep, since it is what makes the box read as a box.
• Padding — space between the card's edge and its contents.
• Styling — the card's background — None, Color, Image or Video, with a Blur slider (0–30) for an image or video — and its opacity.
• Links — make the whole card clickable, pointing at a page, a section on the current page, an outside address, or a popup.
• Settings — hide the card on desktop or phone, and copy or paste its style.

There is no Hover tab.

A linked card is the usual way to build a grid of clickable tiles — the visitor can click anywhere on the tile rather than having to hit a small button inside it.

A linked card also gets a Link Description field: a short phrase describing where the card goes, such as "Read our pest control guide". This is what a screen reader announces for the link. Worth filling in, because a card's own contents may be a picture and a heading that make sense visually but not when read aloud on their own.

The pill and right-click

A selected card's pill has Refine with Clayton, which reworks the card's words, pictures and buttons as one piece. See Refine with Clayton.

Right-clicking something inside a card adds a Card group to the menu: a background submenu (None, Color or Image), Change Color or Change Image for that background, and Delete Card.

What is the text component?

The text component holds the written content of your site — a heading, a paragraph, a caption, a list. It is a rich text component, meaning a single one can contain a mix of formatting: bold words inside a sentence, a colored phrase, a link, a bulleted list.

Two places to work

Formatting a text works at two levels, and knowing which is which saves hunting:

• The words themselves — type straight onto the page, then highlight words and use the pill that floats over the component. Font, size, weight, letter spacing, color, bold, italic, underline, alignment, the text's position in its box, lists and links are all on the pill, with line height and rotation inside the font chip. Because the pill acts on the highlighted words, this is how one word gets a different color from the rest of a sentence. The pill also has Refine with Clayton, which rewrites the words for you — see Refine with Clayton.
• The whole component — the tabs in the LHS: Text, Border, Padding, Styling and Settings. Selecting a text opens it on Styling.

Text color, font family, font weight, line height and alignment are on the pill only — there are no controls for them in the left panel.

While editing text, Cmd/Ctrl + B, I and U apply bold, italic and underline.

Adding a link

Highlight the words you want to make clickable and use Link on the pill. A text component has no Links tab — links on its words are set from the pill.

The Text tab

Text Style sets what the text is, rather than only how it looks: Paragraph, or Heading 1 through Heading 6, each a tile showing its size. Headings inherit your site's heading font from Appearance, and they also tell search engines and screen readers how your page is structured — so a heading should be a heading rather than a paragraph made large.

Use Heading 1 for the main title of a page, Heading 2 for its major parts, and so on downward without skipping levels.

Restyled one, and want the others to match? Use this look for every Heading 2 on my site (the button names whichever style is chosen) copies this text's look onto every piece of text set to that style.

Text Shadow

A soft shadow behind the text, which is often what rescues light text sitting over a busy image:

• Shadow Color — the color of the shadow.
• Shadow Left / Right and Shadow Up / Down — how far it shifts, and in which direction.

Text Outline

An outline drawn around each letter, with an Outline Color and Outline Thickness. Used sparingly on large display text it can make a headline hold up over any background; on body text it hurts readability.

More Text Options

Closed until you open it, holding the controls most text never needs:

• Capital Letters — As Typed, All Caps, No Caps or Each Word, without retyping anything.
• Small Capitals — Off or On; turns small letters into smaller capital letters.
• Space Between Words — a slider from 0 to 20 px for the gap between words, with a Precise box for an exact value.
• Indent First Line — a slider from 0 to 80 px for how far the first line of each paragraph starts in, with a Precise box for an exact value.
• Words Run — Across the page as usual, or Down it. Running down, Read From chooses whether it reads from the top or the bottom.
• Reading Direction — Left to Right or Right to Left, for languages such as Arabic and Hebrew.

Border, Padding, Styling and Settings

These work the same way on every component — see Components. In short: Border is picked from style and corner tiles; Padding is a Space Inside choice with an All Sides slider; Styling sets the background behind the text, the text's opacity and a separate Background Opacity; Settings hides the component on desktop or phone and copies or pastes its style. See padding if the term is unfamiliar.

What is a button?

A button is a clickable element that sends visitors somewhere — another page on your site, or an address elsewhere on the web. It is the component you reach for when there is a specific action you want a visitor to take: Book a table, Get in touch, View the menu.

A button always links somewhere. Unlike other components, there is no toggle to turn its link off.

Editing the label

Click into the button on the page and type. To format the label — its font, size, color, bold or italic — highlight the words and use the pill, much as on a text component. A button's pill has no Lists or Link button; the button's link is set in its Links tab. Keep it short — a button label is read at a glance.

The pill's Refine with Clayton rewrites the label for you. See Refine with Clayton.

"Changing a button's color" means one of two things. Its background is set in the Styling tab; its label color is set on the pill, with the words highlighted.

Tabs

A button has Text, Border, Padding, Styling, Links and Settings, and opens on Styling. The Text tab holds the same whole-component text options as a text component: Text Style, Text Shadow, Text Outline and More Text Options.

Links

The Links tab controls where the button goes. Its Link Type is one of:

• Choose from Your Pages — one of your own pages. The link follows the page rather than its address, so it survives a rename.
• Jump to a Section — scroll to a section on the current page rather than navigating away.
• Link to External Site — a full web address. If you type a bare host such as example.com, ClayBuilder adds the scheme so it is treated as an outside address rather than a path on your own site.
• Open a Form in a Popup — buttons only; shows one of your forms over the page.
• Open a Popup — shows one of the popups made in the Popups app.
• Close the Popup — only offered on a popup's own page.

Open in New Tab sits under the URL. Turning it on is the convention for links that leave your site, so visitors do not lose their place.

If a link stops resolving, the Links tab is flagged in the LHS and the section is marked in your section list, so a broken link is visible without opening every button to check.

Border and Padding

Border corners are what separate a rectangular button from a pill — pick Pill from the Corners tiles. Padding on a button behaves as an inset: increasing it shrinks the visible button away from the edges of its slot rather than growing it outward.

Styling

The Styling tab holds the button's background and opacity. New buttons start from the button colors in your Appearance settings, so if you want every button on the site to change at once, change it there rather than on each button.

Quick edits

Right-clicking a button on the RHS offers Edit Link directly, along with Duplicate, the slot's background, and Delete. See Right clicking.

What is an image component?

The image component lets you place an image inside a section. You choose the image from your Media Library, and then control how it fits its frame, its opacity, its border, and optionally make the whole image a clickable link.

Tabs

An image has Border, Padding, Styling, Overlay, Links and Settings, and opens on Styling. Above the tabs sit Image Fill, Change Image and Edit Image.

Changing the image

Select the component and click Change Image in the LHS to open the Change Image popup and pick a different image. If no image has been set yet, a Change Image button also appears directly on the component on the page.

Edit Image, just below it, opens the image editor to crop, rotate or flip the picture. The result is saved as a new copy and the component switches to it.

The image's pill has the same options without opening the LHS: Replace from library opens the Change Image popup, Replace with Clayton opens the Picture Maker shaped to fit this image, and a size menu sets the Image Fill (below).

Image Fill

Controls how the image fits inside its frame. The options are:

• Stretch to Fill — stretches the image to fill the frame exactly, which may distort it.
• Contain — fits the entire image inside the frame without cropping, leaving empty space on the sides if needed.
• Cover — fills the frame completely by cropping the image edges. No empty space, but part of the image may be cut off.
• Original Size — displays the image at its actual pixel size with no scaling.
• Scale Down — like Contain, but never scales the image up beyond its original size.

Border and Padding

The same Border and Padding tabs as every component — style and corner tiles, color, thickness and sides for the border; a Space Inside choice and an All Sides slider for padding. See Components.

Styling

• Background — None, or Color (with a Solid / Gradient switch), behind the image. An image cannot take an image background.
• Image Opacity — how transparent the image itself is (0% fully transparent, 100% fully opaque).
• Background Opacity — the transparency of the background behind the image, separately. This lets you fade the background without affecting the image, or vice versa.

Overlay

The Overlay tab washes a color over the image, which is what makes text laid on top of a photograph readable. Without one, light text over a bright patch of sky disappears.

• Overlay — turn the wash on or off.
• Overlay From — which edge the color is strongest at, picked from tiles: Even (flat across the whole picture), Top, Bottom, Left or Right. The edge options fade out across the picture, so one end stays readable while the other stays visible.
• Overlay Color — the color washed over the image.
• Overlay Strength — how strong the wash is, as a percentage.

A dark overlay fading up from the bottom is the usual recipe for a caption sitting over the foot of an image.

Links

• Enable Linking — turn the link on the image on or off.
• Link Type — Choose from Your Pages, Jump to a Section on the current page, Link to External Site, Open a Popup, or Close the Popup (on a popup's own page).
• Open in New Tab — under the URL; opens the link in a new browser tab instead of replacing the current page.

The video component plays a video file from your Media Library. Videos do not play in the editor — a static thumbnail is shown while you are editing. You will only see the video play on the preview or live site.

For a video hosted on YouTube, use the YouTube video component instead (see below).

Tabs

A video has Video, Border, Styling, Overlay and Settings. It has no Padding or Links tab.

Selecting a video

Select the component in the LHS and click Select Video to choose a video from your library. Once a video is set the button changes to Change Video. You can also right-click the component and choose Change Video to open the Change Video popup.

Video Fill

Controls how the video fits inside its frame:

• Stretch to Fill — stretches the video to fill the frame exactly. May distort the aspect ratio.
• Contain — fits the full video inside the frame without cropping, preserving the aspect ratio.
• Cover — fills the frame completely by cropping the video edges. No empty space, but the sides may be cut off.

Playback settings

Found in the Video tab in the LHS:

• Autoplay — start playing the video automatically when the page loads.
• Mute — play the video without sound. On by default.
• Controls — show the play/pause bar and other player controls to the visitor. On by default.
• Loop — restart the video from the beginning when it ends.

Border

The same Border tab as every component: style tiles (None, Thin, Bold, Dashed, Dotted, Double), corners, color, thickness and which sides get a line. See Components.

Overlay

The Overlay tab washes a color over the video so that text laid on top stays readable — the usual treatment for a full-width video behind a hero heading.

• Overlay — turn the wash on or off.
• Overlay From — which edge the color is strongest at, picked from tiles: Even (flat across the whole picture), Top, Bottom, Left or Right.
• Overlay Color — the color washed over the video.
• Overlay Strength — how strong the wash is, as a percentage.

An overlay matters more on video than on a still image, because the picture underneath keeps changing — a contrast that works in one frame can fail in the next.

Styling

• Background — None, Color (with a Solid / Gradient switch) or Image, behind the video. Visible in areas the video does not cover, such as with Contain.
• Video Opacity — how transparent the video itself is (0% fully transparent, 100% fully opaque).
• Background Opacity — the transparency of the background, separately.

YouTube videos

The YouTube video tile in Add Content's Photos & video group opens a picker straight away: search YouTube or paste a link into the box ("What is it about? Or paste a link"), play the one you want, and Use this video puts it on the page. Change Video in its left panel opens the picker again. Its tabs are YouTube (Autoplay, Allow Fullscreen and Controls), Border, Styling and Settings.

What is the map component?

The map component places an interactive map on your page with your own markers on it — your shop, your venue, the branches you serve. It needs no account and no API key: the maps are served by OpenFreeMap, so there is nothing to sign up for and no usage cap to watch.

Base Map

Choose the map's overall look:

• Light — a pale, muted map. The default, and the one that sits most quietly behind markers.
• Dark — a dark equivalent, for dark-themed pages.
• Colorful — brighter, with more color separating land, water, and roads.
• Detailed — the most detail, with more labels and features shown.

3D Buildings

Tilts the camera and raises buildings into three dimensions. It looks best zoomed in on a city, where there are real buildings to raise — at country zoom there is nothing to see.

Visitors Can Move the Map

Controls whether visitors can pan and zoom on the published site. Turning it off keeps the map fixed at the view you chose, which also stops it from grabbing the page scroll when someone scrolls over it — a common annoyance on phones.

Find a Place

Type an address or a place name and click Find to move the map there, rather than working out its coordinates yourself.

Default View

Where the map is centered and how far in it is zoomed when the page loads, set as latitude, longitude, and zoom. The stepper buttons nudge each value, and holding Shift moves in steps ten times larger.

Fit to Markers sets all three for you so that every marker is in view — usually faster than finding the right center by hand.

Markers

Markers are the pins on your map, edited as a list in the LHS. Click Add Marker to add one, then either type its coordinates or drag the pin on the canvas to position it. Each marker row has:

• A color for the pin.
• A label (placeholder "Marker 1", up to 120 characters), shown in a popup when a visitor clicks the pin, so they know what they are looking at.
• Lat and Lng — the pin's coordinates.
• A remove button to delete the marker.

Tabs

• Location — base map, 3D buildings, interactivity, Find a Place, default view, and markers.
• Padding and Border — the usual framing controls.
• Settings — the component's general options.

What is the custom code component?

The custom code component lets you write your own HTML, CSS, and JavaScript inside a single component, placed in a slot alongside everything else on the page.

It is the smaller sibling of the custom code section. The difference is scale, and it decides which you want:

• A component sits in one slot among other components — right for a booking widget, a third-party embed, or a small piece of custom markup that belongs beside your normal content.
• A section takes the full width of the page and holds nothing but your code — right when the whole band of the page is yours.

Editing the code

Select the component and click Open Code Editor in the LHS, or right-click the component and choose Open Code Editor. This opens the Custom Code Editor, which gives you separate HTML, CSS, and JavaScript tabs, a Paste all code button for code you are copying in whole from somewhere else, and an Undo button.

How your code is handled

• CSS is scoped to the component — selectors are rewritten so they only match inside it, and short class names are safe.
• JavaScript is not scoped. It runs on the page like any other script and can reach the whole site. Use the $ and $$ helpers to keep your selectors inside your own component.
• @import is stripped from CSS, and :root is rewritten to target the component rather than the whole document.

Changes apply when you close the editor

Your edits are applied when you leave the Custom Code editor rather than while you type. Code is rarely valid mid-keystroke, so reloading on every character would mean watching your own half-written markup break and recover.

What is the contact form component?

The contact form component puts a form onto a page. The form itself lives in the Forms app and this component points at one, though you can make a new form right from the component.

That split is deliberate, and useful: one form can appear on several pages, and every copy stays in step, because they are all showing the same form. Edit the form once and every placement updates.

Choosing the form

Select the component and click Select form in the LHS. It shows every form you have built on this site; click one to show it here. Once a form is chosen, Change opens the same list. Until you choose one there is nothing for the component to show.

Making a form here

The first tile in that list is Make a new form. Give it a name, pick a starting point (Contact, Quote request, Event RSVP, Feedback or Blank) and click Make form. The new form goes straight onto the page in your site's colors, and the form builder opens on it so you can change its fields right away. On a site with no forms yet, Select form opens this straight away.

Refine with Clayton

The form's pill has Refine with Clayton, which can change the form's fields and its button's words for you. See Refine with Clayton.

Editing the form

Click Edit fields to open the chosen form in the form builder without leaving the page you are working on. Changes are saved to the form itself, so they appear everywhere it is placed.

Styling

A form's own appearance — field colors, borders, spacing, button styling — belongs to the form and is set in the form builder's Look panel, not here. Setting it there is what keeps every placement of the form looking the same.

The component itself has just two tabs: Padding, which sets the space around the form within its slot, and Settings, which hides it on desktop or phone.

Where submissions go

Everything a visitor sends is recorded against the form, and you read it on the form's page in the Forms app. Email notifications and the thank-you message are form settings too. See the Forms app.

What is the shape component?

The shape component draws a single geometric shape. Shapes are useful as decoration — a colored block behind a heading, an angled divider between two areas, a circle framing an icon — and because they are drawn as vectors rather than images, they stay crisp at any size and cost nothing to load.

A shape can also be made clickable, which makes it a flexible alternative to a button when you want something that does not look like one.

Shape Type

Select the component and choose from the Shape Type dropdown in the LHS. The available shapes are:

• Rectangle
• Circle
• Triangle
• Diamond
• Trapezoid
• Pentagon
• Hexagon
• Octagon

You can also change it without opening the LHS: right-click the shape on the RHS and use the Change Shape submenu, which lists the same set and marks the current one.

Tabs

A shape has Styling, Border, Padding, Links and Settings. Shape Type, Lock Aspect Ratio and the size sliders sit above the tabs.

Border

A shape's border follows its outline rather than its bounding box, so a triangle gets a triangular border rather than a rectangular one. Pick a style tile (None, Thin, Bold, Dashed, Dotted or Double), the corners, a color and a thickness. On a shape, rounder corners genuinely reshape the outline, so a triangle with a large corner size becomes a soft-cornered triangle rather than a triangle in a rounded box. The outline's thickness stays visually consistent even when the shape is stretched.

Size and proportions

How much of its slot the shape fills is controlled by a Lock aspect ratio toggle and the sliders beneath it:

• Locked — a single Size slider scales the shape evenly, keeping it in proportion.
• Unlocked — separate Width and Height sliders, so you can deliberately stretch a circle into an ellipse or squash a square into a bar.

Both run from 1% to 100%, by slider or by typing a number. At 100% the shape fills its box; lower values shrink it while leaving the box where it is, which is the simplest way to put breathing room around a shape.

Rotation

Rotation is on the shape's component pill rather than in the sidebar. It sits there because angling a shape is something you judge against the page rather than by reading a number, so the control is next to the shape itself. The sidebar keeps the size controls.

Styling

The shape's fill is its Background — None (the default), Color (with a Solid / Gradient switch) or Image — plus an Opacity slider for how transparent it is.

Outside a snap grid, you can also right-click the shape and choose Change Color or Change Image to change its fill without opening the LHS.

Padding

A Space Inside choice and an All Sides slider that inset the shape within its slot. See padding.

Links

• Enable Linking — make the whole shape clickable.
• Link Type — Choose from Your Pages, Jump to a Section, Link to External Site, Open a Popup, or Close the Popup (on a popup's own page).
• Open in New Tab — under the URL; opens the link in a new browser tab instead of replacing the current page.

The link is only active on your published site — clicking a shape in the editor selects it rather than following the link.

What is the icon component?

The icon component places a single Font Awesome icon on your page. Font Awesome is a large icon library covering the symbols websites need most — phones, envelopes, carts, arrows, social logos, and thousands more. Like shapes, icons are drawn rather than loaded as images, so they stay sharp at any size.

Icons work well as visual labels: an envelope beside an email address, a clock beside opening hours, a set of matching icons across a row of features.

Choosing an icon

Select the component and click Change Icon in the LHS to open the icon picker, where you can search the library or scroll through it. A preview of the current icon sits directly above the button. New icon components start as a star. The icon's pill also has Change icon, which opens the same picker without going to the LHS.

Icon Color

Sets the color of the icon itself. Because an icon is drawn rather than a fixed image, recoloring it is instant and lossless — the same icon can be dark on one section and light on the next.

Sizing

The icon scales to fill the space it is given, so you size it by sizing its box rather than by setting a font size. Give it a larger cell and the icon grows to match.

Tabs

An icon has Border, Padding, Styling and Settings; Change Icon and Icon Color sit above the tabs. In Add Content, the Icons group offers 20 ready-made icons plus Any icon.

Border and Styling

The Border tab picks a style tile, corners, color and thickness; the Styling tab sets the background behind the icon and its opacity. A background color with Round corners turns any icon into a round badge.

What is the canvas component?

In Add Content it is the Drawing tile, in the Shapes & lines group. The canvas component is a freeform drawing area. Where the shape component holds exactly one shape, a canvas holds as many as you like — layered, rotated, grouped, and arranged however you want — and places the whole composition on your page as a single component.

It is the tool for anything that is a picture made of shapes rather than a photograph: a logo mark, an abstract background, a decorative divider, a diagram, a piece of display lettering.

Editing a canvas

Select the component and click Edit Canvas in the LHS. This opens the Canvas Designer, a full editing window with a layer list, a working area, and a properties panel. Your design is saved back to the component when you click Save Design.

Canvas Opacity

A slider in the Styling tab that fades the entire design as one, which is what you want when a canvas is being used as a backdrop behind text rather than as the focus of a section. A separate Background Opacity slider fades only the background behind the artwork.

Tabs

A canvas has fewer tabs than most components, because its appearance is set inside the Canvas Designer rather than on the component:

• Padding — space between the canvas's edge and the artwork, to inset it within its slot.
• Styling — the background behind the artwork, Canvas Opacity, and Background Opacity.
• Settings — the component's general options.

There is no Border tab: a border would frame the component's box rather than the artwork, and a canvas design usually wants its own edges. Draw a frame as a shape inside the design instead.

The LHS (left-hand side) is the panel on the left of the editor where you can manage and configure everything on your site. The RHS (right-hand side) is the live canvas on the right where you can see what your site looks like. You can make edits from both sides — the LHS gives you precise controls while the RHS lets you interact with your content directly.

What the LHS shows

Add Section sits at the top. Below it is the list: Header (your navbar), every section on the page in the order it appears, and Footer. Preview Site and Publish Site sit at the bottom — side by side on a short screen. It is a structural view of the page: what is on it, and in what order.

Each section row has its own controls — a pencil to rename it, up and down arrows to move it, and markers showing whether it is locked or hidden on a screen size. Hover the gap between two rows for an Add Section pill, beside an Add Transition pill that puts a shaped edge between the two sections (see Transitions). Right-click a row for a menu of section actions — see Right clicking.

Clicking a row drills in one screen at a time — a section, then its pieces, then a single component — with a back arrow and a clickable breadcrumb at the top to climb back out. Each screen holds that item's settings, grouped into collapsible panels or tabs. This is where the named, exact controls live: borders, padding, link destinations, backgrounds.

Drag the panel's right edge to make it wider or narrower (between 300 and 650 pixels). A chevron at the edge — Hide Sidebar / Show Sidebar — tucks it away to give the page the whole window.

What the RHS shows

The RHS is your page as it will actually appear, rendered live. There is no separate panel on the right — it is the page itself, it updates as you change things in the LHS, and you can work on it directly:

• Click anything to select it. The LHS follows your selection and opens the matching settings.
• Type straight into text and button labels.
• Drag components to move their slots, pull the handles on a selected component to resize its slot, and drag a section's bottom edge to change its height. See Moving and resizing slots.
• Drag a section by its side gutters to move it up or down the page.
• Right-click anything for a menu of actions relevant to it. See Right clicking.
• A floating component pill appears above whatever you have selected, with its most common actions.

Choosing a side

Neither side is the "real" one — they drive the same content, and a change made on one appears immediately on the other. In practice:

• The RHS suits work where you are judging the result by eye — writing copy, nudging things into place, trying a color.
• The LHS suits work that needs to be exact or repeatable — matching a padding value across two sections, setting a link, or reaching a setting with no on-canvas equivalent.

The LHS in other tabs

The LHS is not only for the editor. Switching to Media Library or Settings replaces it with that area's own list down the left — media collections, or the settings categories.

Switching views

Switch between desktop and mobile view with the monitor and phone icons in the middle of the top bar, or by pressing Cmd + Shift + V (Mac) / Ctrl + Shift + V (Windows) while on the Editor view. This changes the canvas to show how your site will look on that screen size. Mobile view fits itself to the window, so there is no zoom control.

Mobile overrides

Desktop and mobile are separate editing layers. When you switch to mobile view and make changes — such as adjusting padding, height, font size or background — those changes are saved specifically for mobile and will not affect how the site looks on desktop. This means you can fine-tune the look of your site independently for each screen size.

To put a section's mobile arrangement back to following desktop, right-click the section (on the page or in the LHS) in mobile view and choose Reset Mobile Layout. It is only offered when that section has mobile changes.

In mobile view, a component's pill shows Reset mobile styles when that component has mobile-only changes. It puts the component back to following its desktop look.

Slots on mobile

Slots are moved, resized, added and removed in desktop view only. In mobile view you can still drag a component onto another slot to swap them, or into an empty slot, and that changes mobile only.

Hiding sections and components on specific screen sizes

You can hide any section on either desktop or mobile without deleting it. Open the section in the LHS, expand its Settings group, and use the Hide Section toggles for desktop and mobile. The section still exists and is visible in the other view — it just does not appear for visitors on the hidden screen size. A component's own Settings tab has the same Hide Component toggles.

Who is Clayton?

Clayton is the assistant built into the ClayBuilder editor. You can ask it questions about your site, about how a feature works, or have it make changes for you — adding a section, restyling components, rewriting a heading.

Clayton can see the site you are working on, so questions can be about your pages rather than websites in general. "What's on my home page?" and "Make the contact section match the one above it" are both things it can work with.

Opening the chat

Click the round button with the sparkle wand at the bottom right of the editor. The chat window opens, and the button turns into an X — click it again to close the window. Your conversation is kept.

The chat window

• The chat name — at the top left, with the page you are working on beneath it. Click it for a menu of your recent chats and See all chats, which opens Your chats, where each chat has Rename and Delete.
• New chat — the pen-and-square icon; starts a fresh conversation.
• Expand / Collapse — makes the window larger for longer conversations, and back.
• The message box — "Ask Clayton to change something…". Enter sends; Shift + Enter starts a new line.
• Help · Docs — links at the foot of the window to the Help Center and these docs, beside the note "Clayton can be wrong. Chats may be reviewed."

There is no edit-mode switch and no separate close button — the launcher is the close.

Turning Clayton off

If you would rather work without the assistant, turn off Show Clayton in the editor under Preferences on your profile page. It takes effect the next time you open the editor. See Account settings.

Conversations are saved per site

Chats belong to the site you had open, and reopening one brings back what was said. Start a new chat when you move to a different task — a conversation that has wandered across several topics gives Clayton more to sift through.

Asking questions and asking for changes

There is no mode to switch. Ask a question — what a setting does, what is on a page, why something looks the way it does — and Clayton answers. Ask for a change, and Clayton sets it up for you to confirm.

Nothing changes without your confirmation

Clayton does not edit your site directly. It proposes a change, and the proposal appears in the chat as a card describing exactly what would happen, with two buttons:

• A confirm button worded for the change — Add it, Change it, Move it, Rename it, Delete it, Delete them, Redesign it, Build it, or Do it for a set of changes together.
• Cancel, which discards the proposal and changes nothing.

Proposals that remove something — deleting a section, a page, or clearing out a navigation menu — are marked as destructive with a warning icon, so a deletion never looks like an ordinary edit. Nothing is applied until you press the confirm button.

What Clayton can change

Proposals can cover:

• Adding, updating, moving, and deleting sections, including building a whole section with its components in one go, and moving and resizing a section's slots.
• Adding, updating, restyling, moving, renaming, swapping, and deleting components — including a card's own grid, slots, gap and whole-card link.
• Adding, renaming, deleting and bringing back pages.
• Updating your navbar and footer.

Some things stay yours to change: mobile layouts, the per-page Google and sharing settings, labels and the home page in the Pages window, link types that open or close a popup, a map's zoom and markers, and section spacing. Clayton tells you where those are rather than changing them.

Clayton also works from the pill — see Refine with Clayton — and can find stock photos and videos for you — see Stock photos and videos.

Tours

Ask Clayton to "show me around" or "give me a tour" and it starts the guided tour for the view you are on. That is the way to see a tour again — there is no tour button on screen.

Staying on topic

Clayton is scoped to ClayBuilder and your website. Ask it something unrelated and it will say so rather than attempt an answer. If a request is ambiguous — which section did you mean? — it will ask before proposing anything.

Asking Clayton from the pill

You do not have to open the chat and describe what you mean. Several pills have a wand button that points Clayton straight at the thing you selected:

• Refine with Clayton — on a text, a button, a card, a contact form and a blog posts list.
• Refine section with Clayton — on a section's pill.
• Replace with Clayton — on an image (see below).

How refining works

Click the wand and a small box opens where the pill was, asking how Clayton should refine it. Type what you want in your own words, or tap one of the ideas under the box:

• Text and buttons — Shorter, Friendlier, More professional, Fix spelling, More exciting, Simpler words.
• Sections and cards — Tighter writing, Friendlier, More professional, Fix spelling, Cleaner layout, More eye-catching.
• Contact forms — Add a phone number, Add a message box, Ask for a date, Fewer fields, Required fields, Friendlier button.
• Blog posts lists — Match my site, Cleaner look, Rounder corners, More spacing, More eye-catching. The posts themselves are written in the Blogs app, so Clayton changes only how the list looks.

The chat opens with your request already sent, naming the thing you picked. Clayton then proposes the change as its usual card, and nothing changes until you confirm it. Press Escape or click elsewhere to close the box without asking.

Replace with Clayton

An image's pill has Replace with Clayton instead. It opens the Picture Maker with the shape already set to match the image's slot — Wide, Tall or Square — and the picture you keep goes straight into that image.

Asking for a photo

A new site often has no photos of its own yet. Ask Clayton for one — "put a photo of fresh bread in the top section", for example — and it shows a grid of real photographs in the chat for you to tap, each with a credit line naming where it came from.

Clayton can also offer pictures you already have: the ones in your Media Library, and the pictures that came with your template.

Where the photos come from

Photos come from Pexels, Unsplash, Pixabay and Openverse's public-domain collection. Their licenses do not need a credit shown on your page, so you can use them as they are.

Picking one

Tap a photo and it is saved into your Media Library, then Clayton turns it into its usual change card for you to confirm. The grid stays in the chat, so you can go back and pick a different one.

Video backgrounds

Ask for a video behind a section and Clayton can find a short clip too. A video goes in as the section's background with an overlay over it, so text on top stays readable.

What the tour is

A guided tour walks you through the editor — highlighting each part of the screen in turn and explaining what it does. It is the fastest way to get oriented, because it points at the real interface rather than describing it.

When it runs

There are three tours, and each starts by itself:

• Editor — on a site's first visit: a welcome, My Websites and Manage Pages, desktop and mobile view, the six buttons that move between the main areas of ClayBuilder (Editor, Media Library, App Library, Analytics, Notifications and Settings), your content controller (the left panel), adding a section, where sections live, the quick-edit pill (only when the page already has a component), components and how to add them, preview and publish, and a closing "You're ready to build" step.
• Media Library — the first time the Media Library opens: uploading, sorting and searching, grid versus table view, and opening an item's details panel.
• Settings — the first time Settings opens: browsing by category and searching across every setting.

Each tour runs once per website, so a new site runs them again. What you have seen is stored against your account rather than your browser, so it follows you across devices.

Every tour points at the full desktop layout, so none of them run on a phone or a small tablet. Nothing is lost by it: the tour is still waiting the next time you open the editor on a bigger screen.

Moving through it

Use the buttons on each step, or the ← and → arrow keys, to step through. Skipping works per tour: each of the three cannot be skipped the first time you see that tour, and finishing one does not unlock skipping on the others. After that, a tour can be left at any point, and Escape ends it. A tour that Clayton starts for you can always be skipped.

While a tour is running, clicks and taps everywhere except the tour's own card and buttons are blocked and the editor's keyboard shortcuts are suspended, so nothing can pull you off the step being highlighted.

Seeing a tour again

There is no tour button on screen. To see one again, ask Clayton — "show me around" or "give me a tour". It starts the tour that matches the view you are on (the Media Library tour in the Media Library, the Settings tour in Settings, the editor tour otherwise), or a specific one if you name it.

The context menu

Right-clicking almost anything on the RHS opens a context menu with actions relevant to whatever you clicked. The top of the menu shows the element's name and type so you always know which element the actions will apply to. Click any item to run it immediately, or click anywhere outside the menu (or press Escape) to close it without doing anything.

Hold Shift while right-clicking to get your browser's own menu instead.

Right-clicking a section on the page

• Add Empty Box — on a hand-drawn custom snap section; gives the section another empty slot. Everything else about its layout is done right on the page (see Moving and resizing slots).
• Change Layout — instead of Add Empty Box, on an older preset Layout section; opens the layout picker.
• Change Background Type ▸ Color, Image or Video. A gradient is made in the color picker's Solid / Gradient switch, so a gradient background shows as Color.
• Change Color / Change Image / Change Video — opens the picker for the background the section has now.
• Arrange ▸ Move Section to Top, Move Section Up, Move Section Down, Move Section to Bottom.
• Reset Mobile Layout — in mobile view only, when the section has a mobile arrangement of its own; puts mobile back to following desktop.
• Lock Section — protect it from accidental edits and moves.
• Delete — remove the section and all its contents.

A custom code section's menu leads with Open Code Editor, then Arrange, the background items, Lock Section and Delete.

While you are editing a popup from the Popups app, the popup is a single section, so its menus have no Arrange, Duplicate Section or Delete.

Right-clicking a component

Right-clicking a component shows actions for that component, then a divider and a second group headed with the parent's name holding that parent's actions — so you can act on the section without closing the menu and right-clicking again. A component inside a card gets the card's group, and a link inside a footer gets the footer's.

Type-specific actions come first:

• Image — Change Image, which opens the Change Image popup. (Edit Image is in the image's left panel.)
• Video — Change Video.
• Button — Edit Link, to change where the button goes.
• Shape — Change Shape, a submenu listing every shape with the current one marked. Outside a snap grid, a shape also gets Change Color or Change Image for its fill.
• Canvas — Edit Canvas, which opens the Canvas Designer.
• Contact Form — Edit Form, which opens the form builder.
• Quiz, Poll and Flashcards — Edit Quiz, Edit Poll and Edit Flashcards, which open the matching app.
• Custom Code — Open Code Editor.

Then, for every component:

• Duplicate — a copy goes into the next free slot in the same section or card.
• Change Background Type ▸ None, Color or Image, plus the matching edit action — the background of the slot the component sits in. A contact form has no background group, since its appearance belongs to the form.
• Delete — remove the component.

There is no Move to Top, Move Forward, Move Backward or Move to Bottom for a component: components sit in slots, side by side, not in front of one another. Inside a card, the card's group adds Delete Card, which removes the card along with everything inside it.

Right-clicking the navbar or footer

Right-clicking the navbar or footer gives you:

• Change Background Type — Color or Image.
• Change Color / Change Image — edit the current background.
• Change Link Styles — jump to the link styling controls.
• Edit Brand — navbar only; jump to the brand name or logo settings.
• Change Hamburger Menu Background — navbar only; sets the background of the hamburger menu panel, which is separate from the navbar's own background.

Right-clicking an individual navbar link gives Edit Link, Configure Dropdown when that link has sub-links, and Delete Link. A footer link gives Edit Link and Delete Link — footers have no dropdowns.

Right-clicking in the LHS

Right-clicking a section in the LHS section list gives a menu with some options the page's menu does not have:

• New Section ▸ Add Section Above / Add Section Below — opens the Add Section gallery to insert one directly either side of this section. LHS only.
• Rename — give the section a custom label. LHS only.
• Duplicate Section — create a copy of the entire section. LHS only.
• Arrange ▸ Move Section to Top, Up, Down, to Bottom.
• Change Background Type ▸ Color, Image or Video, and the matching Change Color / Image / Video.
• Reset Mobile Layout (mobile view only, when the section has mobile changes), Lock Section, and Delete.

A custom code section's LHS menu is shorter: Open Code Editor, New Section, Rename, Duplicate Section, Arrange and Delete.

Right-clicking media

Right-clicking an item in the Media Library gives:

• Edit Image — open the image editor to crop, rotate, or flip it. Images only.
• Rename — change the file's name.
• Delete — remove it from your library.

What is Limit Section Width?

Limit Section Width is a setting that limits how wide your page content appears on screen. When enabled, it creates space on both sides of your page — preventing text, images, and components from stretching edge-to-edge on large monitors. The result is a cleaner, more readable layout that keeps your content centered and contained.

Section backgrounds are not affected — they continue to fill the full width of the browser. Only the content inside each section is constrained.

Where to find it

Open the Website Settings panel and go to the Appearance tab. Scroll down to the Layout section. You will see a Content width dropdown, with the Limit section width toggle under it.

Enabling and disabling

Limit section width is on by default. Toggle it off to let your sections stretch to fill the full browser width, or back on to limit them again. Like everything in Appearance, the change saves automatically.

Choosing a content width

The Content width dropdown lets you choose how narrow or wide the constrained area should be:

• Narrow (960px): A tighter column suited to text-heavy or blog-style layouts.
• Standard (1200px): The default. Works well for most sites.
• Wide (1440px): A broader container that gives content more room to breathe.
• Extra wide (1600px): The widest option, suited to full-featured landing pages.

The selected width only takes effect when Limit section width is turned on, and it saves as soon as you pick it.

On a Mac use Cmd; on Windows use Ctrl. Every editor shortcut is switched off while a guided tour is running.

Views

• Cmd/Ctrl + Shift + V — toggle between desktop and mobile view. Only on the Editor view.

The views themselves (Editor, Media Library, App Library, Analytics, Notifications, Settings) have no keyboard shortcuts; click their icons at the top right.

Arranging slots

• Arrow keys — move the selected component's slot one cell.
• Shift while dragging a corner handle — keep the slot's shape.
• Cmd/Ctrl + click — add a single slot to the selection, or take one out.
• Shift + click — extend or trim the selection as a range.
• Cmd/Ctrl + Z — undo the last move, resize or added slot, but only while its Undo note is showing at the bottom of the page.

See Moving and resizing slots. There is no general undo or redo.

Text

• Cmd/Ctrl + B, I, U — bold, italic and underline, while editing text.

Everywhere in the editor

• Escape — clears the selection, and closes the Pages window, the My Websites window, the Add Section and Add Content galleries, the pill's panels, the right-click menu and Clayton's chat menu.
• Shift while clicking a delete button — deletes without asking first. Pages always ask.
• Shift + right-click — your browser's own menu instead of ClayBuilder's.

There is no copy and paste for components. Use Duplicate in the right-click menu instead.

Media Library

• G — grid view. L — list (table) view.
• Cmd/Ctrl + click — add a file to the selection. Shift + click — select a run of files.

Other views and windows

• Notifications — ↑ and ↓ move through the list.
• Quizzes, Polls and Flashcards apps — Cmd/Ctrl + S saves.
• Clayton — Enter sends, Shift + Enter starts a new line.
• Guided tours — ← / → step through, Escape ends the tour once skipping is allowed.
• Canvas Designer — Delete or Backspace removes the selected shape; Cmd/Ctrl + D duplicates; Cmd/Ctrl + C / X / V copy, cut and paste; Cmd/Ctrl + G groups; Cmd/Ctrl + Z undoes; Cmd/Ctrl + Shift + Z or Cmd/Ctrl + Y redoes; Escape clears the selection, and a second press closes the designer. See Canvas Designer.

What is a section?

Sections are the building blocks of your website. Every page is made up of sections stacked on top of each other — think of them as the rows or panels that divide your page into distinct areas, like a hero at the top, a features row in the middle, and a contact block at the bottom.

Inside each section you place components — things like text, images, and buttons — to build out the content of that area.

Types of section

You choose a section's type when you add it, and a section cannot be converted into a different type afterwards — so it is worth knowing what each one is for:

• Custom snap section — listed as Blank section in the Add Section popup. Components sit in slots on a grid that you arrange yourself, right on the page (see Moving and resizing slots).
• Custom code section — a section you fill with your own HTML, CSS, and JavaScript instead of components.

Older pages may also contain a Layout section, which can no longer be added but keeps working.

The Add Section gallery also offers ready-made sections — your template's own, and 82 more grouped by purpose — that arrive with content and styling in your site's colors and photos.

Adding a section

There are three ways in, and all open the Add Section gallery:

• The Add Section button at the top of the LHS — the new section goes at the end of the page.
• Hover the gap between two rows in the LHS section list and click the Add Section pill that appears. The Add Transition pill beside it adds a shaped edge between the two sections instead — see Transitions.
• Right-click a section in the LHS and choose New Section ▸ Add Section Above or Add Section Below.

A section's panel

Click a section in the LHS to open its panel. It has four groups:

• Content — the components in the section, each openable, plus Add Empty Box. An empty section reads "No content yet — Add an empty box below, then click the + in it to add content."
• Background — see below.
• Height — see below.
• Settings — Lock Section, Hide Section (separate desktop and mobile toggles), and a Danger Zone holding Delete Section.

There are no column, row, gap or slot-count controls: the slots are arranged by hand on the page (see Moving and resizing slots). A custom code section's panel has Open Code Editor instead of Content.

Changing section height

Select a section and open the Height panel in the LHS. The slider runs from 200 to 1000 px, and a box beside it takes an exact value. New sections start at 400 px.

The 200 px floor is there so thin bands are still buildable — a category rail, a notice bar, an awards strip — while anything below about 400 px leaves a full-width content section short of room.

Under the slider, Fit to Content sets the height to what the section's content needs, in one press. Press it again after adding or removing content, since a height that no longer fits either clips the content or leaves a gap.

You can also drag the handle at the bottom edge of a section on the RHS, which is usually quicker when you are matching the height to what is inside.

A section's grid is always 24 columns wide, and its rows follow its height: making a section taller adds empty rows at the bottom, and making it shorter removes them — but never below the lowest slot. The slots keep their size either way.

Changing the background

Each section has its own background. Open the section's Background group in the LHS and choose a Type: Color, Image or Video. A gradient is a Color — the color picker has a Solid / Gradient switch. You can also right-click the section and use Change Background Type.

An image background adds Change Image, Edit Image (which opens the image editor to crop the picture to suit the section), Image Size (including a percent option), Repetition (including Space and Round, which fit whole copies of a repeating picture), Attachment, Position, a Blur slider from 0 to 30, and an Overlay. Blur and Overlay are for image backgrounds only; a video background has neither.

Background overlay

An image background can carry an Overlay — a wash of color over the picture so that text on top stays readable. Choose where it comes from with Overlay From (Even, Top, Bottom, Left or Right), its color and its strength — the same way as the overlay on an image component.

This is the single most useful control for a hero section. A photograph that looks fine on its own will usually swallow a headline placed over it until an overlay goes underneath.

Reordering sections

On the LHS, drag a section up or down the list or use its arrow buttons. On the page, drag a section by its side gutters — the strips either side of its content. Or right-click a section and use Arrange: Move Section to Top, Up, Down, or to Bottom.

Section names

Every new section is given a friendly name automatically — Fresh Start, Big Idea, Center Stage and so on — drawn from a pool so that no two sections on the same page read alike. The name is only a label for finding the section in the LHS; it never appears on your published site.

Rename a section to something meaningful once you know what it holds. On a page with a dozen sections, "Contact" and "Opening Hours" are far easier to navigate than a list of pool names.

Section controls in the LHS

Each section's row in the LHS carries its own controls:

• Click the row — open the section's panel.
• Rename — click the name, or the pencil beside it, and type. Names are up to 25 characters.
• Move Up and Move Down — the arrows; or drag the row.
• Unlock section — shown on a locked section, to unlock it again.
• An eye-slash marker appears when the section is hidden on one or more screen sizes.

Section settings

The section panel's Settings group holds:

• Lock Section — prevent the section from being accidentally edited or moved. Also available by right-clicking the section.
• Hide Section — separate desktop and mobile toggles, so a section can appear on one screen size only.
• Danger Zone > Delete Section — remove the section and all its contents from the page. Hold Shift while clicking to skip the confirmation.

See Locking and hiding sections for more on the first two.

Older pages, and pages from some starter templates, may have a Layout section: a section whose slots came from a ready-made arrangement. It can no longer be added, but existing ones keep working. Right-click one and choose Change Layout to open the layout picker, which offers other arrangements with the same number of slots.

For anything new, add a Blank section — a custom snap section — and arrange its slots by hand.

What is a custom snap section?

A custom snap section is a section whose slots you arrange by hand rather than pick from a list. Components sit in slots on a grid and fill them completely, and you place, size, and move the slots yourself, right on the page — see Moving and resizing slots.

It is the Blank section in the Add Section popup, and it arrives as an empty grid with a + Add empty box button ready for its first slot. It suits anything from a plain row of features to an off-center hero or a deliberately uneven grid.

Older pages may hold a Layout section instead; the two do not convert into one another.

Arranging the layout

There is no grid to set up first and no mode to switch into. Drag slots on the page to move them, pull their handles to resize them, and use + Add empty box — in the section's top-left corner when you hover it, or Add Empty Box in its panel in the LHS — to add more. See Moving and resizing slots for the full walkthrough.

Adding components to slots

Empty slots appear as dashed-border placeholders with a + icon. Click one to open the Add Content gallery and choose what to place there — or pick one of its Layouts to split the empty slot into columns, rows or a grid. You can also drag a component already inside the section onto a different slot to swap their positions.

To get rid of an empty slot, hover it and click the × in its corner, or drag it onto the trash can that rises while you drag.

There is no copy and paste for components; use Duplicate in the right-click menu instead.

The grid

The grid is always 24 columns across. Its rows follow the section's height: a taller section gains empty rows at the bottom and a shorter one loses them, never below the lowest slot.

Mobile

Mobile is a separate layer. Slots cannot be moved, resized, added or removed in mobile view, but dragging a component onto another slot (or an empty one) there swaps or moves it on mobile only. To put mobile back to matching desktop, right-click the section in mobile view and choose Reset Mobile Layout. See Desktop and mobile.

Arranging a section by hand

A custom snap section is laid out right on the page. There is no mode to switch into: drag things to move them, pull their handles to resize them, and add or remove slots as you go. Every change saves the moment you let go.

It belongs to custom snap sections and cards. An older Layout section uses the layout picker instead.

Slots snap to the section's grid as you drag, and an outline shows the cells they will take. There are no grid settings to adjust first — the arrangement on the page is the whole layout.

Moving slots

Press anywhere on a component and drag it. It lifts off the page and follows your pointer, and an outline shows the cells it will land in. Drop it on empty space and it moves there. Drop it on another component and the two swap places — the outline turns blue to show the swap, or red when there is no room.

A click still does what it always has: it selects the component, and on text it puts your cursor in so you can type. While you are typing, dragging across the words selects them. To move text you are typing in, drag the edge of its frame instead.

Moving a card, or what is inside it

A card moves as one piece: drag anywhere on it and the whole card goes. Click the card and a dashed rim appears around it — from then on, dragging what is inside moves the pieces within the card, and the card itself moves by its own background or by the edges of its frame. Press Escape, or click outside the card, to go back to moving the whole card.

Resizing slots

Click a component to select it. A frame with eight handles appears around it — one on each corner and one on each side. Drag any handle to make the slot bigger or smaller; the opposite side stays where it is. Hold Shift while dragging a corner to keep its shape. A component is always the size of its slot, so this is how a component is resized.

Nudging and lining up

With a component selected, the arrow keys move its slot one cell at a time. While you drag, alignment guides appear and the slot snaps to line up with the edges and centers of the others.

Moving several slots at once

Press on an empty part of the section's grid and drag across the slots you want. They are highlighted, and dragging any one of them moves them all together. Cmd/Ctrl-click adds a single slot to the highlighted group or takes one out; Shift-click extends or trims the group as a range. Press Esc or click elsewhere to let it go.

Adding empty slots

Hover the section and click + Add empty box in its top-left corner — the area the new slot will take is outlined while you hover, and it takes the largest empty area in the section, up to 30% of the grid. Add Empty Box in the section's Content group in the LHS, and in the section's right-click menu, does the same. When there is no room left, you are told the section is full. Then click the empty slot's + to put a component in it.

To split one empty slot into several at once — two columns, a sidebar, a grid of four — click it and choose one of the Layouts in Add Content.

Removing slots

Hover an empty slot and click the × in its corner. To remove a slot by dragging, drop it on the trash can that rises while you drag. If the slot holds a component, you are asked to confirm, since the component goes with it — and a deleted component cannot be brought back.

Undoing a change

After every move, resize or added slot, a note appears at the bottom of the page with an Undo button for about four seconds. You can also press Cmd+Z (Ctrl+Z on Windows) while it is showing. There is no undo once it has gone, and no general undo button in the editor.

The first time

The first time you work on a hand-drawn section, a short tip explains how slots move and resize, with a Show me button that walks you through it on the page. The same walkthrough is behind Show me how in a card's left panel.

On mobile

Slots are arranged in desktop view; switch to desktop view to move, resize, add or remove them. In mobile view the one thing you can do is drag a component onto another slot to swap them, or into an empty slot to move it — and that changes mobile only.

Going back to a preset layout

You cannot. Custom snap sections do not convert into the older Layout sections, which can no longer be added. Arrange the slots by hand instead — dragging a slot onto another swaps the two, which makes it quick to try a different order.

To put a section's mobile arrangement back to matching desktop, right-click it in mobile view and choose Reset Mobile Layout.

What is a component?

A component is a single content block that you place on a page — things like a line of text, a heading, an image, or a button. Think of components as the individual pieces that you stack and arrange to build a page, similar to how you might lay out a poster or a flyer.

Every piece of visible content on your site is made up of components. They are separate from sections, which act as the containers that hold and group components together.

Types of components

Components are grouped in the Add Content gallery:

• Text — Plain text, from a short label to a full block of copy.
• Layouts — Layouts split the empty slot you clicked into columns, rows or a grid.
• Buttons — Plain button, a clickable element that links to a page, a section, an address elsewhere, or a popup.
• Photos & video — Photo, Gallery, Slideshow, Video, and YouTube video.
• Charts — a Chart that shows one of the charts you made in the Charts app: bar, horizontal bar, line, area, pie or doughnut.
• Icons — Any icon, plus ready-made icons.
• Shapes & lines — Any shape and Drawing. These are drawn rather than loaded as images, so they stay sharp at any size.
• From your apps — Products from the Online Store, a Form, a QR code, a Quiz, Flashcards and a Poll — each shows something set up in the App Library.
• Events & blog — Upcoming events, a Calendar and Blog posts, from the Events and Blogs apps.
• Maps & code — Map and Custom code.
• Boxes — box arrangements, designed boxes and Empty box, each a card that groups other components into one styled unit.

Adding a component

Click an empty slot in a section (in a card, click the slot's +). That is the only way in — there is no right-click or toolbar route. The Add Content gallery opens; one click on a tile adds it, and the new component is selected with its panel open in the LHS.

A component always fills the slot it is in. To make one bigger, resize its slot (see Moving and resizing slots).

Editing a component

Click any component on the page to select it. The pill appears over it with its most common actions, and the LHS opens its panel. Text, Button and Image open on the Styling tab. Changes are saved automatically as you make them.

Moving components

Drag a component to move its slot; drop it on another component to swap the two. Components sit in slots side by side, so there is no front-to-back layering to change.

Each component's tabs

• Text — Text, Border, Padding, Styling, Settings.
• Button — Text, Border, Padding, Styling, Links, Settings.
• Image — Border, Padding, Styling, Overlay, Links, Settings.
• Shape — Styling, Border, Padding, Links, Settings.
• Icon — Border, Padding, Styling, Settings.
• Video — Video, Border, Styling, Overlay, Settings.
• YouTube video — YouTube (Autoplay, Allow Fullscreen, Controls), Border, Styling, Settings.
• Gallery and Slideshow — Styling, Padding, Settings.
• Chart — Chart, Styling, Padding, Settings.
• Map — Location, Padding, Border, Settings.
• Card — Content, Border, Padding, Styling, Links, Settings, plus Add Empty Box.
• Custom Code — Border, Padding, Styling, Settings.
• Drawing (Canvas) — Padding, Styling, Settings.
• Contact Form and Poll — Padding, Settings.
• Quiz and Flashcards — Styling, Padding, Settings.
• Products — Shop, Padding, Settings.
• QR Code — QR Code (Size, Position, Caption), Padding, Settings.
• Upcoming events — Events; Calendar — Calendar; Blog posts — Posts (Which Blog, Look, How Many, Pictures, Summary, Date and Author). Each also has Padding and Settings.

Only Button, Image, Shape and Card have a Links tab. Links on a text's words are set from the pill.

Gallery and Slideshow

Both arrive filled with your site's photos. See Gallery and Slideshow for their options.

The Styling tab

Most components have a Styling tab setting the background behind them, plus an opacity control. The Background can be:

• None — transparent, so the section behind shows through.
• Color — chosen with the color picker, which has a Solid / Gradient switch; a gradient is built in the gradient editor.
• Image — a picture from your Media Library. Not offered on an Image component.
• Video — Cards only. A card's image or video background also has a Blur slider (0–30).

The Opacity slider (labeled Text Opacity, Image Opacity and so on) fades the whole component. Text, Image, Video and Canvas also have a separate Background Opacity.

Choosing an image adds controls for how it sits:

• Image Size — how it is scaled to fit: Cover, Contain, Auto, or stretched to fill.
• Image Repetition — whether it tiles, and in which direction: no repeat, horizontally, vertically, or both.
• Image Attachment — whether it scrolls with the page or stays fixed as the page moves past it.
• Image Position — where the image is anchored, which decides what stays visible when it is cropped.
• Overflow Color — a color shown behind any area the image does not cover. Useful with Contain, where the image deliberately does not fill its box.

The Border tab

• Style tiles — None, Thin, Bold, Dashed, Dotted, Double.
• Corners — Square, Soft, Round, Pill, or Custom with a Corner Size slider.
• Color — your site's color swatches, or More colors.
• Thickness — 1 to 20.
• Sides With a Line — keep the line on only the top, right, bottom or left.

The Padding tab

Pick how much Space Inside the component has — None, Snug, Comfy, Roomy or Airy — or set it exactly with the All Sides slider (0–160). Make one side different gives each side its own slider. See padding.

The Links tab

On a Button, Image, Shape or Card. Enable Linking turns it on (buttons always link, so they have no switch). Link Type is Choose from Your Pages, Jump to a Section, Link to External Site, Open a Form in a Popup (Buttons only), Open a Popup, or Close the Popup (only on a popup's own page). Open in New Tab sits under the URL. A Card also has a Link Description for screen readers.

The Settings tab

Every component has a Settings tab holding two things that work the same way whatever the component is.

Hide Component — Hide on mobile and Hide on desktop toggles, so a component can appear on one screen size only. This is the component-level equivalent of hiding a whole section, and it is useful when a phone layout needs something the desktop one does not, or vice versa.

Copy Style and Paste Style — copy a component's styling and apply it to another. It carries the colors, type, border, padding, background and opacity, but not the content, so you can make a second image match the first without redoing every value by hand.

Deleting a component

Select the component and click Delete Content (the trash can) on its pill, right-click it and choose Delete, or drag its slot onto the trash can that rises during a drag. Holding Shift skips the confirmation. Deleted components cannot be recovered, so make sure you no longer need the content before removing it.

What a layout does

A layout does not add a component. It splits the empty slot you clicked into several empty slots in a pattern — two columns, a sidebar, a heading over two columns — the way a slide editor offers layouts for a new slide. Then you fill each part with the + in it.

The Layouts group sits right after Text in Add Content. It is offered in custom snap sections and inside cards, but not in an older Layout section.

The 14 layouts

• Two columns, Three columns and Four columns — spaces of the same size side by side.
• Sidebar on the left and Sidebar on the right — a narrow column beside a wide one.
• Title and content — a heading across the top, a big space below.
• Title and two columns — a heading across the top, two spaces below it.
• Comparison — a title, then two headed columns to compare.
• Content with caption — a heading and words on the left, a big space on the right.
• Picture with caption — a big space for a picture with a line of words under it.
• Grid of four — four equal spaces, two by two.
• Grid of six — six equal spaces, three across and two down.
• One big, two small — a large space with two smaller ones stacked beside it.
• Three rows — three wide spaces stacked one under another.

Once it is split, each part is an ordinary slot: move and resize them as usual. See Moving and resizing slots.

What is in the Boxes group

Every box is a card: a styled container that holds other components. The Boxes group in Add Content offers them three ways.

Box arrangements

These split the slot you clicked and put an empty box in each part, so a row of boxes arrives in one click:

• Two boxes, Three boxes and Four boxes — side by side in a row.
• Column of boxes — three boxes stacked one under another.
• Grid of boxes — four boxes, two by two.
• One big box, two small — a large box with two smaller ones stacked beside it.
• Box with a side box — a wide box with a narrow one beside it.

Box arrangements are not offered inside a card, since cards do not nest.

Designed boxes

These arrive already filled and styled in your site's colors, ready for your own words:

• Feature box — an icon, a short title and a line about it.
• Review card — stars, a customer's words and their name.
• Price card — a plan or package, its price and a button.
• Team member — a round photo, a name and what they do.
• Contact card — how to reach you, with a call button.
• Hours card — your opening hours in a neat box.
• Photo card — a picture with a title and a line under it.
• Step card — a numbered step: one, two, three.
• Invitation box — a bold box that asks people to act.
• Number box — a number to be proud of, boxed.

Empty box

Empty box is a single card with nothing in it, to fill with anything you like.

What is a gallery?

A gallery shows several photos at once, arranged for you. It is in Add Content's Photos & video group, with four presets: Photo grid, Square tiles, Mosaic and Feature and thumbnails. A new gallery arrives filled with your site's photos.

Options

• Choose Photos — add, remove and reorder the photos in the gallery.
• Layout — Even Grid, Mosaic (photos at their own shapes, stacked in columns), or One Big, the Rest Small.
• Columns — 2 to 6 photos across. Phones show two at most.
• Photo Shape — Fill the Space, Square, Landscape, Portrait or Wide.
• Spacing — None, Tight, Normal or Roomy.
• Corners — Square, Slightly Rounded, Rounded or Very Rounded.
• Open Photos Large — on your published site, tapping a photo opens it large.

Its tabs are Styling, Padding and Settings, which work as on every component. See Components.

What is a slideshow?

A slideshow shows your photos one at a time in the same space. It is in Add Content's Photos & video group, with three presets: Slideshow (turns by itself), Fading slideshow (each photo fades into the next) and Click-through photos (visitors turn the photos with the arrows). A new slideshow arrives filled with your site's photos.

Options

• Add or change photos — add, remove and reorder the slideshow's photos.
• Turning the Photos — By itself or Only when clicked.
• Time on Each Photo — 3, 5, 8 or 12 seconds.
• Arrows to Click Through — Show or Hide.
• Dots Under the Photos — Show or Hide.
• How Photos Fit — Fill the box (cropping if needed) or Show whole photo.
• Change from one photo to the next — Slide or Fade.
• Corners — Square, Soft or Round.

Its tabs are Styling, Padding and Settings.

What is the chart component?

The chart component shows one of the charts you made in the Charts app. The numbers live in the app; the component decides where the chart sits on your page. Change the numbers once and every placement of that chart updates.

It is in Add Content's Charts group, with five presets: Bar chart, Line chart, Two-year comparison, Doughnut chart and Ranking (longest bar first, with room for long names). Charts can be bar, horizontal bar, line, area, pie or doughnut.

Choosing the chart

In the Chart tab, click Choose a chart to see your site's charts as tiles, drawn as they will look. Click one to show it here. Make a new chart puts a new chart with sample numbers here and opens it in the Charts app so you can type your own.

Once a chart is chosen, the field shows it small with its name, Change to pick another, and Change the numbers, which opens it in the Charts app. If the chart is deleted from the app, the field says so and asks you to choose another.

Tabs

Chart, Styling, Padding and Settings.

What is the products component?

The products component shows items from your Online Store on a page, ready to buy. The products themselves — names, prices, photos — are made in App Library › Online Store; this component decides which ones show and how they look.

It is in Add Content's From your apps group, with three presets: Shop grid, Menu list and Featured products.

The Shop tab

• Show — All, A category, or Ones I pick.
• Order — As I Arranged Them, Newest First, Price, Low to High, Price, High to Low, or A to Z.
• How Many — All of Them, or up to 4, 8 or 12.
• Arrange as — a Grid or a List.
• Per Row — 2 to 5 across; On Phones — 2 per row or 1 per row.
• Spacing — Tight, Normal or Roomy.
• Card — Boxed, Simple or Outlined.
• Photo Shape — Square, Tall, Wide or Whole photo.
• Words — Left or Center.
• Each Product Shows — switches for its Name, Price, Description and Button, and the Button Wording, your own words (up to 40 characters) or one of the suggestions Add to cart, Buy now or View.

Its other tabs are Padding and Settings.

What is the QR code component?

The QR code component shows one of the tracked codes from the QR Codes app on your page. It is in Add Content's From your apps group.

Choosing the code

Click Select QR code to see your site's codes as tiles, and click one to show it here. Make a new QR code opens a short form — a name and where the code sends people — and it opens straight away if the site has no codes yet. Once a code is chosen, the field shows its picture, name and where it goes, with Change to pick another.

Options

• Size — Small, Medium or Large.
• Position — Left, Center or Right.
• Caption — a line under the code, like "Scan to see our menu". Leave it empty for none.

Its tabs are QR Code, Padding and Settings.

What is the quiz component?

The quiz component puts one of your quizzes from the Quizzes app on a page — a quiz with a score, or a "Which one are you?" result. It is in Add Content's From your apps group.

Choosing the quiz

With no quiz chosen, the field offers Choose a quiz and Make a new quiz. Once one is chosen, it shows the quiz's name, kind and number of attempts, with Change to pick another and Edit quiz to open it in the Quizzes app. Right-clicking the quiz on the page also gives Edit Quiz.

Tabs

Styling, Padding and Settings.

What is the flashcards component?

The flashcards component puts a deck from the Flashcards app on a page, for visitors to flip, study and play with. It is in Add Content's From your apps group.

Choosing the deck

Click Choose a deck to pick one of your site's decks, or make one on the spot with Blank deck or Sample deck. Once a deck is chosen, the field shows its name and how many cards it has, with Change to pick another and Edit cards to open it in the Flashcards app. Right-clicking the deck on the page also gives Edit Flashcards.

Tabs

Styling, Padding and Settings.

What is the poll component?

The poll component puts one of your polls from the Polls app on a page, so visitors can vote and see the results. It is in Add Content's From your apps group.

Choosing the poll

The Poll field shows the poll this component holds — its question, whether it is open and how many votes it has — with Choose (or Change once one is picked). That opens a list of your polls, plus starters to make a new one, which is made, shown here and opened in the Polls app so you can write its question. Edit poll opens the chosen poll in the Polls app; right-clicking the poll on the page also gives Edit Poll.

Tabs

Padding and Settings. A poll wears your site's fonts and colors, so it has no Styling tab.

What is the upcoming events component?

Upcoming events lists your next events, from the Events app. It is in Add Content's Events & blog group. Every list and calendar on your site shows the same events, so a change in the app shows everywhere.

The Events tab

• Look — Agenda (by month, with a date block), List (one line per event), or Cards (date tiles side by side).
• How Many — how many events to show.
• Month Headings — put each month's name above its events.
• Second Line — show the line under each event's name.
• Time and Place — show the time and location when an event has them.
• Link Text and Link to — a link under the list, like "See all events", pointing at a page of your site (such as /calendar) or a web address. Leave the address empty for none.

Its other tabs are Padding and Settings.

What is the calendar component?

The calendar shows your site's events from the Events app as a month calendar. Visitors can move between months and pick a day. It is in Add Content's Events & blog group.

The Calendar tab

• Weeks Start On — Sunday or Monday.
• Day's Events Below — list the events of the day a visitor picks under the calendar.

Its other tabs are Padding and Settings.

What is the blog posts component?

Blog posts shows your newest published posts from the Blogs app, each linking to its own page. It is in Add Content's Events & blog group.

The Posts tab

• Which Blog — All My Blogs, or one of them. Shown when you have more than one blog.
• Look — Cards (picture, title and summary), List (a small picture beside each), or Featured (the newest one, large).
• How Many — how many posts to show.
• Pictures — show each post's cover picture.
• Summary — show each post's summary under its title.
• Date and Author — show when each post was published, and by whom.

Its other tabs are Padding and Settings. The component's pill has Refine with Clayton, which changes how the list looks. See Refine with Clayton.

Where to find it

Click the + (Add New Page) in the top bar, just right of the Manage Pages pill — or Add a page at the bottom of the Pages window. Either opens the Add a page gallery, which works in two steps.

Step 1 — Choose a page

Ready-made pages are shown whole, in your site's colors and photos, grouped down the left with an Everything list and a search box ("contact", "menu", "shop"). Hover a tile and its preview scrolls down the page. The groups are Main pages (Home, Home with a big photo, About us, Our story, Contact, Contact, short and sweet, Questions), Selling (Menu, Pricing, Services, Book now), Show it off (Gallery, Portfolio, Results, Report, Team, Reviews) and Shop (Shop, Storefront, All products, New arrivals, Gift guide, Order online), then Start blank, a Blank page with one empty section. Click a tile to choose it, then Create page.

Step 2 — Name it and say where people find it

• What should this page be called? — the name people see in your menu and in the page's address. It is filled in for you from the page you chose.
• Where should people find it? — two cards: In the menu at the top (your header; on by default) and In the links at the bottom (your footer). Pick one, both, or neither — with neither, visitors can only reach the page through a link or button you add.

Choose a different page goes back to step 1. Create the page and you are taken to it straight away.

Pages that arrive set up

A Contact or Book now page arrives with a form already placed, and a Shop page with your store's products. The form itself is chosen in that piece's left panel, and products come from the Online Store app.

What it does

The trash can in the top bar opens the Delete Page popup, which removes the page you are editing from your site. Delete page in the Pages window does the same for any page. Pages always ask before deleting, even with Shift held.

When the page is linked from your header or footer, the popup shows Remove from header and Remove from footer checkboxes, ticked by default, so the menu does not keep a link to a page that is gone. Click Delete Page to confirm.

Bringing a page back

Deleted pages can be restored within 93 days, after which they are permanently removed. Open the Pages window, go to Recently deleted, and click Bring back: the page returns to the same web address with its sections and components.

The home page cannot be deleted

Trying to delete the home page shows: "The home page cannot be deleted. Please set another page as the home page first." Make another page the home page in the Pages window, then delete the old one.

What it is

The Pages window holds everything about your pages that is not their content, and it is also your site map — there is no separate one. Open it with the Manage Pages pill in the top bar, which shows the page you are editing and how many pages the site has. Escape closes it.

The page list

Down the left: every page, with a house on the home page and an eye with a line through it on a page hidden from Google. The page open in the editor is tagged Editing. Find a page searches page names and the words on them; press Enter to open the first page found. At the bottom are Add a page (see Add a page) and Recently deleted, with the number of deleted pages in brackets.

Switching pages

Click a page to select it and see its settings. The orange button at the top right — Go to and the page's name, such as "Go to Services" — opens it in the editor; on the page you are already editing it reads Keep editing. Double-clicking a page in the list also opens it.

A selected page's settings are split into three tabs: Basics, Google and sharing and More. Under the page name, its live address is shown, or Not online yet until the site is published.

Basics

• Page name — the page's name in your menus and in this list. This is where a page is renamed.
• Web address — the page's address on your site. Spaces and symbols are tidied as you type. The home page's address is fixed.
• Make it the home page — the first page visitors see.
• Show in Google search — one switch that both lists the page for search engines and keeps it in your sitemap.
• Links to this page — everywhere on your site that links here, each with Show me. Worth a look before you rename or delete a page.
• Delete page — not on the home page; make another page the home page first.

Google and sharing

The page's own Title, Description and Picture when shared (Choose from your media to set it, Remove picture to clear it), with previews of how it looks on Google and when shared in a message or post. This is per-page search and sharing, separate from the site-wide SEO Settings.

More

• Labels — notes only you see, handy for sorting a big site.
• Original page for this content — the canonical address, for when the same content also lives somewhere else.

Recently deleted

Every page deleted in the last 93 days, each with Bring back, which returns it to the same web address with its sections and components — nothing has to be rebuilt.

Opening it

The Add Content gallery opens when you click an empty slot in a section — in a card, click the slot's +. That is the only way in: there is no right-click or toolbar route. A short spinner shows while it loads. The window is headed Add Content, and it says which spot the new piece will go into.

Finding something

A search box sits at the top: "What do you want to add? 'photo', 'map', 'shop'". It understands abbreviations and forgives one-letter typos, and Enter adds the first result. Down the left is a rail: Everything, then each group, each showing how many tiles it holds.

Adding

As the foot of the window says, "Click any tile to add it." One click adds it — there is no double-click and no hover preview. The new piece is selected and its panel opens in the LHS. A gallery or slideshow arrives filled with your site's photos, and a YouTube video opens its picker straight away. Everything arrives in your site's colors and fonts.

The groups

Most groups lead with ready-made versions, already styled, followed by the plain component to set up yourself:

• Text — 20 ready-made texts (Big headline, Paragraph, Customer quote, Opening hours, Price list, Question & answer and more), plus Plain text.
• Layouts — split the empty slot you clicked; see below and Layouts.
• Buttons — 17 ready-made buttons (Main button, Outline button, Call us, Email us, Get directions, Book now and more), plus Plain button.
• Photos & video — photo styles (Rounded, Circle, Framed photo and more), galleries (Photo grid, Square tiles, Mosaic, Feature and thumbnails), slideshows (Slideshow, Fading slideshow, Click-through photos), Background video, Photo, Video and YouTube video. There is no plain Gallery or Slideshow tile.
• Charts — Bar chart, Line chart, Two-year comparison, Doughnut chart, Ranking.
• Icons — 20 ready-made icons, plus Any icon.
• Shapes & lines — ready-made lines and shapes (Divider line, Background panel, Badge and more), Any shape, and Drawing.
• From your apps — Shop grid, Menu list, Featured products, Form, QR code, Quiz, Flashcards, Poll.
• Events & blog — Upcoming events, Calendar, Blog posts.
• Maps & code — Light map, Dark map, Colorful map, Custom code.
• Boxes — see below and Boxes.

Layouts

A layout does not fill the slot — it divides it, like the layouts of a new slide, leaving empty slots to fill. There are 14: Two columns, Three columns, Four columns, Sidebar on the left, Sidebar on the right, Title and content, Title and two columns, Comparison, Content with caption, Picture with caption, Grid of four, Grid of six, One big, two small and Three rows.

Layouts are offered only where the slot can be divided: in a hand-drawn custom snap section or inside a card, not in an older preset Layout section.

Boxes

Boxes are cards — containers that hold several pieces as one unit. The group has three kinds:

• Box arrangements — drop several empty boxes in at once: Two boxes, Three boxes, Four boxes, Column of boxes, Grid of boxes, One big box, two small, Box with a side box. Like Layouts, only where the slot can be divided.
• Designed boxes — arrive with your words already inside: Feature box, Review card, Price card, Team member, Contact card, Hours card, Photo card, Step card, Invitation box, Number box.
• Empty box — a plain card to fill yourself.

Adding into a card

Inside a card, the gallery offers only what a card can hold — Text, Button, Image, Video, Drawing, Shape and Icon, plus Layouts. There are no Boxes, since cards do not nest, and no YouTube video tile. A card holds up to 12 pieces.

Opening it

The gallery, headed Add a section, opens from any of three places:

• The Add Section button at the top of the LHS — the section goes at the end of the page.
• The Add Section pill that appears when you hover the gap between two rows in the LHS section list (beside Add Transition).
• Right-clicking a section in the LHS and choosing New Section ▸ Add Section Above or Add Section Below.

A line under the heading says where the new section will go — "It goes below" a named section, or "It goes at the top of your page."

Finding a section

Search at the top ("What is it for? 'reviews', 'menu', 'hours'") or browse the groups down the left, starting with Everything. Hovering a tile shows a faint ghost of the section on your page, where it will land. One click adds it.

The groups

• From your template — sections made for this site by its template, in your colors. Shown when the template has any.
• 82 ready-made sections in 14 groups, built in your site's colors and photos: Page headings, Intros, About, Services & features, Menu & prices, Shop, Reviews, Photos, Charts, Events & news, Team, Contact & hours, Questions and Calls to action. Each group offers several layouts and moods.
• Start blank — Blank section, which adds a custom snap section as an empty grid with a + Add empty box button, and Custom code, which adds a custom code section.

A blank section and a custom code section cannot be converted into one another afterwards.

What is the navbar?

The navbar is the bar across the top of your site holding your brand and your main navigation links. It is not a section — it sits above them and appears on every page, so a link added once is available everywhere.

Selecting the navbar

Click the navbar on the RHS, or select Header at the top of the section list in the LHS. Its settings are grouped into collapsible panels: Layout, Brand & Logo, Links, Link Styling, Menu Background, Background and Height.

Layout

How the header is arranged, without changing anything you have typed:

• Menu button — your name, and a button that opens your pages. The default.
• Classic — your name on the left, links on the right.
• Centered links — your name on the left, links in the middle.
• Side by side — your name with your links right beside it.
• Split — your name in the middle, links on both sides.
• Stacked — your name centered, links in a row beneath.

On a phone the header is always your name and a menu button, whichever layout you pick.

Brand & Logo

The brand is the name or logo at the leading edge of the navbar. The Type toggle chooses between the two:

• Text — type your name into the Brand Name field, a small rich text field with bold, italic, and underline available, and set a Brand Color and a Brand Font. Left alone, the name follows the font your navigation links use.
• Logo — click Change Image to pick an image from your Media Library.

Either way there is a Size Multiplier from 0.5x to 2x for how large the brand appears, and where it links. Its Link Type is Choose from Your Pages (with a Page list) or Link to External Site (with a Website URL field), plus Open in New Tab. Most sites point the brand at their home page, which is the convention visitors expect.

Links

The Links panel lists your navigation links in the order they appear; drag a link by its grip to reorder. Click Add New Link to add one, expand a link to edit it, or use the trash icon to delete it. Each link has a Name, a Link Type — Choose from Your Pages or Link to External Site — and a page or URL.

Tick a link's Dropdown checkbox to turn it into a dropdown with sub-links beneath it. That adds Dropdown Trigger — open on Click or Hover (click is the more reliable choice, since hover menus are awkward on touchscreens) — and Add New Sub-Link.

Link Styling

Controls the appearance of every link in the navbar at once, in four tabs:

• Text — Link Text Size, Link Font, Text Color, Letter Spacing, Text Shadow, and Sticky Header, which keeps the navbar fixed at the top of the page as visitors scroll.
• Border — an outline around each link.
• Styling — Text Hover Color, Link Background (a color and its opacity behind each link), and Link Spacing (how far apart the links sit).
• Dropdown — Show Dropdown Caret, Background Color, Sub-Link Text Color, Sub-Link Hover Text Color, Sub-Link Font Size, and Show Dividers between sub-links with a Divider Color and Divider Thickness from 1 to 5.

The brand name has its own Brand Font in the Brand & Logo panel.

Menu Background

Navbar only. Controls the background of the menu panel that opens from the menu button: Same as Header, Image, or Color. An image adds an Overflow Color behind any area it does not cover, and its size, repetition and position. It is set separately from the navbar background because the menu is a full panel rather than a bar.

Background

The navbar's own background: a color (solid or gradient) or an image, with an Overflow Color for an image. You can also right-click the navbar on the page to change the background type and jump straight to the matching picker.

Right-clicking

Right-clicking the navbar adds Change Link Styles, Edit Brand and Change Hamburger Menu Background to the background options. Right-clicking a single link gives Edit Link, Configure Dropdown (when it has sub-links) and Delete Link. See Right clicking.

Height

How tall the navbar is, from 100 to 500 px by slider or exact value, with a Fit to Content button that sizes it to its contents. A taller bar gives the brand more room; a shorter one leaves more of the page visible, which matters most when the header is sticky.

What is the footer?

The footer is the band at the bottom of your site. Like the navbar, it is not a section — it appears on every page, and what you put in it is there site-wide.

Footers usually carry secondary navigation, contact details, social links, and a copyright line — the things visitors go looking for rather than the things you lead with.

Selecting the footer

Click the footer on the RHS, or select Footer at the bottom of the section list in the LHS.

Layout

How the footer is arranged, without changing its links or details:

• Centered — your name, links and icons stacked in the middle. The default.
• Split — your name on the left, links on the right.
• Columns — your details, your pages and your socials side by side.
• Minimal — one slim line: copyright and links.
• Big name — your name large, with links and icons beneath.

Social

Social media icons are added in the footer's own Social panel rather than as ordinary links: style (Plain or Circles), size (Small, Medium or Large), color (Brand or One color — One color reveals a Pick swatch), open in a new tab, + Add a social link, and drag to reorder. See Social links.

Copyright & Extra Lines

• Copyright Line — Automatic (the © line with your site's name and the year) or Write my own, which opens a Your Copyright Line box for up to 300 characters.
• Extra Lines — optional small-print lines under it. Add a Line, or start from one of the idea chips: "Licensed and insured", "Family owned and operated", "Thank you for visiting!" or "Prices may change without notice".

Links

Footer links work the same way as navbar links, without dropdowns. Use Add New Link to add one, expand a link to set its name (up to 30 characters) and destination, delete with the trash icon, and drag a link to reorder. Each can point at one of your pages or at an external address.

The footer is the usual home for links visitors expect to find but rarely click — a privacy policy page and terms of service among them.

Link Styling

The same tabs as the navbar, with footer differences: the Text tab adds Brand Font and Copyright Font (each following the link font until set), and the Styling tab adds Copyright Color, kept separate because copyright text is normally quieter than the links above it. There is no Link Spacing in the footer. Link Styling is grayed out in mobile view.

Background

The footer's background — a color (solid or gradient) or an image; there is no video background. Right-clicking the footer on the page gives the same options directly.

Height

How tall the footer is, from 100 to 500 px by slider or exact value, with a Fit to Content button that sizes it to its contents. Give it enough room that its content is not crowded against the bottom edge of the page.

What is the hamburger menu?

The hamburger menu is the sliding panel that contains all of your navbar links. It is what the Menu button header layout opens, and every header uses it on phones. Its background is set in the navbar's Menu Background panel.

The panel itself: When a visitor clicks the menu icon in the navbar, a panel slides in from the right side of the screen showing all of your pages and links. Clicking anywhere outside the panel or clicking the close button inside the panel will close it.

What goes inside it

Every link you add to your navbar will appear inside the hamburger menu. This includes regular page links and any dropdown menus you have set up. The links inside the hamburger menu match exactly what you have configured in the navbar.

Opening and closing

• Click the menu icon in the navbar to open the panel.
• Click the X button inside the panel to close it.
• Click anywhere on the dark overlay to the left of the panel to close it.
• On the live site, Escape also closes it.

Seeing it in the editor

The menu opens on the canvas while you work on it. Opening the navbar's Links, Link Styling or Menu Background panel shows it, and so does clicking the menu button on the canvas. Close it with its ✕ or by clicking the dark overlay.

What is a custom code section?

A custom code section is a special type of section that gives you full control over the HTML, CSS, and JavaScript inside it. Unlike a regular section where you add components from the LHS, a custom code section is a blank canvas — you write the code yourself. This is useful for embedding third-party widgets, building something that the standard components cannot do, or adding any custom design or functionality you need.

How it works

When you add a custom code section to your page it appears as a full-width section. Its panel in the LHS holds just one thing: the Open Code Editor button. You can also right-click the section and choose Open Code Editor. Either way opens the Custom Code Editor where you write your HTML, CSS, and JavaScript.

For code that only needs one slot among other content, use the Custom Code component under Add Content's Maps & code group instead. It opens the same editor.

How code is handled

CSS and JavaScript are treated differently, and the difference matters:

• Your CSS is scoped to the section. Every selector you write is rewritten so it only matches elements inside this section, which means short class names like .title are safe and cannot collide with the rest of your site.
• Your JavaScript is not scoped. It runs on the page like any other script, so it can reach the whole site. This is what makes third-party widgets work, but it also means a stray selector can affect things outside the section.

To keep your JavaScript on its own patch, use the $ and $$ helpers described in the Custom Code popup article — they search within your section rather than the whole document.

What happens to certain CSS

• @import is removed, and the CSS tab shows a warning while your code holds one. It pulls in a whole external stylesheet, which would escape the section's scoping entirely. Upload fonts rather than importing them here.
• :root is rewritten to target the section instead of the document, so custom properties defined there cannot restyle your whole site.

Important notes

• Custom code sections cannot contain regular components — the whole section is your code.
• External scripts are supported: a <script src="…"> in your HTML is loaded and waited for before your own JavaScript runs.

What a transition is

A transition is a shaped edge between two sections — a wave, a slant, a row of mountains — so the page flows from one band into the next instead of meeting at a straight line. Its colors match the sections around it, all by themselves.

Adding one

In the LHS section list, hover the gap between two rows and click the Add Transition pill (beside Add Section). The Add a transition picker opens, drawing each shape in your colors; click one to add it.

Shapes and settings

• Shape — Wave, Gentle wave, Layered waves, Curve, Slant, Arrow, Mountains, Zigzag or Scallops.
• Size — Small, Medium or Large.
• Direction — Points down or Points up.
• Flip it the other way — mirrors the shape left to right.

These are in the transition's panel and on its pill, which also has Delete transition. You can also drag the transition's edge on the page to make it any height.

Locking a section

Lock Section protects a finished section from accidental edits and moves. Turn it on in the Settings group of the section's panel in the LHS, or right-click the section and choose Lock Section.

A locked section's row in the section list shows an Unlock section button; click it to unlock.

Hiding a section on one screen size

Hide Section, in the same Settings group, has separate toggles for desktop and phone. A hidden section is not deleted — it still shows in the other view, and visitors on the hidden screen size simply do not see it.

A hidden section's row shows an eye with a line through it; its tooltip reads "Section is hidden on one or more viewports". Components can be hidden the same way from their own Settings tab. See Desktop and mobile.

Opening the popup

Select a custom code section or a Custom Code component and click Open Code Editor in the LHS, or right-click the section or component on the page and choose Open Code Editor. The Custom Code Editor window opens with HTML, CSS and JavaScript tabs.

Everything autosaves as you type — there is no Save button. The buttons at the top right are Paste all code, Undo and close.

The three tabs

• HTML — write the markup for your section. You can include standard HTML elements, embed codes from third-party services, or any valid HTML. You can also write <style> and <script> tags directly inside the HTML field and they will be extracted and handled automatically.
• CSS — write styles for the elements in your HTML. Your CSS is automatically scoped so it only affects elements inside your own section or component, which means short class names are safe. An @import is removed, and a warning shows under the CSS tab while your code holds one.
• JavaScript — write JavaScript to add interactivity. Unlike the CSS, this is not scoped — it runs on the page like any other script and can reach the whole site.

Pasting a whole snippet

Copying an embed from another service? Click Paste all code, paste the whole snippet into the box, and click Split & Apply. <style> blocks go to the CSS tab, <script> blocks go to the JavaScript tab, and everything else goes to HTML, replacing what each tab held. Cancel closes the box without changing anything.

Keeping your JavaScript on its own patch

Because JavaScript is not scoped for you, two helper functions are provided to do the equivalent by hand:

• $(selector) — selects the first matching element inside your section, equivalent to container.querySelector().
• $$(selector) — selects all matching elements inside your section, equivalent to container.querySelectorAll().

Prefer these over document.querySelector() and document.getElementById(). They work the same way in the editor and on the live site, and they keep your code from reaching elements you did not mean to touch.

External scripts

A <script src="…"> tag in the HTML editor is supported — the external file is loaded and waited for before your own JavaScript runs, so a library is ready by the time your code uses it.

Errors

If your JavaScript throws, the error shows on the section in the canvas, with the line it came from, so you can find it without opening browser developer tools. An error in a <script> written in the HTML tab is reported as "line N of the <script> in your HTML".

Opening the popup

The snap layout popup opens when you right-click a Layout section on the RHS and choose Change Layout. Layout sections are found on older pages and on pages from a starter template; they can no longer be added. The popup title shows the section's slot count — for example "Select Layout (4 Slots)" — with the subtitle "Choose a grid layout for your snap section".

It belongs to Layout sections only. A custom snap section has no preset layouts to choose from — its slots are arranged right on the page instead (see Moving and resizing slots).

Choosing a layout

The popup shows a grid of layout templates organized into named groups. Each card displays the layout's name and a color-coded visual preview of how the slots will be arranged. The layouts shown always match the section's current slot count — a 4-slot section is offered 4-slot layouts. Click any card to apply it — the layout is applied immediately and the popup closes automatically.

Currently selected

If the section already has a layout applied, it is highlighted in the grid and shown in a "Currently selected" indicator at the top of the popup with a small preview of the layout.

Slot sizes

Each slot in a layout has a size that determines how much space it takes up in the grid:

• Small — 1 column wide, 1 row tall.
• Medium — 1 column wide, 2 rows tall.
• Large — 2 columns by 2 rows, or 1 by 4.
• Extra Large — 3 columns by 4 rows, or 2 by 6.

The preview in each card color-codes slots by size so you can see the composition at a glance.

Search and filters

Use the search bar ("Search layouts or groups…") to find layouts by name or group. The filter pills — Small, Medium, Large, and Extra Large — let you narrow the grid to layouts that contain slots of a particular size. Multiple filters can be active at once.

Opening the popup

There is no separate Gradient background type: a gradient is a Color. In the color picker, flip the Solid / Gradient switch to Gradient to make one. Clicking a color swatch that already holds a gradient opens the gradient editor directly, so its stops can be changed.

The window is titled Choose Gradient ("Select a preset or create your own"). Where a field can take either, a Solid color / Gradient switch beside the tabs offers the way back to a solid color.

Presets tab

The popup opens on the Presets tab showing a large grid of ready-made gradients — linear, radial, and conic styles across dozens of color combinations. Click any preset to apply it immediately. The currently applied gradient is highlighted with a "Current Background" label. Gradients you have saved yourself lead the grid, each with a pencil to edit it.

Custom tab

Switch to the Custom tab to build your own gradient from scratch. This tab has three main areas:

Gradient type

Choose between three types from the dropdown at the top:

• Linear — colors flow in a straight line at any angle.
• Radial — colors radiate outward from a center point in a circle or ellipse.
• Conic — colors sweep around a center point like a color wheel.

Direction and angle

For linear gradients, a circular dial lets you drag an arrow to set the flow direction. You can also type an angle directly into the degree field (0–359). For conic gradients, the same dial controls the starting angle of the sweep.

Color stops

The color bar shows your gradient's color stops as draggable markers. Click a marker to open the color picker and change its color. Drag a marker left or right to reposition it along the gradient. Click anywhere on the bar between markers to add a new stop at that exact point — the color is automatically interpolated from the surrounding stops. Use Add Color to append a new stop at the end, and Remove to delete the currently selected stop. You can have up to 20 color stops. A gradient must always have at least two stops.

Advanced settings

Expand the Advanced Settings section for additional controls:

• Repeating gradient — tiles the gradient pattern across the element instead of stretching it once.
• Radial shape (radial only) — toggle between circle and ellipse.
• Radial size (radial only) — controls how far the gradient extends: closest side, farthest side, closest corner, or farthest corner.
• Center position (radial and conic) — click a square preview to reposition the center point of the gradient.

Saving your own preset

On the Custom tab, Save as preset asks for a Gradient name and adds your gradient to the front of the Presets grid, so you can reuse it anywhere on the site. While you are editing a saved gradient, Delete preset removes it.

Applying and closing

There is no Apply or Cancel button. Your edits apply on their own about a quarter of a second after you stop changing things. Close the window with the X, by clicking the backdrop, or with Escape.

Opening the picker

The color picker opens whenever you click a color swatch in the LHS or on the pill — for example a border color, text color, or background color on any component or section.

Solid or Gradient

Where a gradient is allowed — backgrounds, mostly — the picker has a Solid / Gradient switch in its body, below the hex and eyedropper row. Choose Gradient to blend colors; see Gradient. Text, border and accent colors take solid colors only.

Site Palette swatches

At the top of the picker is a row of swatches from your site's palette, using the same names as Appearance: Header background, Header text, Primary section background, Alternate section background, Text color, Heading text, Body text, Subtitle text, Text background, Button text, Button background and Accent color. Any of your eight Custom colors that you have filled follow them.

Picking a palette swatch links the color to your palette: the caption reads "Linked to" and the color's name, and the color follows along if you change that palette color later. A color you type or pick any other way reads "Custom color" and stays fixed. See Color palette.

Preset swatches

Below the theme row is a grid of 30 preset colors covering a broad range of common values. Click any swatch to jump straight to that color.

HSL mode

The default tab shows an HSL picker with two controls:

• Saturation / lightness area — click or drag anywhere in the square to set the color's saturation (left–right) and lightness (top–bottom).
• Hue slider — drag the bar beneath the square to sweep through the full color spectrum from red to violet.

RGB mode

Switch to the RGB tab to dial in exact red, green, and blue values using three sliders. The HSL picker stays in sync — switching tabs updates both views.

Hex input

The hex field at the top shows the current color value. You can type or paste any valid hex code directly (e.g. #3a7bd5) and the picker will update to match.

Eyedropper

Click the eyedropper icon next to the hex field to sample a color from your page. An overlay covers the page and a magnified preview circle follows the cursor, showing the color underneath. Click to pick that color. Press Escape to cancel.

Opacity

The Opacity slider under the color controls runs from 0% (fully transparent) to 100% (solid).

Saving and canceling

The color is not applied until you click Save. Click Cancel, the ×, press Escape, or click outside the picker to discard the change and revert to the original color.

Opening the popup

The media upload popup opens when you click Add Image in the change image popup, Add Video in the change video popup, or the upload button in the media library. The window is titled Upload Media.

Adding files

Drag and drop files onto the dropzone or click it to open your device's file picker. You can add multiple files at once. Uploads start automatically as soon as files are added — there is no separate upload button.

Under the dropzone, Don't have the right picture? offers Make a picture, which opens the Picture Maker so Clayton can make one for you.

From your template

On a site whose template came with pictures, a From your template tab sits beside Upload files. It shows your template's photos; pick one to add it to your library.

Supported file types

• Images — JPEG, PNG, GIF, WebP, AVIF, HEIC, HEIF, DNG
• Videos — MP4, MPEG, MOV, AVI, WebM
• Audio — MP3, WAV, OGG, M4A
• Other — PDF, TXT

The maximum file size is 1GB. Files 1MB and over are uploaded in 10MB pieces automatically — no extra steps needed on your end.

Renaming files

Each file in the queue shows a name field pre-filled with the filename. You can edit this before or after the upload completes. Changing the name after upload updates it in your media library straight away.

Progress

Each file shows its own progress bar and an overall progress bar tracks the full batch. If any file fails to upload, a Retry Failed Files button appears so you can try those files again without re-uploading the ones that already succeeded.

HEIC photos

HEIC and HEIF photos taken on iPhone are automatically converted to JPEG for web compatibility. A notification appears at the end of the upload letting you know how many photos were converted.

After uploading

When all files have uploaded successfully the underlying selector (change image or change video popup) refreshes its grid with the new files. If you uploaded exactly one image while the change image popup was open, that image is automatically applied to the component and the popup closes for you. A single video uploaded from the change video popup is applied the same way.

Opening the popup

The change video popup, titled Select a Video, opens from a video component's Select Video or Change Video button in the LHS, or from its right-click menu. Video backgrounds use the same picker: on a section or card with a video background, the button reads Pick Video until one is chosen, then Change Video.

Choosing a video

The popup shows the videos in your media library, 12 to a page with page controls underneath. Each tile shows a preview thumbnail, the video name, who uploaded it, and the date it was added. Click any video to select it — the popup closes automatically and the component updates immediately.

Adding a new video

If the video you want is not in your library yet, click the Add Video tile in the grid. This opens the media upload popup so you can upload a file from your device. Once uploaded the video appears in the grid and you can click it to apply it to the component.

Empty library

If you have not uploaded any videos yet, the popup says No videos yet, with an Upload a video button — or drag one into the window.

Opening the popup

The change image popup, titled Select an Image, opens when you click the Change Image button on an image component. You can find this button in the LHS when the component is selected, or directly on the component in the RHS if no image has been set yet. Replace from library on the image's pill opens it too.

Choosing an image

The popup shows the images in your media library, 23 to a page plus the Add Image tile. Each thumbnail displays the image name, who uploaded it, and the date it was added. Click any image to select it — the popup closes automatically and the component updates immediately.

Adding a new image

If the image you want is not in your library yet, click the Add Image tile in the grid. This opens the media upload popup so you can upload a file from your device. If you upload a single image it is automatically applied to the component and the popup closes. If you upload multiple images they are added to your library and you can click whichever one you want to apply.

Making a picture

The Make a picture button opens the Picture Maker, where Clayton makes a new picture from a description. The picture you keep is picked straight into the component.

Empty library

If you have not uploaded any images yet, the popup says No pictures yet, with an Upload a photo button — or drag one into the window.

What it is

The Canvas Designer is where you build the artwork inside a canvas component — a full editing window for arranging shapes, colors, and gradients into a single design. Open it by selecting a canvas component and clicking Edit Canvas in the LHS.

The three panels

• Layers, on the left — every shape in your design, topmost first. Drag entries to restack them.
• The canvas, in the middle — the working area, with a grid to help you line things up.
• Properties, on the right — the settings for whatever is selected. With nothing selected it prompts you to pick a shape.

Adding shapes

Click Add Shape at the top of the Layers panel to open the shape picker and choose what to add.

The toolbar

Above the canvas, a toolbar holds:

• Undo and Redo (Ctrl/Cmd + Shift + Z or Ctrl/Cmd + Y).
• Align left, center, right, top, middle or bottom, and Space evenly across or down, which puts equal gaps between three or more selected shapes.
• Center on canvas.
• Lock proportions and Resize from the center toggles for resizing.
• Hide the grid lines.
• Zoom in and Zoom out; click the percentage label to reset the zoom.

Moving, resizing, and rotating

Select a shape and a frame appears around it:

• Drag the shape to move it. It snaps to the grid as you go.
• Drag a corner or edge handle to resize it. There are eight handles, so you can pull from any side.
• Drag the rotation handle to spin it.

Selecting more than one

Shift+click to add shapes to your selection. Multiple shapes move, resize, and rotate together, which is how you keep a composition intact while repositioning it.

Grouping

With several shapes selected, Group binds them together so they behave as one unit from then on. Ungroup separates them again. Both buttons appear in the Layers panel only when a selection makes them relevant.

Properties

What appears depends on the shape selected, but commonly includes:

• Fill — a solid color, or a switch to Gradient with its own editor.
• Fill Opacity — how transparent the shape is.
• Rotation — an exact angle, if you would rather type than drag.
• Border — a toggle, with color and thickness once enabled.
• Sides — for polygons, how many sides they have.
• Thickness — for lines, arcs, and hollow shapes.
• Line Style, Corners, Closed shape, and End Caps — for lines and custom paths.

A Text Box shape gets its own panel instead — text content, font, Font Size (Auto — Fit to the Box or Fixed Size), Font Weight, horizontal and vertical alignment, bold, italic, underline, Text Shadow and Text Outline, with Text Color in place of Fill. While you type in a text box, it gets its own small toolbar: bold, italic, underline, text color, alignment, vertical alignment, and Done.

Right-click for everything else

Right-clicking a shape is the fastest route to most actions — copy, cut, paste, duplicate, flip, restack, group, lock, and delete. Double-click a shape to edit it, which on a text box opens the text for typing directly on the canvas.

Modifier keys

Holding a key while dragging changes how a shape behaves, which is how you get past the grid when you need to:

• Shift + drag — fine placement, for nudges smaller than a grid step.
• Alt + drag — ignore snapping entirely.
• Shift + resize — toggle locked proportions.
• Alt + resize — toggle resizing from the center rather than from the opposite corner.

The usual keyboard shortcuts work too: Ctrl/Cmd + Z to undo; Ctrl/Cmd + C, X, V and D to copy, cut, paste and duplicate; Ctrl/Cmd + G to group; Delete or Backspace to delete the selection. Escape clears the selection, and pressing it again closes the designer.

Canvas background

The Canvas background control at the bottom decides what your shapes are drawn against while you edit. It is a working aid only and never becomes part of the saved design:

• Light — a white working canvas.
• Dark — for pale artwork that would otherwise disappear.
• Component background — paints the component's real background behind the shapes, so you can judge the design against what it will actually sit on without saving and closing first.

Saving

Save Design writes the artwork back to the component. Cancel closes without keeping your changes, so it is worth saving before closing if you are unsure.

What it is

The shape picker is the Choose a Shape window that opens when you click Add Shape inside the Canvas Designer. It shows every shape available to a canvas as a grid of previews — click one to add it.

This is a different set from the eight shapes offered by the standalone shape component, and it is considerably larger.

Basic Shapes

The everyday building blocks: Rectangle, Circle, Half Circle, Hollow Circle, Frame, Triangle, Right Triangle, Diamond, Trapezoid, Polygon, Custom Polygon, and Text Box.

Custom Polygon lets you set the number of sides yourself, and Text Box adds editable text as a canvas layer so wording can sit inside a design rather than beside it.

Special Shapes

Recognizable forms for decoration and emphasis: Star (5), Star (4), Starburst, Heart, Arrow, Cross, Crescent, Smoke, Cloud, Grass, Scribble, Shield, Banner, Speech Bubble, Lightning, Checkmark, Location Pin, Gear, and Snowflake.

Glass & Mosaic

Angular fragments designed to be layered into abstract compositions — the pieces you would use to build a stained-glass or mosaic effect: Shard, Sliver, Lens, Petal, Wedge, Teardrop, Dart, Blob, Parallelogram, Kite, Scalene, Facet, Pentagon Shard, Hexagon Shard, Chevron, Spike, Notch, Lozenge, and Ramp.

Lines

Custom Line, Line, Arc, and Wave. Custom Line lets you place your own points to draw a path of any shape. Lines are the usual way to build dividers and underlines.

Letters and Numbers

Two separate groups: Letters, every letter A–Z, and Numbers, every digit 0–9, each as a drawn shape rather than as text. Because they are shapes, they take fills, gradients, borders, and rotation like any other layer — which is what makes them suited to display lettering and logo marks rather than to readable copy.

Collapsing groups

Each group has a heading showing how many shapes it holds. Click a heading to collapse or expand it, and the picker remembers your choices next time it opens. Letters and Numbers start collapsed.

What it is

The icon picker, titled Select an Icon ("Choose from thousands of Font Awesome icons"), is where you choose the symbol for an icon component. Open it by selecting the component and clicking Change Icon in the LHS, or with Change icon on the icon's pill.

Searching

The quickest route is the search box. Type what the icon represents — phone, cart, calendar — and matching icons appear as you type; pressing Enter or the search button searches too. If a search returns nothing, the picker says "No icons found for that search. Try a different keyword!" Icons are named by what they depict, so a plainer word usually works better than a technical one.

Browsing

With the search box empty the picker lists the whole library, loading more as you scroll. Clearing a search returns you to the top of the full list.

Choosing an icon

Click any icon to apply it; the picker closes. The preview in the LHS updates immediately, as does the component on the RHS, so you can judge the choice in place rather than in the abstract.

Closing

Use the close button, or click outside the picker.

What is the component pill?

The pill is the small floating toolbar that appears above a component when you select it on the RHS. It puts the actions you reach for most within a click of the thing you are editing, so straightforward changes never require a trip to the LHS.

Every component gets one. What it holds depends on the component: text and button components get the text pill, because they have words to format; other components get a short pill with the actions that suit them.

The text pill

One row, left to right:

• Font, size and spacing — a chip showing the font, size and weight in use. It opens the font, a weight menu (Thin to Black), size and letter spacing for the highlighted words, and line height for the whole box — plus rotation on a text component (buttons do not rotate). Sizes are in rem.
• Color — a chip showing the text color; recolors the highlighted words.
• Bold, Italic, Underline — applied to whatever you have highlighted.
• Alignment — a menu: left, center or right.
• Position in its box — a menu: top, middle or bottom. It works on buttons too, moving the button's background within its slot.
• Lists (Bulleted list, Numbered list) and Link — text components only; a button's destination is set in its Links tab.
• Refine with Clayton — the wand; sends the words to Clayton to rewrite, asking how first.
• Delete Content — remove the component.

Text color, font family, font weight, line height and alignment are on the pill only — the left panel no longer has them.

Other pills

• Image — Replace from library, Replace with Clayton (make a new picture with the Picture Maker), the image size menu (Stretch to Fill, Contain, Cover, Original Size, Scale Down), and Delete Content.
• Shape — rotation and Delete Content. Rotation lives here rather than in the sidebar because angling a shape is something you judge by eye, against the page.
• Icon — Change icon and Delete Content.
• Card, Contact Form and Blog Posts — Refine with Clayton and Delete Content. See Refine with Clayton.
• Anything with a background picture — a menu for how the picture fills it (Cover, Contain and so on), and Delete Content.

In mobile view, a component with mobile-only changes also gets Reset mobile styles. See Desktop and mobile.

Working with a highlight

The formatting buttons act on the text you have highlighted, so highlight first and click second. The pill deliberately does not take focus when clicked, which is what lets your highlight survive while you use it — and why the buttons keep working across several changes in a row without reselecting.

The pill and the LHS

The pill formats the words; the LHS holds the whole-component settings the pill has no room for, such as text presets, borders, padding, and backgrounds. A change made in either shows up on the page straight away.

What are editor windows?

Editor windows are the popups that open over the editor when a task needs more room than the LHS can give it — picking an image, drawing a gradient, choosing a layout. They keep your page visible behind them, and close as soon as the task is done.

They are not the popups your visitors see. Those are made in the Popups app.

How they behave

Editor windows open over whatever you are working on and close when you click outside them, press Escape, or use their close button. Most choices apply as you make them rather than waiting for a confirm step, so you can see the result immediately. Two windows are the exception: the Color Picker needs Save, and the Canvas Designer needs Save Design.

Pages

• Add a page — start a new page from a ready-made one or blank, and choose whether it goes in your header or footer.
• Pages window — switch, rename and set up your pages.
• Delete Page — remove a page from your site.

Building

• Add Section — choose a section type, or a pre-built template section.
• Add Content — choose a component, a layout or a box to place in an empty slot.
• Snap Layout — pick the slot arrangement for an older preset Layout section.

Media

• Change Image — choose the image for a component or background.
• Change Video — choose the video for a component or background.
• Media Upload — upload new files without leaving what you are doing.

Geometry

• Canvas Designer — build the artwork inside a canvas component.
• Shape Picker — choose a shape to add to a canvas.
• Icon Picker — search the Font Awesome library for an icon component.

Color

• Color Picker — pick a color for any color setting, linked to your palette or your own.
• Gradient — build a gradient from two or more colors.

Code and publishing

• Custom Code — edit the HTML, CSS, and JavaScript of a custom code component or section.
• Form Builder — build a form's fields, look, and settings.
• Publish — publish your site, connect a domain, and manage its plan.

What the publish window is

Publish Site, at the bottom of the left panel, opens the publish window — where a site goes from something you are building to something people can visit. (Preview Site, beside it, opens your draft in a new tab on the page you are editing.)

Three steps to go live

Until your site is live, the window shows three steps, with a count of how many are done:

1. Plan — Choose a plan for this site, or Manage once it has one. Publishing needs one.
2. Web address — Find a domain to buy one through ClayBuilder, or I own one to connect a domain you already have. A domain that is not working yet shows Finish setup, and a working one Manage.
3. Publish — Publish now. This step stays locked until a plan and a web address are both set.

At the foot of the steps: Preview your site, Versions once there are any, and Unpublish once the site is published.

Once the site is live

Once the site is published and has a connected or bought domain, the window switches to four tabs. Until then it shows the three steps.

• Overview — where the site stands and Publish changes to put your latest edits live. A line counts what is waiting — for example "3 changes on Home… since you last published" — or says "Your live site matches the editor — nothing waiting to publish." It also has Preview draft, your three Recent versions with All versions, and Unpublish site.
• Versions — every publish, to view, restore or share. See Versions.
• Domains — the addresses connected to the site. See Connecting a domain.
• Plan — the plan for this site and its billing. See Plans.

A small dot on Domains or Plan means that tab needs attention — a site with no working address, or no active plan.

Unpublishing

Unpublish takes the site off the web. Your pages and connected domains are kept, so you can publish again whenever you are ready. See Unpublishing.

If a payment fails or a plan ends

If the plan's payment does not go through, the window says so and gives the date by which to update your card to keep the site online. Once a plan has ended, the window shows "Your plan has ended, so changes can't be published."

Draft and published

Your site exists in two states at once. The draft is what you edit — it changes the moment you change anything, and only you and your collaborators can see it. The published version is the copy visitors see, and it never changes until you publish again. This is deliberate: you can rebuild an entire page in the middle of a working day without anyone visiting your live site noticing.

The three things a live site needs

Getting a site onto the web takes three steps, shown in order in the publish window: Plan → Web address → Publish.

• A plan — publishing needs an active plan. See Plans.
• A web address — a domain, bought through ClayBuilder or one you already own. See Connecting a domain.
• Publishing — copies your draft into the version visitors see. It is locked until the other two are set. See Going live.

A site is public only at a connected domain; ClayBuilder's own addresses for your site are internal.

Getting a domain

In the Web address step, Find a domain searches for an available name and buys it through ClayBuilder, which then sets it up for you — nothing to configure (see Connecting a domain). If you already have one, I own one connects it with a single DNS record; Using an existing domain walks through it.

After you publish

Once publishing finishes, the window confirms it — "Your site is live." and how many pages were published.

Publishing again

You can publish as often as you like — there is no limit and no cost per publish. Every publish keeps a copy of the site under Versions, so a bad change is never permanent.

What connecting a domain does

Connecting a domain tells the internet that your address — yourdomain.com — should serve your ClayBuilder site. Until you do this, a published site has no address visitors can use.

Two ways to get an address

Open the publish window. Before the site is live, the Web address step offers both; once it is live, use the Domains tab.

• Find a domain — buy a new domain through ClayBuilder, with no DNS to set up. See below.
• I own one — connect a domain you bought elsewhere by adding one DNS record at your provider. Steps 1 to 4 below walk through it.

You can switch between the two with Buy a new domain instead and I already own a domain. Once a site has one domain, Add another domain adds more.

Buying a domain through ClayBuilder

1. Search — type a name into "Search for a name, like mybakery". Up to three featured results show first (such as Recommended and Lowest yearly price), each with its price, "$X first year, then $Y/yr". See more endings shows the rest, and names already taken are listed too.
2. Continue — the button shows what you pay today, with setup, SSL and privacy included.
3. Checkout — a form for the owner's name, email, phone and address, and your card. A registry needs a real owner on file; it is kept private. The card is saved so the domain can renew.

Only the site's owner can buy a domain. If the registration fails, you are refunded.

ClayBuilder registers the domain and sets it up for you: the card reads Setting up your domain and there is nothing for you to do. It is usually live within 15 minutes, occasionally up to an hour. After that the card reads "Registered through ClayBuilder. Renews" with the date and yearly price — or "Expires" with the date and "auto-renew is off." Turn off auto-renew / Turn on auto-renew controls whether it renews by itself.

Step 1 — Enter your domain

For a domain you already own, type it into the yourdomain.com field and click Connect. It appears immediately as a card reading Waiting for DNS.

Step 2 — Add the DNS record

The card then shows exactly what to add at your domain provider, laid out as a table with a copy button on the name and the value:

• Type — usually CNAME.
• Name — the host the record applies to.
• Value — what it should point at.

Usually there is exactly one record. Occasionally a TXT record is requested as well — to prove you own the domain, or to issue your certificate — in which case it appears as another row of the same table. Copy the values across to your domain provider's DNS settings rather than retyping them.

Each record carries a short note underneath when there is something specific to watch for. Two come up often enough to mention here:

• Bare domains. For a domain with no subdomain, such as example.com, the name is @ — some providers show this as the domain itself. If your provider refuses a CNAME there, look for ALIAS, ANAME, or CNAME flattening, which are the same thing under different names. If it offers none of them, point www.example.com at us instead and forward the bare domain to it.
• Cloudflare users. If your DNS is on Cloudflare, set the record to DNS only — the gray cloud, not the orange one. A proxied record is answered by your own zone before it ever reaches us, so the domain never verifies.

Step 3 — Wait for detection

ClayBuilder checks your domain's real DNS and marks each record with what it found:

• Checking… — the check has not come back yet. This is the state on first load, and does not mean anything is wrong.
• Found — the record is in place and correct.
• Points elsewhere — a record exists with that name but sends traffic somewhere else. Usually an old record that needs replacing rather than adding to.
• Not found yet — nothing visible at that name so far.

The panel rechecks on its own while anything is pending, and there is a Check now button if you would rather not wait. DNS changes typically reach us within a few minutes; some providers take longer.

Step 4 — SSL, automatically

Once the record is detected, ClayBuilder issues your SSL certificate for you and renews it from then on. There is no certificate to buy or install. The card changes to Domain connected, the hostname becomes a link, and a Visit button appears.

If the site is not published

A connected domain on an unpublished site resolves to nothing. Publish from the Publish step once the plan and address are set.

Managing connected domains

• Main address — with more than one domain, one is the main address that visitors and search engines are sent to. Make main address on another domain's card switches it, after asking you to confirm, and your other addresses then redirect to it (before it is live, it reads Main address once live).
• Check now — re-runs the DNS check on a domain that is still waiting.
• Visit — opens a live domain.
• Disconnect — the trash icon on a card. Since visitors will no longer reach your site at that address, you confirm by typing the domain name. A live domain's certificate is released. It does not affect a registration you hold elsewhere, only the link to this site.

If something goes wrong

A card reading Needs attention means setup could not be completed, and any error returned is shown underneath. The usual causes are a record added at the wrong name, an old conflicting record left in place, or DNS changes not having propagated yet.

You keep your domain where it is

If you already own a domain, you do not need to move it. It stays registered with whoever you bought it from, and you keep managing and renewing it there. All that changes is one DNS record, which tells your domain to serve your ClayBuilder site.

What you need before starting

• Your sign-in details for wherever the domain is registered — GoDaddy, Namecheap, Cloudflare, Google Domains, or another registrar.
• Access to that domain's DNS settings, sometimes labeled DNS management, Advanced DNS, or Name servers and DNS.
• Your ClayBuilder site published, or ready to publish.

The process

1. In the publish window, choose I own one in the Web address step (or use the Domains tab once the site is live), type your domain into the yourdomain.com field and click Connect.
2. Copy the record ClayBuilder shows you — type, name, and value.
3. Sign in to your registrar and open the DNS settings for that domain.
4. Add a new record with exactly those values and save.
5. Return to ClayBuilder and wait for the record to be detected. SSL is issued automatically.

Connecting a domain covers each step in more detail, including what the status labels mean.

If the domain currently points at another site

A domain can only point at one place at a time. If it currently serves an existing website, that site will stop being reachable at this address once the record is changed — so make sure you are ready before switching, and keep a copy of the old DNS values in case you want to revert.

Common snags

• An existing record with the same name. Replace it rather than adding a second one — two conflicting records is the most common cause of a domain that never connects.
• Waiting for propagation. DNS changes are not instant. A few minutes is typical, but some providers take considerably longer.
• The wrong domain typed in. Check for a stray www or a missing letter — the record is generated from what you entered.

Before you publish

Publishing copies every page exactly as it looks in the editor, so it is worth a quick pass first:

• Check your pages in mobile view as well as desktop.
• Click through your navbar and footer links, and any buttons.
• Fill in your site information and meta description, since these are what search engines and link previews use.
• Make sure a plan is active — publishing needs one.

Publishing

Click Publish Site at the bottom of the left panel to open the publish window. Work through the three steps — Plan, Web address, Publish — and click Publish now. The Publish step stays locked until a plan and a web address are both set.

Publishing changes later

Editing after publishing changes only your draft. Visitors keep seeing the last published version until you publish again, so there is no risk in leaving a half-finished change overnight. When you are ready, open the publish window and click Publish changes. The Overview tab tells you how many changes are waiting, and on which pages, or that your live site already matches the editor. Publish as often as you like.

Versions

Every publish keeps a copy of the site, which you can view, restore or share from the Versions tab. See Versions.

If a plan is not active

Without an active plan the Plan step comes first, and the Publish step stays locked. Your work is saved as a draft regardless — nothing is lost while a site is unpublished. See Plans.

What a version is

Every time you publish, ClayBuilder keeps a locked copy of the whole site as it was at that moment — every page and every section. That copy is what visitors see. Editing afterwards changes only your draft, never a published version.

Where to find them

Open the publish window and choose the Versions tab (before the site is live, Versions sits at the foot of the three steps). The My Websites window's See versions opens the same list. Every publish is kept.

Each version is titled Version and its number, with a note of what changed. Entries labeled Saved draft are drafts ClayBuilder kept for you when you restored an older version.

What you can do with one

• View — opens that version inside the window, exactly as it was, with a Page picker, a Desktop/Phone toggle, arrows to step to older and newer versions, and Open in a new tab. The live version is marked "This is what visitors see right now."
• Restore this version — not offered on the live version. It asks first; then a copy of the version becomes the draft you edit, and the editor reloads on your home page. The version itself stays exactly as it was, and the draft you had is kept as a saved copy if it held work of its own, so restoring never loses work. Nothing goes live until you publish again.
• Share a link — in the View screen; makes a link anyone can open to view that version, with no ClayBuilder account needed. See Sharing a preview.

Plans are per site

Publishing a site needs an active plan, and each site you build is billed on its own. You choose a plan in the publish window: in the Plan step before the site is live, or the Plan tab afterwards.

Choosing a plan

Plans show as cards with their price. A Monthly / Yearly switch changes the prices shown; the Yearly side says how much you can save ("Save up to" a percentage). Pick a plan and checkout opens right there in the window — you do not leave ClayBuilder. Once you have paid, the window says your plan is active and you can publish.

If you back out of checkout, you see "Checkout was cancelled. Your site is still a draft — nothing was charged."

Once you have a plan

The Plan tab shows your plan with a status badge — Active, Free trial, Payment failed or Cancelled — and the date it renews or ends. Manage billing opens your site's billing page; see Billing.

Warnings to watch for

• A failed payment — "We couldn't take payment. Update your card" by a given date "to keep this site online." There is a grace period before the site goes offline.
• A canceled plan — "This plan won't renew. Your site stays online until" the end date.
• An ended plan — "Your plan has ended, so changes can't be published." Your draft is kept.

Showing a version to someone else

A preview link lets anyone view one version of your site without a ClayBuilder account — the right way to show a client a version without giving them access to your site.

Making a link

1. Open the publish window and go to Versions.
2. Click the version you want to open it, then Share a link.
3. The window shows Preview link ready, the exact date the link stops working, and the link itself with a Copy button.

A link works for 7 days and then expires by itself.

Taking a site offline

Unpublishing takes your site off the web. In the publish window, click Unpublish at the foot of the steps, or Unpublish site on the Overview tab.

ClayBuilder asks first: "Unpublish your site? Your site will stop being reachable at" your address "immediately." Click Unpublish to go ahead, or Go Back to cancel.

What is kept

Your pages and connected domains are kept, so publishing again puts the site straight back online.

What the Apps Library is

The Apps Library is where you install and manage apps that add functionality to your website — capabilities that go beyond arranging content on a page. Where components are things you place, an app is something your site can do.

Opening it

Click the App Library icon (the cubes) at the top right of the editor. Each app shows as a card with its name and a short description.

Installing an app

An app you have not installed yet shows a download icon and Install; click the card to install it, and it reads Installing... while it does. Once installed, clicking its card opens that app's own page. Installing is per site, so an app you install on one website is not automatically on the others. There is no uninstall.

Finding an app

The toolbar's search box ("Search apps...") filters the list by name and description.

Available apps

• Forms — build forms and read the responses; place one with the Form component.
• Online Store — products to sell; shown with the Shop grid, Menu list and Featured products components.
• QR Codes — tracked QR codes; place one with the QR code component.
• Charts — pick a look, then type the numbers into a table (or paste them from a spreadsheet) and watch the chart redraw beside it.
• Events — your calendar of events; shown with Upcoming events and Calendar.
• Blogs — write posts, in one or several blogs; shown with Blog posts.
• Quizzes — graded quizzes or personality quizzes.
• Flashcards — decks of cards, with Import to bring a set in at once.
• Polls — a question for visitors to vote on.
• Popups — windows that open over your pages. A popup is designed in the editor like a one-section page (the top bar shows Editing popup: and Back to Popups), and opened by a button's Open a Popup link or by its own rules.

What an app holds is placed on a page from Add Content's From your apps and Events & blog groups. Quizzes, Polls and Flashcards save with Cmd/Ctrl + S.

What the Forms app does

The Forms app is where you build forms and read what visitors send you. A form built here is placed on a page using the Contact Form component — the app owns the form, the component shows it.

Contact forms are the usual case, but the same builder covers inquiry forms, booking requests, sign-up forms, feedback, and anything else where visitors fill in fields and send them to you.

Your forms

Opening the app lists every form on the site down the left, sorted by Newest, Recently changed, Most responses or A to Z. The main column shows the one you open — whether it is taking responses, how many it has had (At a glance), and its latest responses, each opening to its full answers.

Creating a form

New form creates one and opens it in the form builder. You can also make one from a Form component on the page, starting from Contact, Quote request, Event RSVP, Feedback or Blank — see Contact Form.

Managing a form

• Edit form — opens the form builder.
• Taking responses / Closed — open or close the form to new responses.
• Download responses (CSV) — every response as a spreadsheet file.
• Delete form — asks for confirmation first, since a form's responses go with it.

To show a form on your site, click an empty slot, choose Form under From your apps, and pick the form.

Open and closed forms

A form can be closed to new responses without being deleted and without being removed from your pages. This is what you want for a form with a deadline — event sign-ups that have filled up, an application window that has passed — where the form should still be visible but should no longer accept entries.

Responses

Everything a visitor sends is stored against the form. The app page shows the latest responses with Show all for the rest; when there are more than it shows, it offers the CSV download for all of them. A single response can be deleted from its full view with Delete response, which asks you to confirm.

What the Events app does

The Events app keeps one list of your site's events — classes, shows, open days, sales. Events are kept in the app rather than on any one page, so an event changed here changes everywhere it is shown.

Adding an event

Click Add event. A new event has:

• Name, and an optional Second line under it.
• Day — a single day, or a run of days for something that lasts longer.
• Time — when it Starts and, optionally, Ends. Leave it out for an all-day event.
• Place and Notes.
• Link — optional; the event's name links here (to tickets or a booking page, say).
• Color — the event's color on the calendar. Give each kind of event its own color, like red for closings and green for early dismissals.

Save changes keeps it. Leaving with unsaved changes asks first. An existing event also has Delete event.

Upcoming and Past

The list has two tabs. An event stays under Upcoming until its last day is over, then moves to Past.

Showing events on a page

Click an empty slot and open Add Content's Events & blog group:

• Upcoming events — a list of what is coming up. Its Events tab sets the Look (Agenda, List or Cards), How Many, switches for Month Headings, Second Line and Time and Place, and an optional link under the list (Link Text and Link to).
• Calendar — a month calendar visitors can page through. Its Calendar tab sets Weeks Start On and Day's Events Below.

What the Blogs app does

The Blogs app is where you write posts for your site. A site can have several blogs — news, recipes, a journal — each with its own posts.

Starting a blog

Open the app and click Start your first blog (or New blog to add another). Name it, say what it is for, and click Make blog. Choose a blog to write and edit its posts; New post starts one.

About this blog

Each blog has an About this blog card where you can rename it and keep a private note of what it is for. Delete blog removes its posts from your site, so move any posts you want to keep to another blog first.

Writing a post

• Title and the post itself.
• Address — the post's web address on your site. It is made from the title when you save; it cannot clash with one of your pages.
• Summary — the short text shown in post lists and search results. "Leave it empty to use the post's opening words."
• Cover picture — chosen from your Media Library.
• Author.
• Blog — which blog the post belongs to; change it to move the post to another blog.
• Status — Draft (only you see it) or Published (on your site).

Save post keeps it. A published post gets its own page on your site, using your header and footer, and is listed in your sitemap; the editor shows its live link. Deleting a post asks you to confirm. The blog's post list can be filtered to All, Published or Drafts.

Showing posts on a page

Click an empty slot and choose Blog posts in Add Content's Events & blog group. Its Posts tab sets Which Blog (All My Blogs, or one), the Look (Cards, List or Featured), How Many, and whether to show pictures, the summary, and the date and author.

What the Online Store does

The Online Store lets you sell things on your site: visitors pay by card, and the money goes to your bank account. Down the left of the app are Products ("What you sell"), Categories, Orders, and under Settings, Getting paid and Shipping & tax.

Products

Each product has:

• Photos — up to 8; the first one shows first, and you drag them to reorder.
• Name, Price and an optional Description.
• Keep count of how many I have — when the count reaches 0, the product shows "Sold out".
• Categories it belongs to.
• Show on my website — turn it off to hide the product without deleting it.

Drag products to set their order. Deleting a product keeps its past orders.

Categories

A category is a group of products, like "Breakfast" or "Gifts". Give it a name (shoppers do not see it), choose its products and drag them into order. Deleting a category keeps its products.

Shipping and tax

• Shipping — one flat price (free above an amount, if you like), Free shipping, or Customers can pick up, with where and when. Changes save on their own.
• Sales tax — worked out at checkout for the states you add with + Add a State. With no state added, no tax is charged.

Getting paid

For each sale, about 5.4% + 30¢ is taken for fees: ClayBuilder's 2%, card processing, and working out sales tax. The rest goes to your bank account, usually within 2 business days. Setting it up asks for the same details a bank would — your personal details, the last 4 digits of your Social Security number, and a bank account. They are kept private and used only to pay you.

Orders

Each order shows its status — Ready to send, Sent or Refunded — and a breakdown of what the customer paid, the tax, the fees, and what you receive.

• Mark as sent (or Mark as picked up) — lets the customer know.
• Refund — the full amount goes back to their card. It cannot be undone.

Showing products on your site

Add a Products component — Shop grid, Menu list or Featured products under Add Content's From your apps — or use the ready-made Shop sections and pages.

What the Popups app does

The Popups app makes windows that open over your pages for your visitors — a sign-up offer, an announcement, a discount. (The windows that open while you edit are editor windows, which are something else.)

Making a popup

Pick a design from a gallery shown in your site's colors. Edit design then opens it in the editor like a one-section page: the top bar shows Editing popup: and its name, with Back to Popups to return.

Choose when and where

• Show it (in the When & where card) — a few seconds after someone arrives, when they scroll partway down (as a percent), when they look like they are leaving, or only when they click a button.
• On — every page, only these pages, or every page except some.
• If they close it, show it again — the next day, in a week, in a month, or never.
• Shape — in the middle, in a corner, or a bar along the top or bottom edge.

Switching it on

Each popup has an on/off switch. Switched-on popups show on your site once you publish. You can also Rename, Duplicate (the copy starts switched off) and Delete a popup.

Opening and closing with a button

Any button, image, shape or card can open a popup with the Open a Popup link type. A button inside a popup can use Close the Popup.

What the QR Codes app does

The QR Codes app makes codes you can print on flyers, menus and signs, and counts how often each one is scanned.

Making a code

• Name — "Only you see this."
• Where it sends people — a page on your website, or another web address. The code itself points at a link that never changes, so you can change where it sends people later without reprinting it.
• Colors — the code and background colors, with Reset.

Download saves a PNG; Download for print (SVG) saves a version that stays sharp at any size.

Turning a code off

Each code has an on/off switch. While it is off, scans show a "not active" message instead of your page.

Scans

Each code shows its Scans in the last 30 days, how many different People scanned it, and its All time total, with a chart of scans per day up to today, a split by phones, tablets and computers, and the top places it was scanned.

Deleting a code breaks any printed copies of it.

Showing a code on your site

Use the QR code component in Add Content's From your apps group.

What the Charts app does

The Charts app shows your numbers as bars, a line or a pie, in your website's colors.

Making a chart

1. Chart name — only you see it; it helps you find the chart later.
2. Choose a look — Bars, Line, Shaded line, Bars across, Pie or Doughnut.
3. Type your numbers — into a table, with Add a row and Add a column. You can also paste cells straight from Excel or Google Sheets. A pie or doughnut uses one column; the others are kept for if you switch back.
4. Finishing touches — a title above the chart, whether to write the numbers on the chart, and whether to show what each color means.

The chart redraws beside the table as you type. Make chart saves a new one, and Save chart saves your changes.

Delete removes the chart from every page it is placed on.

Showing a chart on your site

Use the Chart component in Add Content's Charts group and Choose a chart.

Two kinds of quiz

• Graded — right and wrong answers, a score and a Pass mark, with a message for passing and another for not passing.
• Personality — "Which one are you?" Each result has a picture, a description and an optional button, and each answer leans toward a result. A tie goes to the first result.

New quiz starts one from a sample (three questions to change into your own) or blank.

Tabs

A quiz has Questions, Results, Settings, Stats and Leads (the emails visitors left, with its own CSV download). In Settings you can choose:

• Questions One at a time or All on one page, and a Progress bar.
• Shuffle questions, Shuffle answers, and Ask only some questions (a different random set each try).
• Show right or wrong after each question or at the end, and Review at the end.
• Celebrate — a little confetti.
• Limit retakes and a Timer.

Managing a quiz

Test run tries it out, Duplicate makes a copy, you can download attempts as a CSV, and Delete removes it. A switch opens or closes it; visitors see a closed quiz as closed. Cmd/Ctrl + S saves.

Showing a quiz on your site

Use the Quiz component in Add Content's From your apps group.

What the Flashcards app does

The Flashcards app makes decks of cards for visitors to study — a term on the front, its meaning on the back. Start from a blank deck or a sample one.

Tabs

• Cards — Add card one by one, or Import to paste a whole set in at once, choosing what separates the front from the back (such as a comma, dash or semicolon). The language each side is read aloud in (Front language, Back language) is on the Settings tab.
• Settings — how visitors study the deck.
• Stats — study sessions and which cards visitors find hardest. Visitors stay anonymous.

Keys while editing cards

• Enter or Tab — move to the next box.
• Alt + ↑ / ↓ — move a card up or down.
• Shift + Enter — a new line inside a card.

What visitors can do

Visitors flip the cards, sort them into "know it" and "still learning", quiz themselves and race the clock, and their progress is saved.

Showing a deck on your site

Use the Flashcards component in Add Content's From your apps group.

Starting a poll

Pick a starter: Pick one, Yes or no, Rating (one to five stars) or Blank to start from nothing.

Building it

• Question and an optional Description.
• Options — each can have a picture. Reorder them by dragging or with the arrows. A poll needs at least two options.
• Visitors can pick — one option, or several (with the fewest and most they may pick).
• The vote button's wording, an Other option with a box to type in, and whether visitors can change their vote while the poll is open.

Who sees results

Visitors, After They Vote, Visitors, Even Before Voting, Visitors, Once the Poll Ends, or Only You.

Ending a poll

Keep it open until you end it, or end it on a date. A closed poll tells visitors it is closed.

Showing a poll on your site

Use the Poll component in Add Content's From your apps group.

What it is

The form builder is where a form's fields, look and settings live. Open it from the Forms app, or from a Contact Form component with Edit fields. Responses are read on the form's page in the Forms app, not here.

How it is laid out

The form itself sits in the middle, and you edit it right there: click its title ("Untitled Form" until you name it) or its description to type, click a field to select it, and drag fields to rearrange them. Down the left is a column of layers, with a back arrow to step out of each one:

• Fields — the list of fields to add. "Click a field to add it to the form, or drag it into place."
• The selected field — the settings for whichever field you clicked.
• Look — the form's appearance.
• Settings — how the form behaves.

The arrow at the top, Back to your forms, returns to the Forms app.

Fields you can add

• Required — Submit Button, the send button. Its wording is yours to set.
• Layout — Header (a heading that breaks a long form into parts), Paragraph (explanatory text), Image and Spacer (deliberate empty space).
• Text Fields — Short Answer, Long Answer (a multi-line box for messages) and Link (a web address the visitor types in).
• Contact Info — First Name, Last Name, Email (checked for a valid address), Phone, Address, Number and Date.
• Choices — Single Choice (one answer), Multi Choice (any number of answers), Dropdown (suits longer option lists) and Consent (a tick box that can link to your terms).

A field's settings

Select a field to set what is specific to it:

• Field Label, and Show label above field — turn it off for just the input on its own.
• Placeholder — shown in the box until the visitor types.
• Start a new row — keep this field off the previous row.
• Required Field.
• Field Visible — hide a field from the preview without deleting it.

Some fields add their own: Allowed range on a Number, Allowed dates on a Date, Height (lines) on a Long Answer, Options on choice fields, Address Fields switches (Street Address, City, State/Province, ZIP/Postal Code, Country) on an Address, Image Fill Type on an Image, and Link after the text on Consent.

A field's width is set on the form itself: drag its right edge, so related fields such as first and last name share a row instead of stacking.

Look

The form's appearance, grouped by what it applies to: Form Styles, Title & Description, Form Fields, labels, Buttons, Headers and Paragraphs. Controls cover backgrounds, borders, corner radius, fonts, weights, alignment and text colors. The search box at the top ("Search styles, e.g. height") filters the controls by name.

Settings

• Submissions — One submission per email stops the same person submitting twice, with an Email field to identify them by.
• Responses — Email me new responses, with a Send to address. Leave it blank to use the contact email from your site settings. Thank-you message is shown in place of the form once it has been sent; worth setting, since this is the one moment you have their attention.
• Availability — Accepting responses. Turning it off leaves the form on your pages but closed to new entries.

What is the Media Library?

The Media Library is where you manage all of your media — images, videos, audio, and other files used across your site. Any file you upload to ClayBuilder lives here, and you can access it from anywhere in the editor when you need it.

What can you store?

• Images — photos, graphics, logos, and any other image files used on your site.
• Videos — video files you want to display as backgrounds or content on your pages.
• Audio — sound files such as MP3s.
• Documents — PDF and TXT files.

Where your media is used

Popups like the Change image and Change video popup pull directly from your Media Library — so anything you upload there is immediately available to use anywhere on your site.

Opening the Media Library

Click the folder icon at the top right of the editor. There is no keyboard shortcut for it.

The toolbar

• Make a picture with Clayton — the wand; opens the Picture Maker.
• Upload New Media — opens the upload window.
• Sort by — Alphabetical (A–Z), Date Added (Newest), Date Added (Oldest), Largest First, or File Type.
• Search — find files by name.
• Grid and List View (a table) — press G or L to switch.

The sidebar

Down the left are the collections — All media, Recently added, Photos, Videos, Documents, Audio, and the smart collections Made with Clayton, From your template, Not on any page and Needs a description — with a storage bar at the foot showing how much of your 10 GB is used, and Free up space. A Picture size slider above the files makes the tiles bigger or smaller.

Selecting several files

Cmd/Ctrl-click adds a file to the selection and Shift-click selects a run of them; a bar appears with Delete for the lot and Deselect all. Escape also clears the selection. Deleting always asks first, and says so if a file is still used on your site.

Opening a file

Click a file to open its detail panel — view it, edit an image, change a thumbnail, and set its name and description. See Editing media.

How to upload

In the Media Library, click Upload New Media in the toolbar. This opens the upload window: drag files onto it, or click it to pick files from your device.

If your site came from a template, the upload window also has a From your template tab holding the template's pictures, so you can bring one into your library without uploading anything.

You can also reach the same popup from inside the editor whenever you are choosing an image or video, so a file you forgot to upload does not mean leaving what you were doing.

File limits and supported formats

• Maximum file size: 1GB per file
• Supported formats: Images, Videos, Audio, PDFs and TXT files

No picture of your own? The upload window's Make a picture offer opens the Picture Maker instead.

Large files

Files of 1 MB and over are uploaded in pieces automatically. There is nothing extra to do — it simply makes a large upload more resilient, since a brief network problem costs you one piece rather than the whole transfer.

Watching progress

Uploads show an Overall Progress bar, along with progress for each individual file. You can queue several at once rather than waiting for each to finish.

What happens to your images

Very large images are scaled down on upload so that neither dimension exceeds 2560 pixels. That is larger than any normal website use, and it keeps pages from carrying far more image data than a browser will ever display.

Storage

Each site has 10 GB of media storage, shown in the storage bar at the foot of the Media Library's sidebar. Video consumes it fastest by a wide margin, so if you are approaching the limit that is the first place to look — Free up space and the Not on any page collection help find what can go.

Opening the detail panel

Click on any piece of media in the Media Library to open its detail panel. You will see a preview along with all of its details and options; the × closes it. Right-clicking a file also offers Edit Image (images only), Rename (which opens this panel with the name ready to change) and Delete.

Each tile, and each row in List View, shows an In use or Not used pill, so you can tell at a glance whether a file is on your site.

Preview and view options

A preview of the file is shown at the top. Below it:

• View the original — opens the file in a new tab. The link is worded for the file: View Full Resolution Image, View Video, View PDF, Play Audio, or View Original File.
• Edit Image — images only. Opens the image editor to rotate, flip, or crop to a fixed shape. The result is saved as a new copy; the original is untouched.
• Change Thumbnail — videos, audio and PDFs. Replaces the picture shown for the file in the library and the editor. Videos do not play in the editor and show this thumbnail instead — you will only see the video play on the preview or live site.

Name

Rename the file by editing the name field, then click Save.

Description

The description is the picture's alt text — what screen readers read aloud and what search engines read in place of the picture. Describe what the picture shows, then click Save. The Needs a description collection lists every picture still missing one.

File info

Below the description you will find read-only details about the file:

• Created — the date and time the file was uploaded.
• Modified — the date and time the file was last changed.
• Size — the file size.

Saving and deleting

Click Save to apply any changes you have made to the name or description. Click Delete to permanently remove the file from your Media Library. Every delete asks first, and the dialog says "This can't be undone." If the file is still in use, the title reads Delete file in use? and the dialog tells you how many places it is used: "Deleting it will remove it from your site there."

What the image editor does

The image editor lets you crop, rotate, and flip an image without leaving ClayBuilder. It is the tool to reach for when a photograph is the right picture but the wrong shape — too much empty sky above a building, a landscape photo that needs to be square, an image that came off a phone rotated the wrong way.

Opening it

There are three ways in:

• From the Media Library — open an image's detail panel and choose Edit Image.
• From the editor — select an image component or a section with an image background and click Edit Image in the LHS, just below Change Image.
• From the Media Library's right-click menu — Edit Image on any image.

The button only appears once an image is actually set, since there would otherwise be nothing to edit.

Rotating and flipping

Along the top of the editor:

• Rotate left 90° and Rotate right 90° — turn the image a quarter turn at a time.
• Flip horizontally and Flip vertically — mirror the image.
• Reset (its tooltip reads "Undo rotate and flip") — return the image to how it started, in one step, without affecting your crop selection.

Rotating and flipping are applied from the original image each time rather than stacked one on top of another, so repeated turns do not progressively degrade quality.

Cropping

Drag a rectangle over the image to choose what to keep. Drag inside it to reposition, or use the handles at its corners to resize. The dimensions of your selection are shown in the footer as you drag, so you can see exactly what size the result will be.

Aspect ratios

Each time the editor opens it starts on Original, with the whole image selected. The ratio buttons lock the crop to a proportion, or free it:

• Free — no constraint.
• Original — keep the image's existing proportions.
• 1:1 — square. Useful for profile pictures and icons.
• 4:3 and 3:4 — traditional photo proportions, landscape and portrait.
• 3:2 and 2:3 — the proportions most cameras shoot in.
• 16:9 and 9:16 — widescreen and vertical video proportions.
• 4:5 and 5:4 — the portrait proportions social platforms favor.

Locking a ratio is the reliable way to make a row of images match. Cropping several pictures to 1:1 guarantees a tidy grid in a way that eyeballing each one does not.

Saving

Save Copy saves the result as a new item in your Media Library — your original is left untouched, so a crop is never destructive and you can always go back and cut it differently. The copy keeps the original's name and description (its alt text).

When you opened the editor from a component, that component switches to the newly created image automatically. Cancel closes without saving anything.

How to use media on your site

There are a few ways to place media onto your pages.

Via the LHS

Select an image or video component on your page and look for the change button in the LHS. Clicking it will open the Change image or Change video popup where you can pick media from your library.

Via the pill (images only)

Select an image on the page and its pill offers Replace from library, and Replace with Clayton to make a new picture with the Picture Maker. An image with no picture set yet also shows a Change Image button right on the component.

Replace with Clayton opens the Picture Maker with its shape already set to match the image's slot: Wide if the slot is more than 1.25 times as wide as it is tall, Tall if it is less than 0.8, and Square otherwise. The image picker and the upload window also have a Make a picture button.

Via right-click

You can also right-click any image or video component on the RHS to get the option to change the media directly from the context menu.

Uploading directly from the popup

You do not need to upload media to the library beforehand. Inside both the Change image and Change video popups you can upload additional files directly, and they will be added to your Media Library and selected at the same time.

What collections are

The list down the left of the Media Library shows your files in ready-made groups. You do not make or fill collections yourself — every file appears in whichever ones fit it, and the counts keep themselves up to date.

Kinds

• All media — everything.
• Recently added — files added in the last 7 days.
• Photos, Videos, Documents and Audio — by type. Documents is everything that is not a photo, video or audio file, such as PDFs.

Smart collections

• Made with Clayton — pictures you made and kept with the Picture Maker.
• From your template — the pictures your site's template came with. Only shown when your template has some.
• Not on any page — files not used anywhere on your site. The first place to look when you want to free up space.
• Needs a description — pictures with no description (alt text) yet. Filling these in helps visitors using screen readers and helps search engines.

An empty collection says so in its own words — for example, "Every file is in use" when nothing is left in Not on any page.

Storage

Below the collections, a bar shows how much of your site's 10 GB is used, as an amount and a percentage, with a legend splitting it by kind. Free up space opens Not on any page sorted Largest First, so the files worth deleting are at the top; your usual sort comes back when you leave it.

What it does

The Picture Maker makes a new picture from a description — "a cozy coffee shop counter in the morning", "a flat icon of a delivery van". A picture you keep is saved to your Media Library like any upload.

Opening it

• The wand — Make a picture with Clayton — in the Media Library toolbar.
• Replace with Clayton on an image's pill.
• The image picker and the upload window, so you can make a picture without leaving what you were doing.

Making a picture

1. What should the picture show? — describe it in a few words (up to 1,000 characters). Enter makes the picture; Shift + Enter adds a new line. Stuck? "Need an idea? Tap one to start" offers suggestions matched to your kind of site.
2. Pick a look — Photo, Drawing, Watercolor, Simple graphic, 3D, or Pencil sketch.
3. Pick a shape — Wide (1536×1024, for banners and backgrounds), Square (1024×1024, for cards and social posts) or Tall (1024×1536, for phone screens and posters).

Match my website's colors is on to start with; turn it off for colors of the picture's own. No background (for logos and cut-outs) is off to start with; turn it on for a see-through background.

Click Make my picture. Pictures usually take 20 to 60 seconds, and a rough draft shows while it works. A counter tells you how many more pictures you can make today.

When it is ready

• Use this picture — saves it to your Media Library (and, if you opened the maker from a picker, puts it in place). The picture then shows an In your Media Library badge, with a Done button to finish.
• Make another — another picture from the same description.
• Change it — under "Want to change something? Just say how.", type what to change ("make the sky warmer") and it repaints, keeping the rest as it was. Quick-change chips offer Make it brighter, Use warmer colors, Make it simpler and Show it closer up.

A Your pictures strip keeps the earlier results from this session, so you can go back to one.

Closing with a picture you have not kept asks Keep your picture?, with Keep it and Close without keeping.

Limits

Each site can make 30 pictures a day by default, and the count starts again each day. A description that is refused does not count against it.

Your visitor numbers

ClayBuilder counts the visits to your site itself — no setup, no tracking code. Open the Analytics view with the chart icon at the top right of the editor. Choose Last 7 days, Last 30 days or Last 90 days on the left, and the Overview dashboard shows your numbers.

Visits are counted only once your site is published on its own web address. Until then the view says so; connect one in the publish window.

Your own dashboards

New dashboard asks for a name ("like Weekly numbers") and lets you choose what goes on it from three kinds of pieces: Numbers, Charts and Lists. Delete dashboard removes only that arrangement — your numbers are not affected.

Full-screen link

A dashboard's Full-screen link shows just that dashboard on any screen — a TV in the office, say — without signing in, and updates itself every few minutes. You can turn the link off, or make a new one to replace it.

What lands here

Open the Notifications view with the bell at the top right of the editor; a badge shows how many are unread. Notifications include a Welcome guide to get started, new form responses, quiz leads (a visitor who left their email), and new store orders.

Finding one

• Tabs for All, Unread and each kind of notification.
• The list is grouped by day, sorted Newest first or Oldest first, and can be searched.
• ↑ and ↓ move through the list, and the selected notification opens in a detail pane beside it.

Managing them

Mark as read or Mark as unread one at a time, or Mark all as read. Deleting a notification asks first, and only removes the notification — a form response itself stays in the Forms app.

Adding your profiles

Social links live in your footer, not in Website Settings. In the editor, select Footer in the left panel and open its Social section. Use Add a social link to add any of Facebook, X, Instagram, LinkedIn, YouTube and TikTok, then enter your profile's address or handle. Every link you add shows in your footer; drag the grip beside one to reorder it, or remove it with its ×.

How they look

• Style — Plain icons (the default), or icons inside Circles.
• Size — Small, Medium or Large.
• Color — Brand (the default), for each network's own color, or One color, picked with the Pick swatch.
• Open in New Tab — "Keeps your site open behind them": social links open in a new browser tab, so visitors do not lose your site. On by default.

Site Title

Your website's main title shown in browser tabs and search results. This is what people will see at the top of their browser when they visit your site. (SEO Settings has no separate title field — this is it.)

Site Language

The language your site is written in, from 17 choices. It tells browsers, search engines and screen readers how to read your pages. Choosing Arabic also lays the site out right to left.

Site Favicon

The small icon that appears on the top left of the browser tab next to your site title. Click Choose favicon to pick an image from your Media Library; once one is set, Replace favicon picks another and Remove clears it. A square image of 32x32 pixels or larger is recommended for the best result.

Browser Tab Preview

A live preview showing exactly how your site title and favicon will appear in a browser tab. This updates as you make changes so you can see the result before saving.

Contact Email

The primary contact email address for your website. It shows in your footer when its toggle is on (see below). It is also where a form's response emails go when that form has no Send to address of its own; with no Contact Email either, they go to an admin's sign-in email.

Contact Phone

Your primary contact phone number. Use the dropdown on the left to select a country code, then enter your number in the field on the right. The number is formatted as you type, and the example in the field changes to match the country you pick.

Address

The physical address of your business. This field is optional and can be left blank if it does not apply to you.

What appears in your footer

The Show in Footer group gives each contact detail its own toggle controlling whether it is shown to visitors:

• Show location in footer
• Show phone number in footer
• Show email in footer

The detail and its visibility are separate, which is deliberate: you can keep a contact email for form responses, or an address for your own records, without publishing it. Turning a toggle off hides it from the footer while keeping the value.

What Website Settings covers

Website Settings holds everything about your site that is not a specific piece of content — its name and contact details, how it appears in search results, which tracking tools it uses, its default colors and fonts, its legal and accessibility options, and its plan. (Social links are in the footer — see Social Links.) These settings apply to the whole site rather than to any one page.

Opening Website Settings

Click the gear icon in the view switcher at the top right of the editor (on a small screen, the Settings tab in the bar along the bottom). The settings are listed down the left in three groups; click any entry to open it. A Search settings... box in the toolbar finds a setting by name. The group headings are only labels — the path to a setting is always two levels, such as Settings > SEO Settings.

The settings

Your site

• Site Information — your site's title, language, favicon, and contact details.
• Appearance — your site's color palette, fonts, and Limit Section Width. You can also upload your own fonts.

Search & visitors

• SEO Settings — search engine indexing, meta description, keywords, sharing picture, and search engine verification.
• Analytics — Google Analytics, Google Tag Manager and Facebook Pixel, and the switch that turns them on. A Hotjar ID can be saved, but it is not added to your published site yet.
• Accessibility — accessibility options that are saved for your site but not yet shown on your published site.
• Privacy & Legal — privacy policy, terms of service and consent options, which are saved for your site but not yet shown on your published site.

Account

• Billing — the plan for this site.

There is no Domains, Publishing or Social entry in Settings. Domains and publishing are in the publish window; social links are in the footer (see Social Links); each page's own search settings are in the Pages window.

Saving

Settings save automatically — there is no save button. Switches, checkboxes and dropdowns save the moment you change them; color pickers save when they close; text boxes save when you click away from the field. Changes that affect how your site looks, such as colors and fonts, update in the editor straight away.

What SEO settings do

SEO stands for search engine optimization — the work of making your site easier for search engines like Google to understand and show to people. These settings control the text that appears alongside your site in search results, and let you connect your site to Google's own tools.

Search Engine Indexing

A switch. Turning it off asks first — "Hide all pages on this site from search engines?" with Yes, Disable and Cancel — and notes that a site already in search results can take days or weeks to be removed. While it is off, every page asks search engines not to list it, and the panel warns in orange. Leave it on unless the site is not ready to be found.

Meta Description

The short summary of your site that appears underneath the title in search results. A live counter turns orange past 140 characters and red past 160. Longer text is allowed, but search engines usually cut off anything past about 160. Write it as a sentence aimed at a person deciding whether to click, not as a list of keywords.

Previews

Two live mockups — How your website looks on Google and How your website looks on Facebook — update as you type, so you can see where your description gets cut off before you publish. The title shown is your Site Title; SEO Settings has no title field of its own.

Search Keywords

Words relevant to your site, added one at a time as tags you can remove, up to 60 characters each. Keep them accurate to what is actually on your site.

Open Graph Image

The picture shown when your site is shared in a message or social post. Click Choose from media library to pick it. A wide photo works best, about 1200 × 630.

Search engine verification

Bing Site Verification and Google Search Console Verification. These tools ask you to prove you own a site before they show you its search data. In Bing Webmaster Tools choose the meta tag option, and in Google Search Console the HTML tag option; paste just the tag's content code here and ClayBuilder adds it to your site for you.

Verification tags and tracking scripts go only on your published site. Previews are always hidden from search engines.

sitemap.xml and robots.txt

At the bottom, two tabs preview the sitemap.xml and robots.txt files ClayBuilder makes for your site. Neither can be reached until a live domain is connected, and until then the sitemap shows placeholder addresses.

By default, robots.txt blocks the crawlers that collect pages to train AI models — GPTBot, ClaudeBot, Google-Extended, CCBot and others. Ordinary search engines are not affected, so this costs you nothing in search.

SEO Tips

An SEO Tips box at the top of the page sums up the basics: keep your meta description under 160 characters, use relevant keywords naturally, make your site title descriptive and unique, and set up Google Analytics and Search Console.

Per-page settings

Each page's own title, description and sharing picture are set on the Google and sharing tab of the Pages window. Analytics IDs are under Analytics.

What analytics settings do

ClayBuilder counts your visitors itself, with no setup and no cookies — those numbers are in the Analytics view, the chart icon at the top right of the editor. This settings page, headed Analytics & Tracking, is for connecting other tools you may already use. When the switch below is on, ClayBuilder adds the Google Analytics, Google Tag Manager and Facebook Pixel scripts to your published site — never to previews.

Enable Analytics Tracking

The master switch for these outside tools, off by default. When it is off, none of their scripts run on your site, regardless of what IDs you have entered. Turning it off is the quickest way to stop them without losing your configuration. It does not affect ClayBuilder's own visit counting.

An ID in the wrong format is quietly left off your site, so copy each one exactly as the tool shows it.

Google Analytics ID

Your Google Analytics ID. It starts with G-, for example G-AB12CD34EF.

Google Tag Manager ID

Your container ID from Tag Manager. It starts with GTM-, for example GTM-AB12CD3. Its tag goes on every page of your website.

Facebook Pixel ID

The 15 or 16 digit number from Meta Events Manager, for example 123456789012345. It lets Facebook track conversions from your site and build custom audiences for advertising.

Hotjar ID

A shorter numeric ID from Hotjar, for example 1234567. You can save it here, but ClayBuilder does not add Hotjar to your published site yet, so saving an ID does not start any recordings or heatmaps.

A note on speed

Every tracking script you enable is extra code that a visitor's browser has to download and run before your page finishes loading. Enable only the tools you actively look at.

Privacy responsibilities

Tracking visitors carries legal obligations that vary by region. When analytics is enabled you should:

• Mention analytics tracking in your privacy policy.
• Show a cookie consent notice where your region requires one. ClayBuilder does not add one to your published site yet — the consent options under Privacy & Legal are saved but not shown — so use another way if you need one.
• Give visitors a way to opt out if that applies to you.
• Check your obligations under GDPR, CCPA, and any other regulation covering your visitors.

What Appearance controls

Appearance holds your site's default colors and fonts — the palette and typography that new sections, pages, and components start from. Changing a color here does not repaint things you have already styled by hand; it changes what everything new inherits, and anything still using the default.

All changes save automatically.

Colors

The palette is shown as swatches grouped by where they are used. Click any swatch to open the color picker and change it; a background swatch opens a picker with a Solid / Gradient switch.

Header & Footer

• Background Color — the fill behind your navbar and footer.
• Text Color — the text on top of it.

Sections

• Primary background — the background new sections and pages start with.
• Alternate background — a second background for alternating sections, so a long page does not read as one flat block.

Text

• Text background — the default background behind a text component.
• Text color — the fallback color for text that has not been given one.

Buttons & Accents

• Button background — the fill of your buttons.
• Button text — the label color on top of that fill.
• Accent color — used for borders and highlights.

Typography

• Heading text — titles and headings.
• Body text — paragraphs.
• Subtitle text — a secondary tone you apply yourself where you want quieter text.

Custom Colors

Beyond the named roles there are eight custom slots, labeled Custom 1 to Custom 8. These carry no built-in meaning — they are there for colors your brand needs that do not fit any of the roles above. An unused slot shows as an empty well reading Empty — click to set and is not used anywhere until something links to it; a filled one reads In your palette and appears in every color picker from then on.

Because a custom slot has no implied role, it can hold a gradient as well as a solid color. The same is true of the five background colors — header and footer background, both section backgrounds, the text background, and the button background. The text, border, and accent colors take solid colors only, since a gradient is not valid there.

See color palette and contrast for guidance on choosing colors that work together and stay readable.

Font Family

There are four font settings, because headings, body copy, your navigation, and your site's name usually want to look different:

• Site font — used by components and sections. This is what most of your text is read in.
• Heading font — used by titles and headings, so they can carry a different character from the body text beneath them. It starts as Default (site font).
• Link font — used by header and footer links and the footer's copyright line. It starts as Default (site font).
• Brand font — used by your site name in the header. It starts as Default (link font), so the name follows the link font until you set one. A single header can also override it in its Brand & Logo panel.

The first three each have an Advanced area beneath them; the brand font does not:

• Weight — from 100 (Thin) through 400 (Regular) and 700 (Bold) up to 900 (Black), or Default to leave it to the font. An info note reminds you that not all fonts support every weight. The heading font's weight starts as Default (per level), so each heading level keeps its own weight; picking a weight gives all six levels that one weight.
• Letter spacing — Tight (−0.05em), Snug (−0.025em), Default, Relaxed (0.025em), Wide (0.05em), Extra Wide (0.1em), Spaced (0.15em), or Very Spaced (0.2em).
• Transform — link font only: None, UPPERCASE, lowercase, or Capitalize Each Word.

Every font list has + Upload a font at the top for adding your own typeface. See Uploading fonts.

A common pairing is one font for headings and a plainer one for body text. Using three distinctly different typefaces is usually one too many.

Layout

The Content width dropdown, with the Limit section width switch under it, controls Limit Section Width — how wide your content is allowed to grow on large screens. The widths available are Narrow (960px), Standard (1200px), Wide (1440px), and Extra wide (1600px). Section backgrounds stay full-width either way.

Adding your own font

Every font list — in Appearance, and in the editor's font picker — has + Upload a font at the top. It opens the Upload a font window:

• Font name — the name the font is listed under. It has to be unique; if it is taken you are told "That name's already in use — try another."
• Font file — a TTF, OTF, WOFF or WOFF2 file, up to 5MB.

Click Upload. The new font is selected and shown straight away, and from then on it is in every font list on the site.

Deleting a font

Fonts cannot be deleted from Appearance. In the editor's font picker, hover an uploaded font and click its trash icon.

Storage

Uploaded fonts count toward your site's 10 GB of storage.

What this page holds

Privacy & Legal is a place to keep your site's legal text and privacy choices together. None of it makes a site legally compliant by itself — that depends on what your site actually does with visitor data and which laws apply to you.

Privacy Policy

A text area for your full privacy policy, marked Required. A privacy policy explains what information you collect from visitors, why, and what you do with it. If you have analytics enabled, your policy needs to say so.

Terms of Service

A text area for your terms of service — the rules visitors agree to by using your site. Recommended for any business site.

Enable Cookie Consent Banner and GDPR Compliance Mode

Two switches whose choices are saved with your site. They do not add a cookie banner or change how your published site behaves yet.

Privacy Compliance Checklist

Five boxes to tick as you go, saved for this site:

• Created and published a comprehensive privacy policy
• Documented what personal data you collect and why
• Implemented proper consent mechanisms for data collection
• Ensured data is stored and transmitted securely
• Provided mechanisms for users to exercise their data rights

Laws to know about

• GDPR — General Data Protection Regulation, European Union.
• CCPA — California Consumer Privacy Act, United States.
• PIPEDA — Personal Information Protection, Canada.

Why accessibility matters

An accessible site is one that people can use regardless of how they see, hear, or operate a computer. Beyond being the right thing to do, it:

• Makes your site usable for people with disabilities.
• Improves the experience for everyone, not only those who need it most.
• Is required by law in many countries — ADA, Section 508, and WCAG among others.
• Widens the audience your site can reach.
• Tends to improve search engine rankings, since the same structure that helps assistive technology helps search engines.

Show Accessibility Widget and Enable High Contrast Mode

Two switches on this page. Your choices are saved for your site, but they are not yet shown on or added to your published site: turning them on does not add an accessibility button or a high contrast option for visitors.

What makes a site accessible today

Accessibility comes from the content itself, and that is all in your hands in the editor:

• Give every picture a description (its alt text) in the Media Library. The Needs a description collection lists the ones still missing.
• Use real headings, in order — Heading 1 for the page title, Heading 2 for its parts. See Text.
• Keep enough contrast between text and its background.
• Fill in a linked card's Link Description, so screen readers can say where it goes. See Card.

What is font size?

Font size controls how large text appears on the page. A larger value makes text bigger; a smaller value makes it smaller. In ClayBuilder you set it on the text's pill, in the font chip, for the words you have highlighted.

Units

Font sizes in ClayBuilder are set in rem only, with a slider from 0 to 5 in steps of 0.1. One rem is usually 16 pixels, so 1rem is ordinary reading size. Pixels (px) appear elsewhere — for spacing such as padding — but not for font size.

Choosing a size

Body text is typically set between about 0.875rem and 1.125rem (14 to 18 pixels). Headings are larger — commonly 1.5rem to 3rem or more depending on their level. There are no hard rules, but consistency across your site makes it easier for visitors to read and navigate.

What is rem?

rem stands for root em. It is a CSS unit of measurement for size that is relative to the base font size set by the browser — rather than being a fixed number of pixels. On most browsers the default base font size is 16px, which means:

• 1rem = 16px
• 1.5rem = 24px
• 2rem = 32px
• 0.875rem ≈ 14px

Why does it matter?

Because rem scales with the user's browser font size preference, designs that use rem tend to be more accessible than designs that use fixed pixel values. If a visitor has increased their browser's default text size for readability, rem-based sizes will grow with that preference while px-based sizes will stay the same.

rem vs px

Both units appear in ClayBuilder, for different jobs. Font sizes are always in rem, so your text respects each visitor's own settings. Pixels are used for spacing such as padding, where precise, predictable control matters more.

A plain-English glossary

Building a website involves a handful of words that are perfectly ordinary once someone explains them, and completely opaque until they do. This section explains the ones you will run into while using ClayBuilder. No technical background is assumed, and nothing here needs to be read in order — look up a term when you meet it.

Layout terms

Words about space and structure — where things sit on a page and how far apart they are.

• Padding — space inside an element, between its edge and its content.
• Margin — space outside an element, between it and its neighbors.
• Sections vs. components — the difference between a container and the things inside it.

Design terms

Words about how your site looks — typefaces, sizes, and color.

• Font — the typeface your text is set in.
• Font size — how large that text appears.
• rem — a unit of size that scales with the visitor's browser settings.
• Color palette — the set of colors your site uses.
• Contrast — how clearly text stands out from what is behind it.

Publishing terms

Words about getting your site onto the web and keeping it there.

• Domain — the address visitors type to reach your site.
• CDN — the network that delivers your files quickly worldwide.
• SSL — the encryption behind the padlock in the address bar.

What layout means

Layout is the arrangement of things on a page — what goes where, how big it is, and how much room sits around it. Most of what separates a page that feels designed from one that feels thrown together is spacing rather than color or typeface, so these are worth understanding early.

The terms

• Padding — space on the inside of an element, pushing its content away from its own edges. Padding on a button is what stops the label touching the border.
• Margin — space on the outside of an element, pushing it away from its neighbors. Margin between paragraphs is what stops them running together.
• Sections vs. components — sections are the horizontal bands your page is stacked from; components are the individual pieces of content placed inside them.

Related controls in ClayBuilder

• Most components have a Padding tab in the LHS — Space Inside tiles, an All Sides slider, and a slider per side — and orange drag handles on the canvas that do the same thing.
• Limit Section Width limits how wide your content can grow on large screens.
• Snap sections position components in a grid of slots rather than by spacing alone.

What is padding?

Padding is the space inside an element, between its outer edge and the content it holds. Think of a picture in a frame: padding is the mount board between the photograph and the frame itself. Increase it and the content is pushed inward, away from the edges.

The four sides

Padding is set independently on each side, so you can push content away from one edge without affecting the others:

• Top — space above the content.
• Left — space to the left of the content.
• Right — space to the right of the content.
• Bottom — space below the content.

Setting padding in ClayBuilder

Select a component and open the Padding tab in the LHS. Pick a Space Inside tile — None, Snug, Comfy, Roomy or Airy — or set all four sides at once with the All Sides slider (0–160). Make one side different reveals a slider for each side.

With the Padding tab open, orange handles also appear on the component itself on the RHS, with a shaded band showing the padding on each side. Drag a handle to set that side by eye. Press Escape to put the handles away.

Padding and background

Padding sits inside the element, which means the element's background color extends across it. This is why a button with generous padding has a larger colored area than one without, even with the same label.

What is margin?

Margin is the space outside an element, separating it from whatever sits next to it. Returning to the picture frame: if padding is the mount board inside the frame, margin is the wall space between this frame and the next one along.

Margin vs. padding

The two are easy to mix up, and the difference is simply which side of the element's edge the space falls on:

• Padding is inside the edge. It grows the element and is covered by its background color.
• Margin is outside the edge. It does not grow the element and shows whatever is behind it — usually the section background.

A practical test: if you want a colored box to look bigger, use padding. If you want two boxes to sit further apart, use margin.

Margin in ClayBuilder

ClayBuilder has no margin control. Spacing comes from three other places instead: how you place and size the slots in a custom snap section, the padding inside each component, and Limit Section Width, which keeps space either side of your content on wide screens. To push two things further apart, leave empty grid cells between their slots, or give them more padding.

The short version

A section is a container. A component is a piece of content that goes inside one. Every page is a stack of sections, and every section holds components.

Sections

Sections are the horizontal bands your page is built from — a hero across the top, a row of features beneath it, a contact block at the bottom. A section spans the full width of the page and has its own height, its own background, and its own arrangement rules. You reorder a page by reordering its sections.

See Sections for the full article.

Components

Components are the individual pieces placed inside a section — a heading, a paragraph, an image, a button, a shape. They carry the actual content of your site. A section's space is divided into a grid of slots, and each component sits in a slot. Components also live in popups made with the Popups app, which are built like a one-section page.

See Components for the full article.

How to tell which you need

When you want to add something to your page, the question is whether you are starting a new area or filling an existing one:

• Starting a new visual area of the page, with its own background — add a section.
• Putting content into an area that already exists — add a component.

What design means here

Design terms cover how your site looks rather than how it is structured — the typefaces, the sizes, and the colors. In ClayBuilder most of these are set once under Appearance and then inherited by everything you build, so getting them right early saves adjusting things one at a time later.

The terms

• Font — the typeface your text is set in, and the weight and spacing that go with it.
• Font size — how large text appears, and the units used to express it.
• rem — a size unit relative to the visitor's browser setting rather than a fixed number of pixels.
• Color palette — the coordinated set of colors your site draws from.
• Contrast — the difference in lightness between text and its background, which decides whether it can be read.

What is a font?

A font — more precisely a typeface — is the set of letterforms your text is drawn with. It carries a surprising amount of a site's character: the same words in different fonts can read as formal, playful, technical, or expensive.

The font settings

ClayBuilder splits fonts into separate roles, set under Appearance:

• Site font — used by your components and sections. This is the font your actual content is read in.
• Heading font — used by titles and headings.
• Link font — used by navbar and footer links and the copyright line. Splitting this out lets your navigation carry a different character from your body text.
• Brand font — used by your site name in the header. It follows the link font until you set it.

Weight

Weight is how thick the strokes are, given as a number from 100 to 900. The common ones are 400 (Regular) for body text and 700 (Bold) for emphasis; the full range runs Thin, Extra Light, Light, Regular, Medium, Semi Bold, Bold, Extra Bold, Black. Not every typeface provides every weight — if one is missing, the browser approximates it.

Letter spacing

Letter spacing is the gap between individual characters. Slightly wider spacing can make short uppercase text — a brand name, a small heading — feel more deliberate. Wide spacing on body text makes it harder to read, so it is best kept for short runs.

Transform

Available on the link font: leave text as typed (None), or force it to UPPERCASE, lowercase, or Capitalize Each Word. Because it is a display setting rather than an edit, changing it later does not require retyping anything.

Uploading your own

If your brand uses a specific typeface, use + Upload a font at the top of any font list. Accepted formats are .ttf, .otf, .woff, and .woff2, up to 5 MB. Check that your license permits web use. See Uploading fonts.

What is a color palette?

A color palette is the limited set of colors a design draws from. The point of fixing a palette in advance is consistency: when every button on your site is the same blue and every heading the same near-black, the site reads as one thing rather than a collection of pages that happen to share a domain.

Your palette in ClayBuilder

You choose a palette when you create your site — either a ready-made theme or your own colors — and you can change it at any time under Appearance. Rather than a loose list of colors, the palette is a set of named roles:

• Header & footer — background and text.
• Sections — a primary background and an alternate for alternating bands.
• Text — a default text background and a fallback text color.
• Buttons & accents — button fill, button text, and an accent used for borders and highlights.
• Typography — heading, body, and subtitle colors.
• Custom 1 to Custom 8 — eight extra slots for brand colors that fit none of the roles above.

A color you pick from a palette swatch in the color picker is linked to that role: change the role in Appearance and every linked use updates at once. A color you type in as a hex code is a fixed copy, and stays as it is.

The background roles — header and footer background, both section backgrounds, the text background and the button background — and the eight custom slots can hold a gradient as well as a solid color. Text, border and accent colors take solid colors only.

Choosing colors

A workable starting point for most sites is one dominant background, one text color that sits comfortably on it, and one accent used sparingly for buttons and links. Accent colors work by being rare — a page where everything is highlighted has nothing highlighted.

Check it can be read

Whatever palette you land on, check the combinations for contrast. Colors that look elegant side by side in a palette can be unreadable when one is text on the other.

What is contrast?

Contrast is the difference in lightness between two colors — most importantly between text and the background behind it. High contrast, such as near-black on white, is easy to read. Low contrast, such as light gray on white, is difficult, and becomes impossible for some people entirely.

Why it matters

Contrast is the single accessibility issue most likely to affect your visitors, because it affects far more people than it first appears to: anyone with reduced vision, anyone on a phone in sunlight, anyone on a cheap monitor at a bad angle. Low-contrast text does not look subtle to them — it looks blank.

A rough guide

The widely used standard is WCAG, which asks for a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text. You do not need to calculate this by hand — free contrast checkers online take two colors and give you the ratio.

Practical checks

• Look at your page on a phone outdoors. Anything that disappears has a contrast problem.
• Be careful with text over images and gradients — contrast that holds in one corner can fail in another.
• Gray placeholder and caption text is the most common offender. If it is worth showing, it is worth being readable.
• Do not rely on color alone to carry meaning, since some visitors will not distinguish the colors you chose.

In ClayBuilder

Your palette pairs are set under Appearance — background against text, button fill against button label. ClayBuilder does not add a high contrast mode to your published site, so the palette itself has to read well on its own.

What publishing involves

Publishing is the step where the site you have been building becomes a site other people can visit. A few pieces of vocabulary come up during that step, mostly to do with addresses, delivery, and security.

The terms

• Domain — the address visitors type into their browser to reach you.
• CDN — the network of servers that delivers your images and files quickly wherever a visitor is.
• SSL — the encryption that puts https and a padlock in the address bar.

Two more you will meet

• DNS — the system that turns a domain name into the location of an actual server. A domain bought through ClayBuilder needs no DNS step; connecting a domain you bought elsewhere means adding a DNS record at whoever you bought it from.
• Draft and published — your draft is the version you are editing; the published version is the copy visitors see. They are separate, so editing never changes the live site until you publish again.

See Publishing for how these fit together in practice.

What is a domain?

A domain is the address people type to reach your site — example.com, yourbusiness.com, and so on. Behind the scenes every server has a numeric address; a domain is the human-readable name that points at one, so nobody has to remember the numbers.

The parts of a domain

Take www.example.com:

• com — the top-level domain, or TLD. Others include .org, .net, .shop, and country codes like .ca or .co.uk.
• example — the part you choose and register.
• www — a subdomain. You can have others, such as shop.example.com or blog.example.com.

Owning a domain

Domains are rented rather than bought outright — you register one and renew it, usually yearly. As long as you keep renewing, it is yours. You can buy one right inside ClayBuilder, or through any other domain registrar.

Connecting a domain to your site

A domain bought through ClayBuilder is set up for you, with no DNS step. For a domain bought elsewhere, registering it and pointing it at your site are two separate steps: the second is done by adding a DNS record at your registrar, which tells the internet that your domain should serve your ClayBuilder site. See Connecting a domain and Using an existing domain.

What is a CDN?

CDN stands for content delivery network — a group of servers spread around the world, each holding a copy of your site's files. When someone visits, they are served from whichever copy is nearest to them rather than from a single machine that might be on another continent.

Why it matters

Distance costs time. A visitor in Sydney loading an image from a server in London waits for that data to cross the planet and back. A CDN removes most of that wait by keeping a copy close by. The effect is largest on big files — which, on most sites, means images and video.

The CDN in ClayBuilder

Everything in your Media Library is served over ClayBuilder's CDN automatically. There is nothing to configure — when you upload an image and place it on a page, it is already being distributed.

What you might notice

Because a CDN caches copies, a file that has just been replaced can occasionally take a short while to update everywhere. If you swap an image and briefly still see the old one, that is caching, and it resolves on its own.

What is SSL?

SSL is the technology that encrypts the connection between a visitor's browser and your site. It is what puts the https and the padlock in the address bar. Strictly the modern version is called TLS, but almost everyone still says SSL, and the two names are used interchangeably.

What it protects

Without encryption, everything traveling between a visitor and your site is readable by anything in between — the coffee shop's Wi-Fi, an internet provider, anyone on the same network. SSL scrambles it so only the two ends can read it. That matters most for forms and logins, but it applies to the whole site.

Why every site needs it

Encryption is no longer optional even for sites that collect nothing:

• Browsers mark sites without it as Not secure, which visitors notice.
• Search engines favor encrypted sites.
• Some browser features refuse to work on unencrypted pages at all.

SSL in ClayBuilder

You do not have to buy, install, or renew a certificate. When you connect a domain, ClayBuilder detects that your DNS record is in place and issues the SSL certificate for you automatically — usually within a few minutes — and renews it from then on. See Connecting a domain.

Two kinds of settings

ClayBuilder separates settings that belong to a site from settings that belong to you. Knowing which is which saves a lot of hunting:

• Site settings apply to one website — its name, colors, SEO, legal text, and plan. If you have three sites, each has its own. These live in the editor under Website Settings.
• Account settings apply to you across every site. Your username and email are shown there but cannot be changed; what you can change is your password, two-factor sign-in, your signed-in sessions, and your preferences, such as the theme ClayBuilder itself uses. These live on your profile page.

Where to find each

• Site settings — open a site in the editor and click the Settings tab. You can also reach them from your site list without opening the editor first.
• Account settings — your profile page, reached from Manage Profile in the account menu in the navigation bar of your ClayBuilder dashboard. The editor itself has no account menu.
• Billing — per site, since each site carries its own plan. Reachable from the site list, from Website Settings, from the My Websites window's Manage billing, and from the Plan step or tab of the publish window.

Saving

Settings save as you change them — switches on the spot, text fields when you click away. There is no save button to forget.

Managing a site from your site list

Your site list shows a card for each site you have. Each card carries the site's name, its web address — or No web address yet — when it was last edited, and a tag: Live (published at a connected domain), Needs domain (published, but with no address yet) or Draft.

The card menu

Click the ⋮ button on a card for the actions available to that site:

• Edit — open the site in the editor.
• Visit Live Site — open the published site in a new tab. Shown only when the site is published and has a connected domain, since without both there is no address to open.
• Settings — jump straight to Website Settings for that site.
• Billing — open the plan and payment page for that site.
• Copy Domain — copy the site's live address to your clipboard. Shown only once a domain is connected.
• Delete website — permanently remove the site.

The site view and its versions

Clicking a card, its Open button, or its version count opens that site's view, with Return to My Websites, Visit site, Site settings and Billing along the top and a Versions timeline below. Each version shows whether it is live, a draft, or an earlier copy, with Preview and Edit buttons and a menu holding Make this the live version, Duplicate, Rename and Delete. The same history is shown inside the editor under the publish window's Versions.

Deleting a site

Delete is only offered for sites that are not published. To delete a published site you unpublish it first — a deliberate speed bump, since deleting a live site takes it off the web for everyone visiting it. When you do delete, you are asked to type DELETE to confirm.

Your profile page

Account settings cover you rather than any one site. Open them with Manage Profile in your account menu. The page is split into five areas, listed down the left: Account Information, Authentication, Active Sessions, Account Events and Preferences.

Account Information

A read-only summary of who you are on ClayBuilder. At the top, beside your username and email, badges read Email Verified or Email Unverified, and Active. Below are your account details:

• Username — the name you sign in with.
• Email address — where ClayBuilder contacts you.
• Email status — Verified, or Awaiting verification if you have not yet clicked the link sent when you signed up.
• Two-factor sign-in — On or Off, with Turn on when it is off. If you sign in with Google or Apple, this row reads Sign-in and names that provider instead.
• Joined and Last updated — timestamps for the account itself.

Authentication

Change Password: enter your current password, then the new one twice. New passwords must be 10 to 100 characters and different from your current one. Below it is Two-Factor Sign-In. If you sign in with Google or Apple, this area links to that provider instead, since your password lives there.

Active Sessions

Every browser and device signed in to your account. See Active sessions.

Account Events

A log of recent sign-ins and changes on your account, filtered to All, Sign-ins & security or Websites, with a refresh button and Show older activity. Worth glancing at occasionally — unexpected entries are the earliest sign that someone else has your credentials.

Preferences

Choose how ClayBuilder itself looks while you work. This is the appearance of the builder, not of your website — your visitors are unaffected by it. The options are:

• Match System — follows your device's light or dark setting.
• Simple Light — a clean, always-light appearance.
• Simple Dark — a clean, always-dark appearance.
• Daydream of Sky — light, with drifting clouds during site creation.
• Space Voyager — dark, with a starfield during site creation.

The theme changes immediately.

Preferences also holds two switches that take effect the next time you open the editor:

• Show Clayton in the editor — turn off to hide Clayton, the assistant in the corner of the editor.
• Highlight the hovered section in the section list — under Editor; when on, pointing at a section on the page highlights its row in the left panel.

What it does

With two-factor sign-in on, signing in asks for a code from an authenticator app on your phone as well as your password. Someone who learns your password still cannot get in without your phone.

It is set up under Authentication on your profile page (Account settings). It is not offered if you sign in through another account (such as Google, Apple or Microsoft); secure that account instead.

Turning it on

1. Click Turn On Two-Factor.
2. Get an authenticator app — Google Authenticator, Microsoft Authenticator, 1Password, or any app that shows sign-in codes. They are free.
3. Scan this with the app — or, if you cannot scan it, Copy key and type the key into the app instead.
4. Type the 6-digit code the app shows, and your password, then click Turn On.

Recovery codes

Next you are shown a set of recovery codes. Each one signs you in once if you lose your phone. Copy or Download them, keep them somewhere safe, and click I've Saved Them.

Once it is on

The panel shows how many recovery codes you have left. These buttons are there, each asking for your password and a code from your app (or a recovery code):

• Download Codes — shown while you have unused codes that can still be downloaded.
• New Recovery Codes — replaces your codes with a fresh set.
• Turn Off — switches two-factor sign-in off.

Where you are signed in

Active Sessions, on your profile page (Account settings), lists every browser and device signed in to your account right now. Each shows Active now or when it was last seen, when it signed in, and where.

Signing out

• Sign out on any session other than the one you are using ends it.
• Sign Out All Other Sessions, shown when two or more are signed in, ends all of them except yours.

As the page says: "Don't recognize one? Sign it out, then change your password."

Billing is per site

Each site carries its own ClayBuilder plan, covering the builder and the hosting for that site. Building is free — a plan is what unlocks publishing, which is the point at which your site goes onto the web.

What a plan includes

What each plan includes is set per plan and listed on its card, so compare the cards rather than relying on a fixed list.

Pricing

The plan cards are where current pricing is shown, since plans and promotions change — treat them as the source of truth rather than any figure quoted elsewhere.

Plans are billed either monthly or yearly (the billing page's switch reads Monthly / Annual; the publish window's reads Monthly / Yearly). The switch updates the prices, and the yearly side shows how much you can save ("Save up to" a percentage). When a promotion is running, the discounted price is shown with the usual price struck through beside it.

Checkout happens inside ClayBuilder, with card payments handled securely by Stripe, and you can cancel at any time.

The billing panel in Website Settings

When a plan is active, the Billing entry in Website Settings shows the plan name and interval, the amount and how often it is charged, the next renewal date, and whether the site is currently Published or a Draft. A status pill reads Active, Trialing, or Past due. Manage plan & payment opens the site's billing page.

The billing page

Each site has its own billing page inside ClayBuilder — nothing leaves ClayBuilder. You reach it from Manage plan & payment, the site list, the My Websites window's Manage billing, and the publish window's Manage billing. It shows:

• A status card — the plan, a status pill (Active, Trialing, Past due or Ending), the renewal or end date, the Payment method, and Live at with the site's address.
• Update card — change the card on file right there on the page.
• Invoices — jumps to your billing history, below.
• Cancel plan — asks first. The plan then runs to the end of the period you have paid for and shows an Ending pill; Keep my plan undoes the cancellation.
• Plan cards — switch to another plan, or between monthly and yearly, paying only the difference.

A plan set up for you by ClayBuilder support reads "Your plan is looked after by ClayBuilder support. Contact us to change it."

Billing history

Past charges are listed with their Date, Amount and Status — Paid, Failed or Skipped.

If a payment fails

A failed payment puts the subscription into Past due and a warning appears at the top of the billing page. A published site stays live through a grace period — 14 days by default — and the deadline is shown on screen. Update your card before that date and nothing changes; miss it and the site is unpublished until payment succeeds. Your work is never deleted — an unpublished site returns to being a draft you can still edit.

No plan yet

Without a plan the panel shows your site as a draft, the starting price ("From" a monthly price, or a yearly one), and a Choose a plan button. Everything in the editor still works; only publishing is held back. See also Plans.