Après 20 années consacrées à l’enseignement en collèges et lycées, Estelle Dabrinville a entamé une reconversion professionnelle. Pour cela elle suit un DEUST WMI au Campus Virtuel de l’Université de Limoges. Dans le cadre de sa formation, je l’ai accueillie pour un stage pratique d’un mois. L’une des ses missions a consisté à écrire l’article que voici.
Cyrille Sanson
Régler les polices sous WordPress avec Elementor peut être un vrai casse-tête. Polices personnalisées, globales, paramètres de typographie dans les réglages du site ou pour chaque élément : difficile de s’y retrouver !
Alors comment savoir où paramétrer les polices de votre site ? Dans un excellent tuto vidéo [en] Rino explique tout : voici les 5 points clés qu’il faut retenir !
- Distinguer ce que l’utilisateur voit et ce que les moteurs de recherche voient
- Comprendre et paramétrer les polices globales
- Créer des titres personnalisés dans les polices globales
- Choisir la bonne unité pour ses polices
- Importer vos polices
#1 – Distinguer ce que l’utilisateur voit et ce que les moteurs de recherche voient
Lorsque les robots des moteurs de recherche scannent votre site ils accordent de l’importance à vos titres. En effet ils vont s’arrêter tout particulièrement sur vos titres associés à la balise H1. Il est donc essentiel de bien choisir ce titre que vous souhaitez que les robots lisent.
Comment choisir un titre H1 pertinent ?
Le titre qu’il vous faut associer à la balise H1 doit être réfléchi en termes de requêtes d’internaute. Demandez-vous : « Que cherche l’internaute et que va-t-il demander à Google (par exemple) pour trouver ma page ? ».
En d’autres termes : votre titre H1 doit conduire l’internaute sur votre page.
Quelle taille choisir pour mon titre H1 ?
La longueur d’un titre H1 est importante pour les robots de Google qui scannent vos pages. Il est recommandé de ne pas dépasser 100 caractères et idéalement 6 à 8 mots. Si la longueur ne doit pas être négligée, visuellement la taille de votre titre H1 n’a absolument aucune importance pour les moteurs de recherche. Et, une fois votre lecteur sur votre page, ce titre associé à la balise HTML H1 aura, à ses yeux, moins d’importance.
En clair : vous pouvez choisir de mettre en avant un autre titre qui sera associé à une balise HTML H2 et d’une taille plus grande que votre H1. La preuve en images :
#2 – Comprendre et paramétrer les polices globales :
Vous cherchez où effectuer le réglage de vos différents titres ? Rendez-vous dans les réglages de votre site sous Elementor. Depuis le tableau de bord d’Elementor, allez sur le menu en haut à gauche puis dans réglages sélectionnez « réglages du site ».
Deux endroits sont à distinguer : les polices globales dans le système de conception et l’onglet typographie dans les styles du thème.
Les polices globales vont vous permettre de définir la taille, la graisse et la famille de police que vous utiliserez pour vos différents titres et sous titres. L’onglet typographie regroupe les balises html associables. Ici on peut les paramétrer mais, vous l’aurez compris, les robots des moteurs ne prenant pas la taille en compte cela présente peu d’intérêt.
A quoi servent les polices globales ?
Sous Elementor vous avez la possibilité de régler la typographie sur chaque élément en cliquant sur le crayon comme sur cet exemple de titre :
En cliquant sur le globe, en revanche, vous accédez aux polices globales. L’utilisation de polices globales est à privilégier. En effet, modifier localement vos tailles, graisses et styles en fonction des éléments rendrait fastidieuses les modifications.
Il faudrait rechercher si le réglage a été fait sur le conteneur, sur l’élément, sur le modèle de page… Inversement, à l’instar de feuilles de styles CSS externes, les polices globales vous permettent de modifier d’un coup le visuel de tous vos titres et textes.
Comment effectuer les réglages dans les sous-menus de l’onglet polices globales ?
Dans un tuto vidéo Pierre Carbonnel explique de manière détaillée ces polices globales. Voici ce que nous pouvons retenir afin de les utiliser correctement.
En cliquant sur « polices globales » deux menus apparaissent. L’un vous permet de définir les paramètres de police par défaut. Il s’agit du menu « polices système » découpé en 4 parties.
- Primaire : permet de définir la police des titres.
- Secondaire : permet de définir la police des sous titres.
- Texte : concerne tout ce qui est contenu de paragraphes.
- Accentué : permet de définir les liens.
Afin de ne pas interférer avec les réglages que vous ferez ensuite sur vos titres assurez-vous que tout est « par défaut » à l’exception de la police « texte » que vous pouvez régler comme vous le souhaitez.
#3 – Créer des titres personnalisés dans les polices globales
Un sous-menu est accessible dans les polices globales. Il s’intitule « polices personnalisées ». C’est ici que vous allez créer le nombre de titres que vous souhaitez utiliser et définir dans le même temps les tailles de ces titres. Et, contrairement au nombre de balises titre HTML, vous n’êtes pas limités à 6 ! Vous pouvez créer autant de titres que nécessaire. Vous avez la possibilité aussi d’ajouter une police texte légèrement plus petite et une légèrement plus grosse que celle paramétrée via le menu police système. Ainsi votre mise en forme sera ultra personnalisée.
#4 – Choisir les bonnes unités de taille pour vos titres ?
Lorsque vous voulez régler la taille de votre police vous avez le choix entre :
- px : taille en pixels
- em et % : deux unités de taille relatives à la taille de police donnée à l’élément parent
- rem : une taille relative au Root-element. Il s’agit de la taille de police du document HTML racine affiché par le navigateur. Par défaut les navigateurs affichent les pages en 16 pixels (px).
- vw : une taille de police relative à la surface d‘’’affichage à l’écran (« viewport width »)
- le crayon : une taille que vous définissez vous même avec la possibilité de combiner deux unités
Préférez les valeurs relatives !
D’une manière générale, il vaut mieux privilégier les valeurs en em (taille relative par rapport à l’élément parent), rem (ou « root-em » qui fait référence à une unité relative par rapport à la valeur « racine » du navigateur) ou viewport width (taille relative à la largeur de l’écran).
Elles offrent une flexibilité intéressante : elles sont extensibles et facile à manipuler. Pour une utilisation sur du web l’utilisation des « rem » semble toute indiquée puisque la page s’adaptera ainsi aux réglages faits par l’utilisateur dans son navigateur.
Privilégiez les « rem » pour l’accessibilité :
Les « rem » sont particulièrement recommandées pour des raisons d’accessibilité. Par défaut, Firefox, comme la plupart des navigateurs, affiche les textes en 16px. L’utilisateur ayant besoin d’afficher les textes en plus gros peut modifier ce paramètre.
Si, lors de la conception de votre site, vous réglez vos polices en pixels, ces réglages personnalisés seront sans effet. Le navigateur ne saura interpréter des valeurs saisies en pixels. Un utilisateur qui aura réglé son navigateur pour que l’affichage soit plus grand par défaut, ne verra donc aucun changement. En revanche, exprimée en « rem » vos valeurs seront parfaitement interprétables par le navigateur qui adaptera les tailles personnalisées.
Combinez l’accessibilité des « rem » et le responsive qu’offre les valeurs « view width »
Dans son tuto vidéo Rino partage ses calculs et permet de tirer le meilleur de ces deux unités de taille et paramétrer des polices flexibles.
Je vous invite à consulter les valeurs « clampées » (de l’anglais « clamp », la « pince ») pour les différentes tailles de titre sur son site.
Personnellement je les adapte à mes besoins mais la base est intéressante et très pratique. Vous pouvez calculer vos propres tailles de polices flexibles : je vous recommande font-clamp generator qui est très simple d’utilisation.
#5 – Importer vos polices via le menu Polices personnalisées dans WordPress
Dans Elementor le menu déroulant des typographies vous donne accès aux polices Elementor par défaut. Mais pas seulement : toutes les polices Google Fonts sont accessibles via ce menu déroulant.
Conséquences ? L’accès distant d’Elementor au serveur des polices peut ralentir votre site. C’est là que l’onglet « polices personnalisées » du menu Elementor de WordPress intervient ! Une fois que vous avez choisi les Google Fonts qui vous intéressent rendez-vous sur Google Webfonts Helper pour les télécharger.
La marche à suivre est simple :
- Choisissez les polices dans le menu de gauche de Google Webfonts Helper puis sélectionnez les différentes graisses et styles que vous souhaitez importer. Il ne vous reste plus qu’à télécharger l’archive générée.
- Rendez-vous dans le menu « Réglages » d’Elementor puis « général » et vérifiez que la case « Désactivez les polices par défaut d’Elementor » est décochée. Ainsi on évite des conflits entre polices du thème et polices chargées sous Elementor.
- Désactivez les polices Google Fonts en vous rendant sur ans l’onglet « Avancé » des réglages d’Elementor.
- Ajoutez les polices : importez-les depuis votre ordinateur en vous rendant sur l’onglet « Polices personnalisées » du menu Elementor depuis le tableau de bord WordPress.
Il ne vous reste plus qu’à tester !
Complexe à première vue, la gestion des polices sous Elementor devrait désormais être plus claire ! L’important est de bien laisser les polices globales par défaut (sauf pour le texte). Ensuite, il faut créer vos titres personnalisés et les relier à la balise HTML qui vous paraît la plus pertinente pour les moteurs de recherche.
Enfin, pour gagner en efficacité désactiver les polices Google Fonts et importer uniquement les polices utiles pour notre site.
