How to customize h1, h2, h3, h4, h5, h6 headers with Divi

Among the many things you can customize with the Divi theme to the smallest detail in a simple and obvious way, the headers are not one of them(h1, h2, h3, h4, h5, h6).

There are several places where you can customize the headers, but it can be difficult to find where to do it for each header, or for all as a whole.

But yes, you can customize the headings, you just have to search a little, and there are several ways to do it.

Why should I customize the headers?

It is not mandatory, and in fact you should be somewhat cautious with the design changes, so that at least have some coherence and relationship between the parts of what is a whole set of visual aspects of your website, but it is essential to control the sizes, even sometimes typography and colors of the headers, mainly for 2 reasons:

1. Readability – Making your content easy to read should always be a priority, and if a header is not well distinguished from the normal text, your visitors may confuse your texts.
2. Accessibility – Not everyone has perfect eyesight, and offering larger fonts can help these people in particular, and almost always everyone, since larger fonts always read better, right?
3. SEO – So as not to fall into the temptation of replacing all H2 with H1 because we like the size better, for example, with which we would probably be destroying the SEO of our content by a mere visual decision.

These are enough reasons, and of importance, for you to spend a few minutes learning how to customize the different headings, don’t you think?

Customizing Divi headers from the customizer

The first thing any user will look for is to try to modify the headers globally, and you can, from the theme customizer. It’s simple, and it really works, just go to Appearance → Customize or Divi → Theme Customizer, whichever you prefer.

In both cases, the WordPress customizer opens, in which, to customize the headers, you must go to the General Settings → Typography section and once there modify the headers.

As you will see in the above screenshot, there you have several possible customizations of the “headers”:

• Header text size
• Header letter spacing
• Header line height
• Header font style (bold – italic – transform to uppercase – underline)
• Header font
• Header text color

The bad thing is that it doesn’t specify which headers it refers to, whether H1, H2, none in particular or all.

Do you know the answer?

Effectively, it refers to all headers!

So any change you make in this section will apply to all headers, and especially when it comes to the size of the headers, if you change it, it will be changed in all proportionally, with a difference of 4 pixels from H1 to H4 and 2 pixels from H4 to H6.

By default, the headers in Divi have these sizes:

• H1 – 30 px
• H2 – 26 px (4 less)
• H3 – 22 px (4 less)
• H4 – 18 px (4 less)
• H5 – 16 px (2 less)
• H6 – 14 px (2 less)

And the number you see by default in these settings (30) is the one assigned to H1.

So what happens if I change the header text size in the theme customizer?

Well, Divi will progressively change the sizes of the headers, starting from the number you assign to that section, which as I said before is the default size of the H1.

So, if, for example, we raise the value from 30 to 40, the text sizes of the headers would look like this:

• H1 – 40 px
• H2 – 34 px (6 less)
• H3 – 29 px (5 less)
• H4 – 24 px (5 less)
• H5 – 21 px (3 less)
• H6 – 18 px (3 less)

And if we lower it, from 30 to 28, it would look like this:

• H1 – 28 px
• H2 – 24 px (4 less)
• H3 – 20 px (4 less)
• H4 – 16 px (4 less)
• H5 – 14 px (2 less)
• H6 – 13 px (1 less)

If you notice, it practically respects the proportion of decrease of the default sizes, except for the last section, the H6.

And yes, the rest of the parameters (line height, style, font, etc.) are automatically applied to all headers.

Well, we have already seen a way to customize the headers in Divi, but what if I want to apply different sizes or even colors and fonts to each header?

Well, here we have to change the method because the theme customizer does not allow us to do so.

Customize Divi headers in each module

No matter what you have configured in the customizer, the real potential of Divi you already know is in the modules of the visual layout, where you can customize absolutely everything, without restrictions.

For example, in the same page we are using, if we edit the module (which is a text module), leaving in the customizer the default typography values, you can change everything you want in each header from the module design tab, in the section called “Heading text“.

And here you can modify for each heading the font, styles, colors, sizes, everything. And even change it for each device. This is the great potential of Divi.

So, here you can fully customize everything you want from your headers. It only has one problem.

The changes only apply to that particular text module, not to any other, not even on the same page, which will still have the same default header settings.

Customize Divi headers in several modules at the same time

A partial solution to the above problem is to select several modules at the same time, using Shift+click in the visual layout editor. This way, by opening the settings for one of the modules you are actually configuring the settings for both of them.

It’s a neat trick that will save you a lot of time, in this type of settings and many others.

Customizing Divi headers using presets

But all of the above, as you may have noticed, is not enough, especially if you want your favorite customization to apply to more modules, not just those on a page. For this we have the “presets“.

The first step is to save your settings as a preset, from the same module configuration.

Drop down the “Preset” arrow and click on “Create new preset from current styles“. Then give it a name, and if you want to make the settings apply as default preset for all modules of the same type.

Save the changes to the module and the visual layout. From now on you will have the preset available to apply it to any other text module.

Default preset

Now, if you also checked the “Assign preset to default” box, it gets even better.

It doesn’t matter if you did it when you created the preset, or later from the little wheel icon that you will see when you select it.

The preset settings will be applied to all text modules throughout the web, as the warning message will tell you.

From now on, automatically, all text modules on your website will be displayed with the customization settings of your preset.

Of course, you can create custom presets, and make them global, for any other module you want to customize.

Much better, right?

But you can still customize headers in Divi in another way, even faster.

Customize Divi headers with CSS

Yes, actually the fastest and most effective way to customize Divi headers is through CSS code.

So I propose you to cheer up with it and try, for example, to add these CSS lines to your website, from Appearance → Customize → Additional CSS.

/* Customize Divi headers */
h1 {
color: red;
font-weight: normal;
font-size: 4em;
font-family: Times;
text-transform: uppercase;
}
h2 {
color: #f78009;
font-weight: normal;
font-size: 2.5em;
font-family: Verdana;
text-transform: uppercase;
}
h3 {
color: #36b3ed;
font-weight: normal;
font-size: 34px;
font-family: Verdana;
text-transform: lowercase;
}
h4 {
color: #f22ed1;
font-weight: normal;
font-size: 30px;
font-family: Serif;
text-transform: none;
}
h5 {
color: #f22ed1;
font-weight: normal;
font-size: 28px;
font-family: Serif;
text-transform: none;
}
h6 {
color: #f22ed1;
font-weight: normal;
font-size: 26px;
font-family: Serif;
text-transform: none;
}Code language: CSS (css)

These changes are perhaps too colorful and varied, but the effect you will have is easy to see.

In addition, the CSS changes you make here will be applied absolutely everywhere, in all Divi modules. Wherever a header appears, unless you apply modifications later to a specific one, it will be displayed as you define in the CSS.

The elements of the CSS, that you can change, are these:

• color – Color of the font
• font-weight – The weight of the font, i.e. bold, light, normal, etc.
• font-size – The size of the font (you can set it in px, em or %, you have several examples in the code)
• font-family – The font family to apply, specific (Verdana) or generic (Serif)
• text-transform – Transformation of the text (all uppercase, all lowercase, normal, you have several examples in the code)

Well, there are more, but with this you have an almost complete picture of changes, don’t you think?

Well, and so far the tutorial on how to change or customize the headers with the Divi theme.

I hope you are encouraged to customize such an important part of your website.