Webflow Rich Text Block

Styling CMS-Bound Rich Text Blocks

Overview
Rich Text Block Limitations & Bugs
001
Styling
Styling Rich Text Blocks
100
Styling CMS-Bound Rich Text Blocks
102
Markdown Support in Rich Text Blocks
103
Code Blocks in Rich Text Blocks
105
Embedding Tables
Embedding Tables Using Google Slides
6:36
150
Embedding HTML Tables Using Markdown
16:08
151
Lists & Nested Lists
Nested Lists
201
Advanced
Extending Rich Text's Capabilities with 3rd Party Libraries
800
Advanced
Adding ID's for Linking
801
Footnotes
801
No items found.

CMS-bound Rich Text Blocks ( RTBs ) behave differently in the designer.

When a rich text element is CMS bound, you lose the ability to select any of the sub-elements, and do any styling work in the designer.

You can unbind the RTB temporarily, and in unbound mode, it allows you to select and style the sub-elements ( RTE's ) within that block. But there's a better way that makes this a bit more manageable.

The Style Guide Approach

The solution is to maintain a "copy" of that RTB on a hidden static page, with the same Class. Keep that RTB un-bound, and you'll be able to select and style sub-elements normally.

Because your CMS-bound one uses the same Class, any styling changes you make to your hidden copy will appear on the CMS-bound one as well.

Pro Tips

Put your styleable RTE on a special Style Guide page

You can mark it as Draft, since you will only need to access it in the designer. I usually have a Style Guide folder, and then have several pages in it, e.g. a blog page, a product page, etc, along with the special styling mechanics I need to centralize there.

Style all of the sub-elements you might use

In your style guide RTE, put all of the elements that you might use in the CMS, and style all of them;

  • Headings ( H1 .. H6 )
  • Bold and italic text
  • Blockquotes
  • Ordered and unordered list items
  • Superscripts and subscripts

Anything you could conceivably use, put it in your style guide RTE, and style it to make sure it looks OK.

Try different arrangements as well, such as putting an H1, an H2, and an H3 next to each other. Or putting an image next to an unordered list. You need to see how these variations will look, and how the spacing will work.

Table of Contents
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.