Éditeur Studio : Travailler avec la typographie du site

Temps de lecture : 5 min
Assurez-vous que votre design est cohérent sur le site de votre client en configurant la typographie du site. Cette zone du panneau Styles du site est divisée en Polices et Styles de texte, que vous pouvez personnaliser individuellement pour les adapter à l'aspect que vous souhaitez obtenir.
Dans cet article, découvrez :

Polices et styles de texte

La section Polices affiche toutes les polices que vous utilisez dans les styles de texte du site. Lorsque vous modifiez une police dans la section Polices, tous les styles de texte qui utilisaient l'ancienne police sont automatiquement mis à jour. 
Les styles de texte font référence aux types de texte individuels utilisés sur le site (ex. Titre 2, Paragraphe 1). 
L'onglet typographie dans le panneau Styles du site, affichant la section Polices et styles de texte, survolant une police pour la mettre à jour
Suggestion :
H1 à H6 sont des balises d'en-tête qui sont automatiquement attribués à ces titres. Conserver la hiérarchie du haut vers le bas de vos titres, conformément aux balises titre, améliore à la fois le référencement et l'accessibilité. 

Mettre à jour la typographie du site

Réorganisez votre design en mettant à jour la typographie sur le site de votre client. Vous pouvez modifier les polices du site ou ajuster l'apparence des 9 styles de texte individuels (6 titres, 3 paragraphes).   

Pour mettre à jour la typographie :

  1. Cliquez sur Styles de site  à gauche de l'Éditeur.
  2. Cliquez sur l'onglet typographie.
  3. Choisissez ce que vous souhaitez personnaliser : une police ou un style de texte :
    • Police :
      1. Cliquez sur la police que vous souhaitez mettre à jour sous Polices.
      2. Sélectionnez une nouvelle police dans le menu déroulant.
      3. Cliquez sur Mettre à jour pour appliquer la nouvelle police.
    • Style du texte :
      1. Cliquez sur le style de texte que vous souhaitez mettre à jour sous Styles de texte.
      2. Personnalisez le style du texte comme vous le souhaitez :
        • Sélectionnez une nouvelle police dans la liste déroulante.
        • Sélectionnez la taille de la police.
        • Mettez le texte à l'échelle proportionnellement pour qu'il soit idéal sur toutes les tailles d'écran et définissez la taille maximale et minimale en px (pixels).
        • Mettez le texte en gras et/ou italique.
        • Configurez l'espacement des lignes et des caractères.
        • Sélectionnez la couleur du texte.
      3. Revenez au panneau principal en cliquant sur l'icône Flèche  en haut à gauche.
Les options Modifier le texte ont été ouvertes pour le titre 6 dans le panneau Styles du site. Le curseur active le bouton Texte à l'échelle.

Appliquer des styles de texte à une page

Une fois que vous avez défini la typographie du site de votre client, vous pouvez facilement ajouter des éléments de texte avec les polices et les styles de texte pertinents. 
Accédez au panneau Ajouter des éléments pour ajouter des titres et des paragraphes assortis. Cliquez sur Texte et faites glisser le style correspondant sous Thèmes de texte à l'emplacement souhaité. 
Les éléments assortis sont connectés à la typographie du site, ils seront donc mis à jour automatiquement si vous apportez des modifications au panneau Styles du site.
Capture d'écran des thèmes de texte disponibles dans le panneau Ajouter des éléments. Le sous-titre du texte du thème est mis en surbrillance.

Appliquer un style à un élément de texte

Vous pouvez également appliquer un style sur un élément de texte existant sur la page. Cliquez sur Modifier le texte sur l'élément et sélectionnez le style de votre choix dans le menu déroulant dans l'Inspecteur.
Cela connecte l'élément au style de texte choisi, ce qui signifie qu'il sera mis à jour automatiquement si vous y apportez des modifications dans le panneau Styles du site.
Capture d'écran rognée de la section Design dans l'inspecteur. Le menu déroulant style est mis en surbrillance.

Remplacer les styles de texte

Si vous modifiez le design d'un élément de texte après avoir sélectionné un style (thème) pour celui-ci, vous créez un « remplacement de design ». Cela signifie que les mises à jour du style choisi ne s'appliquent pas à cet élément de texte. 
Vous pouvez réinitialiser les éléments de texte avec des remplacements dans leur style d'origine. Cliquez sur le menu déroulant Style et sélectionnez Réinitialiser les modifications.
Vous pouvez également sélectionner Mettre à jour les styles pour appliquer les remplacements que vous avez effectués au style du texte réel. Cela mettra également à jour chaque élément de texte avec ce style sur le site de votre client.
L'onglet Design du texte dans l'inspecteur. Le curseur survole l'option Réinitialiser les modifications dans le menu Style.