Ce didacticiel vous guidera tout au long du processus de création d'étendues de texte dans des éléments de texte dynamiques de Webflow à l'aide d'un code personnalisé et d'un marqueur dans le champ Webflow CMS.
Création de étendues de texte dans des éléments de texte CMS dynamiques dans Webflow
Il s'agit d'une fonctionnalité que de nombreux utilisateurs de Webflow attendaient depuis. Les listes de collections ont été introduites dans Webflow. Y parvenir sans codage est quasiment impossible à moins d'assembler une multitude de champs, ce qui ne fonctionne efficacement que pour les titres (les champs de texte enrichi sont généralement omis) et manque de flexibilité.
Dans ce cas, nous utiliserons une petite quantité de code personnalisé et un marqueur que vous pourrez placer dans les champs de votre CMS, dans le Designer ou l'Éditeur, avant et après le texte pour lequel vous avez besoin du span. En tant que petit Flux Web studio, Milk Moon Studio est composé de concepteurs Webflow qui préfèrent les solutions low-code lorsque les options sans code ne sont pas disponibles. Vous n'avez certainement pas besoin d'être Expert Webflow pour cela, il s'agit essentiellement d'un travail de copier-coller. Nous avons également créé un Webflow cloneable pratique que vous pourrez récupérer à la fin de l'article.
Pour notre cas d'utilisation, nous voulions simplement modifier la couleur du texte et le rendre extrêmement facile à gérer pour le client en ajoutant simplement un marqueur au CMS. Quoi qu'il en soit, dans un premier temps, nous aborderons des cas d'utilisation plus complexes plus tard.
Création des styles
Nous avons commencé par créer le style de texte à utiliser dans le span. Dans ce cas, nous avons choisi une couleur de texte verte et l'avons appelée text-color-green. N'oubliez pas de respecter les règles d'empilement des styles CSS et de ne redéfinir que ce que vous souhaitez appliquer au span.
Intégrer jQuery
Ensuite, vous devrez ajouter ce script au <!-- fs-richtext-ignore --><head>code du projet.
<iframe height="300" style="width: 100%;" scrolling="no" title="Adds jquery to create text spans on CMS pages" src="https://codepen.io/milkmoonstudio/embed/yLxxzKV?default-tab=html&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
Voir le stylo <a href="https://codepen.io/milkmoonstudio/pen/yLxxzKV">
</a><a href="https://codepen.io/milkmoonstudio">Ajoute jquery pour créer des étendues de texte sur les pages du CMS par Jakes van Eeden (@milkmoonstudio)</a>
sur <a href="https://codepen.io">CodePen</a>.
</iframe>
Ajouter un code personnalisé à la page
L'étape suivante consiste à ajouter le script personnalisé aux pages nécessitant les spans du CMS. Cela doit être ajouté à la section « Avant</body> la <!-- fs-richtext-ignore --> balise », car le texte doit être chargé avant l'exécution du script.
<iframe height="300" style="width: 100%;" scrolling="no" title="Add Text Span to CMS Text Elements (h1, h2, .services-hero_h1)" src="https://codepen.io/milkmoonstudio/embed/PoddJeM?default-tab=html&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
Voir le stylo <a href="https://codepen.io/milkmoonstudio/pen/PoddJeM">
</a><a href="https://codepen.io/milkmoonstudio">Ajouter une étendue de texte aux éléments de texte du CMS (h1, h2, .services-hero_h1) par Jakes van Eeden (@milkmoonstudio)</a>
sur <a href="https://codepen.io">CodePen</a>.
</iframe>
Si vous regardez le code, vous verrez que dans mon cas, je voulais que tous les h1 soient tous h2 et que le texte soit stylisé comme <!-- fs-richtext-ignore -->.services-hero_h1. Vous recherchez la ligne 4 :
<!-- fs-richtext-ignore -->en-têtes const = document.querySelectorAll ('h1, h2, .services-hero_h1«) ;
Donc, ici, il vous suffit d'ajouter vos styles ou vos tags.
Marquer le texte dans le CMS
Enfin, ajoutez le marqueur autour du texte dans le CMS. Nous avons utilisé%% comme marqueur. Ce marqueur peut être modifié dans la section de code précédente, mais nous avons constaté que cela fonctionnait bien pour nous.
Bien entendu, vous ne verrez pas le span dans le Designer, mais une fois que vous aurez publié, il fonctionnera parfaitement lorsque le code sera exécuté. Le script recherche les éléments de texte spécifiés, vérifie la présence du marqueur%%, puis ajoute la plage autour du texte à l'intérieur du marqueur.
Marqueur d'étendue de texte dans le concepteur
Webflow CMS Text Span sur le site publié
Deux travées !
Si vous voulez garder les choses simples, c'est à peu près tout. Nous nous sommes toutefois rendu compte que le contraste sur le vert était beaucoup plus clair sur fond blanc. Nous avons donc créé une autre plage avec une nuance de vert plus foncée et ajouté deux styles que nous pourrions appliquer aux éléments de texte, l'un pour le texte vert sur fond foncé et l'autre pour le texte vert sur fond blanc. Nous avions donc deux styles de texte supplémentaires que le script devait vérifier et deux plages de texte stylisées à appliquer si le texte était sur un fond clair ou foncé. Pour aider le script à identifier le texte sur blanc, nous avons ajouté : .text-is-on-white comme style, et pour le texte sur fond foncé, l'application nommée : .text-is-on-dark.
Pour le texte sur blanc, nous avons créé un nouveau style vert plus foncé : .text-color-green-on-white
Nous savons que nous devons vraiment améliorer les styles de dénomination.
Quoi qu'il en soit, le code a dû être mis à jour pour tout parcourir et ajouter également le nouveau span. Voici donc le nouveau code :
Cela vient de remplacer le code précédent avant la</body> balise. Et voilà, du code supplémentaire pour vous donner une idée de ce que vous pouvez faire si les choses deviennent plus complexes.
<iframe height="300" style="width: 100%;" scrolling="no" title="Add Different Text Span to CMS Text Elements" src="https://codepen.io/milkmoonstudio/embed/wvEEPWz?default-tab=html&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
Voir le stylo <a href="https://codepen.io/milkmoonstudio/pen/wvEEPWz">
</a><a href="https://codepen.io/milkmoonstudio">Ajouter une étendue de texte différente aux éléments de texte du CMS par Jakes van Eeden (@milkmoonstudio)</a>
sur <a href="https://codepen.io">CodePen</a>.
</iframe>
Masquer le texte si la page clignote%% au chargement
Enfin, si votre page est grande ou occupée, vous remarquerez peut-être que le marqueur%% clignote puis est remplacé au fur et à mesure du chargement du script. Une solution simple consiste à ajouter une classe qui masque le texte jusqu'à ce que le script s'exécute, puis à rendre le texte visible.
<iframe height="300" style="width: 100%;" scrolling="no" title="Hide CMS Spanned Text Until Loaded" src="https://codepen.io/milkmoonstudio/embed/rNZZYmr?default-tab=css&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
Voir le stylo <a href="https://codepen.io/milkmoonstudio/pen/rNZZYmr">
</a><a href="https://codepen.io/milkmoonstudio">Masquer le texte étendu du CMS jusqu'à ce qu'il soit chargé par Jakes van Eeden (@milkmoonstudio)</a>
sur <a href="https://codepen.io">CodePen</a>.
</iframe>
Vous devrez ajouter le nouveau style dans le<head>, puis appliquer la classe aux éléments que vous souhaitez masquer et afficher (dans notre cas, c'était le <!-- fs-richtext-ignore --> h1, h2 et .services-hero_h1), puis mettez à jour votre script avec le bit qui affiche le texte.
<iframe height="300" style="width: 100%;" scrolling="no" title="Hide CMS Spanned Text Until Loaded" src="https://codepen.io/milkmoonstudio/embed/rNZZYmr?default-tab=html&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
Voir le stylo <a href="https://codepen.io/milkmoonstudio/pen/rNZZYmr">
</a><a href="https://codepen.io/milkmoonstudio">Masquer le texte étendu du CMS jusqu'à ce qu'il soit chargé par Jakes van Eeden (@milkmoonstudio)</a>
sur <a href="https://codepen.io">CodePen</a>.
</iframe>
Ce guide devrait vous aider à implémenter ce qui est depuis longtemps une fonctionnalité recherchée. Si vous avez des questions, n'hésitez pas à les laisser dans les commentaires. Nous pourrions également créer un didacticiel vidéo, alors restez à l'affût ! Tu peux récupérez le Webflow Cloneable ici pour voir comment il est mis en œuvre. Si vous êtes intéressé par d'autres procédures, consultez la section sur le blog.
