Pages Overview

Learn to build custom Pages in Kajabi to direct traffic, build your list, and design your site according to your brand.

In this article:

• Build your Page with Kajabi Pages
• Website Pages vs. Landing (Standalone) Pages
• Create your Page
• Customize your Page

Build your Page with Kajabi Pages

Create your Page

Select your Page Template

Kajabi Pages provides you with basic streamlined Pages and premium-designed Pages to get you started. Read How to Create a New Page to get started designing your custom Pages.

Settings

After selecting your Theme, you may first want to set up your Settings before diving into the design of your custom Page.

• Favicon is the image that is displayed in the tab of your web browser to create a more polished look.
• Style Guide to configure your Page colors, fonts, font colors, and font sizes.
• Exit Popups will appear when your visitor attempts to leave your page.
• Two Step Optin launches an Optin Form popup when a button is clicked to create an engaging, clean look for your Page and help improve your rate of Optins.
• Design Tools turn on the new grid overlay while designing a page. This shows you the 12-column grid, to help you design your layout. 
• Custom Code allows you to insert custom HTML, CSS or Javascript into your Page. If you are not familiar with CSS or JavaScript, we would advise that you avoid using this section or feel free to reach out to our support team to guide you through its functionality.

Sections and Blocks

To begin building your Page, let's discuss the structure of your Page. Kajabi Pages are made up of

• Blocks
• and Sections.

Each Section of your Page is made up of specific Blocks (e.g., The Image Gallery Section is made up of six Image Blocks). We have provided you with preset Sections containing specific Blocks to more easily design your Page. However, each section is customizable and regardless of the Section you choose, you can always remove, add, and edit the Blocks within your chosen Section according to your design vision. 

Customize your Page

Preset Sections

To help you build fully-integrated, powerful pages even faster, we’ve added more preset sections. You now have over 45 presets to choose from when adding new sections to your page.

• Basic Content sections include Text block types and the Call to Action block.
• Hero sections are background image blocks that can contain a Countdown overlay, Form overlay, Image overlay, and Video overlay.
• Features can be used to showcase your brand, product, or service with Feature Cards or Feature Columns.
• Marketing & Events sections help you grow your list, register visitors to an event, and more with Forms, Event Countdowns, Multi-Video Launch, and Assessment blocks.
• Images enhance the visual experience of your page and can be used with Text or as an Image Gallery directly on your Page.
• Videos are an excellent tool to engage and inform your visitors. The Video section can be used alongside Text, to create a Video Gallery, or to embed a Video.
• Offers and Pricing sections display your products and services in varying formats including an Offer Storefront, Pricing Cards, and Pricing Options blocks.
• FAQs can be used for a variety of functions to contain easy-to-read content within dropdowns including frequently asked questions.
• Testimonials section generates Feature blocks to display your testimonials on your Page.
• Social sections create clickable block types to direct your site visitors to different locations such as your most recent Blog Posts or to companies you have worked with or been featured on with the Logo Lists section.
• Custom sections allow you to design unique, one-of-a-kind sections with any Block Type you choose and/or with custom code. Combine images, text, video, forms, calls to action and more… there’s no limit to how you can combine blocks in your custom section.

Additionally, our preset sections are better organized and searchable within the Editor. This makes it fast and convenient to find the exact section you need for your page.

Column Width

Kajabi Pages are built on a standard 12-column grid system. This gives you powerful flexibility to create layouts that look great, align well, and create a pleasant experience for visitors. Learn to turn on the Grid and Guides to better adjust your Column Width.

Each section and block can be assigned a column width from 1 to 12. Or, if you want, blocks can be set on their own rows while still retaining a max column width. Read How to Customize the Block Width for more detail. 

Additionally, you can control how much space separates your sections and individual blocks within sections. A convenient drop-down lets you select the general spacing of each section.

Or, if you want pixel-precise control, you can manually set your margin (the space outside your section/block) or padding (the space inside the section/block). Learn to customize your Block Layout and Section Layout Settings. 

Configure each Section and Block Layout using Design Tools

Enable the grid overlay while designing a page to show you the 12-column grid and make sure your layout looks right every time. Learn to access and enable your Design Tools.

And if you want to reset your section from block to default spacing, just leave your values blank.

Desktop and Mobile Layout

One of the challenges of modern web design is creating pages that look great on any device. While large fonts may look great on a desktop, for example, giant typography can appear broken or hard-to-read on mobile devices.

The new Kajabi pages solves this by allowing you to control visibility by device type. You can now select for specific sections not to appear on desktop or mobile according to your needs. Learn to customize your Block Layout and Section Layout Settings to create the best experience for your site visitors on any device. 

Additional visibility options include having sections or blocks appear based on a timed reveal after an event or how much time has passed after the page has loaded.

Animations

Add animations to enhance your user experience and design an engaging, interactive page. Select the type, direction, animation delay, and animation duration for each element to bring your pages to life. Learn to customize your Block Animations Settings.