Customizing H1-H6 headings in Divi allows you to create a unique and consistent typographic style that enhances your website’s overall design and readability.
Tailoring these heading styles ensures that your content is visually appealing and aligns with your brand’s identity.
This article will guide you through the steps to customize H1-H6 headings in Divi, providing you with the tools to make your headings stand out and improve your site's visual hierarchy.
Some Divi modules already have the title text defined. Those title texts are set to use different heading levels, for example:
Blurb module - the title uses the H4 Heading level.
Call to Action module - the title uses the H2 Heading level.
Circle Counter module - the title uses the H3 Heading level.
Comments module - the title uses the H1 Heading level.
Countdown Timer module - the title uses the H4 Heading level.
Email Opt-in module - the title uses H2 Heading level.
Change the default Heading level to a different one
Open the module settings.
Go to the Design Tab → Title Text → Title Heading Level.
Change the default Heading level by selecting the desired Heading level.
(Optional) Change the styles for the new Heading level.
Customize the appearance of a Heading level
Open the module settings.
Go to the Design Tab and expand the Title Text option group.
Ensure you have selected the correct Heading Level.
Change/customize each of the related options:
Title Font - Allows the choice of a Google font at the respective heading level.
Title Font Weight - Choose the font weight for the respective Heading level.
Title Font Style - Choose the font style of the respective Heading level.
Title Text Alignment - Choose how the title text will be aligned on the page.
Title Text Color - Choose the respective Heading level's text color.
Title Text Size - Choose the font size for the respective Heading level.
Title Letter Spacing - Choose the space between each letter for the Heading level.
Title Line Height - Choose the line height for the respective Heading level.
Title Text Shadow - Choose the style for text shadow at the respective heading level.
Customize the appearance of any Heading level for the Entire website
Go to WordPress Dashboard → Divi → Theme Customizer.
Go to General Settings → Typography.
Set the Header Text Size.
Set the Header Letter Spacing.
Set the Header Fonts Style.
Set the Header Font.
Set the Header Text Color.
Once set, the above options will be used on all Heading levels, starting with Level 1 (H1) and ending with Level 6 (H6).
Pro tip: The custom settings set for the Header in the Theme Customizer can be overridden on each module level by using the Design Tab → Title Text option group.
Customize the appearance of all Heading levels using custom CSS
Go to WordPress Dashboard → Divi → Theme Options → General Tab → Custom CSS area
Add the following CSS code:
h1 {
font-family: Helvetica;
font-size: 60px;
color: black;
line-height: 1;
}
h2 {
font-family: Helvetica;
font-size: 40px;
color: black;
line-height: 1;
}
h3 {
font-family: Helvetica;
font-size: 30px;
color: black;
line-height: 1;
}
h4 {
font-family: Helvetica;
font-size: 20px;
color: black;
line-height: 1;
}
h5 {
font-family: Helvetica;
font-size: 16px;
color: black;
line-height: 1;
}
h6 {
font-family: Helvetica;
font-size: 14px;
color: black;
line-height: 1;
}
Note: Any changes made in the Theme Customizer and/or on the individual Module's Design Tab will overwrite the custom CSS code.
For more information about what CSS properties and values you can use, please check the official MDM documentation.