Customize Your Page Font and Style With the Style Guide

Kayla M.

Updated

With Kajabi, you're able to customize your default colors, fonts, and the general appearance of your page to look great on any device by customizing your pages with the Style Guide. The Style Guide setting ensures that your brand and style are consistent across your page.


In this article:


This guide refers to the latest page editor available. If you are using the Premier Legacy Templates, please refer to the guide here.

General appearance 

Customize the general appearance setting for your page by selecting a background image and/or a background color to display across your entire page. 

Not seeing your image in the background? Be sure to select Use Background Image and adjust your Section Background Settings for the sections you wish to display your page background image.

Play with different sections, various backgrounds, and colors to build creative visual effects on your page:

Note:
Only available in your website page editor with the website builder. Learn more

Colors

Your selected Primary Color is used throughout your page, including the color of text buttons, social icons, and video play buttons. We recommend customizing your Primary Color to fit your brand.

To change your Primary Color:

  • 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 open Settings.
  • Click Style Guide.
  • Then, click Primary Color to select from your site color palette or select a custom color:

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 square box allows you to adjust the brightness and saturation of your color.
  • The horizontal rainbow bar allows you to select the hue.
  • The horizontal gradient bar allows you to select the opacity of your color.

Buttons

With the website builder, design the look and feel of your buttons across your standard website pages:

If you wish to override your button global settings in any section of your standard website pages, simply click the button to edit and adjust the individual settings from the sidebar editor:

Note:
Only available in your website page editor. Learn more

Button Background Color

Click the Button background color to select a color from your site color palette.

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 square box allows you to adjust the brightness and saturation of your color.
  • The horizontal rainbow bar allows you to select the hue.
  • The horizontal gradient bar allows you to select the opacity of your color.

Button Text Color

Complement your Button Background Color with a different Button Text Color. 

Note:
The Button Text Color is for solid buttons only.

Click the Button Text Color to select a color from your site color palette.

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 square box allows you to adjust the brightness and saturation of your color.
  • The horizontal rainbow bar allows you to select the hue.
  • The horizontal gradient bar allows you to select the opacity of your color.

Button Width

Adjust the width of your Button:

  • Full: fill the width of the button area
  • Auto: automatically adjust the width to fit the text

Button style

Change the style of the Button: 

  • Solid colored button
  • Outline of your Button Background Color

Button Size

Adjust the size of your Button:

  • Small
  • Medium
  • Large

Changing the size of your button will change both the button background and text size.

Button Border Radius

Customize your Button Border to appear more rounded or squared. Enter your desired value in pixels up to 50 to adjust your button border radius.

The lower the value, the more square your button will appear, and the higher the value, the more round your button will appear. 


Fonts

Fonts play a significant role in the personality of your brand.

Adjust your page font to change your font size and style natively on Kajabi.

In the Font settings of your Style Guide, select from a variety of Font Types, customize the Font Weight, and adjust the Line Height for your Text Body and Headings.

To change your Fonts:

  • 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 open Settings.
  • Click Style Guide.
  • Scroll down to the Fonts section and configure your Font settings: 


Font Colors

Looking to brand all Body and Heading Font Colors to streamline the design of your landing page? Configure your Font Colors in your Style Guide Settings.

Note:
Looking to customize individual letters of your text? Learn to add and customize your Text Block.

To change your Body and Heading Font Colors: 

  • 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 open Settings.
  • Click Style Guide.
  • There, scroll down to the Font Colors section.
  • Click the colored circle next to Body Font Color or Heading Font Color to select a new color:
237E5926-A6D1-40DD-B4F9-6C105C9B23CF.png

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 square box allows you to adjust the brightness and saturation of your color.
  • The horizontal rainbow bar allows you to select the hue.
  • The horizontal gradient bar allows you to select the opacity of your color.

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) big font sizes can look awkward or broken.

With Kajabi Pages, customize your font sizes for Desktop and Mobile viewing. This ensures that no matter which device type your audience is using, your page's typography looks beautiful and appropriately sized.

Kajabi uses 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. By default, the "body" size is the paragraph text or small text in a Text Block

To change your Heading and Body font sizes:

  • 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 open Settings.
  • Click Style Guide.
  • Scroll to the bottom of the sidebar editor and locate Desktop Font Sizes and Mobile Font Sizes.
  • Click into each dropdown menu to configure your font sizes. Font sizes are listed in pixels, like you'd see in a word processing program:

5A85E9DC-4BEC-4418-831B-B164FA42B6AC.png

Tip:
Customize your Desktop and Mobile font sizes with the corresponding Preview located in the bottom right corner of the Template Editor.

Error messages

Customize the color of the error messages that appear if your users encounter an error on your page:

B721A696-BEA5-408E-9540-11A3D2FB8DBC.png

Note:
Only available in your website page editor. Learn more

And that's how to customize your page font and style with the Style Guide! 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!

Did you find this article helpful?

Need more help?

Contact Us