Elementor – La typographie

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, qui s’appliquent à des éléments HTML et les formatent au niveau typographique, leur donnent des marges, des couleurs, etc.

Ainsi, on a par exemple en HTML une balise

< p > (sans les espaces)

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, correspond à 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.

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.

Il n’est pas recommandé de définir la taille d’un texte en pixels, car elle ne pourra pas s’adapter à la taille de l’écran. Il vaut mieux la définir en em ou en rem.

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 : Le 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.

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.

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.