Learn to use the Design Tools to design your pages within the 12-column system available with the Website Builder and Kajabi Pages.
Using design tools to build your page
Enable Guides and Grid to take control of the build of your Page and ensure better accuracy and symmetry in your designs.
Take control of your design.
Many modern websites use a grid system to keep content looking organized and appealing.
With Kajabi Pages and the Website Builder, you can organize and design your page with the 12-column system.
Organize your content within a 12-column layout.
With Kajabi Pages and the Website Builder Pages, each page has a width of 12 columns.
The Blocks that make up the content for your page are placed horizontally within that 12-column layout.
As you customize your page, you can set how many columns each block takes to control the layout of your page.
Here are some common website layouts based on the 12-column system:
- One large column (12)
- Halves (6 + 6)
- Thirds (4 + 4 + 4)
- Fourths (3 + 3 + 3+ 3)
- Sixths (2 + 2 + 2 + 2 + 2 + 2)
- One half and two fourths (6 + 3 + 3)
- One third, one half, and one sixth (4 + 6 + 2)
...and any other combination you can think of, as long as the total column widths always add up to 12.
Show guides
Guides provide a reference to the exact shape and size of each block in a section.
The Guide shows the border of the true shape and size of your sections and blocks.
To enable the Guide:
- Open the Website tab from the Dashboard.
- Select the Pages tab.
- Open the page editor for your Page. Learn more
- Navigate to the sidebar editor and click Settings.
- Open Design Tools.
- Then, check Show Guides:
Show Grid
The Grid displays the Columns that make up the width of the Page.
Use the Grid to align your blocks with the appropriate amount of spacing to better organize the look of your page.
To Enable the Grid:
- Open the Website tab from the Dashboard.
- Select the Pages tab.
- Open the page editor for your Page. Learn more
- Navigate to the sidebar editor and click Settings.
- Open Design Tools.
- Then, check Show Grid:
And that's how to use the Design Tools! Please vote below and let us know if you found this article helpful. We value your feedback. Thanks for being the best part of Kajabi!
