Tutoriel : Ajouter des contours de texte à vos projets Webflow

Tutoriel
April 25, 2023
3 min
Text avec une stroke jaune sur Webflow
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

Figma Sites avec bouton publish
News
Développement

Figma annonce Figma Sites. Et pas seulement.

Figma annonce Figma Sites. Et pas seulement.
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

Transformez votre site web en un moteur de croissance.

Nous contacter