Elementor – La typographie

Visiter le site d’Elementor

Le CSS pour tous

Commençons d’abord par rappeler qu’Elementor ne fait que rendre facile l’utilisation d’un code informatique utilisé sur tout le web depuis 1995 : CSS.

Ce langage consiste en une série d’instructions, écrites dans un fichier en .css, qui s’appliquent à des éléments HTML et les formatent au niveau typographique, leur donnent des tailles, des marges, des couleurs, etc.

Ainsi, on a par exemple en HTML une balise

<p>

qui déclare un paragraphe de texte.

En CSS, on peut dire que l’élément paragraphe sera stylé ainsi :

• la taille de la police de caractère sera de 18 pixels,
• l’épaisseur des lettres sera de 700, correspondand à du « gras »,
• le texte sera bleu,
• et aura une marge en bas de 6 pixels.

On écrirait donc ceci en CSS :

p {
font-size:18px;
font-weight:700;
color:blue;
margin-bottom:6px;
}

Avec Elementor, on peut ainsi définir de nombreux paramètres CSS (mais pas tous) sans avoir à taper du code.

N’empêche que, quand on connait déjà le CSS, on comprend tout de suite comment fonctionne le formatage typographique d’Elementor ; sinon, ça prend un peu plus de temps.

Mais vous aimez apprendre, pas vrai ?

La typographie sous Elementor

La typographie sous Elementor peut se régler depuis de nombreux endroits et de nombreuses manières.

Il faut distinguer les réglages généraux des réglages particuliers qu’on peut faire élément par élément, widget par widget.

Les réglages de site

Une partie de l’éditeur visuel d’Elementor permet de faire des réglages généraux qui s’appliqueront à l’échelle de tout un site : les polices de caractères, les titres, les paragraphes, etc.

Si besoin, reportez-vous à l’article sur ces réglages de site.

Les widgets

Les réglages typographiques des widgets

De nombreux widgets Elementor comportent des réglages typographiques, notamment :

• le widget Editeur de texte
• le widget Titre
• le widget Bouton
• etc

Pour accéder aux réglages typographiques d’un widget, il faut d’abord cliquer dessus – cela fait apparaitre les options dans la colonne de gauche de l’éditeur visuel – puis cliquer dans le 2è onglet en haut de la colonne : Style.

On a alors accès aux options :

Alignement du texte (text-align)

On peut d’abord définir l’alignement du texte pour le justifier :

• à gauche
• au milieu
• à droite
• ou justifié (le texte prendra toute la largeur disponible)

Couleur de texte (color)

Pas besoin d’explications : c’est la couleur de la typo, tout simplement.

Notez quand même que vous pouvez choisir entre une couleur globale (icône de gauche), définie dans les réglages du site, et une couleur choisie avec le sélecteur de couleur (icône de droite).

Le choix d’une couleur globale est largement préférable pour garantir la cohérence d’un design. Les avantages des couleurs globales sont :

• vous n’avez qu’à en sélectionner une pour obtenir toujours exactement la même couleur
• le jour où vous décidez d’en changer, vous modifiez telle couleur globale et le changement s’applique instantanément partout où elle est utilisée

A l’inverse, utiliser des couleurs particulières sur chaque élément impliquerait d’aller modifier des centaines de fois la couleur pour changer du bleu en rouge à l’échelle de tout un site. Pénible !

Typographie

Vous avez deux icônes pour gérer la typographie sous Elementor :

• la première, à gauche, vous permet de choisir un style typographique défini dans les réglages de site ; là aussi, c’est préférable pour garder un design cohérent
• la deuxième, à droite, permet de choisir tous les paramètres typographiques, mais ils ne s’appliqueront qu’à l’élément que vous êtes en train d’éditer

Taille du texte (font-size)

On gère ensuite la taille du texte, en 4 unités : px, em, rem, vw.

Si vous ne savez pas bien ce que cela signifie, SVP veuillez lire cet article sur les unités d’Elementor.

Un texte a d’abord vocation à être lisible, mais aussi à exprimer l’importance et la hiérarchie entre les titres et les textes. Choisissez donc vos tailles de texte en conséquence.

Graisse du texte (font-weight)

On a ensuite la graisse, c’est à dire l’épaisseur des traits et courbes qui composent les lettres :

• 400 est la valeur par défaut
• 100 fera du texte très fin
• 700 correspond à du texte gras
• 900 sera très gras

Transformation du texte (text-transform)

