Badge Webflow Award Winner 2023

Comment ajouter des composants dans un rich text Webflow ?

Découvrez comment personnaliser vos éléments rich text sur Webflow en ajoutant simplement des composants dedans celui-ci pour créer du contenu unique !

Publié le 
29/9/2022
Modifié le 
27/3/2023
5 min
Custom Attribute Finsweet Powerful Rich Text

Il existe beaucoup d'éléments différents sur Webflow pour construire ses pages web visuellement. Parmi eux se trouve l'élément "Rich Text". Les Rich Text permettent de créer du contenu "long" sur une page. On utilise généralement cet élément pour le contenu d'un article de blog, les mentions légales, des biographies etc.

L'avantage de cet élément est d'ajouter différents éléments à l'intérieur (heading, paragraphe, image, vidéo, lien etc.). Au lieu d'utiliser les éléments un par un, on peut ajouter un rich text à notre page pour créer du contenu.

L'élément rich text est très utile notamment pour les collections (blog, team, etc.) car il permet de réduire considérablement le nombre de champs de celles-ci. Cependant, les rich text ne sont pas totalement malléables. La personnalisation est très limitée et nous ne pouvons pas utiliser tous les éléments existants de webflow (boutons, formulaires, slider, etc.).

Néanmoins, Finsweet avec ses solutions d'attributs personnalisées, nous offre la possibilité d'ajouter des composants (utilisés sur notre site) dans un rich text pour créer un rich text "puissant". Nous allons donc vous présenter aujourd'hui, comment ajouter des composants personnalisés dans votre rich text.

Pour ce tutoriel, nous allons insérer une galerie d'images dans un rich text.

Pour celles et ceux qui le souhaitent, voici la documentation officielle de Finsweet pour le Powerful Rich Text.

Étape 1 : Ajouter un Script dans notre 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.

<!-- [Attributes by Finsweet] Powerful Rich Text -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-richtext@1/richtext.js"></script>
Script powerful rich text finsweet

Étape 2 : Manipulations sur le rich text

1. Ajouter un rich text

Si cela n'est pas déjà fait, il faudra ajouter un élément rich text sur votre page.

2. Attribut personnalisé sur le rich text

Ensuite, il faudra sélectionner votre élément rich text et lui donner un attribut personnalisé. Pour cela, il faut cliquer sur l'onglet "paramètres" de l'élément et vous rendre dans "Custom Attributes".

Vous devrez ajouter l'attribut suivant :

Name : fs-richtext-element
Value : rich-text
Rich text dans Webflow

Étape 3 : Manipulations sur le composant à insérer

Après avoir réalisé ces quelques manipulations sur le rich text, vous pouvez sélectionner le composant (ce doit être un div block) que vous souhaitez insérer dans votre rich text. Dans notre cas, nous sélectionnons notre composant galerie. Nous allons également lui ajouter un attribut personnalisé.

Name : fs-richtext-component
Value : valeur-personnalisée

La value est définie par vous. Vous pouvez donner la value que vous souhaitez. Cependant, nous vous recommandons d'utiliser un nom reconnaissable pour cette valeur.

Galerie images Webflow

Étape 4 : Ajouter le composant dans le rich text

Vous allez maintenant retourner sur votre élément rich text.

Vous devrez ajouter une nouvelle ligne (là où vous souhaitez ajouter votre composant) et insérer le texte suivant

{{valeur-personnalisée}}.

La partie valeur-personnalisée doit être remplacée par la valeur que vous avez donnée à votre composant.

Dans notre cas, nous ajoutons {{galerie}}.

Composant personnalisé dans rich text webflow

Étape 5 : Publier votre projet

Dans le Designer de Webflow, vous ne verrez pas votre composant s'ajouter directement, il faudra publier votre projet pour le voir.

Galerie photos dans rich text webflow

BONUS : Récupérer un composant présent sur une autre page

Il est également possible de récupérer des composants présents sur d'autres pages que celle où est rich text. Pour ce faire, les étapes restent identiques, mais dans votre rich text, il faudra à la place de {{valeur-personnalisée}} ajouté {{valeur-personnalisée="url-de-la-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"}}.

Et voici pour ce tutoriel qui vous permettra de personnaliser vos rich text. Pour devenir un expert sur Webflow, vous pouvez rejoindre notre formation ou continuer à suivre nos tutoriels sur l'outil.

Prêt(e) à avoir un site qui convertit ?

Améliorer votre visibilité en ligne grâce à l’experience, l’excellence et la réactivité de Digidop !

Restez informés de l’actu Digidop !