How Kajabi's Visual Editor Works

The Visual Editor is your primary tool for managing every page on Newbold Connect. Access it by navigating to Website → Pages in the admin sidebar, then clicking on any page.

Pages, Sections, and Blocks

Pages are the top-level containers — Home, About, Library, Pricing, etc. Each page has a template that determines its URL and which sections appear on it.

Sections are the modular building blocks stacked vertically on each page. All custom Newbold Connect sections begin with the NB prefix (e.g., NB Custom Hero, NB Video Rail, NB Pricing Plans). You can add, remove, reorder, and hide sections using the left panel.

Blocks are repeatable items inside certain sections — for example, individual FAQ items, feature cards, pricing plans, or instructor profiles. You can add, remove, reorder, and duplicate blocks within their parent section.

The Editing Workflow

1. Go to Website → Pages and click the page you want to edit.

2. The Visual Editor opens, showing all sections in the left panel.

3. Click any section to open its settings. Adjust content, colours, toggles, and layout as needed.

4. Click Preview (top-right) to check your changes before they go live.

5. Click Save (top-right) to publish. Note: Save means live — there is no separate draft/publish step.

Understanding Toggle Switches

Many NB sections contain toggle switches (checkboxes) that control visibility and behaviour. For example, Show Eyebrow controls whether the small label text above a headline appears, and Enable Multi-Currency reveals additional price fields for GBP, USD, EUR, and CAD.

When you toggle a setting OFF, the related fields are hidden in the editor but their values are preserved — so you can toggle them back ON later without re-entering data.

The Background Engine

Nearly every NB section includes a shared background system with four modes:

Solid Colour — A single colour. Use #000000 or #0a0a0a for the standard dark look.

Gradient — A multi-stop colour gradient with direction control. Use subtle dark-to-dark gradients for visual depth.

Image — A full-width background image with position and parallax (fixed) options. Always add an overlay with 60–80% opacity to keep text readable.

Video — A looping background video. Use sparingly, only on hero sections.

Important: When you switch background type, all settings for the previous type are hidden. They are not deleted — switching back restores them.

Padding, Spacing, and Max Width

Every section has separate padding for desktop and mobile (in pixels). Defaults are typically 80–100px top/bottom on desktop, 50–60px on mobile. Content Max Width (usually 1200px) controls how wide the content area is within the section. For text-heavy pages, 900px is more readable.

Full Kajabi documentation: help.kajabi.com — Website Editor Overview

How Pricing Works on Newbold Connect

Newbold Connect supports four currencies — GBP, USD, EUR, and CAD — across all pricing sections. Visitors can switch between currencies using a toggle button that appears on the frontend. When they switch, both the displayed price AND the purchase button destination change to match the selected currency.

This means each pricing section requires four separate offer links — one per currency. If any currency field is left blank, that currency option will show a broken or empty button. Always fill all four or disable the currency toggle.

NB Pricing Plans

The most feature-rich pricing section. Each plan is a separate block, and the section supports up to 20 plans.

Section-level toggles:

• Show Currency Toggle — shows/hides the GBP | USD | EUR | CAD switcher on the frontend.

• Enable Multi-Currency URL — when ON, reveals four separate button URL fields per plan (one per currency). When OFF, all currencies share a single button URL.

• Show Guarantee — displays a money-back guarantee badge below pricing.

• Show Eyebrow — header label above the plans.

• Full Width — expands the section to use the full browser width.

Block-level toggles (per plan):

• Is Featured — marks this plan as the recommended option with highlighted card styling.

• Enable Multi-Currency — reveals four price amount fields instead of one. This is a block-level toggle, so each plan can independently have multi-currency enabled or disabled.

• Hide Currency Symbol — removes the £/$/€ symbol. Use this for plans labelled "Free" or with custom text pricing.

NB CTA Pricing Card

A single-card pricing section with animated border effects (pulsing gradient border and glow). Used for featured offer callouts.

Key toggles:

• Show Eyebrow — label above the card.

• Enable Multi-Currency URL — four separate CTA button URLs.

• Show Guarantee — guarantee badge.

Visual note: The animated border runs continuously (3-second loop). On hover, the animation speeds up. This is a CSS-only animation and cannot be toggled off from the editor.

NB Founding Members Pricing

A specialised pricing section for launch/early-access offers.

Key toggles:

• Show Badge — displays a "Founding Member" or custom badge above pricing.

• Show Currency Toggle — the currency switcher.

• Enable Multi-Currency URL — currency-specific button URLs.

• Show Spots Remaining — displays a countdown of available spots. This number is set manually in the editor and does not auto-decrement with purchases.

