Elementor – Les unités : px, %, em, rem, vw, vh

Elementor n’est, en grande partie, qu’une version WYSIWYG (what you see is what you get, ce que vous voyez est ce que vous obtenez) du langage CSS qui sert à formater l’apparence visuelle d’une page construite avec des éléments HTML.

Elementor réutilise donc les unités disponibles en CSS.

Px = pixels

Cette unité parait évidente. On règle la taille en px, c’est-à-dire en pixels, les composants de base d’un écran d’ordinateur, de tablette ou de téléphone mobile ou smartphone.

Le problème : un réglage en pixels est fixe, on parle d’unité absolue, donc pas adaptable, donc pas responsive.

Si vous dites qu’une image doit faire 400px de haut sur 400px de large, elle fera 400 pixels sur tous les écrans : elle pourra donc être trop petite sur ordinateur, et trop grande sur mobile.

Pour pallier ce problème, on dispose des autres unités, les unités relatives.

em = taille du parent element

Elementor permet de définir des réglages de taille pour ses divers éléments : la section, la colonne, le widget (texte, image, titre, etc).

L’unité em consiste à prendre la taille du texte définie pour le « parent » (le conteneur, l’élément qui contient) d’un élément donné comme référence.

C’est donc une unité délicate à utiliser, vu que la taille de l’élément parent varie.

rem = taille du root element

Le root element, élément racine, désigne le document HTML lui-même, la page entière. Il a une taille par défaut de 16 pixels.

Les utilisateurs peuvent paramétrer leur navigateur pour changer cette taille par défaut : des déficients visuels peuvent par exemple la mettre à 20 pixels.

Il est possible que le thème, ou les réglages de l’outil de personnalisation, aient modifié la taille par défaut de l’élément html, en écrivant par exemple :

html {font-size:18px;}

Si le rem vaut 16 pixels, alors :

• 1 rem vaut 16px
• 2 rem valent 32px, etc

Si le rem vaut 20 pixels, alors

• 1 rem vaut 20px
• 2 rem valent 40px, etc

Ainsi, définir les tailles des éléments en fonction du rem permet de garantir la cohérence d’un design, quels que soient les choix de l’utilisateur, bien que le webdesigner ne les connaisse jamais d’avance.

% = relatif à la taille de l’élément parent

Le pourcentage réfère à la taille de l’élément parent.

Donc si ce parent a une taille relative,  alors, en exprimant la taille de l’élément enfant en unité %, on garantit que cet élément va se dimensionner correctement.

Par exemple, si on a une section paramétrée pour mesurer 1200 pixels de large sur ordinateur, une colonne paramétrée pour faire 50% mesurera 600 pixels, c’est à dire 50% de la taille de son parent, 1200px.

vw = viewport width

vw signifie viewport width, c’est à dire largeur de l’écran.

L’unité vw est graduée de 1 à 100.

Donc si l’écran fait 600 pixels de large, 1 vw = 6 px.

Et si l’écran fait 1200 px, 1vw = 12px.

vh = viewport height

vh signifie viewport height, c’est à dire hauteur de l’écran.

L’unité vh est graduée de 1 à 100.

Cette unité est particulièrement utile quand on veut faire qu’une section, une image, un texte, prenne toute la hauteur de l’écran, quelle que soit sa taille. On met alors vh = 100.

Quelle unité utiliser où ?

Les unités sont plus ou moins adaptées à tel ou tel usage.

Voici quelques bonnes pratiques :

Colonnes : en %

Il vaut mieux définir les colonnes en pourcentages, puisqu’elles doivent se répartir harmonieusement et se redimensionner en fonction de la taille de l’élément qui les contient.

Donc par exemple si on veut deux colonnes faisant moitié de l’écran, on définit leur largeur à 50%.

Ainsi, chaque colonne fera 360px si l’écran fait 720px, mais fera 960px si l’écran fait 1920px.

Margin / marge externe : en px, en rem ou en %

Si on définit les marges en pourcentage d’un élément conteneur, elles vont se redimensionner en fonction de la taille de cet élément.

Par exemple, si on met un bloc texte dans une colonne pleine largeur d’une section elle aussi en pleine largeur, et qu’on attribue une marge de 1% à ce bloc texte, alors :

• sur écran d’ordi à 1920 pixels, la colonne et la section feront 1920 pixels, donc la marge fera 19,2 pixels
• sur écran mobile à 720 pixels, colonne et section feront 720 pixels et la marge fera 7,2 pixels

Si on définit la marge en pixels alors elle ne se redimensionnera pas : elle fera par exemple 10 pixels sur tous les écrans.

Si on définit la marge en rem, par ex 2rem, alors la marge ne se redimensionnera pas non plus : elle fera la taille de texte du root element (l’élément HTML). Si ce root element fait 20px, alors la marge de 2 rem fera toujours 4 rem.

Padding / marge interne : en px, en rem ou en %

Même idée : en pourcentage ces marges internes se redimensionneront, mais pas en rem ou en pixels.

Taille de texte et de titre : en px, em, rem ou vw

C’est une question de préférence.

On peut définir la taille d’un texte ou d’un titre en pixels, en mode responsive, mais alors il ne se redimensionnera pas, alors que la taille d’un écran d’ordinateur ou d’un écran de tablette ou de téléphone peut varier substantiellement.

La définir en em ou en rem a plus de sens.

De même, la définir en vw : vous pouvez décider qu’un titre doit faire 80vw, soit 80% de la taille de l’écran, quelle que soit cette taille.

Quelle différence entre VW / VH et % ?

VW et VH dépendent de la taille de l’écran.

% dépend de la taille de l’élément parent.

Donc, si une section Elementor fait 100vw, elle s’ajuste pour faire 100% de la largeur de l’écran.

Tandis que si elle fait 100% de son élément parent qui a des marges gauche et droite de 1rem, le rem valant 16px, alors la section ne fait pas 100% de la largeur de l’écran, elle fait la largeur moins les deux marges de 16+16 = 32px.