Lección 05

Unidades en Elementor

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.

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.

En la lección anterior, kit por defecto en Elementor, conocimos una plantilla que ofrece Elementor para personalizar los estilos (fuentes y colores) en nuestro sitio web.

En esta lección veremos las propiedades de las fuentes y colores para desarrollar correctamente nuestro diseño.

Índice del contenido
    Add a header to begin generating the table of contents

    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 entre otros.

    Estos valores se pueden expresar en diferentes unidades como: PX, %, EM, REM, VW y VH pero, ¿cuál es la que tenemos que utilizar?

    Para entender mejor cuándo utilizar cada unidad, vamos a partir de los siguientes puntos:

    1. 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.
    2. 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.
    3. 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.

    Aunque los PX suelen ser las unidades más utilizadas en el diseño, se recomienda su uso solo en modo Escritorio (sobremesa). En versión RESPONSIVE, muchas veces, las unidades en PX no suelen ser muy útiles.

    Por lo general, se suelen expresar en números enteros sin decimales, aunque Elementor permite valores decimales.

    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 este curso de Elementor estamos trabajando con el tema Hello el cual instalamos en unas lecciones anteriores. Vamos a ver un trozo del código CSS del archivo style.css del tema Hello:

    /* Sections
       ========================================================================== */
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #333333;
      background-color: #fff; }
    
    /**
     * Correct the font size and margin on `h1` elements within `section` and
     * `article` contexts in Chrome, Firefox, and Safari.
     */
    h1, h2, h3, h4, h5, h6 {
      margin-top: .5rem;
      margin-bottom: 1rem;
      font-family: inherit;
      font-weight: 500;
      line-height: 1.2;
      color: inherit; }
    
    h1 {
      font-size: 2.5rem; }
    
    h2 {
      font-size: 2rem; }
    
    h3 {
      font-size: 1.75rem; }
    
    h4 {
      font-size: 1.5rem; }
    
    h5 {
      font-size: 1.25rem; }
    
    h6 {
      font-size: 1rem; }
    
    p {
      margin-top: 0;
      margin-bottom: .9rem; } 

    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:

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

    Recordando el orden jerárquico anterior:

    • 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).

    Los 3 primeros niveles se encuentran definidos. Podríamos dejarlo así y trabajar con nuestro diseño en función de estos valores.

    Pero, ¿qué pasa con las versión RESPONSIVE?

    Un valor de 40px para el H1 puede verse bien en un ordenador sobremesa pero muy grande en un móvil de pantalla pequeña.

    Por eso es que contamos con los 2 niveles restantes: el personalizador del tema y los valores directos en los widgets.

    Aquí es donde entra en juego el kit por defecto de Elementor el cuál hará el papel de personalizador del tema y es dónde podremos definir los valores de las fuentes en todos los modos: Escritorio, Tableta y Móvil.

    Continuando con nuestro ejemplo:

    • Si en el kit por defecto definimos otros valores en REM para los encabezados y textos, ahora estos serían los valores actuales tomando como referencia el valor definido por el navegador (elemento raíz).
    • De igual modo, si definimos estos valores en EM, tomarían como referencia el valor definido para el BODY (elemento padre).

    Teniendo en cuenta el orden jerárquico anterior, es recomendable llegar hasta este punto de edición (kit por defecto) para que todas las tipografías de nuestro sitio web sean uniformes.

    La ventaja que tenemos al utilizar el kit por defecto es que podemos indicar un valor diferente para cada modo en Elementor (Escritorio, Tableta y Móvil). De esta forma las tipografías se verán correctamente en versión RESPONSIVE.

    En un caso puntual que queramos editar algún encabezado o texto en particular en una página, podríamos hacerlo desde las opciones de edición del widget en Elementor.

    Supongamos que en el kit por defecto hemos definido el H1 en 2rem. Ahora su valor real sería 32px ya que ha tomado como referencia el elemento raíz (16px).

    En nuestra página, si definimos un valor al H1 en EM o REM quedaría de la siguiente manera:

    • Con un valor de 1.5em, el H1 nos quedaría: 1.5 x 16px = 24px (elemento padre).
    • Con un valor de 1.5rem, el H1 nos quedaría: 1.5 x 16px = 24px (elemento raíz).

    En el caso del valor en REM está bien porque ha tomado como referencia el valor del elemento raíz que es el valor de la fuente del navegador (16px).

    En el caso del valor en EM, la lógica nos podría decir que el elemento padre podría ser el valor que hemos definido en el kit por defecto por pero no es así. Sigue tomando como referencia el valor del BODY (elemento padre).

    Esto quiere decir que, una vez definamos los nuevos valores en el kit por defecto, todos los valores definidos en el archivo style.css del tema dejarán de ser una referencia.

    En Elementor, otro valor que podemos definir en EM es la altura de línea (propiedad line-height) tanto para los encabezados como para los textos.

    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 1920x1080 (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).

    Anuncio publicitario

    2. Colores en Elementor

    Los colores juegan un papel importante en el diseño de un sitio web. Estos no se expresan en unidades sino en el formato que se quieran representar.

    En Elementor, podemos asignar colores a fuentes, fondos, iconos y cualquier widget que lo permita utilizando los formatos: palabra clave, HEX (hexadecimal) y RGB.

    Adicionalmente existen otros formatos para representar los colores pero no se suelen utilizar en el diseño de sitios web. Vamos a hablar solo de los que se pueden utilizar en Elementor.

    2.1 Palabra clave para los colores

    Una forma de representar los colores es mediante palabras claves. Básicamente es escribir el nombre del color en inglés.

    Por ejemplo:

    • Negro se representa mediante black.
    • Blanco se representa mediante white.
    • Rojo se representa mediante red.

    Elementor permite que se asignen colores con palabras clave.

    Se puede tener acceso a un listado de palabras claves de los 16 colores básicos en este enlace.

    Aunque existen más colores con palabras clave, estos 16 colores son los que se pueden utilizar en HTML y son reconocidos por todos los navegadores.

    2.2 Formato hexadecimal (HEX)

    El formato hexadecimal es el más utilizado en el diseño de sitios web. En el código hexadecimal se utilizan los caracteres 0123456789ABCDEF (16 caracteres) donde, el número 0 representa el negro y la letra F el blanco.

    Un color en formato hexadecimal se representa de la siguiente manera:

    #RRGGBB, donde:

    • RR: son 2 dígitos, desde el 00 al FF del canal rojo.
    • GG: son 2 dígitos, desde el 00 al FF del canal verde.
    • BB: son 2 dígitos, desde el 00 al FF del canal azul.

    Por ejemplo:

    • El color rojo se representa por #ff0000 y la palabra clave es red.
    • El color verde se representa por #00ff00 y la palabra clave es green.
    • El color azul se representa por #0000ff y la palabra clave es blue.

    Sabías que...

    ¿En cada canal (rojo, verde y azul) se puede conseguir una combinación de 256 valores diferentes?

    Gracias a esto podemos tener acceso a más de 16 millones de colores diferentes en formato hexadecimal:

    256 x 256 x 256 = 16.777.216 de colores!!!

    En este enlace se puede encontrar una herramienta muy útil para encontrar valores hexadecimales de una gran combinación de colores que podemos usar en el diseño de nuestro sitio web.

    2.3 Formato RGB (RGBA)

    El formato RGB también es muy utilizado en el diseño de sitios web. Al igual que el formato HEX permite 256 valores diferentes en cada canal (rojo, verde y azul) pero se expresan con números desde el 0 hasta el 255 de la siguiente forma:

    • rgb(0,0,0) que representa el color negro (palabra clave black y formato hexadecimal #000000).
    • rgb(255,255,255) que representa el color blanco (palabra clave white y formato hexadecimal #ffffff).

    Es muy importante tener en cuenta que, los valores de cada canal, se separan con comas (,).

    Entonces, ¿si ya se pueden conseguir una gran combinación de colores con el formato HEX, por qué complicarse la vida creando otro formato diferente?

    En el formato RGB se puede añadir un valor adicional llamado canal Alfa (Alpha channel) que corresponde a la opacidad del color y es con lo que se consigue la transparencia; muy utilizada en las imágenes PNG con fondo transparente.

    En este caso el formato RGB se convierte en RGBA donde, el valor Alfa, se expresa con números desde el 0 hasta el 1 permitiendo decimales (0, 0.1, 0.2,...,0.9, 1). El valor 0 corresponde al 100% de transparencia y el valor 1 corresponde al 0% de transparencia.

    En este caso los decimales del canal Alfa se representan con un punto (.) en vez de una coma.

    Un ejemplo:

    • rgba(255,0,0,0) representa el color rojo a 100% de transparencia.
    • rgba(255,0,0,0.5) representa el color rojo a 50% de transparencia.
    • rgba(255,0,0,1) representa el color rojo a 0% de transparencia (palabra clave red y formato hexadecimal #ff0000).

    Fíjate que, solo cuando el valor del canal Alfa es 1, el color se puede expresar mediante la palabra clave y el valor HEX. Esto es porque, al no tener transparencia, es como si se expresara el color en formato rgb(255,0,0).

    Infinitas combinaciones de colores

    ¿Si en el formato HEX podemos conseguir más de 16 millones de colores, cuántos crees que se pueden conseguir con el formato RGB si añadimos un valor adicional?

    Vamos a verlo:

    • El valor Alfa va desde el 0 hasta el 1 permitiendo 1 decimal (0.1, 0.2,...,1) lo cual serían 10 combinaciones (no contamos el 0 ya que siempre será transparente):

    256 x 256 x 256 x 10 = 167.772.160 combinaciones diferentes!!!

    Parece que solo es multiplicar por 10 y ya está pero, podríamos añadir un decimal más (porque se puede hacer).

    Entonces:

    • El valor Alfa va desde el 0 hasta el 1 permitiendo 2 decimales (0.01, 0.02,...,1) lo cual serían 100 combinaciones (no contamos el 0 ya que siempre será transparente):

    256 x 256 x 256 x 100 = 1.677.721.600 combinaciones diferentes!!!

    Si continuamos añadiendo decimales nunca terminaríamos y esto tiende a ser infinito ya que son números.

    Entonces, ¿por qué complicarse la vida con otro formato?

    Porque el formato RGB, a diferencia de las palabras claves y el formato HEX, permite añadir el canal Alfa con el cual se consiguen más posibilidades en el diseño.

    3. Paleta de colores en Elementor

    Cuando vamos a asignar un color a un fondo o widget en Elementor nos encontramos con la paleta de colores:

    Paleta de colores de Elementor
    Paleta de colores de Elementor

    Como se puede observar está compuesta por 5 secciones aunque, para que se entiendan mejor, vamos a conocerlas según la numeración de la imagen:

    3.1 Barra de colores base

    En esta barra podemos seleccionar un color base para asignarlo a nuestro fondo o widget. A medida que movemos el puntero de la barra, veremos cómo va cambiando el color en tiempo real.

    3.2 Recuadro de variación del color

    Una vez que hayamos seleccionado el color base, en el recuadro de arriba, podemos variar la intensidad del color si queremos que sea más oscuro o más claro.

    3.3 Barra de opacidad del color

    En esta barra podemos definir la opacidad del color seleccionado anteriormente. Con esta barra es como podemos conseguir una variación del color expresada en formato RGBA.

    En Elementor sucede algo curioso con esta barra.

    Veamos un ejemplo:

    Imagínate que hemos seleccionado el color rojo expresado como #ff0000 en formato HEX o rgb(255,0,0) en formato RGB. Si movemos el puntero de la barra de opacidad hacia la izquierda (transparencia) veremos que el código cambia a:

    #FF000000, hay 2 "ceros" de más!!!

    Es como si mostrara un valor RGBA pero en formato HEX de 8 dígitos: #RRGGBBAA y esto no es lo que hemos visto antes.

    Valor HEX con opacidad de un color
    Valor HEX con opacidad de un color

    Para no complicarnos la vida y visualizar el color en formato RGBA (como lo hemos visto en el punto anterior), actualizamos la página haciendo clic en el botón inferior ACTUALIZAR.

    Luego refrescamos el navegador (tecla F5) y volvemos a la paleta de colores.

    Valor RGBA de un color
    Valor RGBA de un color

    Fíjate que ahora si se muestra el color en formato rgba(255, 0, 0, 0) y, si movemos el puntero de la barra de opacidad, varía el valor Alfa mostrando valores entre 0 y 1.

    Sinceramente no se si sea un fallo del plugin o este formato existe pero, personalmente, lo desconocía hasta ahora. También tenemos la opción de escribir el valor manualmente pero lo suyo es que Elementor nos lo mostrara.

    Te invito que dejes un comentario, al final de la entrada, y nos cuentas qué crees tú de esto.

    3.4 Campo de código del color

    En este campo se mostrará el código del color en los formatos HEX y RBGA cuando lo seleccionamos. También es posible añadirlo manualmente si contamos con el listado de colores que vamos a utilizar en nuestro diseño.

    En este campo se puede añadir el color como palabra clave y como formatos HEX, RGB y RGBA como hemos visto anteriormente.

    3.5 Barra de colores personalizados

    Esta sección resulta ser la más interesante de la paleta de colores ya que podemos personalizarla definiendo nuestros propios colores, para utilizarlos en todo el diseño de nuestro sitio web, ya que siempre estarán disponibles.

    Inicialmente, podemos encontrar algunos colores predefinidos por Elementor aunque podemos eliminarlos.

    Para esto:

    1. Seleccionamos cualquier color y, sin soltar el ratón, lo arrastramos hacia abajo.
    2. Veremos como aparece un recuadro con el símbolo de la papelera. Soltamos el color en ese recuadro y el color desaparece de la barra de colores.
    Eliminar un color de la paleta de colores de Elementor
    Eliminar un color de la paleta de colores de Elementor

    Para añadir un color personalizado:

    • Seleccionamos un color en las secciones o lo escribimos en el campo de código.
    • Hacemos clic en el símbolo para añadirlo automáticamente a la barra.

    De esta manera, podemos añadir todos los colores que queramos y construir una paleta de colores personalizados.

    Añadir un color personalizado a la paleta de colores de Elementor
    Añadir un color personalizado a la paleta de colores de Elementor

    Anuncio publicitario

    4. Conclusión

    Al trabajar en el diseño de un sitio web, ya sea con Elementor o con otro editor de contenidos, es muy importante tener en cuenta el diseño en versión RESPONSIVE.

    Las unidades de longitud relativas (%, EM, REM, VW y VH), aunque son un poco complejas de entender, serán las que nos permitan realizar correctamente el diseño en modo Tableta y Móvil.

    Por otro lado, los colores son muy importantes en el diseño y es necesario conocer el formato que tenemos que utilizar dependiendo del contenido que estemos diseñando.

    ¿Te ha gustado?

    Te estaría muy agradecido si pudieras valorar esta lección y compartirla en las redes sociales. De esta manera me animas a continuar trabajando en este curso de Elementor y ayudas a otras personas que desean aprender.

    (8 votos, promedio: 5 de 5)

    Share on facebook
    Facebook
    Share on twitter
    Twitter
    Share on linkedin
    LinkedIn
    Share on telegram
    Telegram
    Share on whatsapp
    WhatsApp
    Share on email
    Email

    Este curso es gratis y siempre lo será pero, mantenerlo, requiere de mucho tiempo y esfuerzo. Si te gusta el curso y te ha ayudado, considera invitarme un café haciendo un pequeño donativo a este proyecto que he creado con el para ti y muchas personas que desean aprender. Las donaciones me ayudan a seguir trabajando en este fantástico curso gratuito. ¿Me invitas un café?.

    Suscríbete y aprende Elementor desde cero.

    No me gusta el SPAM y se que a ti tampoco. Sólo recibirás información útil sobre Elementor.

    Al enviar, confirmas que has leído y aceptas la política de privacidad. Conoce nuestro compromiso con tu privacidad.

    Comparte tu experiencia

    Deja un comentario si tienes alguna duda o cuéntanos cómo ha sido tu experiencia.

    guest
    2 Comentarios
    Inline Feedbacks
    Ver todos los comentarios
    xanina

    me encanta lo que enseñas y como lo haces!! sigue así!!

    2
    0
    ¿Dejas un comentario? Gracias!x
    ()
    x
    Ir arriba
    Elementor

    ¿Quieres saber cómo ganar un dominio .COM, un hosting y una licencia de Elementor PRO por 1 año?

    Tratamiento de datos personales

    • Responsable: MARIA ANTONIETA BEAUTY CONCEPT, S.L.
    • Finalidad: Suscribirte a la lista de correos electrónicos.
    • Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en legal@gianoliveira.com, así como el derecho a presentar una reclamación ante una autoridad de control.
    • Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal.
    • Información adicional: En mi política de privacidad encontrarás información adicional sobre la recopilación y el uso de su información personal incluida información sobre acceso, conservación, rectificación, eliminación, seguridad y otros temas.