Customizing Your WordPress Website with Divi: Fonts, Colors & CSS Made Simple

Introduction

Once your Divi-powered website is live, you might find yourself thinking — “It looks great, but I wish it matched my brand colors or had a unique font.”

That’s where customization comes in. Divi makes it easy to tailor your website’s design — no coding necessary — but it also gives you the flexibility to apply custom CSS if you want finer control.

Whether you’re a lawyer refining your firm’s digital image, a dentist ensuring your site feels friendly and clean, or an exporter aiming for an international aesthetic, Divi gives you all the tools to make your website feel truly yours.

Foundation first: Make sure you’ve completed our guides on installing WordPress and understanding the WordPress Dashboard before diving into customization.

1. The Divi Customization Philosophy

Divi’s design system follows a simple principle — visual control with optional code flexibility. You can tweak almost everything using sliders, pickers, and toggles, but you also have access to the Advanced tab for CSS control.

This means:

• You don’t need to hire a developer for simple changes.
• You can adjust styles instantly using the visual builder.
• If you know CSS, you can go even further — precisely positioning, styling, or animating elements.

💡 In short: Divi gives you complete design freedom — whether you love visuals or code.

Learn more: Visual Design Principles | Web Design Best Practices

2. Accessing the Divi Theme Customizer

Your starting point for global design settings is the Divi Theme Customizer.

You’ll find it under:

👉 Dashboard → Divi → Theme Customizer

Here’s what you can control site-wide:

• Colors & Typography
• Header & Navigation
• Footer & Widgets
• Buttons & Links
• Layout Spacing

These global settings ensure your entire website — pages, posts, and modules — looks consistent.

💡 Think of the Theme Customizer as your brand control panel.

Related: WordPress Dashboard basics | Divi Theme Options

3. Setting Brand Colors

A consistent color palette reinforces your brand identity and helps visitors instantly recognize your business.

How to Set Global Colors in Divi

1. Go to Divi → Theme Customizer → General Settings → Layout Settings.
2. Choose your Primary Color (e.g., your brand’s main color).
3. Open Divi → Theme Options → General Tab → scroll to Color Palette.
4. Add up to 8 global colors that you use frequently — these will appear in the color picker throughout Divi Builder.

💡 Example:

