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 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 Divi theme and Divi page builder.

The instructions include changing heading font, font size, typography, 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 heading 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, 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.
  • 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 the 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 the 3 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.

change heading, change heading in divi, divi theme
Open theme customizer

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.

change heading, change heading in divi, divi theme
Editing typography and heading

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

💡 Keynote: 

Divi Theme doesn’t allow you to change the font size of H1, H2, H3, H4, H5 & H6 headings separately using WordPress Theme Customizer.

And when you change the Header Text Size, the size of all the headings will be changed in a ratio. For customization of each heading, you need to use the Divi Theme Builder.

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.

change heading, change heading in divi, divi theme
Customize heading in divi theme

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.

change heading, change heading in divi, divi theme
Customize heading in divi theme

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.

change heading, change heading in divi, divi theme
Add CSS to 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 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.

TheWPX is a blog where we cover topics related to Blogging, WordPress, SEO, and Affiliate Marketing.
All the information which is published on our website is collected through independent research and tests. The data is being verified through consultation with reliable sources.
Also, We constantly update the content on our website, keeping it fresh and relevant to our readers at all times.

Leave a Comment

Sunny Kumar

Sunny Kumar, Founder of TheWPX

Hola Amigos! I'm Sunny Kumar, founder of TheWPX. I started my journey in 2015, and since then, I've come a long way. And now, I'm helping new bloggers make their WordPress journey easy and effortless.