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. The template will install.

  5. Rename the template to an internal name you will recognize. Click the down arrow next to the Title, and select Rename template.

Rename Template

All templates give you the same editing tools and customization features. The pre-designed templates differ from the streamlined ones only in how much design work is already done.

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.

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

  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.

Note: Use the Customize icon on the template's own card, not the Customize button at the top of the Design page. The header button always opens the template that is currently live, so using it would change the site visitors see.


To open one page directly instead, click Website, then Website Pages, and click the Title of the page. Learn more about style settings in the Website Builder.

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. 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 Website Pages.

  2. Click the Title of a page to open it in the editor.

  3. At the top of the builder, click the phone icon in the device toggle.

  4. Choose a device from the dropdown to preview different screen sizes. This step is optional.

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.

  4. Check the inbox for the email address on the Kajabi account. 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.

To restore an exported template later:

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

  2. Under Saved Templates, click Upload Template in the Saved Templates heading row, and select the .zip file.

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.

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 and preview it before applying. After an update you can Revert to the previous version, but any changes made since the update are lost.

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?