If you go into the Customizer under the Typography tab you can find settings to alter heading styles (h2, h3, h4, h5, etc). These settings have been coded to only affect standard headings, in other words, headings that have been inserted directly into your page content or via the text block element. They will not affect headings located in builder elements (heading, icon box, feature box, etc) or entry headings found in archives, grid elements or post cards. Below is a screenshot of the settings we are referring to.
So why don’t these settings affect module, grid or archive headings? The reason for this is because builder elements and entries have their own design and you wouldn’t want the customizer to affect those headings. Heading tags in HTML are used for SEO (not design) and your heading tags are going to be used primary on blog posts where you would usually expect a very different design for the heading tag compared to a module like an Icon Box (larger margins to space out content, probably larger font, etc).
For example look at this demo blog post which has some h2 and h3 heading tags. If the same sizing and margin was applied to both headings inserted in articles and builder elements then it would look really bad on pages like this one where you would use the same heading tags for SEO reasons but in a builder element like the icon box.
Heading tags are important for SEO and shouldn’t be used for design reasons. Let’s say you setup a bunch of pages with icon boxes using h3 tags for the heading and gave your h3 a custom design and you also setup a bunch post grids and other elements with h2 tags and their own h2 heading design. One day you realize you need to change all the h3 tags to h2 tags for SEO reasons and change some of the h2 tags to h3 tags. Now you will run into design issues since you won’t be able to change the heading tags without affecting their design unless you alter the h2 headings to look like the h3 but now you’ve altered your h2 heading design which will mess up your h2’s.
As you can see, management will get a complex if those Typography settings affected all headings on the site. So when you select heading tags for builder elements what you are changing is the tag for SEO reasons not changing its look.
What if I want the Typography Settings to affect the Heading element?
If you want to apply the typography settings to the “Heading” element you can actually go to Customize > WPBakery Builder and you will find a checkbox to enable that.
What if I want the Typography Settings to affect all my headings?
If you really want the typography settings to affect all headings on the site you can download the following plugin and activate it on the site:
What this plugin does is hook into the Customizer to alter the output of the typography settings. This is the exact code in the plugin if you wanted to take a look or just implement the code directly in your child theme functions.php file:
add_filter( 'wpex_typography_settings', function( $settings ) {
if ( isset( $settings['entry_h1'] ) ) {
$settings['entry_h1']['target'] = 'h1, .wpex-h1, .vcex-module h1, h1.vcex-heading';
}
if ( isset( $settings['entry_h2'] ) ) {
$settings['entry_h2']['target'] = 'h2, .wpex-h2, .vcex-module h2, h2.vcex-heading';
}
if ( isset( $settings['entry_h3'] ) ) {
$settings['entry_h3']['target'] = 'h3, .wpex-h3, .vcex-module h3, h3.vcex-heading';
}
if ( isset( $settings['entry_h4'] ) ) {
$settings['entry_h4']['target'] = 'h4, .wpex-h4, .vcex-module h4, h4.vcex-heading';
}
return $settings;
} );