> ## Documentation Index
> Fetch the complete documentation index at: https://docs.1club.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Website builder

> Design, translate, and publish your gym's public site from inside the admin. Sections pull live data from the platform, edits live in a draft, releases are versioned.

The Website builder runs your gym's public site without leaving the admin. Each organization has one site made of pages, and each page is made of sections you can add, reorder, and configure. Owners and managers build and publish the site, and visitors and members browse, book, and get in touch through it.

<Note>
  The public website is a **plan add-on**. It's included on the Grow plan,
  available as a paid add-on on the Run plan, and unavailable on the Free plan.
  Manage it under **Settings** > **Organization** > **Subscription**. While the Website
  add-on is inactive, your public site is replaced by a simple unbranded holding
  page rather than returning an error.
</Note>

## When to use it

The site stays accurate without extra work: many sections pull live data from the platform (your plans, classes, instructors, locations, reviews), so they change as your operations change. Edits live in a draft, you publish them as a release, and you can roll back to any previous release.

Typical uses:

* **Let visitors book from your site** - a padel gym adds the **Book** section so visitors filter by day, time of day, and slot length, then book a court in one step.
* **Keep your timetable and prices current** - a yoga studio uses the **Classes** and **Plans** sections instead of pasting its schedule, so the site always shows what is set up in 1Club.
* **Turn visitors into leads** - the contact form creates a lead contact in your CRM and an inbound message your team replies to from the inbox.
* **Redesign safely** - publish a snapshot before a big round of edits, then roll back to it if the new version doesn't work out.

## How the site is structured

A site has three layers:

* **Site** - one per organization. Holds your domain, branding, languages, SEO defaults, analytics, cookie policy, and the list of pages.
* **Page** - a route on your site (`/`, `/about`, `/classes`, etc.). Each page has its own SEO metadata and an ordered list of sections.
* **Section** - a building block on a page (hero, plans, instructors, contact form, gallery). Every section has a **type** that determines what it renders, plus configurable fields.

Every page also includes the site's shared **header** and **footer** sections, so navigation and footer links do not have to be set page-by-page.

## Pages

Pages are free-form. You decide what to add. You can start from the defaults (Home, About, Classes, Calendar, Instructors, Locations, Pricing, Blog, News, FAQ, Contact) or build your own.

Each page has:

* **Title** shown in browser tabs and (by default) as the SEO title.
* **Slug** URL segment. The page marked **Home** lives at `/`; everything else lives at `/<slug>`.
* **Home flag** exactly one page is the home page.
* **SEO** meta title, meta description, Open Graph image (per page, per language).
* **Sections** the content of the page, in order.

To add a page, open the website editor and use **Add page**. To remove one, delete it from the page list; links to it will need to be updated manually.

## Sections

Sections are the building blocks. Pick from the catalog when you click **Add section** on a page. Each one has its own properties panel.

### Layout

* **Header** - your site's top bar: site name, logo, primary navigation, optional Login/Sign-up buttons. Navigation supports flat items and nested dropdowns.
* **Footer** - bottom of every page: link groups, contact information, social icons, and legal links.

### Hero and calls to action

* **Hero** banner with a headline, subheadline, one or more CTA buttons, and optional imagery. Four layout variants: **background** (full-width image or video behind the headline), **imageRight** (copy on the left, image on the right), **centered** (copy centered, no media), **gallery** (Airbnb-listing style: headline left, CTA right, image gallery below). The hero accepts a list of background images: the **background** and **imageRight** variants crossfade through them as a slideshow; the **gallery** variant renders them as a tiled gallery.
* **CTAs** focused call-to-action section with title, supporting text, one or more buttons, and an optional image.
* **Quote** centred testimonial or pull quote attributed to a staff member or member.
* **Stats** row of headline numbers ("10 years", "500 members", "4.9 stars") for social proof.

### Live data sections

These pull from the platform automatically. There is nothing to sync; they always reflect what is currently set up in 1Club.

