Formation
à Elementor

Vous souhaitez apprendre Elementor ?

Je vous forme par téléphone
+ partage d’écran.

Créez votre site
avec Elementor Pro

Vous faites un site professionnel ?

Elementor Pro est le meilleur constructeur de page WordPress.

Créez votre site
avec Elementor Cloud

Vous voulez créer votre site avec Elementor ?

Hébergez-le sur Elementor Cloud.

unites Elementor px pourcent em rem vh vw

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

5
(3)

L’éditeur visuel du page builder Elementor propose de faire ses réglages dans une série d’unités : px, %, em, rem, vw, vh.

Quelle est la différence ? Que signifient ces unités et comment fonctionnent-elles ?

Vous voulez tout savoir, je vais tout vous expliquer.

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.

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.

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.

Margin / marge externe : en px ou en %

Il vaut mieux les définir en pourcentages d’un élément conteneur défini en % ou en vw ; ou alors en pixels mais alors la marge ne se redimensionnera pas.

Padding / marge interne : en px ou en %

Même idée : en pourcentage ces marges internes se redimensionneront mieux.

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 32px.

Qu'avez-vous pensé de cet article ?

Cliquez sur une étoile pour donner votre avis

Avis moyen 5 / 5. Nombre d'avis donnés 3

Soyez le premier à donner votre avis

Ouvrir les commentaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Besoin d’un hébergeur ?

Convivial, sympa, fiable, et pas cher,
O2Switch me semble être la meilleure offre actuellement sur le marché français.
C’est pourquoi j’y héberge tous mes sites.

Panier
Retour haut de page