Kadence Users: Are You Making These Website Mistakes?

Kadence is an incredible tool that gives you full control over your website’s design, but even the best tools can be misused. Over the years, I’ve seen many common mistakes that can make a website look inconsistent, unprofessional, or just plain frustrating to update. The good news? These mistakes are easy to fix!

In this post, I’m breaking down the most frequent website errors I see Kadence users make—from improper global settings to typography mishaps—and showing you exactly how to correct them. Whether you’re struggling with color inconsistencies, content width issues, or font choices, these quick fixes will help you polish your website and create a cohesive, professional look.

Let’s dive in and make sure your site is set up for success!

Improper Use of Global vs. Individual Settings

One of the biggest advantages of using Kadence is its powerful Customizer, which allows you to set global styles for your website. These settings ensure consistency across your entire site, especially when it comes to colors and typography.

However, a common mistake I see is users skipping global settings and making individual changes on specific pages instead. For example:

• Instead of setting their brand colors in the Customizer, they manually input color codes on different sections of their homepage.
• Instead of defining fonts globally, they change fonts directly within individual blocks.

This approach creates inconsistencies and extra work down the road. If you ever decide to switch themes or tweak your brand colors, all those manually applied styles won’t update automatically—forcing you to go back and adjust each element one by one.

The Right Approach

1. Set Your Core Colors in the Customizer First
   • Your main brand colors should be defined in the Global Palette under the Customizer. (Appearance > Customize > Colors & Fonts > Colors)
   • If your brand has additional colors beyond what’s available in the default palette, you can add them globally for easier access and I’ll explain that shortly.
2. Use Global Typography Settings
   • Set your heading, paragraph, and button fonts within the Customizer.
   • Avoid changing fonts at the block level unless absolutely necessary.

How to Add Extra Colors in Kadence

Need more colors beyond the default palette? No problem! Here’s how you can add them globally:

1. Edit any page or post in WordPress.
2. Click the K icon in the top-right corner.
3. You’ll see your existing global color palette and an “Add Color” button.
4. Add your custom colors here, and they’ll be available globally across your site which will save you time and eliminate the need to copy/paste HEX codes manually.

By following these best practices, you’ll maintain a clean, cohesive design that’s easy to update as your brand evolves.

Improper Color Scheme Settings

Setting up your Kadence color palette correctly is crucial for maintaining a cohesive and professional look across your website. In my post about how the Kadence color palette works, I explain how each color in the palette corresponds to different areas of your site.

Common Mistake: Using Colors with Lower Opacity

One of the most frequent mistakes I encounter is setting colors in the palette at a lower opacity. When colors are not at 100% opacity, it can lead to unintended design outcomes and inconsistencies throughout your site.

Correct Approach:

• Ensure each color in your Global Palette is set to 100% opacity. This ensures that when applied, your colors are vibrant and true to your brand.
• If you want a lower opacity for specific elements—such as a background or overlay—you can adjust the opacity directly within the block settings of that element.

Adjusting Color Shades

If a color in your palette appears too dark or too intense, don’t lower its opacity. Instead, find a lighter version of the color that maintains its integrity at full opacity.

By setting your color palette correctly, you ensure a unified and professional appearance across your website, enhancing your brand’s visual impact.

Improper Typography Selections

Typography plays a huge role in making your website visually appealing and easy to read. Every Kadence theme comes with well-matched default fonts, but naturally, you’ll want to customize them to fit your unique brand style. However, I often see typography mistakes that make content harder to read and less professional-looking.

Common Mistakes

• Choosing fonts that don’t complement each other, making the design feel disjointed.
• Mixing serif and sans-serif fonts in a way that feels unbalanced.
• Using script, italicized, or overly decorative fonts for body text or headings, making content difficult to read.
• Applying all caps or bold styles in the wrong places, reducing readability.

Correct Approach

1. Set Body and Heading Fonts Thoughtfully

• Your body and heading fonts should be set globally to maintain consistency.
• These two fonts should complement each other while sticking to either sans-serif or serif styles for clarity.
• Avoid using script or overly decorative fonts for core text areas like blog post titles or body content.

2. Use Script or Fun Fonts Sparingly

I totally get it—a good script font can add personality! But it should be used sparingly to avoid overwhelming your design.

• If you want to incorporate a script font, set it for H6 headings only. This allows you to use it for subheadings, quotes, or signatures without affecting readability.
• Avoid using script fonts for post titles or body text—it makes content harder to scan.

3. Using All Caps or Alternative Heading Styles

• If you like all-caps or uniquely styled headings, set them for H4 or H5 headings so you can use them selectively in specific areas.
• This helps add emphasis without making the entire page feel overwhelming.

Kadence Default Heading Breakdown

Understanding how headings are structured in Kadence can help you make smarter typography choices:

• H1 Headings → Post Titles & Page/Archive Titles (when enabled)
• H2 Headings → Blog Post Titles (in archive view) 
• H3 Headings → Related Posts & Comment Section Headings
• H4, H5, H6 Headings → Customizable in blocks for use within pages or posts

By keeping your typography choices simple and strategic, your website will look polished, professional, and easy to read!

Improper Kerning of Typography

