So, I’m diving into the CMS & Collection List to start producing content for my agency.
Let’s imagine my website is divided in two chunk:
Chunk 1 = Static pages that present the agency + services
Chunk 2 = The blog where we’ll publish articles
For Chunk 1, since the purpose is different, we apply particular styling to our Headings. Let’s say “Heading 1” = 60px and “Heading 2” = 40px.
Now, I’m writing content in the “article’s body” field of a collection item that is going to be published in the blog. As I want to enhance the reading experience on the blog, I would like to apply different stylings to my headings (imagine H1 = 30px and H2=24px).
It looks like, any Headings that I include in the “article"s body” field inherit the styling of the “ALL H1 Headings” or “ALL H2 Headings” class.
Is there a way I can say “all H2 in this Collection needs to apply this styling”?
Yes you can. The styling for your Rich Text content isn’t handled in the CMS however, it’s handled on the Rich Text element that you bind it to.
You’ll give that element a custom class name, and then you can style parts of it- headings, lists, images, links, body text, etc. so that they apply only to those elements in that Rich Text element.
In this way, you make your blog body H1’s look entirely different from the H1’s on the rest of your site.
A few things that are not immediately obvious…
When you’re working with a Rich Text element, there is a viewing mode, and an editing mode. If you single-click it, you’ll select the part you’re over, e.g. an H1, and then you can style it. If you double-click it, you’ll be editing your content, and in edit mode you cannot control the styling. Just click outside the element to exit both modes. Play with it, you’ll see the difference quickly.
Your Rich Text element must have a class assigned to it for you to style parts ( like H1’s ) within it.
When you are styling a Rich Text element’s parts, you can either style that part site-wide, or within your custom-classed Rich Text element specifically. You’ll see that option at the top of the styling panel when you have an element part selected.
As far as I know, you cannot do part-styling on a Rich Text element that is bound to the CMS. You’ll either need to unbind it- or- I prefer to create a separate, draft-mode “Styling” page, which has an example Rich Text element with my custom class, and contains the content of a sample blog entry. Since that element isn’t bound to the CMS, I can style parts freely, and I can create all of the parts ( images, list elements, etc ) that I want to use.
You’ll want to read up on the Webflow university’s guides to working with rich text elements to familiarize yourself with all of the styling capabilities.