Les unités css px, em, rem, %, VH et VW dans Elementor

Les unités css px, em, rem, %, VH et VW dans Elementor

Y voir plus clair avec toutes ces unités CSS dans Elementor est une bonne chose lorsque l’on commence à faire son site internet. Chacune d’entre elles ont leurs spécificités et sont à utiliser dans des contextes différents.

Je vais vous expliquer à quoi elles servent et pourquoi les utiliser dans tel ou tel cas.

Table des matières

Table des matières

Elementor est un constructeur de page no code qui reproduit directement à l’écran ce que vous avez réglé. En anglais on utilise le terme WYSIWYG (What you see it what you get).

Mais bien entendu, Elementor utilise également du langage de programmation comme le CSS, avec des unités de mesure pour obtenir un aspect graphique cohérent. Il est donc important de bien comprendre leur fonctionnement et savoir quand les utiliser.

A. Les unités CSS dans Elementor

1. Px ou pixel

Dès que vous réglez un texte ou un titre en pixel, peu importe le support numérique sur lequel vous vous trouvez, il aura toujours la même taille. C’est à dire que vous soyez sur un grand écran ou un petit écran, un élément réglé en pixel ne changera pas quitte à dépasser de l’écran.

Problèmes :

Pour ce qui est du texte en pixel, il y aura un problème d’accessibilité pour les personnes mal voyantes qui peuvent régler la taille de police sur leur navigateur. Mettre une valeur fixe empêchera cette fonctionnalité de fonctionner car cela leur permet de mieux lire.

Aussi, dans l’utilisation d’éléments graphiques comme les images, colonnes, etc, ce n’est pas adapté au responsive et cela peut défigurer la mise en page de votre site web.

2. EM (EpheMeral)

C’est une unité plus compliquée à comprendre mais retenez ces deux points :

  • Sa valeur en pixel va changer en fonction de la valeur parent. C’est à dire la taille en pixel définie dans votre élément.
  • Une valeur en EM se répercutera toujours en pixel sur un écran.

 

Par exemple, en plaçant un bouton avec une typographie réglé à 15 pixels et une marge interne de 1EM en haut et en bas puis de 0,5EM à droite et à gauche. Vous aurez sur votre écran 15px en haut et en bas, et 7,5px à droite et à gauche.

3. REM (Root EpheMeral)

Cette unité est sensiblement la même que le EM sauf que le REM va se baser sur la valeur racine. C’est une valeur définie arbitrairement par les navigateurs web et sa valeur par défaut est de 16px mais il est possible de la modifier dans vos réglages du site.

Le REM sert surtout pour les typographies.

Voyons avec un exemple :

Votre corps de texte est réglé à 18px sur ordinateur et vous souhaitez que votre H1 soit à 72px.

Tant que vous ne définissez pas une nouvelle taille de police sur un élément, le REM est égal au EM donc vous pouvez utiliser cet outil pour convertir les pixels en EM.

On peut trouver comme résultat 4em pour afficher 72px à l’écran.

4. Le pourcentage %

Cette unité va vous permettre de créer des mises en page et des éléments responsives.

En utilisant l’unité pixel pour la mise en page pour mobile et tablette, on peut voir que sur l’éditeur d’Elementor cela fonctionne bien. Mais dans la pratique, il suffit d’avoir un téléphone aux dimensions autre que celui de l’éditeur et on voit son site déformé.

Le pourcentage va pouvoir garder votre site en bon état sur toutes les tailles de mobile et tablette.

Une autre chose importante qu’il faut savoir à propos de l’unité pourcentage. Il s’adapte en fonction de l’élément parent dans lequel il est et je vais vous donner un exemple pour mieux comprendre.

Vous avez une section avec un contenu à 1140 pixels qui est composée de deux colonnes de 50% de largeur. Elles vont donc occuper chacune la moitié des 1140 px donc 570 pixels car l’élément parent de ces colonnes est donc la section.

Et si vous placez une section interne avec deux colonnes à 50% dans l’une des colonnes du premiers exemple, elles auront 285px de largeur. Soit la moitié de son élément parent à 570px.

5. VH (Viewport Height)

Ce qu’il faut retenir de l’unité VH c’est :

  • que sa représentation à l’écran se base uniquement sur la hauteur d’écran
  • qu’il est un pourcentage de cette dernière

 

Je vais vous citer un exemple pour illustrer tout ça.

Vous souhaitez qu’une section fasse toute la taille de l’écran et pour cela, vous devez régler la hauteur minimum à 100VH. En faisant cela, sur n’importe quel écran (13’ ou 19’) votre section aura toujours la taille de l’écran.

6. VW (Viewport Width)

Semblable au VH sauf :

  • que sa représentation à l’écran se base uniquement sur la largeur d’écran
  • qu’il est un pourcentage

Connaître les définitions c’est bien, mais encore faut-il savoir quand utiliser telle ou telle unité au bon endroit. Je vais donc vous expliquer pourquoi je vous conseille telle unité pour que vous puissiez mieux comprendre et aussi vous adapter selon vos projets.

B. Quand et pourquoi utiliser ces unités dans Elementor ?

Avant tout, je préfère clarifier les types d’unités car cela me paraît important pour bien saisir l’utilisation de ces unités.

1. Les deux catégories d’unités CSS sur Elementor