* **Plans** your published [membership plans](/sales/plans), rendered as pricing cards with a CTA to sign up.
* **Classes** class schedule, filterable by class type or limited to a window.
* **Events** your live [events](/events/events), as a featured-events rail (default) or a full list; configurable title, subtitle, and card limit. Self-hides when there is nothing to show. New template sites include it on the home page.
* **Calendar** unified booking calendar combining areas and instructors; visitors can click through to book.
* **Book** a filter-driven search-and-book section for areas, classes, and coaches. Visitors filter by sport/category, day, time of day, slot length, and instructor, then book a slot in one step. (Optional title and subtitle.)
* **Instructors** staff directory. Choose grid (short) or alternating long-form layout.
* **Instructor** spotlight a single instructor by ID or slug.
* **Areas** bookable spaces or facilities, each linking to its booking page.
* **Clubs** location cards with map for organizations with multiple gyms.
* **Club** spotlight a single gym with its address, hours, and map.
* **Location** alternative compact location card.
* **Products** items from your product catalog (day passes, merch).
* **Reviews** Google reviews (from the gym's Google connection, set on each club under **Settings** > **Clubs**) or 1Club [reviews](/marketing/reviews), displayed as cards or a carousel.
* **News** list of posts from your CMS (slug `/news/<post-slug>` for each).
* **FAQ** accordion of questions and answers. Filter by tag if you keep separate FAQ topics.

### Content sections

* **Gallery** grid of images or videos picked from your [Media library](/marketing/media).
* **Block** a reusable content block (rich text managed under [Marketing > Content](/marketing/content)) referenced by slug. Use this for legal text, "About us" paragraphs, or any chunk of copy you want to reuse on multiple pages.
* **Columns** multi-column layout that nests other sections side-by-side. Use it to put a hero next to a contact form, or stats next to a quote.

### Forms

* **Contact form** lead-capture form. You choose the fields to show (name and email are always on; phone, date of birth, gender, category, subject, message are optional). It also supports any custom fields you have defined under **Settings** > **Members** > **Contacts**. Each submission creates a **lead** contact in your CRM and an inbound message you can reply to from the inbox.

### Section anatomy

Under the hood every section is the same simple shape: a **type**, a **config**, and optional **translations**.

* **Type** decides what the section renders (`hero`, `plans`, `gallery`, and so on) and which fields it exposes.
* **Config** holds the section's settings - text, numbers, dropdowns, image references, and structured lists.
* **Translations** store per-locale overrides for the translatable text, keyed by field. Complex lists (nav items, CTA buttons, footer link groups) carry stable per-item IDs, so translations survive when you reorder items.

Two config fields appear on most content sections and are worth knowing:

* **Background tone** (`default`, `muted`, `elevated`, `primary`) sets the section's background. `primary` tints it with a subtle wash of your brand color; use it to make one section stand out without hardcoding colors.
* **Size** (`content` or `full`) controls width: `content` constrains to a centered max-width, `full` runs edge to edge.

Layout section types (`header`, `footer`) live once at the site level and appear on every page. Content section types live in each page's ordered list. The editor keeps these separate for you - you will not see a hero offered as a header, or a footer offered inside a page. This same config schema drives both the manual property panels and the AI builder, so anything you can set by hand, the assistant can set too.

## The editor

Open **Marketing** > **Website** to launch the editor. **Website** is the first Marketing tab and the page Marketing opens on. The editor drops the page header to give you room, but keeps the Marketing column beside it, so the other Marketing tabs stay one click away. It has three regions:

* **Section list (left)** every section on the current page, in order. Drag to reorder. Each row has a context menu: **Edit**, **Move up/down**, **Duplicate**, **Translate**, **Delete**.
* **Live preview (right)** your site renders in an iframe that updates as you edit. Toggle between desktop and mobile widths.
* **Properties panel** opens when you select a section. Shows the section's fields (text, numbers, dropdowns, images, lists). Many fields support inline editing directly on the preview.

Behavior you can rely on:

* **Auto-save.** Edits save automatically about 1.5 seconds after you stop typing.
* **Undo.** The previous saved state of a section can be restored from its menu.
* **Image picking.** Image fields open the [Media library](/marketing/media). Upload new images from the same dialog; they are stored in your media library for reuse.
* **Inline editing.** Click a headline in the preview to edit it in place; click away to commit.
* **Unsaved-changes indicator.** A banner appears when your draft differs from the published release; that is your cue to publish.

There is also an **AI website builder** in the right sidebar. It is covered in full below.

## AI website builder

The AI website builder is an assistant that edits your site by chatting with it. Ask it to "add a pricing page", "make the hero more energetic", "add an FAQ about parking", or "translate the whole site into Spanish", and it makes the changes for you the same way you would in the editor.

What it can do:

* **Build and edit pages and sections.** It adds pages, adds or removes sections at a chosen position, and merges new settings into an existing section.
* **Write copy grounded in your data.** It reads your real organization facts - name, description, clubs, cities, amenities, sports, plans, branding - and writes headlines and body copy from them rather than inventing awards or history.
* **Pick images from your library.** It searches your [Media library](/marketing/media) by name (for example "pool" or "reformer") and sets the match on a hero or CTA. It never uploads on your behalf, so it only uses images you already have.
* **Manage layout, content, and CSS.** It can update the header and footer, create or edit reusable content items (blocks, FAQs, posts), and adjust custom CSS using theme tokens (never hardcoded colors).
* **Translate.** It fills missing translations per section across your locales.
* **Undo.** It keeps a short history of its own changes so you can revert the last one.

What it will not do:

* **It only edits the draft.** Like every edit in the builder, the assistant's changes stay in the draft. Nothing goes live until *you* publish a release.
* **It cannot publish, reset, or delete the site.** Those actions are yours alone, from the UI.
* **It respects the layout-versus-content rule.** It will not put a header inside a page or a hero into the site layout, and it always sets required fields (for example, a hero's variant).

### Starter content generation

When you first create a site from a template, the builder seeds it with copy written from your organization's stored facts: a home hero headline, a hero subheadline, and an About-page intro, generated in your default language. If generation is unavailable, the site falls back to sensible default copy. Either way, a brand-new site reads like *your* site from day one instead of showing generic placeholders you have to overwrite.

## Theming and branding

The website uses your **Settings** > **Member Apps** > **Branding** as the source of truth (logo, favicon, primary color, fonts). The site adds a few extras on top:

* **Header / dark color overrides** for tuning contrast.
* **Theme support** light only, dark only, or both (with a user-facing theme switcher). Pick the **default theme** when you allow both.
* **Custom CSS** site-level CSS for fine-tuning. Lives on the release, so it is versioned with the rest of the site.

## Navigation

The header section configures your top navigation:

* **Nav items** label + URL. Items can have **children** to render as a dropdown menu.
* **Site name / logo** sourced from branding by default; override per site if needed.
* **Login / Sign-up buttons** appear automatically when [authentication](/settings/overview) is enabled for the site.

The footer section configures footer links, grouped into categories (e.g. *Company*, *Programs*, *Legal*) plus contact info, social links, and legal links.

## Multi-language

A site can be published in several languages.

* **Supported locales** and a **default locale** are configured on the site.
* Each translatable field on a section or page (headline, subtitle, CTA label, meta title) has per-locale values.
* **AI translate** fills missing translations across all locales at once. Run it after you change the source-language copy to keep everything in sync. Review the suggested translations before publishing.
* Visitors see a language switcher in the header when more than one language is published.

## SEO and metadata

Per page: meta title (defaults to the page title), meta description, Open Graph image, and translations of each per locale.

Site-wide, the site automatically serves a `sitemap.xml` and `robots.txt`. Canonical URLs are generated from your domain and page slugs.

## Analytics and tracking

Configure analytics from the site settings panel:

* **Google Analytics** property ID (and any other tracking IDs you use).
* **Custom scripts** for pixels and tag managers.

Scripts can be gated behind cookie consent categories. *Necessary* scripts run always; *analytics* and *marketing* scripts only run after the visitor accepts the matching category in the cookie banner.

## Cookies and legal

Built into the site:

* **Cookie banner** with category-level consent (necessary / analytics / marketing).
* **Legal documents** privacy policy, terms, and cookie policy. Write them as documents under [Settings > Bookings > Waivers](/settings/waivers); the site links to them by slug.

## Domain and hosting

* Every site has a default 1Club URL generated from your organization slug.
* You can attach a **custom domain** in the site settings; point your DNS to 1Club following the on-screen instructions.
* HTTPS is provisioned automatically.

### Holding page

The public website is a plan add-on. If the add-on becomes inactive while you still have published content or a custom domain pointed at 1Club, visitors do not see an error or a 404. Instead, 1Club serves a generic, unbranded **holding page** that says the site is temporarily unavailable. It protects your public reputation, avoids leaking 1Club branding, and disappears the moment the add-on is active again - your live site returns exactly as it was, from the last active release. Reactivate the add-on under **Settings** > **Organization** > **Subscription** to bring the site back.

## Publishing and releases

Edits do not go live until you publish.

1. **Draft** everything you change in the editor is stored as the working draft.

2. **Publish** opens a dialog with two modes:
   * **Amend** (default) updates the active release in place. Use this for typo fixes, small copy tweaks, or routine content updates. No new version is created.
   * **Snapshot** creates a new versioned release. Use this for bigger changes you may want to roll back from cleanly.

3. **Active release** what the public site is serving right now.

4. **Releases history** every snapshot is kept. Open the history panel to view, compare, or **roll back** to a previous release; the chosen release becomes the active one.

5. **Rollback to no release** is the closest thing to an unpublish - use the history panel to roll back to an earlier release, or contact support if you need the site fully offline.

You can leave notes on each release ("Spring campaign launch", "Updated pricing page") to make the history easier to scan.

## Forms and leads

Contact-form submissions are first-class CRM events. Each submission:

* Creates a **contact** in 1Club with type *lead*, including any custom fields the form collected.
* Posts an **inbound message** to your staff inbox, so someone can reply.
* Is de-duplicated by email; if a contact with that email already exists, the form returns a friendly conflict rather than creating a duplicate.

From there you can convert the lead into a member, work it on the [Leads](/members/leads) board, tag them for [smart segmentation](/settings/smart-tagging), or send them a [promotion](/sales/promotions).

## Tips

Start from defaults, then prune. Add the prebuilt pages, delete the ones you do not need, and edit the rest. Faster than building from scratch.

Use live-data sections for anything that changes. Do not paste your class schedule into a hero; use the **Classes** or **Calendar** section so updates flow automatically.

Lead with one strong CTA per page. Hero CTA plus one or two supporting CTAs is plenty; more dilutes the action you want visitors to take.

Use Columns to break monotony. Pair a stats block with a quote, or a hero with a contact form, instead of stacking full-width sections everywhere.

Publish as Snapshot before big changes. Take a snapshot of the current site first; if the next round of edits goes sideways you can roll back instantly.

Translate after you stabilize copy. Running AI translation early means redoing it when you keep tweaking the English. Lock the source copy, then translate.

Wire the contact form to a tag. Tag new leads from the website so [automations](/marketing/automations) and [promotions](/sales/promotions) can find them.

## Troubleshooting

| Symptom | Likely cause | Fix |
| - | - | - |
| Edits don't show on the live site | Changes are saved to the draft, not published | Open the publish dialog and publish a release (**Amend** for small tweaks, **Snapshot** for bigger ones) |
| Publish button is disabled or fails | Publishing and rollback require an active **Website** add-on | Activate or renew the add-on under **Settings** > **Organization** > **Subscription**, then publish again |
| Public site shows a plain "temporarily unavailable" page | The Website add-on is inactive, so the holding page is served | Reactivate the add-on under **Settings** > **Organization** > **Subscription**; your last active release returns automatically |
| A live-data section is empty or missing | There is no data to show yet (no published plans, no live events) | Publish the underlying records; sections like **Events** self-hide until there is something to show |
| New languages show English text | Translations were not filled after you changed the source copy | Run **AI translate**, review the results, then publish |
| A plans link points somewhere odd | Plans always link to `/plans`; there is no `/pricing` page | Leave plan CTAs pointing at `/plans` and do not create a `/pricing` route |

## Related

* [Content](/marketing/content) - Blocks referenced from the website and posts surfaced by the News section.
* [Media](/marketing/media) - Images and videos used by site sections.
* [Reviews](/marketing/reviews) - Review pipeline that feeds the **Reviews** section.
* [Settings overview](/settings/overview) - Branding, member portal, and other site-adjacent configuration.
* [Plans](/sales/plans) - What the **Plans** section renders.
* [Smart tagging](/settings/smart-tagging) - Auto-tag the leads your contact form creates.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.