Adding Components to Your Page

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

1. Navigate to Services → Website Editor tab.
2. Open the Components tab in the left panel.
3. Find the component you want to add.
4. Drag it onto your page canvas.
5. Drop it where you see a highlighted zone.
6. 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.

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.

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:

• Fluid – Full width or standard container 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:

1. Add a Row.
2. Drag two Columns into the Row.
3. Set each Column to 6 (half width).
4. 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.

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.

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.

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.
• 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, enquiry, or custom.
• Styling – Match your website theme.

Account Content

A protected area for logged-in customers.

What it includes:

• Subscription management.
• Booking history.
• Support access.

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.
• Floating – Transparent navbar that changes on scroll.
• Sign In/Out – Show authentication buttons.

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

1. Start with structure – Add your layout (Rows and Columns) before adding content.
2. Use consistent spacing – Set similar padding and margins throughout.
3. Limit colors – Stick to your brand colors for a professional look.
4. Check mobile view – Always preview on mobile to ensure readability.
5. Add alt text to all images – Improves accessibility and SEO.