Discover how to customize your rich text elements on Webflow by simply adding components in it to create unique content!
There are many different elements on Webflow to build your web pages visually. Among them is the"Rich Text" element. Rich Text allows you to create "long" content on a page. This element is generally used for the content of a blog article, legal notices, biographies etc.
The advantage of this element is to add different elements inside (heading, paragraph, image, video, link etc.). Instead of using the elements one by one, we can add a rich text to our page to create content.
The rich text element is very useful especially for collections (blog, team, etc.) because it allows to reduce considerably the number of fields in them. However, rich text is not totally malleable. Customization is very limited and we cannot use all the existing webflow elements (buttons, forms, slider, etc.).
Nevertheless, Finsweet with its custom attributes solutions, offers us the possibility to add components (used on our site) in a rich text to create a "powerful" rich text. So today we are going to present you how to add custom components in your rich text.
For this tutorial, we will insert a gallery of images in a rich text.
For those who want to, here is the official Finsweet documentation for Powerful Rich Text.
Step 1: Add a Script to our page
Dans la page qui contient le rich text où nous souhaitons ajouter notre composant, il est nécessaire d'ajouter le code ci-dessous dans la balise <!-- fs-richtext-ignore --><head> de votre page. Vous trouverez ce champ dans les paramètres de votre page.
Step 2: Manipulations on the rich text
1. Add a rich text
If you haven't already done so, you will need to add a rich text element to your page.
2. Custom attribute on the rich text
Then, you will have to select your rich text element and give it a custom attribute. To do this, click on the "settings" tab of the element and go to "Custom Attributes".
You will need to add the following attribute:
Name : fs-richtext-element
Value : rich-text
Step 3: Manipulations on the component to be inserted
After having done these few manipulations on the rich text, you can select the component (it must be a div block) that you want to insert in your rich text. In our case, we select our gallery component. We will also add a custom attribute to it.
Name : fs-richtext-component
Value : custom-value
The value is defined by you. You can give any value you like. However, we recommend to use a recognizable name for this value.
Step 4: Add the component to the rich text
You will now return to your rich text element.
You will need to add a new line (where you want to add your component) and insert the following text
{{personalized-value}}.
The custom-value part must be replaced by the value you gave to your component.
In our case, we add {{gallery}}.
Step 5: Publish your project
In the Webflow Designer, you will not see your component added directly, you will have to publish your project to see it.
BONUS: Retrieve a component from another page
It is also possible to retrieve components present on other pages than the one where is rich text. To do this, the steps remain the same, but in your rich text, you will have to add {{custom-value}} instead of {{custom-value="url-of-the-page"}}.
Par exemple si mon composant se trouve sur la page blog, je devrai ajouter {{valeur-personnalisée="/blog"}} ou {{valeur-personnalisée="https://www.url.com/blog"}}.
And here is the tutorial that will allow you to customize your rich text. To become an expert on Webflow, you can join our training or continue to follow our tutorials on the tool.
.jpg)
