Title: Adding Components to Your Page
Category: website-editor
Where to find this: Services → Website Editor tab
Components are the building blocks of your website. This guide explains each component type and how to use them effectively.
How to Add Components
- Navigate to Services → Website Editor tab.
- Open the Components tab in the left panel.
- Find the component you want to add.
- Drag it onto your page canvas.
- Drop it where you see a highlighted zone.
- Click the component to configure its settings.
Basic Components
Text
Add paragraphs, headings, and formatted text to your page.
Settings:
- Content – Type or paste your text.
- Heading Level – Choose H1 through H6, or paragraph.
- Alignment – Left, center, right, or justified.
- Font – Family, size, weight, color.
Use only one H1 heading per page (usually your main title). Use H2 for sections and H3 for subsections.
Button
Interactive buttons that link to pages, trigger actions, or scroll to sections.
Settings:
- Label – The button text.
- Action – Link to URL, scroll to section, or run custom code.
- Variant – Primary, secondary, outline, or ghost style.
- Size – Small, medium, or large.
Image
Display photos, graphics, and illustrations.
Settings:
- Source – Upload an image or choose from your media library.
- Alt Text – Description for accessibility and SEO (required).
- Fit – Cover, contain, or fill.
- Link – Optional URL when the image is clicked.
Images without alt text are flagged with a yellow border. Alt text helps visitors using screen readers and improves your search engine rankings.
Icon
Add icons from a large built-in library, grouped into categories you can browse, including sports and kids-club icons such as a football, trophy, medal and party popper — search by name to find them.
Settings:
- Icon – Search by name or browse the categories to select one.
- Size – Width and height in pixels.
- Color – Any color from the picker or your theme.
Video
Embed YouTube videos on your page.
Settings:
- YouTube URL – Paste the video link.
- Aspect Ratio – 16:9, 4:3, 1:1, or 21:9.
- Autoplay – Start playing when visible.
- Loop – Repeat when finished.
- Controls – Show or hide video controls.
Layout Components
Container
A wrapper that centers content and limits its width.
Settings:
- Container Type – Fixed Width (a standard, capped width) or Full Width (spans the whole browser width).
- Background – Color or image.
Row
A horizontal flex container that holds columns.
Settings:
- Alignment – Vertical alignment of columns.
- Gap – Space between columns.
Column
A vertical section within a row. Use columns to create multi-column layouts.
Settings:
- Width – Responsive sizes for different screen sizes (xs, sm, md, lg, xl, xxl).
Example: For a two-column layout:
- Add a Row.
- Drag two Columns into the Row.
- Set each Column to 6 (half width).
- Add content inside each Column.
Configurable Grid
A flexible grid for more complex layouts.
Settings:
- Columns – Number of columns.
- Rows – Number of rows.
- Gap – Space between cells.
- Responsive – Adjust for different screen sizes.
- Container Type – Fixed Width or Full Width, the same choice as Container above.
Container's Fixed Width / Full Width choice doesn't currently change anything you or your visitors see — not while you're editing, not in Preview, and not on your published site; it's always full width.
Configurable Grid is different: while you're editing it, it always fills the canvas edge-to-edge too, even set to Fixed Width — the editor gives your content the extra room to work in. But switch to Preview — you can then use the Desktop, Tablet and Mobile icons in the header to check it at different screen sizes — and Grid's Fixed Width setting takes effect as it will for your visitors.
Marketing Components
Product Hero
Large banner sections for your homepage or landing pages.
Layout Options:
- Centered – Title and subtitle centered.
- Left-aligned – Content on the left.
- With Image – Image alongside text.
- Dark – Dark background variant.
Settings:
- Title – Main headline.
- Subtitle – Supporting text.
- Button – Call-to-action button.
- Background – Color, gradient, or image.
Call to Action (CTA)
Sections designed to encourage visitor action.
Settings:
- Title – Action-oriented headline.
- Subtitle – Brief explanation.
- Button – Primary action button.
- Background – Gradient or solid color.
Testimonials
Display customer reviews and quotes.
Settings:
- Quote – The testimonial text.
- Customer Name – Who said it.
- Customer Title – Their role or company.
- Photo – Optional customer photo.
Feature List
Highlight benefits or features with icons.
Settings:
- Items – Add multiple feature items.
- Icon – Choose an icon for each feature.
- Title – Feature name.
- Description – Brief explanation.
Business Components
Stripe Plans
Display your subscription plans with pricing. Found in the Commerce section of the components panel.
How it works:
- Automatically syncs with your Stripe products.
- Visitors can select a plan and subscribe.
- Supports featured plan highlighting.
Settings:
- Layout – Row or column arrangement.
- Featured Plan – Highlight a recommended option.
Click an individual card inside the block to reach its own settings, including the purchase buttons below.
One-Off Services
Cards for the things you sell as a single purchase — a session pack, a taster, a joining fee, a credit bundle. Also in the Commerce section.
How it works:
- Builds a card per one-off price from your Stripe catalogue.
- Signed-out visitors see a Sign up / Log in button instead of the purchase button.
- A card bound to a season pack or camp opens the booking window (choose attendee, sessions and start date) rather than going straight to payment.
Purchase Buttons on Plan and Service Cards
Select a card inside either block and its settings panel offers a Purchase Buttons choice — in Button Styling on a plan card, Button on a one-off service card:
- Both (the default) – the ordinary purchase button with Add to basket underneath.
- Buy / enrol – the purchase button only.
- Basket – the basket button only.
Two colour controls sit with it: Basket Button Background, plus Basket Button Text Color on a plan card or Basket Button Text on a one-off service card. Leave them blank and the basket button is an outline version of your main button colour; set a background and it becomes solid.
The choice isn't offered on a card bound to a season pack or camp: that card's button opens the booking window, which offers Add to basket itself once the attendee and sessions are chosen. See How the Basket and Checkout Work.
Product Grid
Your merchandise catalogue, with an Add to cart button on each product and the floating basket button that goes with it. See Setting Up Your Merch Store.
Booking Calendar
Let customers book appointments directly on your website.
How it works:
- Syncs with your Google Calendar.
- Shows your available time slots.
- Customers select a time and book.
Settings:
- Location – Which booking location to display.
- Service order – Drag services, or use the arrows, into the order customers see in the service selector.
- Style – Color and appearance options.
Timetable
Show your schedule on your website as an easy-to-read display. Unlike the Booking Calendar, the Timetable is for browsing only — it doesn't take bookings.
How it works:
- Built from the booking slots you've already set up.
- Choose Weekly schedule (a recurring grid) or Dated events (cards for camps, courses, and workshops).
Settings:
- Timetable Type – Weekly schedule or dated events.
- Locations – All (switcher) to let visitors pick, or Single location to pin it to one (chosen from the Location picker).
- Service filter – Choose which sessions appear.
- Display – Add a title, highlight a service, and show capacity.
- Colours – Match the block to your brand.
For the full walkthrough, see Adding a Timetable.
HubSpot Form
Embed contact forms that integrate with HubSpot CRM.
How it works:
- Form submissions go directly to your HubSpot account.
- Automatically detects your HubSpot integration.
Settings:
- Form Type – Contact or Service.
- Styling – Match your website theme.
It's fine to add this block before HubSpot is connected, or before a form is linked to it. While you're editing, it shows a dashed placeholder reading "HubSpot isn't connected" (with a Connect HubSpot button) or, once connected, "No contact form yet" / "No service form yet" depending on the Form Type you picked (with an Open HubSpot Forms button), so you know exactly what to finish. Visitors never see that — on your published page, and in the editor's Preview toggle, they instead see your block's own title and description plus a calm "Our contact form isn't available right now — please get in touch with us another way" note, never a blank space or an error. See Setting Up Contact Forms with HubSpot.
Account Content
A protected area for logged-in customers.
What it includes:
- Subscription management.
- Booking history.
- Support access.
The Account Content component only displays for logged-in visitors. Others will see a sign-in prompt.
Styling settings:
- Sidebar Navigation – Colours for the account menu down the side.
- Panel Tabs – Colours for the tab bar and everything inside a panel, in named groups: Tab Navigation, Tab Description, Empty State, Table / List, Loading State and Waitlist Buttons.
Waitlist Buttons
When a customer is waiting for a place on a full session, an On the waitlist block appears at the top of their My Bookings tab. Each entry carries a Claim your spot button (once a place is offered to them) and a Leave button. Open Panel Tabs → Waitlist Buttons to colour them:
- Claim Background and Claim Text – the "Claim your spot" button.
- Leave Background and Leave Text – the "Leave" button.
Leave these empty and the buttons keep their built-in colours — green for claiming, red for leaving — which are chosen to stay readable on a white panel. Set them if those clash with your brand.
The waitlist block only draws for a real signed-in customer with a live waitlist place, so it won't appear on the editor canvas. Check your colours on the live page.
Navigation Components
Navbar
Your website header with your brand and navigation links.
Settings:
- Brand Display – Choose Company Name to show your business name as text, or Logo Image to upload a logo that replaces it.
- Logo Image and Logo Height (px) – Appear when Logo Image is selected; pick your logo and set how tall it should be (16–120px).
- Brand Link – Where the brand links to (usually your homepage).
- Links – Navigation menu items, under Navigation Links.
- Floating – Transparent navbar that changes on scroll.
- Sign In/Out – Show authentication buttons.
Showing a link only to signed-in visitors
Open Navigation Links, click the link you want, and switch on Only show when signed in. Alongside its Link Text and Link URL, that link now appears in the menu only for visitors who are signed in — everyone else never sees it. Leave the switch off (the default) and the link shows to everybody.
This is how you keep a members-only page — an account area, a members' timetable — out of the menu for people who can't open it yet.
In the editor the navbar always previews as signed out, so a link set to "only show when signed in" is hidden on the canvas even while you're logged in to your own dashboard. Preview the live page while signed in as a customer to see it.
Footer
Your website footer with company info and links.
Settings:
- Brand Display – Choose Company Name to show your business name as text, or Logo Image to upload a logo that replaces it (your tagline stays below it).
- Logo Image and Logo Height (px) – Appear when Logo Image is selected.
- Company Info – Business name, address, description.
- Navigation Links – Secondary menu items.
- Social Links – Facebook, Instagram, Twitter, etc.
Tips for Effective Pages
- Start with structure – Add your layout (Rows and Columns) before adding content.
- Use consistent spacing – Set similar padding and margins throughout.
- Limit colors – Stick to your brand colors for a professional look.
- Check mobile view – Always preview on mobile to ensure readability.
- Add alt text to all images – Improves accessibility and SEO.