Span Webflow dans un texte CMS : ajouter des spans au texte dynamique

Créer des spans de texte dans les éléments de texte dynamiques du CMS Webflow

C’est une fonctionnalité que de nombreux utilisateurs de Webflow attendent depuis l’arrivée des Collection Lists dans Webflow. Y parvenir sans coder est presque impossible, à moins d’assembler une multitude de champs, ce qui ne fonctionne bien que pour les titres (les champs de texte enrichi sont généralement laissés de côté) et manque de souplesse. Si vous avez déjà cherché comment ajouter un span Webflow, ou comment styliser seulement une partie d’un titre ou d’un champ de texte issu du CMS, voici la solution de contournement que nous utilisons.

Ici, nous allons utiliser un peu de code personnalisé et un marqueur que vous pouvez placer dans vos champs CMS, dans le Designer ou l’Editor, avant et après le texte qui doit recevoir le span. Petit studio Webflow, Milk Moon Studio est composé de designers Webflow qui préfèrent les solutions low-code quand aucune option no-code n’existe. Vous n’avez absolument pas besoin d’être un expert Webflow pour cela : il s’agit essentiellement de copier-coller. Nous avons aussi créé un Cloneable Webflow pratique que vous pourrez récupérer à la fin de l’article.

Dans notre cas, nous voulions simplement changer la couleur du texte et rendre la gestion extrêmement simple pour le client, en ajoutant un marqueur dans le CMS. Du moins au départ, car nous verrons des cas d’usage plus complexes plus loin.

Créer les styles

Nous avons commencé par créer le style de texte à utiliser dans le span. Ici, nous avons choisi une couleur de texte verte, que nous avons appelée text-color-green. N’oubliez pas de respecter les règles d’empilement des styles CSS et de ne surcharger que ce que vous voulez que le span applique. (Si l’empilement vous paraît un peu flou, notre guide sur la spécificité CSS dans Webflow l’explique bien.)

Créez votre style de span Webflow pour l’élément de texte dynamique

Intégrer jQuery

Ensuite, vous devrez ajouter ce script dans le code <head> du projet.

Ajouter du code personnalisé à la page

L’étape suivante consiste à ajouter le script personnalisé aux pages qui ont besoin des spans CMS. Il doit être placé dans la section « Before </body> tag », car le texte doit être chargé avant l’exécution du script.

Si vous regardez le code, vous verrez que, dans mon cas, je voulais cibler tous les h1, tous les h2 et le texte stylisé avec .services-hero_h1. Ce qui vous intéresse se trouve à la ligne 4 :

‍const headings = document.querySelectorAll('h1, h2, .services-hero_h1');

Il vous suffit donc d’ajouter ici vos propres styles ou balises.

Marquer le texte dans le CMS

Pour finir, ajoutez le marqueur autour du texte dans le CMS. Nous avons utilisé %% comme marqueur. Il peut être modifié dans la section de code précédente, mais celui-ci nous a très bien convenu.

Ajoutez le marqueur autour du texte auquel il doit s’appliquer dans Webflow, une fois publié

Naturellement, vous ne verrez pas le span dans le Designer, mais après la publication, tout fonctionnera parfaitement dès que le code s’exécute. Le script recherche les éléments de texte indiqués, vérifie la présence du marqueur %%, puis ajoute le span autour du texte situé entre les marqueurs.

Le marqueur de span de texte dans le Designer

Span de texte avec marqueurs visibles dans le champ de texte dynamique du Designer Webflow

Le span de texte du CMS Webflow sur le site publié

Span de texte pour du texte dynamique sur le projet Webflow publié

Deux spans !

Si vous voulez rester simple, c’est à peu près tout. Nous avons cependant constaté que le contraste du vert était bien trop faible sur un fond blanc, alors nous avons créé un second span avec une teinte de vert plus foncée et ajouté deux styles applicables aux éléments de texte : l’un pour du texte vert sur fond sombre et l’autre pour du texte vert sur fond blanc. Le script devait donc désormais vérifier deux styles supplémentaires, et appliquer deux spans stylisés selon que le texte se trouve sur un fond clair ou sombre. Pour aider le script à repérer le texte sur fond blanc, nous avons ajouté le style .text-is-on-white, et pour le texte sur fond sombre, celui nommé .text-is-on-dark.

Pour le texte sur fond blanc, nous avons créé un nouveau style de vert plus foncé : .text-color-green-on-white

Nous le savons, nous devons vraiment mieux nommer nos styles.

Quoi qu’il en soit, le code devait être mis à jour pour tout parcourir et ajouter aussi le nouveau span. Voici donc le nouveau code :

Ce code remplace simplement le précédent, avant la balise </body>. Et voilà : un peu de code supplémentaire pour vous donner une idée de ce qu’il est possible de faire lorsque les choses se compliquent.

Masquer le texte si la page affiche %% au chargement

Enfin, si votre page est volumineuse ou chargée, vous remarquerez peut-être que le marqueur %% clignote avant d’être remplacé au chargement du script. Une solution simple consiste à ajouter une classe qui masque le texte jusqu’à l’exécution du script, puis à rendre le texte visible.

Vous devrez ajouter le nouveau style dans le <head>, puis appliquer la classe aux éléments que vous voulez masquer puis afficher (dans notre cas, il s’agissait des h1, h2 et .services-hero_h1), puis mettre à jour votre script avec la partie qui réaffiche le texte.

Questions fréquentes sur les spans de texte dans Webflow

Comment ajouter un span à du texte CMS dans Webflow ?

Webflow ne permet pas d’entourer une partie d’un élément de texte dynamique d’un span dans le Designer. La solution de contournement consiste à placer un marqueur (nous utilisons %%) autour des mots dans le champ CMS, puis à ajouter un petit script qui trouve le marqueur et entoure ces mots d’un span portant votre classe de style.

Pourquoi ne vois-je pas le span dans le Designer ?

Le span est ajouté dans le navigateur par le script : dans le Designer et l’Editor, vous ne voyez donc que les marqueurs %%. Le texte stylisé apparaît une fois le site publié et le code exécuté.

Puis-je utiliser un autre marqueur que %% ?

Oui. Le marqueur est défini dans le script : modifiez-le à cet endroit et utilisez les mêmes caractères dans vos champs CMS. Nous avons gardé %% parce que cela nous a bien convenu.

Pourquoi le %% clignote-t-il avant que le texte change ?

Le script s’exécute après le chargement de la page : sur une page volumineuse ou chargée, le marqueur peut donc s’afficher un instant. Masquez le texte avec une classe jusqu’à l’exécution du script, comme décrit plus haut dans la section sur le masquage du texte.

Si vous cherchez d’autres astuces CMS, jetez un œil aux dégradés d’arrière-plan pilotés par le CMS, à un bandeau défilant natif piloté par le CMS, à la manière de sortir de la grille CMS avec flexbox et à la création d’un résumé d’article sans champ de résumé. Vous trouverez d’autres réalisations gratuites sur notre page Webflow cloneables.

Ce guide devrait vous aider à mettre en place une fonctionnalité longtemps espérée. Si vous avez des questions, n’hésitez pas à les laisser dans les commentaires. Nous pourrions aussi créer un tutoriel vidéo, alors restez à l’écoute ! Vous pouvez récupérer le Cloneable Webflow ici pour voir comment il est mis en œuvre. Si vous aimez les tutoriels, jetez un œil à la section dédiée du blog.