Changer la taille et la couleur du texte.

Agrandissez une phrase d’accroche, mettez une citation aux couleurs de votre marque, ou passez un titre en blanc sur une photo sombre. Avec Font size et Font color dans le panneau Style, vous changez tout le texte d’un élément. Pour une partie d’un texte, utilisez plutôt la barre d’outils de l’éditeur de texte. Pour des tailles et couleurs partagées par toutes les pages, utilisez votre thème.

La vidéo suit la recette ci-dessous : elle transforme une phrase en accroche avec une taille plus grande et une couleur de marque.

Avant de commencer

• Ouvrez la page dans DXPR Builder ; pointer vers un élément affiche sa barre de contrôle avec Plus. Nouveau dans le constructeur ? Voir Votre première page.
• Enregistrer dans la boîte de dialogue garde un changement dans l’éditeur. Enregistrer sur la barre d’outils du constructeur au-dessus de votre contenu stocke la page et affiche « Saved field ».
• Utilisez le panneau Style pour un élément : un paragraphe d’accroche, une citation, un titre sur une photo.
• Utilisez l’éditeur de texte pour une partie d’un texte et pour la structure. Faites d’un titre un vrai titre avec Heading 2 ou Heading 3, pas une ligne Normal plus grande. Les lecteurs d’écran et les moteurs de recherche lisent le niveau, pas la taille.
• Utilisez la liste Styles de l’éditeur pour les styles de texte de marque. Votre webmestre les définit sous General Settings > Text Editor > Custom styles (/admin/dxpr_studio/dxpr_builder/settings).
• Utilisez votre thème pour la police du corps, les tailles de titres et les couleurs de liens.

Recette : une phrase d’accroche aux couleurs de votre marque

1. Ajoutez un élément Text et saisissez une ou deux phrases comme texte Normal.
2. Survolez-le, cliquez sur Plus, puis sur Paramètres.
3. Ouvrez le panneau Style et glissez Font size sur 20. Le texte grandit pendant le glissement.
4. Ouvrez Font color et choisissez votre couleur de marque dans les nuanciers, ou saisissez son code, par exemple #1a4d8f, dans le champ de couleur.
5. Cliquez sur Enregistrer dans la boîte de dialogue. À 20 px, la phrase compte comme du texte normal, il lui faut donc un contraste de 4,5 pour 1. Saisissez votre code couleur et la couleur d’arrière-plan dans un vérificateur de contraste ; une page blanche vaut #ffffff.
6. Cliquez sur Enregistrer sur la barre d’outils.

Ce que vous voyez

La phrase grandit à 20 px et prend votre couleur de marque. Les titres et liens dans le même élément de texte prennent aussi cette couleur, mais les titres gardent leur taille.

Comment les paramètres marchent

Taille de police

Font size va de 0 à 100 px, et 0 garde la taille de votre thème. La valeur est la même sur toutes les tailles d’écran : une ligne de 48 px sur un bureau fait 48 px sur un téléphone aussi.

La taille va sur l’élément, et le texte qui a sa propre taille la garde. Les titres l’ont d’habitude, car Bootstrap les taille depuis la taille de base de la page. Le texte taillé avec l’outil de taille de police de l’éditeur garde aussi sa taille.

Couleur de police

Le sélecteur montre la palette de votre thème en nuanciers, quand votre site en a une. Il a aussi un curseur d’opacité et un champ où saisir un code couleur, par exemple #1a4d8f. Clear dans le sélecteur rend le texte à la couleur du thème.

Sur un élément de contenu comme Text, Card ou Alert, la couleur atteint tout à l’intérieur, titres et liens inclus. Sur une Section, elle n’atteint que le texte sans couleur propre. Les titres et liens colorés par votre thème gardent leur couleur là.

Les classes de couleur Bootstrap sont marquées !important, elles battent donc Font color. Un exemple est la pastille Primary text color sous HTML classes. Un autre est un style d’éditeur comme Primary Brand Text sur une partie du texte.

Sur un Bouton, la couleur va sur le bouton lui-même et remplace la couleur de survol du thème. Réglez aussi Font color dans Hover style.

Survol

Le panneau Hover style a ses propres Font color et Font size. Une taille plus grande au survol pousse le contenu autour, un changement de couleur est donc d’habitude le choix plus calme.

Contraste

Pour un texte que la plupart peuvent lire, les règles WCAG 2 au niveau AA demandent ce contraste :

Sur une photo, mesurez contre la partie la plus claire derrière le texte. Testez votre paire de couleurs avec un vérificateur de contraste, comme le vérificateur de contraste WebAIM.

Si rien ne s’affiche

• Le titre dans le texte n’a pas grandi. Le titre a sa propre taille depuis votre thème. Choisissez un autre niveau de titre dans l’éditeur de texte, ou utilisez son outil de taille de police.
• Liens et titres gardent leur couleur. Sur une Section, le texte avec sa propre couleur de thème la garde. Réglez plutôt Font color sur l’élément de texte.
• Font color ne fait rien du tout. Une classe de couleur comme Primary text color ou White text sous HTML classes gagne. Retirez sa pastille.
• Une partie du texte garde une autre couleur. Un style d’éditeur sur cette partie, comme Primary Brand Text, gagne. Retirez le style dans l’éditeur de texte.
• Font size ne fait rien sur un compteur. Les compteurs circulaires et de nombres ont leur propre Font size. Utilisez celui-là.
• Une couleur de nuancier ne correspond plus à la marque. Un nuancier copie la couleur quand vous le choisissez. Après un changement de palette, choisissez de nouveau le nuancier.
• La couleur de marque échoue au contrôle de contraste. Choisissez-en une nuance plus sombre. Ou faites le texte d’au moins 24 px, pour que la cible de 3 pour 1 s’applique.
• Le texte est dur à lire sur une photo. Le contraste est trop faible. Assombrissez la photo avec un dégradé, comme montré sur la page Arrière-plans.
• Le bouton a perdu sa couleur de texte au survol. Votre Font color remplace la couleur de survol du thème. Réglez aussi Font color dans Hover style.

Et ensuite ?

• ID et classes HTML : réutilisez un style de texte via une classe au lieu de le définir sur chaque élément.