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 the Lucide icon library.

Settings:

• Icon – Search and select from hundreds of icons.
• 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.

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 logo and navigation links.

Settings:

• Brand – Your logo or business name.
• 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:

• 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.