• Show Instructor Image — adds an instructor photo to the pricing card.

• Full Width — expands to full browser width.

NB Course Detail Hero (Pricing Component)

The course landing page hero includes built-in pricing with the same multi-currency system.

Key toggles:

• Show Trailer — shows/hides the video trailer section.

• Show Meta Grid — displays course metadata (duration, lessons, level).

• Enable Multi-Currency URL — four CTA button URLs per currency.

• Show Membership Option — reveals a secondary pricing tier below the primary CTA (e.g., "Or join the membership for £X/month").

Where Prices Come From

The actual prices displayed in these sections are entered directly in the section settings — they are not pulled automatically from Kajabi Offers. If you change a price in your Offer, you must also update it in the relevant section settings. The button URLs, however, should point to the correct Offer checkout pages.

To manage your Offers (the actual payment/access system), go to Sales → Offers in the admin.

Full Kajabi documentation: help.kajabi.com — Offers Overview

Email Campaigns

Access email campaigns under Marketing → Email Campaigns. There are two types:

Broadcasts — Single emails sent to a segment of your contacts. Perfect for announcements, new class launches, and promotions. You can schedule them in advance and A/B test subject lines.

Sequences — Automated series of emails triggered by a specific action (signup, course enrollment, form submission). Each subscriber receives the sequence on their own timeline, starting from when they triggered it. Set delays between emails (1 day, 3 days, 1 week, etc.).

Email Design

Choose between Simple Text (personal-looking, no design elements) and HTML (branded templates with images, buttons, logos). HTML emails offer 15+ customisable templates. Save your designs as reusable templates for brand consistency.

Segmentation

When sending broadcasts, you can filter recipients by tags, offer purchases, course enrollment, email engagement, form submissions, and more. Use the segment builder in Contacts → Segments to create reusable audience filters.

Full Kajabi documentation: help.kajabi.com — Email Campaigns Overview

Automations

Automations use "When → Then → But Only If" logic to automate actions across your platform. Access them under Marketing → Automations.

Common Automation Recipes for Newbold Connect

• Grant access on purchase — When a specific offer is purchased, then grant access to the associated course.

• Welcome email on enrollment — When a contact is granted an offer, then subscribe them to a welcome email sequence.

• Tag on lesson completion — When a student completes a specific lesson, then add a tag (e.g., "completed-module-1").

• Certificate on course completion — When all lessons in a course are marked complete, then send a certificate of completion.

• Re-engagement sequence — When a contact hasn't logged in for 30 days, then subscribe them to a re-engagement email sequence.

Triggers Available

Form submissions, email opens/clicks, lesson completions, quiz passes, offer purchases, event registrations, tag additions, and more.

Actions Available

Tag contacts, subscribe/unsubscribe to email sequences, grant/revoke offer access, send individual emails, and send certificates.

Plan Limitations

Basic Plans can add automations inline (within funnels, emails, offers, lessons). Growth and Pro Plans unlock Advanced Automations with conditional logic ("but only if") — available from the Marketing tab dashboard.

Full Kajabi documentation: help.kajabi.com — Automations Overview

Funnels (Pipelines)

Funnels connect your landing pages, email sequences, and offers into an automated path from visitor to enrolled learner. Access them under Marketing → Funnels.

A typical Newbold Connect funnel might look like:

1. Landing page with a free resource or webinar registration form.

2. Thank-you page confirming the signup.

3. Email sequence nurturing the lead with value content over 5–7 days.

4. Sales email with a link to the class offer checkout page.

Kajabi provides pre-built funnel templates with page copy and email sequences to get started quickly. You can customise every element.

Full Kajabi documentation: help.kajabi.com — Funnels Overview

NB Contact Form Section

The custom contact form section on Newbold Connect has animated form fields with a "typing" placeholder effect and a shimmer/glare button animation. It connects to Kajabi's built-in form handling system.

To configure which form appears: select the form ID in the section settings. Forms are created and managed under Marketing → Forms.

Form submissions appear in Contacts and can trigger automations (e.g., auto-tag, subscribe to email sequence, grant access).

NB Masterclass Signup Section

Similar to the contact form but designed for course-specific signup pages. Features the same animated form field effects. Connect it to a dedicated form for each class.

Checkout & Settings

Customise your checkout experience under Settings → Payments → Checkout. Options include checkout page customisation, email and card storage opt-in, webhooks for external integrations, and tracking code for analytics.

Customer-facing settings (receipt emails, trial reminders, self-cancellation) are under Settings → Payments → Customer Payments.

Full Kajabi documentation: help.kajabi.com — Payment Settings