If you’re wondering, “What is kerning?”, it’s the spacing between letters in a word. While it might not seem like a big deal, poor kerning can make your typography look unpolished and difficult to read—and I see this mistake way too often.

Common Mistake: Incorrect Kerning in Script Fonts

The most frequent kerning issue I spot is with script fonts.

Think back to learning cursive writing in school—each letter was meant to flow seamlessly into the next. The same rule applies when using script fonts on your website! If there’s noticeable spacing between letters in a script font, it disrupts the natural flow and makes it look disjointed instead of elegant.

This applies to:

Correct Approach

• If using a script font, ensure the letters are properly connected. Check your typography settings and adjust letter spacing so that script fonts flow naturally.
• For body text and headings, avoid excessive letter spacing. Good typography feels balanced and easy to read—not too cramped, not too spaced out.
• When designing a logo, double-check kerning manually. Many logo design tools automatically space out letters, so you may need to adjust it manually to get a more natural look.

By paying attention to kerning, you can instantly elevate the readability and professionalism of your website and branding!

Improper Use of Content Widths

One of the most common website layout mistakes I see involves content width settings, particularly on mobile and desktop displays. Getting these settings right ensures that your site looks great and functions properly on all screen sizes.

Mobile Widths

A frequent issue I see in support tickets is when users adjust the mobile header trigger width, which ends up affecting their desktop view.

Content Widths

Another issue I often encounter is improperly set content widths, which affects how much white space appears on the left and right of the screen.

Kadence Page Layout Options

Kadence provides five page layout options, and understanding when to use each one is key to a clean and functional design.

Where to Set Content Widths in Kadence

Knowing where to adjust these settings will help ensure your site is structured correctly:

• Pages: Appearance > Customize > Posts/Pages Layout > Page Layout > Default Page Layout
• Single Blog Posts: Appearance > Customize > Single Post Layout > Page Layout > Default Post Layout
• Archive Pages: Appearance > Customize > Archive Layout > Page Layout > Archive Layout
• WooCommerce Shop Archives: Appearance > Customize > WooCommerce > Product Catalog > Archive Layout
• Single Product Pages: Appearance > Customize > WooCommerce > Single Product Layout > Product Layout

By using the right content width settings, you’ll create a website that looks balanced on all screen sizes, improves readability, and enhances the user experience.

If you’re struggling with website layout settings, Kadence makes it easy—just follow the best practices above to avoid common width-related issues!

Improper Content Styles

Kadence offers two main content styles: Boxed and Unboxed. While both options serve a purpose, I often see Boxed content used incorrectly, which can create a disjointed and inconsistent website design.

Boxed vs. Unboxed Content

Boxed Content

• The content area is contained within a box, typically with a white background and a light-colored background surrounding it.
• Example: Used in archive pages or single blog posts, where it helps visually separate content from the background.
• Best Use: Blog archives & single posts where readability is key.

Unboxed Content

• Content sits directly on the white background, without any boxed-in effect.
• Best Use: Regular website pages where you want full control over your layout, without unnecessary visual restrictions.

Common Mistake: Using Boxed Content on Pages

One of the biggest errors I see is applying Boxed content to an entire page.

Why this is a problem:

• When you use Boxed content on a page, it confines your content inside a box, creating an awkward design where boxed sections are placed between full-width sections.
• This disrupts the natural flow of your layout and can make the design feel cramped and inconsistent.

Correct Approach:

• Use Boxed content only for blog archives and single posts, where it enhances readability.
• Keep pages set to Unboxed, so you can control individual sections using Kadence Row Layout blocks.
  • This allows you to choose which sections are full-width, which are contained, and which are spaced strategically for a polished look.

Where to Adjust Content Style Settings in Kadence

• Pages: Appearance > Customize > Posts/Pages Layout > Page Layout > Content Style
• Single Blog Posts: Appearance > Customize > Single Post Layout > Page Layout > Content Style
• Archive Pages: Appearance > Customize > Archive Layout > Page Layout > Content Style
• WooCommerce Shop Archives: Appearance > Customize > WooCommerce > Product Catalog > Content Style
• Single Product Pages:Appearance > Customize > WooCommerce > Single Product Layout > Content Style

Where to Set the Background Color for Boxed Content

You can adjust the background color for Boxed content in:

• Appearance > Customize > Colors & Fonts > Colors > Site Background
• This color is typically set as Color #8 in your Kadence Global Palette.

While this may be partly a personal design preference, I highly recommend avoiding Boxed content on pages. Instead, let Kadence’s Row Layout blocks handle the structure, giving you the flexibility to create a modern, aesthetically pleasing layout that flows seamlessly.

Small Fixes, Big Impact

Your website is a reflection of your brand, and getting the details right makes all the difference. By avoiding these common mistakes—whether it’s misusing global settings, choosing the wrong typography, or setting improper content widths—you can create a site that’s consistent, professional, and easy to manage.

The best part? These are all easy fixes! A few simple adjustments can drastically improve the look, feel, and functionality of your site, making it more enjoyable for both you and your visitors.

So, take a few moments to review your settings, make the necessary tweaks, and watch how much more polished and cohesive your website becomes. Your future self (and your audience) will thank you!

Have questions or need extra guidance? Drop a comment below—I’m happy to help!