Background color in headings (H2, H3)

Hi there,

i assume you are using the block editor. Unfortunately not using the Core blocks from within the editor. You would need to give the block an Additional CSS class and some CSS. Let me know if you need help with that.

Yes, I'm using the block editor. I know nothing about CSS so some help would be great. I have the Simple CSS plugin installed if that helps.

So select the Heading Block > Settings (Sidebar) --> Advanced Tab.
In the Additional CSS field add a CSS Class. You can name this whatever you like, make it descriptive if you can eg.

header-bg-blue

Then in the Customizer > Simple CSS you can write a CSS Rule for that Class eg.

.header-bg-blue {
    background-color: #2020ff; /* Change hex color */
    padding: 20px; /* Add some padding to the heading */
}

You can create different classes with separate rules for different colors or padding variations.
Then its a case of just assigning the Class to any heading block you need it on.... or any block actually.

The nice part is you can then change all of them across your site just by editing the CSS.

Note: /* this is a comment */ - it isn't required just a handy way of keeping notes of what it does.

Thank you so much! That worked.

Glad to be of help.

Hi,
Is this still valid today? I guess there have been some changes to GP since this was posted.
I was hoping to achieve something like this for H2 and H3:

https://drive.google.com/file/d/1GWntIA9YiSTdc-6NxkrlLiFKcF6-Hf55/view?usp=sharing

Cheers!

Hi Simon,

Yes, this is still valid. :D

The same thing can be done to any text blocks. This is assuming there's no conflict in CSS coming from other custom styling. (if any)

Hi Elvin
Thanks for that! I have just applied it and all is well! :-)
Best wishes
Simon

No problem. Glad it works for you. :D