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.
- 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
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
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
Updated on: 28/03/2025
Thank you!