Formatting CMS-Bound Rich Text Elements

When styling an unbound richtext element, many users style the individual elements, e.g. assign a class to an H1, or to a specific paragraph, and style accordingly.

Structured Styling for Rich Text Elements

However richtext is designed to give much more consistent styling through a richtext-level class, and then styling elements by type, within that class.

For example, you could;

1. Add a richtext element to your page
2. Give it a class of my-richtext
3. Then select an H1 within it any choose the style panel selector "All H1's within my-richtext"
4. Once that selector is specific, you can make any style changes you like and they will apply consistently to all of the H1's within that rich text block.

How this Applies to CMS-bound Rich Text Elements

Understanding the mechanics and UX for this is crucial to styling CMS-bound rich-text elements.

After a richtext element is CMS-bound, you can use this approach;

1. Ensure a class is assigned to the richtext element
2. Create another, temporary richtext element, that is not CMS bound, just above or below it, and assign the same class
3. Now use the structured styling principles above, on the unbound richtext elements
4. Those styles will immediately apply to your CMS-bound richtext element as well, while showing your CMS-sourced content

Video Walkthrough

More Resources

This video from Pixelgeek has an excellent overview of CMS-bound richtext styling.