How to Change H1, H2, H3, H4, H5 & H6 Headings in Divi Theme?

Are you trying to customize the heading in the Divi theme but are unable to do it? If yes, then this article is for you. Below in this article, I have explained the step-by-step process of customizing headings in both the Divi theme and Divi page builder.

The instructions include changing the heading font, font size, typography, and color, setting different fonts for different devices, and many other heading customizations. Please read the article below carefully to be done with it (and if you’re looking for a divi discount, check here).

Customizing heading matters most when designing a fantastic user interface because we always use catchy headings to convert users into buyers.

And even if you are running a blog, heading customization matters; for the blog, you must select the right heading font and font size for different devices so your visitors from different devices can read the blog post with a great experience.

You can customize headings in the Divi theme and page builder in a few different ways, including:

• Customization of headings from the WordPress theme customizer
• Customization of headings using Divi builder
• Customization of headings using CSS code

Before starting with the actual process of heading customization in the Divi theme, let’s first understand why you should do the proper heading customization.

Why Should I Customize the Heading?

As I already told you, the heading customize plays an essential role in the website’s user interface. Here are a few reasons for that:

• Increase Readability: It will increase the readability of your content; a customized heading will grab the visitor’s attention, and they will quickly read what you want them to read. And to make sure that the heading is appealing, you can use font generator tools such as Quicktools to create a unique font for your headings.
• Accessibility: You have the perfect eyesight, but it doesn’t mean that all your website visitors will have the ideal eyesight; making the heading font size bigger and bold will help those people.

Those are a few reasons you should customize your website’s heading. Now let’s understand how you can customize H1, H2, H3, H4, H5, and H6 headings in the Divi theme in 3 different ways.

Ways to Customize H1, H2, H3, H4, H5 & H6 Headings in Divi Theme

All three ways to customize the heading in the Divi theme are explained step by step with proper images below; follow the instructions carefully.

1. Customization of Headings from the WordPress Theme Customizer

Doing heading customization using WordPress Customizer is not a challenging job; you can do it in just a few clicks.

First of all, log in to your WordPress website. In the WordPress dashboard, scroll down, and you will get the option as Divi.

Hover over it and then click on Theme Customizer; you will be redirected to the Customizer page.

Now, click on the first option, General Settings >>, then click on Typography, and you can customize the headings thoroughly from here. You can change the heading font, font size, color, and many other things.

Check all the settings correctly, make the required changes, and click on the Publish button; all your changes will be saved.

2. Customization of Headings Using Divi Builder

If you are using the Divi Page Builder for the first time, making changes to the headings will be a bit challenging because you need to customize each heading separately.

Here is how you can do it:

To edit your website with a Divi page builder, you first need to login to your WordPress website >> hover over the Page and click on All Pages >> open the Page you want to edit with Divi Page Builder >> click on Edit with Divi Page Builder.

From here, you can select the heading you want to customize or add a new heading (text block). To show you, I am using the already added heading; hover over the heading and click on the Setting icon, as shown in the image below.

When you click on the Setting icon, the popup will open. From here, you can customize the heading entirely, change from font to font size, from heading color to heading background, and many other things.

You just need to check all the tab Content, Design, and Advance properly; all the customization options are present here.

3. Customization of Headings Using CSS Code in Divi Theme

It is super easy to customize the heading in the Divi theme using the CSS code. I have created and provided you with the code, you just need to copy-paste it into the Additional CSS section of your Divi theme. Here is how you can do it:

At the very first, login to your WordPress website using the correct login credentials >> hover over the Appearance, and then click on Customize; you will be redirected to the WordPress customizer.

Now, scroll down and click on Additional CSS. Here you can Paste the below CSS and click on Publish; the heading of your website will be customized according to it.

Here is how you can customize this code to customize your website heading as you want. You need to make the required changes in CSS properties, and you are done. The details of the CSS properties are as below:

• color: It defines the color of the heading, you can type the name of the desired color, or you can use color code here.
• font-weight: You can set different weights for heading, including bold, light, normal, etc.
• font-size: By using this CSS properly; you can change the font size of the heading; you can set the font size in px, em, or %, like 34px or 2.4em.
• font-family: Using this, you can set the font
• text-transform: Set different transformations to headings including uppercase, all lowercase, normal and more.

At the time of customization of the code, make sure you do it carefully, especially if you don’t know about coding.

Final Words

This is how you can customize H1, H2, H3, H4, H5 & H6 headings in the Divi theme in three ways, including customization of headings from the Divi theme customizer, using Divi builder, and using CSS code.

I suggest always using the right font and setting the correct font size according to the devices’ screen sizes. Because if your website or blog’s typography is not right, your visitors will not get the correct experience.

I hope this article about customizing H1, H2, H3, H4, H5, and H6 headings in the Divi theme is helpful to you.