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:
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:
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:
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.
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.
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:
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:
Error messages
Customize the color of the error messages that appear if your users encounter an error on your page:
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!
