Design Tools

In this article:


Many modern websites use a grid system to keep content looking organized and appealing. Many website frameworks, including Kajabi Pages, use a 12-column system because it makes common website layouts simple. The page is divided into 12 columns, then blocks are set to take up a specific number of columns.

Here are some common website layouts based on a 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.

In Pages, each Page has a width of 12 columns. Then, each block in a Section is placed horizontally within the 12-column layout. Users can set how many columns each section or block takes to control the layout.

Enable Guides and Grid to take control of the build of your Page and ensure better accuracy and symmetry in your designs.

Show Guides

The Guides provide a reference to the exact shape and size of each block. The Guide shows the border of the true shape and size of your sections and blocks.

To enable the Guide:

  • Select the Page you wish to edit.
  • Click Customize to open the Theme editor.
  • In the sidebar, click the Settings tab.
  • There, select Design Tools.
  • Then, select the check box next to Show Guides:

guidetool

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:

  • Select the Page you wish to edit.
  • Click Customize to open the Theme editor.
  • In the sidebar, click the Settings tab.
  • There, select Design Tools.
  • Then, select the check box next to Show Grid.

gridtool

Contact support or access our 24/7 Live Chat:

Contact Support Live Chat

Previous Article

Two-Step Opt In

Next Article

Custom Code

Need Help? Chat With Us Now!