Change Heading Sizes On Your Divi Website - Cath Wood

Change heading sizes on your Divi website

Jun 20, 2018

<iframe width="560" height="315" src="https://www.youtube.com/embed/tzmvSjoRMlM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Video Length: 4:37

Change your H1’s, H2’s etc

If you don’t like the default heading sizes that come with Divi you can change them at module level. For example if you use a text module you can choose what size to make your H1’s, H2’s etc.

However, if you set your Heading sizes in the Divi theme customiser you’ll obtain a consistent look throughout your whole website.

Why use headings?

When writing content for your website it’s nearly always best practice to break it up into sections, and to give each section a heading.

The main title of the page will be the most important, so you’ll make it a Heading 1, or H1.

Subsections will be Heading 2’s, or H2’s.

Sections within those subsections might be H3’s or H4’s.

153 subscribers!

(Updated 17 Dec 21)

Please click through to my YouTube channel then hit the red subscribe button.

Thank you!

(I have 2 YouTube channels. This is my Business Channel.)

How to change your Heading sizes

When logged into your WordPress dashboard, hover over Divi (bottom left) and choose Theme Customiser.

Select General Settings > Typography.

You’ll see a slider for Header Text Size.

Moving this left and right adjusts the size of the H1 heading.

If you want to individually set the H2, H3, H4, H5 and H6 headings you’ll need to do it via CSS.

I find this is generally unnecessary because the Header Text Size slider changes all the headings proportionally.

For example, I started with the following heading sizes:

H1 – 30 pixels H2 – 26 pixels H3 – 22 pixels H4 – 18 pixels

I adjusted the H1 to 60 pixels and I ended up with:

H1 – 60 pixels H2 – 51 pixels H3 – 43 pixels H4 – 36 pixels

Although I was specifically adjusting the H1, the others increased proportionally as well.

Talk to me

I hope you found this tutorial helpful. If so, please remember to subscribe to my YouTube channel, give the video a thumbs up and leave a comment.

If you have any requests for future videos, please let me know.

Wherever you are, I hope you’re having a great day.

7 Comments

1. Laurence on June 17, 2020 at 7:10 pm

   I had the same, setting H1 to 60px meant H2s were 51px. The only way to override it in the CSS was using !important for H2 size. BUT then overriding that in the module Design tabs was not possible.

   So I had to not set H1 to 60px in DIVI settings and leave it at the default (30px), and set H1 to 60px in CSS, then I can set H2 size in the CSS without !important, which means I can override it in the Design tab.

   So having only the H1 size setting in DIVI settings is pointless, and causes issues. They should either remove it, or add in all the headings.

   Reply
2. Paul B on November 6, 2020 at 5:46 pm

   Can I ask a more basic question? Where in Divi do I actually select a piece of text and specify it as a H1 Header? I can’t find that anywhere.

   Reply
   • Cath on December 22, 2020 at 2:08 pm

     1. Add your text in a text module. 2. Highlight the text you want as a header. 3. Click the drop down at Paragraph in the box above. 4. Select which header you want to use. 5. Style it at Design > Heading Text > choose appropriate header

     Reply
3. Christina Truelove on July 12, 2021 at 10:44 pm

   I am wanting to set H2 as a specific font, different than H1. How do I do that?

   Reply
   • Cath on September 16, 2021 at 6:03 pm

     My understanding is that if you want to do this site-wide you’re probably best off to use css, however you can also make this change at module level.

     Design tab > Heading text > H2 > set the font you want to use.

     Remember you can right click a module you have just fine tuned, select ‘copy module styles’ then right click any other equivalent module and ‘paste module styles’ so you don’t have to make the exact same change to every module.

     Reply
4. Kros on August 19, 2021 at 6:48 pm

   What if I need to change font size in mobile devices? Do I need to write CSS for that? or is there any other options in Divi to do that?

   Reply
   • Cath on September 16, 2021 at 5:51 pm

     Yes, you can do that within each module.

     Design tab > Heading text size > hover to the right until the options pop up > select phone > set text size there.

     Play around with vw settings rather than just px. Often you’ll get a better result across all devices.

     Also remember you can right click a module you have just fine tuned, select ‘copy module styles’ then right click any other equivalent module and ‘paste module styles’ so you don’t have to make the exact same change to every module.

     Reply

Submit a Comment Cancel reply

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

Comment *

Name *

Email *

Website

Save my name, email, and website in this browser for the next time I comment.

Δ