Style Guide

In this article:


The Style Guide section of the Pages editor allows you to control your:

How do you make sure your Page uses consistent colors and fonts – and looks good on any device, such as desktop or mobile?

Using Kajabi Page's built-in style guide setting ensures your default colors, fonts, and more are the same across your page.

This helps you:

  • Save time because you don't have to manually set the style for each new Section in your Page
  • Strengthen your brand so your customers are seeing the same design throughout your Page
  • Avoid accidentally using the wrong font face or size when building your Page

To learn more about how how color and typography are critical to your brand, check out this helpful article.

Kajabi uses the standard web heading sizes. Heading 1 (h1) is generally the biggest and is great for titles. Heading 2 (h2) is generally the next biggest, and so on for Headings 3 (h3), 4 (h4), 5 (h5) and 6 (h6).

Your "Body" size refers to the standard paragraph text, like you're reading right now.

Tip:
Create a consistent look and feel to your entire website by creating a template Page with your desired settings configured. Then, simply clone your template Page and begin customizing your cloned Pages.

Learn to clone your Page by clicking here.

Colors

Your selected Primary Color is used throughout your site's blocks, such as the color of a button, social icons and other elements. Ideally, this should be a color associated with your brand.

To change your Primary Color, click the colored circle and then select which of the default colors you'd like to use. If you prefer to use a custom color, click the color wheel and then either enter your RGB color code or use the sliders to choose your color. The vertical bar allows you to select the hue. The square box allows you to select a color. And the horizontal bar allows you to select the transparency of your color.

primary color

Fonts

Fonts play a significant role in the personality and character of your brand. In the Font section, you have a wide variety of Font Types to choose from, the option to customize the Font Weight, and Line Height for your Text Body and Headings. Under the Font Colors heading, you can select your default Font and Heading Colors for your page.

fonts

Font Colors

Depending on your brand style or preferences, you may want to select a different color for body fonts or heading fonts. Click the colored circle next to the Body Font Color or Heading Font Color text to select a new color.

Kajabi - admin themes 2893 settings edit

Desktop and Mobile Font Sizes

A big, bold heading can look great on a desktop. But on a mobile device, where there isn't as much screen space, font sizes that are too big can look awkward or broken.

desktopfontsetting

In Kajabi, you can set Desktop font sizes and Mobile font sizes. This ensures that no matter which device type your audience is using, your site's typography looks beautiful and appropriately sized.

To set font sizes for either Desktop or Mobile, use the dropdown menu and select the size you want. Font sizes are listed in pixels, like you'd see in your Word Processing program.

Contact support or access our 24/7 Live Chat:

Contact Support Live Chat

Previous Article

Favicon

Next Article

Exit Pop Up

Need Help? Chat With Us Now!