Articles on: CMS Integrations

How to use Rich text elements with CMS

The Rich Text element is a specialized element used to import and display rich text content from the headless CMS.


Rich text elements only work as part of a CMS List or CMS Item as they need a source.


  1. Adding Rich text elements
  2. Styling Rich text elements
  3. Styling specific elements inside Rich text elements


Adding Rich text elements


To add a Rich text element to your project:


  • Go to the Left panel -> Elements -> CMS section
  • Drag the Rich text element to the Success layer of your set up CMS element
  • Select the rich text element
  • Go to the Right panel -> Richtext content section
  • Click on the Bind dynamic property icon
  • From the Dynamic properties panel select the source you want to import from


How to add rich text elements to a CMS project


Styling Rich text elements


The only way to style rich text elements imported from the CMS is by using CSS classes.


To add a CSS class to your rich text element:


  • Go to the Right panel -> Classes section
  • Click the + icon and give the class a name (ex: richtextelement)
  • Go to the Left panel -> CSS Classes tab
  • Select the class you previously created
  • Style it using CSS properties


How to style Rich text elements using CSS classes


Styling specific elements inside Rich text elements


To target specific elements inside of the rich text element (ex: image, paragraph, heading 1):


  • Go to Left panel -> CSS Classes tab
  • Right click the rich text class you previously created
  • Go to Add CSS combinator and select one of the options (ex: child combinator)
  • In the newly opened panel add the type of element you want to target (ex: img, p, h1, etc.)
  • Style the combinator class using CSS properties


How to style specific elements in the rich text using CSS combinators

Updated on: 28/03/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!