• Lawyer: Navy Blue (#0a2540), Gold (#d4af37), White (#ffffff)
• Dentist: Aqua (#37c3be), White (#ffffff), Charcoal Gray (#444444)
• Consultant: Indigo (#3b3b98), Light Gray (#f7f7f7), Black (#000000)

🎨 Pro Tip: Use Global Colors — when you change one, every instance on your site updates automatically.

Color theory: Psychology of Color in Branding | Adobe Color Wheel | Coolors Palette Generator

4. Choosing Professional Fonts

Typography is a subtle but powerful part of web design. The wrong font can make your site look amateurish; the right one makes it look refined and trustworthy.

Steps to Set Fonts in Divi:

1. Go to Divi → Theme Customizer → General Settings → Typography.
2. Choose Heading Font and Body Font.
3. Adjust font size, weight, and letter spacing using sliders.
4. Preview instantly in real time.

💡 Recommended Professional Combinations:

• Lawyers / Consultants: Playfair Display + Lato
• Dentists / Clinics: Poppins + Open Sans
• Accountants / Exporters: Montserrat + Roboto
• Startups: Inter + DM Sans

🎯 Pro Tip: Keep it to two fonts — one for headings, one for body text. Simplicity enhances readability.

Typography resources: Google Fonts | Font Pairing Guide | Web Typography Best Practices

5. Customizing Buttons and CTAs

Your buttons are where conversions happen — Divi lets you style them globally so they look consistent everywhere.

Steps:

1. Go to Divi → Theme Customizer → Buttons → Button Style.
2. Customize:
   • Button text color
   • Background color
   • Border radius (for rounded edges)
   • Hover animation
3. Apply your global accent color to maintain consistency.

💡 Example:

For professionals, a clean solid-color button (no gradients) works best:

• Primary CTA: Navy background + white text
• Hover: Reverse colors

Button design: CTA Button Best Practices | Button Design Patterns

Learn from your homepage: Apply insights from our Homepage Design guide to your button strategy.

6. Adjusting Section Spacing and Layout

Whitespace improves readability and sophistication — especially for professional websites.

In Divi Builder, you can:

1. Click any Section → Design Tab → Spacing.
2. Adjust Padding (inner space) and Margin (outer space).

💡 Pro Tip:

• Use 80px top and bottom padding for sections.
• For rows, use 40px–60px spacing.
• For text, maintain comfortable line height (~1.6).

These small adjustments create breathing room and help your content feel premium.

Whitespace principles: The Role of Whitespace in Design | Layout Best Practices

7. Adding Custom CSS (Optional for Advanced Users)

Divi allows you to enhance designs with CSS — great for professionals who want a fine-tuned look beyond visual controls.

Ways to Add Custom CSS:

Per Module:

• Go to any module → Advanced Tab → Custom CSS.
• Add CSS for hover effects, borders, or spacing.

Globally:

• Go to Divi → Theme Options → Custom CSS.

In Customizer:

• Use Additional CSS under the Theme Customizer.

Example 1 – Customize Button Shadow

.et_pb_button {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}
.et_pb_button:hover {
  transform: translateY(-3px);
}

Example 2 – Round Profile Images

img.profile-pic {
  border-radius: 50%;
}

💡 Pro Tip: Always preview on mobile after adding custom CSS — minor tweaks can shift layouts on smaller screens.

CSS resources: MDN Web Docs CSS Guide | CSS-Tricks | W3Schools CSS Tutorial

8. Building Brand Consistency

To make your website look cohesive and professional:

🧭 Use consistent icons: Divi’s built-in icon set matches your design language.

🧱 Stick to a 2–3 color scheme: Too many colors dilute professionalism.

🔠 Maintain uniform heading styles: Use H1 for page titles, H2 for sections.

🖼️ Use branded photos: Office interiors, real team shots, or product visuals.

💡 Tip: Save customized modules (like buttons or blurbs) in your Divi Library — reuse them across multiple pages for perfect consistency.

9. Testing and Refining Your Design

After customizing:

Preview in Divi’s Responsive View:

• Adjust font sizes and spacing for mobile and tablet.

Use Divi’s Split Testing:

• Test two button colors or CTAs to see which converts better.

Speed Optimization:

• Go to Divi → Theme Options → Performance Tab and enable static CSS file generation and minification.

Testing tools: Google Mobile-Friendly Test | BrowserStack | PageSpeed Insights

Conclusion

With Divi’s customization tools, you can easily transform a generic WordPress site into a polished, on-brand digital presence. Every professional — whether a lawyer, doctor, or startup founder — can control their brand’s look without technical knowledge.

The secret lies in balance: consistency, simplicity, and subtle use of color and space. Once you’ve nailed the basics, a few lines of CSS can elevate your website from great to outstanding.

Building on the foundation of proper hosting setup and effective homepage design, these customization techniques complete your professional web presence.

In our next tutorial, we’ll explore Creating Menus, Widgets, and Sidebars for Better Navigation — helping you guide visitors seamlessly through your site.

Your Complete WordPress Mastery Journey

Follow our comprehensive step-by-step tutorial series:

1. What is WordPress – Understanding the platform
2. Hosting and Domain Setup – Foundation essentials
3. Installing WordPress – Getting started
4. WordPress Dashboard Guide – Managing content
5. Designing with Divi – Visual design fundamentals
6. Homepage Conversion Design – Layout strategies
7. Customizing with Divi – You are here
8. Navigation & Menus – Coming next

Additional Resources

Design Tools & Inspiration

• Elegant Themes Documentation – Official Divi guides
• Divi Marketplace – Premium layouts and plugins
• Dribbble – Design inspiration
• Behance – Creative portfolios

Color & Typography

• Google Fonts – Free web fonts
• Adobe Color – Color palette generator
• Coolors – Color scheme builder
• Font Squirrel – Free fonts for commercial use
• Type Scale – Typography hierarchy generator

CSS & Development

• MDN Web Docs – Web development reference
• CSS-Tricks – CSS tutorials and guides
• Can I Use – Browser compatibility checker
• W3C CSS Validator – Validate your CSS

Testing & Performance

• Google PageSpeed Insights – Speed testing
• GTmetrix – Performance analysis
• WebPageTest – Detailed performance metrics
• Pingdom – Website speed test

Image Resources

• Unsplash – Free high-quality photos
• Pexels – Stock photos and videos
• TinyPNG – Image compression
• Squoosh – Advanced image optimization

💡 Need Help Customizing Your Divi Website?
Get a Free Design Consultation