Skip to main content

Build a website with Kajabi

Install a Website Builder Template, style every standard page from one place, preview on mobile, and set the design live.

The Website Builder is Kajabi's editor for the standard pages that make up a site — Home, Store, Library, Login, Blog, and more. One template controls all of them at once, so the design stays consistent everywhere instead of being styled page by page.

Landing Pages are separate: individual, standalone pages you create and style one at a time, and connect to a site through links and buttons. The Website Builder does not change them. Because Website Pages all share one template, the Website Builder offers controls Landing Pages do not, such as global settings. For how the page types differ, see Pages overview.



The Design page

To reach the Design page, from the Dashboard, click Website, then Design.
​

Design page


This page controls the overall look of the site. From here you can preview the live site, copy the site URL, open Site Details, browse the Template Store, and customize or manage any saved template.
​

You can customize each website template independently of the others, and only the template you activate is visible to visitors. Designing an inactive template is what lets you rebuild a site behind the scenes and launch the finished design in one step.

Install a Website Builder template

  1. From the Dashboard, click Website, then Design.

  2. Click Template Store.

  3. Click the template you want.

  4. Click Add to saved templates. Kajabi shows Template added and the template appears under Saved Templates once the install finishes. On a site with no live template yet, this button reads Get Started, and the template goes live as soon as it installs.

  5. Under Saved Templates, open the template’s more options (...) menu and select Rename template. Give it an internal name you’ll recognize, then click Save. The new name appears on the template’s card.

Note:
Templates under Kajabi Legacy Templates in the Template Store are an older generation that Kajabi no longer develops. They don’t give you the Website Builder editing experience described in this article. Use the templates above that section.

Rename Template

Note: Everything in the Template Store is included on all Kajabi plans at no extra cost.

Set up site branding first

Branding sets the logo, colors, and fonts that every new page in Kajabi starts from, so set it before you design individual pages.

Site branding

  1. From the Dashboard, click Settings, then under Site settings, click Branding.

  2. Under Logos, add a Logo and a Favicon.

  3. Under Typography, choose fonts for Headings and Paragraphs.

  4. Under Colors, set the Brand color, the Accent color, and the Global color palette.

  5. Click Save, then confirm with Save and apply.

Branding updates only the pages and templates still using the default global settings. Anything you have already customized by hand stays as it is, which is why branding is faster to set first.

Customize Website Pages

Open the installed template in the Builder, then work through its pages one at a time.

  1. From the Dashboard, click Website, then Design.

  2. Under Saved Templates, find the template you installed and click its Customize icon. Use the icon on the template’s own card — the Customize button at the top of the Design page always opens whichever template is currently live, so it would change the site visitors see.
    ​

  3. At the top of the builder, select a page from the dropdown menu.
    ​

    Website Pages

  4. Make edits, then click Save. Save each page separately — Save applies only to the page open in the dropdown. Nothing you save here reaches visitors until you set the template live.


Page structure

Website Pages and Landing Pages are both made up of blocks and sections. Each section is made up of specific blocks — the Hero section, for example, includes a Text block and an Image block.

Page structure

Kajabi gives you preset sections to speed things up, but you can customize every section. Add, remove, and edit the blocks inside any section you choose.

Note: You can rebuild any section by adding or removing block types, but the result may look different from a preset section, which carries design optimizations built for that specific layout. To line blocks up precisely, turn on the guides and grid in Design Tools, which show you the 12-column layout a page sits on.

What each page does

These pages ship with the Website Builder, and the active template controls them.

Page

What it does

The site homepage

Where customers reach the Products they own

Showcases Offers

Where customers sign in

Shown after a purchase

The error page

The Blog homepage

One design for every post

Blog search results

Lets customers connect with each other

Product and Site announcements

The story behind the brand

How visitors reach you

Visitors who enter the site URL land on the Template Home Page unless you set a different page as the homepage.

Note: In the Builder's page dropdown, the Template Home Page is labeled Home.

Which of these pages a site has depends on the site itself. Newsletter pages appear once a site has a Newsletter, and the Blog, Blog post, and Blog search pages are not available on Newsletter plans.

Note:
When you are logged in as a site admin, the Member Directory displays every member on the site. For your customers to appear in the Member Directory to other customers, they have to opt in through their customer settings. Learn more about the Member Directory.

Most of these pages are marked System in the Website Pages list and cannot be duplicated. About and Contact are regular Website Pages, so you can duplicate them, publish or unpublish them, or copy one to a Landing Page. To add more pages to a site, create a new Website Page or Landing Page.


​

Optimize pages for mobile

