Comment ajouter des composants dans un rich text Webflow ?

Tutoriel
September 29, 2022
3 min
Custom Attribute Finsweet Powerful Rich Text
Points clés de l'article

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

{{custom-blog-cta}}

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.

Formation Webflow Gratuite
Commencer la formation
Thibaut Legrand
Thibaut Legrand
Technical Solutions Architect & Webflow Expert

Articles qui devraient vous intéresser

Visuel abstrait lumineux avec des dégradés de jaune et orange, accompagné du texte “IA & DESIGN 2025” au centre, suggérant une thématique autour de l’intelligence artificielle et du design pour l’année 2025.
Documentation
IA

Comment l'IA transforme le métier de designer en 2025 (et pourquoi tu ne vas pas disparaître)

Comment l'IA transforme le métier de designer en 2025 (et pourquoi tu ne vas pas disparaître)
Overview du répertoire Webflow Partner mettant en avant plusieurs agences : Digidop, Finsweet, Flow Ninja et Simon Lampert. Le fond bleu présente le logo Webflow Partner à gauche, tandis que les cartes des partenaires affichent leur statut, prix de départ, distinctions, et captures de sites réalisés.
Documentation
Webflow

Le programme partenaire de Webflow

Le programme partenaire de Webflow
Agentic AI vs. Generative AI
Documentation
IA

IA agentique vs IA générative : Comprendre les différences fondamentales et leurs applications

IA agentique vs IA générative : Comprendre les différences fondamentales et leurs applications

Transformez votre site web en un moteur de croissance.

Nous contacter