Ce réglage propose les options suivantes :

• Par défaut : on garde le paramètre défini dans les réglages de site, ou sinon le réglage par défaut
• Majuscule : chaque mot du texte commencera par une majuscule
• Minuscule : le texte sera tout en minuscules, même en début de phrase
• Capitaliser : Le Texte Prendra Des Majuscules A Chaque Mot
• Normal : le texte sera normal, avec une majuscule en début de phrase et des minuscules ensuite

Style (font-style)

Les options de font-style d’Elementor sont :

• Par défaut : on garde le style défini en général, ou le style par défaut du navigateur
• Normal
• Italique : le texte est penché vers l’avant ; on l’utilise souvent pour mettre en forme une citation ou du texte rapporté au discours indirect
• Oblique : en réalité cette option équivaut à l’italique

Décoration (text-decoration)

Ces options sont évidentes :

• Par défaut
• Souligné
• Surligné
• Ligne en travers (qu’on appelle aussi texte barré)
• Aucun

Hauteur de ligne (line-height)

La hauteur de ligne désigne la taille de la ligne de texte, définie indépendamment de la taille du texte lui-même. Elle peut lui être inférieure ou supérieure.

Une valeur normale serait de mettre la taille du texte en 1em, et la hauteur de ligne entre 1.3em et 1.8em.

On obtient du texte très aéré en mettant un texte à 1em avec 2em ou plus de hauteur de ligne.

On obtient du texte très compact en mettant un texte à 1em avec une hauteur de ligne de 1em ou moins. A moins d’1em, les caractères commenceront à se superposer. Cela peut servir à faire un bel effet sur des titres, mais sur des paragraphes ce choix rendrait le texte illisible.

Exemples :

Voici un exemple de texte avec une hauteur de ligne de 0.9rem. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Voici un exemple de texte avec une hauteur de ligne de 2rem. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Espacement des lettres (letter-spacing)

Ce réglage permet de condenser ou d’aérer le texte. A utiliser avec prudence vu que les polices de caractères sont conçues pour être lisibles telles quelles.

Exemples :

Phrase avec letter-spacing: -1px. 

Phrase avec letter-spacing: 10px.

Espacement des mots (word-spacing)

Ce réglage sert rarement. On l’utilisera à la limite pour condenser des titres.

Le formatage typographique en mode prévisualisation

La colonne de droite de l’éditeur visuel d’Elementor permet de prévisualiser la page qu’on est en train d’éditer : il est possible d’y éditer le texte directement, même si les réglages possibles sont alors très limités.

Il suffit de cliquer directement sur un mot, ou de sélectionner un bout de texte, pour qu’une petite barre de menu contextuel apparaisse.

Elle permet de mettre un texte en gras, souligné ou italique, ou de le convertir en titre, en lien, en citation ou en liste.

Conseils, trucs et astuces typographiques

Il faut utiliser la typographie pour améliorer la lisibilité d’une page web

La typographie est un outil à mettre au service de la lisibilité avant tout, et de l’esthétique dans un second temps.

Imaginez que cette page web soit écrite à 100% dans le même style de texte que ce paragraphe, sans titres, sans listes à puces, sans texte en gras etc. On n’y verrait plus aucune hiérarchie.

Pour rendre ma page plus lisible, j’ai fait des choix typographiques :

• mes titres H2 sont en majuscules, dans une typo compacte, en une taille qui fait deux fois la taille des paragraphes, et dans une épaisseur moyenne : cela vous permet d’identifier clairement les grandes parties du texte
• mes titres H3 sont en minuscules, dans une typo compacte, en une taille plus petite que les H2 mais plus grande que les paragraphes, etc : cela fait comprendre le statut de ces titres et permet une lecture de type « butinage »
• mes paragraphes sont dans une typo très lisible, ni trop grande ni trop petite, et mis en forme avec du gras pour souligner les termes importants ; une marge inférieure sépare les paragraphes
• etc etc

 Grâce à ces choix, ma page est plus lisible que sans formatage.

Comment créer une lettrine

Pour créer une lettrine avec Elementor, il faut :

• créer un élément Editeur de texte
• dans l’onglet Contenu, activer l’option Lettrine
• cela crée une lettrine par défaut, sur 2 lignes ( = la lettre initiale est agrandie à l’échelle de 2 lignes)
• ensuite on peut aller personnaliser des options dans l’onglet Style > Lettrine

Voici un exemple :