Pages you build with the Website Builder are responsive, so they adjust automatically to fit phones, tablets, and desktops. There is no separate mobile version to build. Content can still sit differently on a small screen, so preview the mobile view before you publish.

Preview a page on mobile

  1. From the Dashboard, click Website, then Design.

  2. Under Saved Templates, click the template’s Customize icon.

  3. At the top of the Builder, select the page you want from the page dropdown.

  4. Click the phone icon in the device toggle. The preview resizes to a mobile phone (the phone model list continually changes) and a device dropdown appears next to the toggle.

  5. Choose a different device from the dropdown if you want to check another screen size. The toggle also offers tablet portrait and tablet landscape.

Note: Opening a page from Website > Website Pages always opens the live template, not a saved one. Go through Design when you’re building a template you haven’t set live yet.


Adjust the mobile layout

You set the mobile and desktop layouts independently, so changing one does not affect the other. Use the mobile layout settings to adjust padding, hide a section on small screens, or fine-tune spacing per device. Learn how to customize the section mobile layout.

Tip:
If a section looks right on desktop but crowded on mobile, duplicate it, hide one copy on desktop and the other on mobile, then tailor each one independently.

Save a copy of the current template

Switching the live template replaces the built-in Website Pages — Home, Login, Blog, and the rest — with the new template's versions, and custom pages do not carry over at all. Export the current template first so you can restore it.

  1. From the Dashboard, click Website, then Design.

  2. Under Saved Templates, open the more options (...) menu on the current live template.

  3. Select Export as .zip. Kajabi confirms with Template exported to email.

  4. Check the inbox of the email address you’re signed in with. Kajabi emails a download link rather than downloading the file in the browser, and the link expires after 7 days, so save the .zip somewhere safe. If the link expires, run the export again for a new one.

Note: Export isn’t available on Kajabi Newsletters plans.

To restore an exported template later:

  1. From the Dashboard, click Website, then Design.

  2. In the Saved Templates heading row, click Upload Template and select the .zip file. The restored template appears as a new card under Saved Templates. It isn’t live until you set it live.

Activate a template

Activating makes a template the live one visitors see. Only one template is live at a time.

Warning: Activating a template is immediate for visitors. Built-in Website Pages switch to the new template's versions, and any custom Website Pages you created — including About and Contact — are not copied to the new template. Export a copy of the current template first.

  1. From the Dashboard, click Website, then Design.

  2. Under Saved Templates, hover over the template.

  3. Click Set to live template.

  4. Click Set as live template to confirm. Kajabi shows Template set to live and visitors see the new design right away.

FAQs

Can I copy content from an existing site into the Website Builder?

Not automatically. You rebuild the content manually with the Website Builder's sections and blocks, page by page. If an existing site is built on the legacy Premier template, its code-editor data is incompatible with the Website Builder and will not transfer.

How do I add the Member Directory, Announcements, About, and Contact pages?

These pages come with Website Builder templates. A site still running the legacy Premier template does not have them. Install a Website Builder template and set it live, and the pages appear under Website > Website Pages.

What happens to an existing Blog and its posts when the website design changes?

Blog post content — title, media, and body — stays as it is. The look and feel across the blog inherits the design of the template you activate.

What happens when Kajabi updates a template?

Updating is your choice, and nothing changes until you apply it. When a newer version of a saved template is available, an Update label appears on that template’s card under Saved Templates.

Open the more options (...) menu and select Update template to see what changed. Click Get Details for the release notes and Preview Update to see the new version before applying it.

Anything you customized in the Builder is preserved through an update. Anything you changed by editing template files directly in the code editor is overwritten, so save a copy of those files first.

After an update you can Revert to the previous version, but any changes made since the update are lost.

Templates from the Template Marketplace or another third-party maker can’t update automatically. Get an updated .zip from the maker and use Upload Template instead.

Why is there no Sales Page in the Website Pages list?

Accounts created after August 16th, 2020 do not include a Sales Page. Build Sales Pages as standalone Landing Pages instead.

Why are there two About and Contact pages in a navigation menu?

If you created an About or Contact page and added it to a navigation menu before the Website Builder launched in 2022, you can see duplicates, because the Website Builder added official About and Contact pages as Website Pages. Remove the link to whichever version you do not need. Learn how to delete a link from a navigation menu.

Why did customizations revert after a homepage warning?

That warning means the page you are editing is no longer the one set to display when visitors enter the site URL. Changes you saved with the Save button remain in the template you were editing. When the design is ready, activate the customized template and set the homepage back to the Template Home Page. Learn more about choosing which page displays as the homepage.

Did this answer your question?