Unidades en Elementor PX, REM, EM, % y mucho más

Cada uno de los elementos que componen un sitio web tienen definidos valores absolutos o relativos que permiten lograr el diseño deseado para cada dispositivo (responsive design).

Estos valores vienen expresados mediante reglas CSS aunque, con Elementor, no hace falta que sepas CSS pero si que sepas como utilizar estos valores ya que Elementor se encargará de todo el código.

1. Unidades de longitud en Elementor

En el kit por defecto o en el panel de edición de Elementor, en las secciones, columnas y widgets, podemos definir ciertos valores de “longitud” como el tamaño de la fuente, márgenes y rellenos y muchos más. Estos valores se pueden expresar en diferentes unidades como: PX, %, EM, REM, VW y VH pero, ¿Cuál es la que tenemos que utilizar?

Existen diversos aspectos para elegir una, pero te recomendamos que utilices unidades relativas si recién estas comenzando en el mundo de Elementor aquí tienes más a detalle sus características de cada una.

• Unidades absolutas: son aquellas que son fijas pase lo que pase como los pixeles (PX). Estas pueden ser muy útiles para elementos fijos pero, para versiones RESPONSIVE, algunas veces no lo son.
• Unidades relativas: son aquellas que se adaptan perfectamente en versiones RESPONSIVE y se escalan en diferentes dispositivos según el elemento principal. Estas son: %, EM, REM, VW y VH.
• En la mayoría de navegadores, como Chrome, Firefox y Safari, el tamaño de fuente está definido en 16px. Aunque suene un poco extraño, el tamaño de la fuente (propiedad font-size) será nuestra referencia para el diseño.

1.1 Valores en PX

Los pixeles (PX) son unidades absolutas y siempre van a tener el mismo valor en cualquier dispositivo. Si definimos el valor de 16px en una fuente, en versión RESPONSIVE mantendrá el mismo valor de 16px.

1.2 Valores en EM y REM

Las unidades EM y REM se utilizan frecuentemente en el desarrollo de temas y plugins desde hace mucho tiempo aunque hay muchas personas (incluyéndome) que no estamos acostumbrados a utilizarlas.

Es más común que estas unidades se expresen en decimales a diferencia de los PX.

Veamos cómo se definen:

• EM: Se refiere al tamaño de la fuente (propiedad font-size) del elemento padre.
• REM: Se refiere al tamaño de la fuente (propiedad font-size) del elemento raíz.

Pero, ¿Qué son el elemento padre y elemento raíz?

El elemento raíz se refiere al primer elemento del código HTML de la página tomando como referencia el valor del tamaño de la fuente del navegador (por defecto: 16px).
El elemento padre se refiere al valor de la fuente que definamos en nuestro tema.

Ten en cuenta que la propiedad font-size se aplica tanto a los encabezados (títulos y subtítulos) como a los textos (párrafos) siguiendo un orden jerárquico como te muestro a continuación:

• Elemento raíz: Fuente del navegador (16px, valor de referencia).
  • Etiqueta HTML y/o BODY (style.css).
    • Tamaños de fuentes definidos en el archivo style.css.
      • Tamaños de fuentes definidos en el tema (WordPress).
        • Tamaños de fuentes definidos en los widgets (Elementor).

En la etiqueta BODY se ha declarado la propiedad font-size: 1rem. La etiqueta adopta el valor de 16px tomando como referencia el valor definido por el navegador. Ahora, este será el elemento padre.

Los encabezados tienen definidos sus propios valores REM y tomarán como referencia el valor del elemento raíz (navegador):

• H1 tiene definido 2.5rem, entonces: 2.5 x 16px = 40px.
• H2 tiene definido 2rem, entonces: 2 x 16px = 32px.
• H3 tiene definido 1.75rem, entonces: 1.75 x 16px = 28px.
• H4 tiene definido 1.5rem, entonces: 1.5 x 16px = 24px.
• H5 tiene definido 1.25rem, entonces: 1.25 x 16px = 20px.
• H6 tiene definido 1rem, entonces: 1 x 16px = 16px.

En la etiqueta P (párrafo), no se ha definido ningún valor por lo que adoptará el valor de la etiqueta BODY (16px).

Como puedes observar, siempre va a existir una referencia para definir los valores en nuestro diseño. En este caso:

• Primera referencia: el valor de la fuente del navegador (elemento raíz).
• Segunda referencia: los valores definidos en el archivo style.css (elemento padre).

1.3 Valores en %

Los valores en % toman como referencia el elemento padre de cada propiedad: ancho, alto, tamaño de fuente, etc. En Elementor suelen ser más utilizados para valores de margen, relleno y ancho de columnas.

Si una sección tiene 1200px de ancho, y asignamos el valor de 20% a los margenes laterales, quedaría de la siguiente forma:

• Valor de un margen: 20% x 1200px = 240px
• Valor de los 2 márgenes: 240px x 2 = 480px
• Valor final de la sección: 1200px – 480px = 720px

Aplicando un valor de 20% a los márgenes laterales de la sección, nos queda un espacio de 720px para añadir contenido.

1.4 Valores en VW y VH

Los valores VW y VH se definen de la siguiente manera:

• VW significa “viewport width” y hace referencia al ancho de la pantalla (en PX) de cualquier dispositivo. 1vw representa el 1% del ancho de la pantalla.
• VH significa “viewport height” y hace referencia a la altura de la pantalla (en PX) de cualquier dispositivo. 1vh representa el 1% de la altura de la pantalla.

Estas unidades son muy parecidas al porcentaje salvo que toman como referencia el valor de la resolución de la pantalla. En Elementor se suelen utilizar para tamaño de fuentes y ancho y alto de las secciones.

Si la pantalla de nuestro ordenador tiene una resolución de 1920×1080 (valores expresados en PX) y, a una sección asignamos un valor a la Altura mínima de 20vw o 20vh, quedaría de la siguiente forma:

• 20vw: 20% x 1920px = 384px
• 20vh: 20% x 1080px = 216px

Si asignamos 20vw, la altura de la sección sería de 384px ya que toma como referencia el ancho de la pantalla (1920px).

Al asignar 20vh, la altura de la sección será de 216px ya que toma como referencia el alto de la pantalla (1080px).