As you probably have already discovered, with the Divi theme for WordPress you can not set the height of your H2, H3, H4, H5 or H6 text. Chances are you don’t need all of these anyway, but sometimes an H2 or H3 is helpful, especially if you are creating a long post and just want to break up content a bit.
A little background:
- H1 text is most typically used for the title of the page. It should stand out above other text in size and is a valuable piece of information to Google as to the content of the page.
- You can set the H1 size globally in the Divi Theme Customizer, General Settings, Topography, Header Size.
- You may revise the H1 size per page by using the Divi Builder. Toggle into Advanced Design Settings and change the Header size. Anything on the page set as an H1 will be modified to the new size.
If you want to use H2, H3, etc you will need to insert this bit of CSS onto your site. Make sure you either add the code into your Child Theme Style sheet here’s what happens if you don’t use a child theme or put the code in your Divi Theme Options, at the very bottom you will see a space for Custom CSS.
You get the idea – just change the size to whatever suits your design and change the h to h4, h5, h6
If you want to globally change the color use this:
just add it on the next line after font size – like this
Just change green or #dddd to whatever you want.
What about em’s?
Sure, you can set the font into em’s instead, just replace px with em (so 2em or 3em).
A little background:
- em’s are a unit of measurement. They are scalable based on the browser setting of the font size. If your browser’s default pixel size is set to 12px then 1em = 12 pixels. So 2em = 24 px or .5 em = 6px.
- In my opinion, and please feel free disagree and to have at it in the comments below, it makes the most sense to use em’s when you have a gigantic headline – say 96 pixels in your hero image. On the phone that size would be ridiculous and by using an em you are scaling it to fit the mobile device.
- Here is a great website that will help you convert the font sizes: https://websemantics.uk/articles/font-size-conversion/ It shows font size, em’s & %’s.
A little CSS can give you a lot of power. And be slightly addicting, so watch out & have fun.