Tutoriel : Ajouter des contours de texte à vos projets Webflow

Tutoriel
3 min
Publié le Apr 25, 2023
Dernière mise à jour le
Text avec une stroke jaune sur Webflow
Résumez cet article avec une IA
Points clés de l'article

Dans ce tutoriel, vous apprendrez comment appliquer la nouvelle fonctionnalité Webflow qui vous permet d'ajouter un contour de texte (stroke) sur vos textes Webflow.

Comment ajouter des "border" sur un text Webflow

Étape 1 : Comment ajouter un contour de texte

Pour ajouter un contour de texte à un élément de texte (comme un bloc de texte - text bloc - , un paragraphe ou un titre - heading - ) il vous suffit de suivre ces étapes :

  1. Sélectionnez l'élément de texte (ou sa classe CSS) ou l'élément parent contenant plusieurs éléments de texte sur votre navigator.
  2. Accédez au panneau de Style : Style panel > Typography > More type options
  3. Ajustez la largeur (px) et la couleur du contour dans la section Stroke.
Interface Webflow qui montre comment ajouter une stroke et une couleur à un texte
En 2 clics.

Le contour de texte apparaîtra sur le texte de l'élément sélectionné. Notez que la couleur du contour est automatiquement définie comme la couleur de la police si elle n'a pas été définie sur un point d'arrêt supérieur.

Étape 2:  Modifier le contour de texte sur différents responsives

Si vous souhaitez que le contour de texte apparaisse différemment selon la taille de l'écran (desktop, tablette, mobile), vous pouvez modifier le style (CSS) du contour de texte sur différents points d'arrêt.

Interface Webflow qui montre comment ajouter une stroke et une couleur à un texte sur un responsive tablette.

Conclusion :

Avec cette nouvelle fonctionnalité de Webflow, vous pouvez désormais ajouter des contours de texte à vos projets pour un rendu visuel plus attrayant et dynamique. N'hésitez pas à expérimenter avec différentes couleurs et largeurs pour trouver le style qui convient le mieux à votre design.

Retrouvez d'autres astuces et tutoriels sur le blog de l'agence Webflow Digidop pour optimiser vos projets et développer vos compétences sur l'outil no-code révolutionnaire, Webflow.

Florian Bodelot
Florian Bodelot
Co-fondateur

Articles qui devraient vous intéresser

Illustration futuriste avec une porte ouverte éclairée en bleu et le texte “CRO 2025”, symbolisant les opportunités d’optimisation de la conversion à venir.
Documentation
Design

Le guide complet du CRO en 2025 : méthodes, outils et leviers pour booster vos conversions

Le guide complet du CRO en 2025 : méthodes, outils et leviers pour booster vos conversions
Conférence AI Tech Summit 2025 avec un conférencier sur scène devant un large public, entouré de grands écrans diffusant « AI » et « Tech Summit 2025 ». (Génération par IA)
Evénements

Calendrier 2025 des événements Web, Design, IA à ne pas manquer pour la rentrée

Calendrier 2025 des événements Web, Design, IA à ne pas manquer pour la rentrée
Capture d'écran de la page d'accueil de la recherche Google avec la barre de recherche et le logo Google.
Documentation
SEO

3 outils pour suivre vos positions SEO dans la SERP

3 outils pour suivre vos positions SEO dans la SERP

Transformez votre site web en un moteur de croissance.

Nous contacter