a. Unités absolues

Une unité absolue veut dire qu’elle est définie et qu’elle ne peut changer. On pourra donc mettre dans cette catégorie l’unité pixel.

Tous nos écrans sont composés de pixels et ce qui fera varier son nombre sera la taille de l’écran. Forcément, plus l’écran est grand, plus il aura de pixels.

À titre d’exemple, je peux vous citer quelques autres unités en dehors du digital qui sont des valeurs absolues :

  • le mètre
  • le centimètre
  • le pouce
  • la coudée

 

Vient ensuite les unités relatives.

b. Unités relatives

Contrairement aux unités absolues, les unités relatives peuvent faire varier la taille d’un élément en fonction de la taille d’un autre élément.

Les unités CSS disponibles sur Elementor peuvent servir dans différents cas. C’est pourquoi, je vais les aborder en détail par la suite mais déjà sachez que vous pouvez les utiliser pour :

  • Les typographies
  • Les colonnes
  • Les sections
  • Les flexbox
  • Les marges internes et externes
  • Le positionnement d’un élément en absolu
  • La largeur d’un élément

Maintenant que les bases sont posées, on peut attaquer le vif du sujet afin que vous sachiez quand et pourquoi utiliser ces unités.

2. Les unités CSS à utiliser sur ordinateur

a. Les tailles d’écrans utilisées

Le but d’un site web est qu’il soit accessible à un maximum de personne mais tout le monde n’a pas forcément le même ordinateur car il existe de multiples tailles d’écran comme les 13’, 15’ ou 19’. De plus, vous ne pouvez tous les tester chez vous pour vérifier votre mise en page.

Il faut donc essayer de trouver les données pour pouvoir prendre les bonnes décisions.

Voici une capture de ces données.

Statistiques de l'utilisation des tailles d’écrans
Statistiques issue du site https://gs.statcounter.com/

Il faut savoir que l’éditeur d’Elementor est réglé par défaut sur une largeur de 1140px et on peut constater que près de 70% des écrans identifiés sont plus large. Le reste des écrans (30%) peut représenter ceux qui ont des dimensions spécifiques servant à autre chose que la navigation web.

Maintenant qu’on sait tout ça, voyons comment cela fonctionne  sur Elementor.

b. L’unité pixel pour la mise en page ordinateur

J’ai fais le choix de concevoir ma mise en page en pixel et je vais vous expliquer pourquoi.

Il faut savoir que sur l’éditeur d’Elementor, la largeur d’écran par défaut est une valeur fixe. Elle est de 1140px et est une valeur inférieure à la majorité des écrans utilisés actuellement (près de 70%). Donc ma mise en page restera inchangée sur tous ces écrans en utilisant l’unité pixel.

Quand je parle de la mise en page sur un site web, je parle :

  • des sections
  • des colonnes
  • des flexbox
  • des largeurs personnalisés
  • des tailles d’image
  • ou encore le positionnement en absolu

c. Le responsive ordinateur

Il est tout à fait possible de faire une mise en page responsive pour tous les types d’écrans d’ordinateur. Cela prendra par contre plus de temps et de réflexion sur le design de votre site internet.

Si vous souhaitez procéder de cette façon, il faudra suivre le même conseil que je donne pour ce qui concerne les tablettes et smartphones.

C. Les unités CSS à utiliser sur Tablette et Smartphone

1. Les tailles d’écrans utilisées

Statistiques de l'utilisation des tailles d’écrans
Statistiques issue du site https://gs.statcounter.com/

On voit que les données sur les tailles d’écran mobile et tablette sont beaucoup plus homogènes.

On peut aussi constater qu’il y a une forte augmentation des écrans avec des tailles uniques car cela vient d’une volonté des constructeurs comme on peut le voir avec les dimensions du iPhone 14.

Les tailles d’écran dans l’éditeur d’Elementor sont pour :

  • Tablette = 768*625 px
  • Mobile = 360*625 px
 

Il faudra donc privilégier les unités relatives pour que votre site internet s’adapte à un maximum d’écran.

2. Mise en page

À l’inverse des réglages ordinateur sur Elementor, les sections prennent automatiquement toute la largeur de l’écran. Le mieux sera donc de bien régler tous vos éléments avec des unités relatives. Cela concerne :

  • Les sections
  • Les colonnes
  • Les flexbox
  • Les largeurs personnalisés
  • Les tailles d’images
  • Le positionnement d’éléments en absolu
  • Les marges interne et externe

 

Bien que le pixel ne soit pas interdit, je vous conseille de choisir les unités pourcentage (%), VH et VW pour bien régler l’interface utilisateur.

3. Les polices

L’accessibilité aux personnes mal voyantes n’est pas à négliger. Je vous conseille de privilégier l’utilisation des unités REM et EM.

Tous les navigateurs maintenant permettent de changer la taille des polices. Il est vrai que cela pourrait changer l’aspect visuel de votre site internet mais il faudrait que le visiteur augmente la taille de façon importante pour le défigurer.

Retenez donc :

  • L’utilisation des unités EM et REM sont pour l’accessibilité
  • Utilisez les sur tous les supports

D. En conclusion

En ayant bien compris le fonctionnement de ces unités et quand les utiliser, vous serez capable de produire des sites internet beaucoup plus professionnels et s’adaptant aux utilisateurs.