Set up your pages to look great on any device, such as desktop or mobile. Enabling the style guide setting ensures your default colors, fonts, and more are the same 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 a button, social icons, and video play button. We recommend customizing your Primary Color to fit your brand.
To change your Primary Color:
- Open the Website tab from the Dashboard.
- 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 vertical bar allows you to select the hue.
- The square box allows you to adjust the brightness and saturation of your color.
- The horizontal 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 setting 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 vertical bar allows you to select the hue.
- The square box allows you to adjust the brightness and saturation of your color.
- The horizontal 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 vertical bar allows you to select the hue.
- The square box allows you to select a color.
- The horizontal bar allows you to select the transparency 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 to display a
- Solid colored button
- Outline of your Button Background Color
Button Size
Adjust the size of your Button to:
- 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 squared your button will appear, the higher the value the more rounded your button will appear.
Fonts
Fonts play a significant role in the personality and character of your brand.
Adjust your Font to change your font size and style.
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.
- 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 Fonts 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.
- 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 the Body Font Color or Heading Font Color text to select a new 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.
- 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 your Word Processing program:
Error messages
Customize the color of your error messages if your users encounter an error on your page:
