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.

Adding Rich text elements
Styling Rich text elements
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: 27/03/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!