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.
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.
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.
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
I am wanting to set H2 as a specific font, different than H1. How do I do that?
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.
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?
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.