I want to change the way Headings (H2, H3) look on my blog posts

Support
#1

Hello,

I’m using the renew theme. I’ve been avoiding using H2 in my blog posts, because the font is way too large. In blog posts only, I’d like my H2 to look like current H4, H3 like current H5, etc. Is there a way to customize the way headings appear on my posts?

My website is https://aimetamarque.com

Thank you!

#2

Hello @tats86,

Thanks for asking. :slight_smile:

You need to use few custom CSS to make necessary changes in headings. I am sharing few sample CSS codes that you can use as a starting point to make required changes. Please add following CSS under X > Launch > Options > CSS:

h1, .h1 {font-size: 400% !important;}

h2, .h2 {font-size: 350% !important;}

h3, .h3 {font-size: 300% !important;}

h4, .h4 {font-size: 250% !important;}

h5, .h5 {font-size: 200% !important;}

h6, .h6 {font-size: 150% !important;}

Another options is to use Cornerstone page builder tools while creating blog posts/pages as it seems that you are using WordPress page editor to create blog posts. It has visual design elements that can be used to create interactive page layouts. In Cornerstone you also get heading elements that can be used to change the heading level and appearance of the same from visual builder. I have created a screencast that you can take a look. https://screencast.com/t/vRiXwyCdK9

Please note that to illustrate my point I have used the example of clasic headline element in the screencast.

In Cornerstone we have released V2 elements and with that you get option to create font templates. Using font templates you can assign the created template in to V2 heading element to further enhance the look and feel of headings.

If you would like to go with custom CSS then I would highly suggest you to take advantage of Google chrome/Firefox dev tools. Using dev tools you can see the changes getting updated in real time within the browser. If you would like to learn more about dev tools, please watch following tutorial.

Thanks.

1 Like
#3

Great! Thank you!

#4

You’re most welcome!

#5

I do however want this only applied to the blog posts. Now it seems that it affects my classic headings that were included when I built the site. Is that possible?

#6

Hello @tats86,

Yes, that’s definitely possible. All you need to do is prefix .single-post in above code. So the updated code would look like:

.single-post h1, .h1 {font-size: 400% !important;}

.single-post h2, .h2 {font-size: 350% !important;}

.single-post h3, .h3 {font-size: 300% !important;}

.single-post h4, .h4 {font-size: 250% !important;}

.single-post h5, .h5 {font-size: 200% !important;}

.single-post h6, .h6 {font-size: 150% !important;}

Thanks.

#7

Thank you! I’m sorry, one last thing. Now the spacing below headings is smaller. How can I add padding/spacing below my H2 on blog posts using the above code?

#8

HI There,

Update your code from :

.single-post h2, .h2 {font-size: 350% !important;}

to:

.single-post h2, .h2 {
font-size: 350% !important;
padding-bottom: 20px;
}

Hope it helps

1 Like
#9

Excellent, thank you!

#10

You are welcome1

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.