fbpx

Divi Fonts and Colors: Using Universal Settings

The Divi theme and page builder is completely customizable and I can’t boast about it enough! In this blog post, you’ll find a tutorial walking you through how to add your brand fonts and colors to Divi’s universal settings. This not only speeds up the amount of time it takes to build a website but it ensures each website you build on WordPress is branded perfectly.

Kristen Leigh | WordPress Web Design Studio | Divi Theme How To Divi Fonts and Colors Using Universal Settings

divi fonts and colors

There are some great ways to quickly build a website using Divi. I’ve said it before, designing a website isn’t a quick thing. Designing a website takes a lot of strategy and knowledge about your goals as a business owner and your ideal client’s goals and struggles.

But building a website AFTER the designs have been created… there are ways to speed up that process.

Using the site-wide settings for universal fonts and colors is one way to speed up the process of building your website!

Brand Recognition

“Brand recognition is the extent to which the general public (or an organization’s target market) is able to identify a brand by its attributes.” – Investopedia

You want brand recognition and in order to achieve this all of your content should share the same look and feel. Everything you put out there should have the same 2-3 fonts, the same 3-5 colors, one button style…

Consistency is key to creating brand recognition.

Your website is the foundation, the place where people go to learn more about you and your services. This means your website is also the perfect place to ingrain your branding into your visitor’s brains so that when they see your marketing on social media or in print, they know exactly who you are – they recognize you!

Site-wide settings for universal fonts and colors

Using this practice of consistency, you can easily keep your fonts and colors consistent throughout your website by using the site-wide or universal settings in Divi.

By taking a little more time adjusting these settings at the start, you’ll save yourself tons of time during the building process. Plus, you’ll stay consistent and increase that brand recognition!

Kristen Leigh | WordPress Web Design Studio | Web Designer Resource Library

MORE FREE DIVI RESOURCES!

Plus get instant access to 9+ resources to help you start and grow your web design business with ease!

How to update the universal fonts and colors in Divi

From the dashboard, hover over Appearance and click on Customize.

On this page you want to focus on two tabs: General Settings and Typography. Under General Settings you’ll be able to update the fonts and colors for your website while under Buttons you can update the style of the buttons that appear on your site.

General Settings: Layout Settings

Under Layout Settings you can adjust the width of your page, the gutter width, and the section heights. However, in this section I just want you to focus on the accent color. Update this to one of your brand colors to ensure that any small accents on your website don’t appear in a color that is off-brand.

General Settings: Typography

Under Typography you’ll want to update all of the settings.

  • Body font size
  • Body line height (the amount of space between each line in a paragraph)
  • Header text size (this controls the H1 font size while H2, H3, H4, etc. automatically adjust based off the font size of H1)
  • Header letting spacing (the amount of space between each letter in the heading)
  • Header line height
  • Header font style (do you want it bold? italicized? all caps? underlined?)
  • Header font
  • Body font
  • Body link color (the color of a text link)
  • Body text color
  • Header text color

General Settings: Background

Under Background there are a couple of different options. You can either set the background color to a solid color (mine is white) or you can add an image as your background.

I almost always recommend going with a solid color that is on brand or white. I tend to stay away from background images but if you have a textured image you want to use and it’s on brand, you can always try it out!

Buttons: Buttons Style

There are two stages to a button:

  1. What the button looks like when your mouse ISN’T hovering over it
  2. What the button looks like when your mouse IS hovering over it

The Buttons Style section controls stage 1. You can control the text size and color as well as the background color of the button. Along with the basics, you can also add a border and change it’s color, adjust the letter spacing of the button text, change the font, and add an icon such as an error next to the button text.

Buttons: Buttons Hover Style

Stage 2 is controlled under Buttons Hover Style. Here you have less options that under Buttons Style but you can still adjust the font color, background color, border radius, and letter spacing.

Universal settings for bloggers

If you’re a blogger, or if you’re a business that tends to blog frequently, then you’ll also want to adjust the blog settings.

Under Blog and then Post you can adjust the font sizes for the meta description as well as headers.

Interested in building a divi website quickly?

If you’re interested in learning more tips for building (not designing) a Divi website quickly you can check out my blog post here.

-Kristen

You might also like…

Kristen Leigh | Web Design Studio | January 2019 Monthly Review of My Web Design Studio | How to Add Universal Fonts and Colors in Divi
Kristen Leigh | WordPress Web Design Studio | How to Easily Update Fonts and Colors in the Divi Theme
Kristen Leigh | WordPress Web Design Studio | How to Change Brand Colors and Fonts in Divi
Kristen Leigh | WordPress Web Design Studio | How to Style Your Blog Using Divi
Kristen Leigh | WordPress Web Design Studio | Web Designer Resource Library

MORE FREE DIVI RESOURCES!

Plus get instant access to 9+ resources to help you start and grow your web design business with ease!

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Hey there, I’m Kristen!

Kristen Leigh | WordPress Web Design Studio

My Favorite Tools

Affiliate Disclaimer

*Hey hey! Yes, there are affiliate links throughout the Kristen Leigh Designs website. I don’t promote products, tools, or services I’ve never used before or that I don’t absolutely love. By clicking the link and making a purchase, I may receive a percentage of the sale.