Configuring Colors and Fonts in WordPress Using the Kadence Theme | Mastering WordPress Series Part 56

"Setting up colors and fonts for a website is like picking the perfect outfit for a big event. You want it to stand out, but also be cohesive and stylish. I found a killer color palette with different shades of purple that really hits the spot. And as for fonts, the Overpass font is the perfect match for this website. It’s like the icing on the cake! It’s all about making a bold statement with every click. 💜"

🎨 Configuring the Global Palette

In this video, we’ll be configuring the color palette and fonts for a WordPress website using the Kadence theme. We’ll start by customizing the global color palette to define the colors reused across the theme customizer, as well as the post and page editor.

Customizing Colors

The global palette currently reflects specific colors, such as the site background, which is set to a lighter background preset. We’ll be modifying this palette to define the colors for our website design.

Element	Current Color	Preset Color
Site Background	Light Gray	#f4f4f4
Link Colors	Blue	#007bff
Buttons	Green	#28a745

source: Example of current color settings

Selecting Color Schemes

To expedite this process, it’s helpful to reference color palettes from external resources such as Google or dedicated websites. These platforms provide diverse color schemes with hex values and inspirations, simplifying the color selection process.

"When defining colors for a new website, Google offers an abundance of color palettes, allowing for easy access to hex codes and design inspirations."

Utilizing Font Options

With the global color palette defined, we’ll proceed to override the base font and font pairings to ensure consistency across the website design. The chosen font for this example is ‘Overpass’ for simplicity.

Element	Chosen Font
Base Font	Overpass
Heading Font	Overpass
Paragraph Font	Overpass

source: Chosen font selections

📐 Configuring Typography

Implementing Font Sizes

To enhance the readability and aesthetic appeal of the website, we’ll modify the font sizes for various elements, including headings and paragraphs.

1. Heading Sizes

   • H1: 40
   • H2: 32

2. Paragraph Font Size

   • Paragraph: 18

These adjustments aim to optimize the visual impact of the website content for visitors.

Exploring Font Pairings

While simple font selections suffice for this demonstration, there are available resources to explore font pairings for headings and paragraphs, further enhancing the website’s typography and visual appeal.

"Utilizing Google for font pairings can offer diverse options for achieving a harmonious balance between headings and paragraphs."

Conclusion

This concludes the configuration of the global color palette and typography settings for the WordPress website using the Kadence theme. By leveraging external resources for color schemes and font pairings, users can streamline the design process and achieve a visually appealing website layout.