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.
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:
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.
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:
Pero, ¿qué son el elemento padre y elemento raíz?
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:
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):
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:
Recordando el orden jerárquico anterior:
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:
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:
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.
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:
Aplicando un valor de 20% a los márgenes laterales de la sección, nos queda un espacio de 720px para añadir contenido.
Los valores VW y VH se definen de la siguiente manera:
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:
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
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.
Una forma de representar los colores es mediante palabras claves. Básicamente es escribir el nombre del color en inglés.
Por ejemplo:
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.
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:
Por ejemplo:
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.
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:
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:
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:
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:
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.
Cuando vamos a asignar un color a un fondo o widget en Elementor nos encontramos con la paleta de colores:
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:
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.
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.
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.
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.
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.
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.
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:
Para añadir un color personalizado:
De esta manera, podemos añadir todos los colores que queramos y construir una paleta de colores personalizados.
Anuncio publicitario
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.
No me gusta el SPAM y se que a ti tampoco. Sólo recibirás información útil sobre WordPress.
Al enviar, confirmas que has leído y aceptas la política de privacidad. Conoce nuestro compromiso con tu privacidad.
Copyright © 2024 Curso de WordPress
Hecho con Venezolano!
Desarrollado con WordPress y diseñado con Hello Theme y Elementor.
Me encanto!! y eso que no entendí absolutamente nada!. que hago entonces? trabajo con pixels en el responsive para ordenador y para tablet y mobile utlizo em o rem? lo hago a mano cambiando el tamaño mediante el deslizador de elementor? debo editar css en el tema hijo?
o armo la web en pixels solo en la versión escritorio y contrato un desarrollador para que haga estas correcciones?
Hola Pablo, la verdad que esta lección es algo compleja aunque me he dejado lo ojos intentando que sea lo más fácil de entender. Lo que te recomiendo es que trabajes los textos en PX o EM y hagas pruebas en las 3 versiones, las imágenes e íconos en % y las secciones y columnas en VW o VH. El diseño es muy relativo y depende de cada diseñador trabajar los valores como mejor se vayan adaptando. Gracias por tu comentario. Un saludo!
me encanta lo que enseñas y como lo haces!! sigue así!!
Hola Xanina, muchas gracias por tus palabras y tu apoyo. Me alegra saber que te haya gustado. Saludos!