Streaming live at 10am (PST)

Styling a Collection Page H1 & RTE


I’m trying to style the H1 & RTE in my blog collection page, but I can’t seem to figure out why my H1/title isn’t visible upon preview.

I’m also trying to style the RTE in the content of the blog and although I’ve altered the settings e.g: typeface, it doesn’t change.

Please help and mind the minty mess :sweat_smile:

Here is my site Read-Only:

And the live link for an example:

It’s because the RTE pulls the styling from your sites global styles. So if your paragraphs across your website are 15px in height with 27px line-height with a color of #333 then the paragraphs in the RTE will get the same thing applied to it. so on with H1’s, H2’s etc.

Now there is a way to style it separately from the other global styles using a little bit of custom CSS. You can start by giving the Rich text element on your blog posts a name, like .post-content.

Then you will need to target these with CSS in the <head> of your posts pages (in settings for the posts page, which will automatically generate these styles for all posts) custom code like so:

  .post-content w-richtext p{
    font-size: 16px;
    line-height: 28px;
    color: #454545

That would style only the paragraphs within the RTE itself with that class. Then for the Heading tags you would just change the p to an H1 or an H2 etc., or whatever one you wish to change.

Something like this:

  .post-content w-richtext h1{
    font-size: 52px;
    line-height: 54px;
    color: #282828

Hope this helps!

You can also style nested elements in the designer.



1 Like

Whoops, I got to this late – what was the first video? I watched the RTE webflow university video on nested elements but thought it might have been possible to alter it without nesting an element :slight_smile:

Are you referring to the video in my post? If so, that was something I created for you.

Hiya, I’m trying to edit the Blog Post Template of my site but when I preview it my H1 seems to go missing and I can’t understand why; I can’t seem to see the nested element selector when I click on the H1, and adding another class to make it a combo class doesn’t seem to work.

I have the same issue when I try to edit the RTB of my blog text, please help :cry:





Here is my site Read-Only:

Yeah, I can’t seem to access that video anymore – could you please resend it?



I moved your duplicate post back to your original post.

I believe your problem is this:

When you add a Rich Text Element to a CMS template, you can assign a class to the element, but you cannot style its children since the content is loaded from the CMS when it is bound to a rich text field in the collection.

Un-bind the element and then apply your nested styles. When you are done, bind the element again.


My preference is to style items in my designs by placing the element on a style guide page where I add the class(s), and in the case of a RTE, all the nested styles. Then when I need to reuse the styled element, I just apply the style(s) to a new instance or copy and past it.

This way, I always have a current reference I can visually inspect. This is also very helpful when using combo classes.

1 Like

Ah I see, thank you for the clarification and thorough advice!

Does this resolve your issue?

Currently working on it and will mark as resolved as I do it :slight_smile:

I’m still a bit stuck as to why it’s not visible after deleting all the classes and I can’t seem to figure out how to bind and unbind it – could you please help with this?

Your interactions are hiding the page content (top of the page).

I deleted the interaction and …