Cómo crear un sistema de diseño con Elementor 3

Elementor 3 salió no hace mucho (no sin problemas debo decir), y la gran característica que anunciaron es que por fin trae una implementación bastante usable de ajustes globales, es decir, ahora puedes definir una porción considerable de los ajustes de estilo y visuales que usas en tus diseños, de modo que no tengas que estar definiéndolos una y otra vez; si, habían algunas cosas que ayudaban, como por ejemplo definir colores y fuentes cuasi-globales (que se importan muy bien por cierto en Elementor 3), pero a fin de cuentas no había una manera unificada de definir estilos que permearan en todo el sitio. Elementor 3 por primera vez hace posible definir lo que se llama un sistema de diseño, o como yo lo veo, a su hermano menor, una guía de estilo web.

Introducción a los sistemas de diseño

Un sistema de diseño es básicamente un producto de trabajo que ayuda a generar productos coherentes, en nuestro caso, será una serie de guías que nos ayudará a producir sitios que se vean con una identidad consistente. Quizás a muchos que inician les haya pasado que ponen el color, fuente o disposición de elementos que vengan en gana; un sistema de diseño te ayudará a que esto no te pase. Un sistema de diseño está compuesto más o menos de lo siguiente:

Estructura de un sistema de diseño

• El sistema de diseño es el conjunto de documentos, estándares de diseño y principios que junto con un conjunto de componentes de interfaz de usuario nos llevan a implementar algo estándar.
• La biblioteca de patrones es el conjunto de patrones de diseño que se usarán a través de nuestro proyecto.
• La guía de estilo es un documento que describe el sistema de diseño en sí y como debe ser aplicado.

Así que la misión de este artículo es ver como encajar ese diagrama visual en lo que nos ofrece Elementor 3 para tratar de tener un sistema de diseño consistente en nuestros proyectos. Para esto usaremos mayormente Elementor 3 en su versión gratuita, pero desafortunadamente algunos requerimientos de un sistema de diseño no se pueden implementar sin Elementor Pro (también versión 3.x).

Al hacer esta publicación como parte de la investigación di con una publicación similar, pero que intentaba replicar un sistema de diseño con Elementor 2.x, vale la pena que lean el artículo por referencia.

Pero empecemos ya de una vez por lo que tenemos:

Implementando un sistema de diseño en Elementor 3

En la versión más nueva de Elementor se incluye una nueva característica que se llama Ajustes del sitio, y que se encuentra haciendo clic en el menú superior izquierdo:

Todo lo que haremos será ahí; valga la pena mencionar que Ajustes del sitio bloquea lo que se está haciendo actualmente, es decir, si entras a Ajustes del sitio no puedes hacer nada en el editor hasta que cierres con la X que está en la parte superior derecha de la ventana. Habiendo dicho esto, vamos a empezar implementando los componentes básicos de nuestro sistema de diseño:

Componentes básicos

Los componentes básicos como puedes ver en el diagrama tienen que ver con colores, fuentes, tamaño de grid e íconos. Veamos uno por uno:

Colores globales

Lo primero que tenemos que hacer es definir los colores globales; estos estarán disponibles (casi) donde sea que haya un selector de color, y son los colores predefinidos que puedes usar en tu sitio. Por default son cuatro (principal, secundario, texto y énfasis), y tendrás que experimentar con ellos para ver como los aplica Elementor. Como puedes ver, cada color muestra el nombre, el código hexadecimal y un cuadro con el color como tal.

Haciendo clic en el nombre del color puedes renombrarlo; al pasar el cursor encima del código hexadecimal se convierte en un botecito de basura que puedes usar para eliminar el color en cuestión, y haciendo clic en el color puedes elegir un color nuevo para que tome su lugar. Y si los colores no son suficientes, puedes hacer clic en + AÑADIR COLOR, lo cual añade un color a la lista, mismo al que le puedes cambiar de nombre, eliminarlo y elegir su color. En cuando los nombres de los colores, recomiendo ser consistente e informativo, de modo que se puedan identificar claramente. Yo usé “Mi color” y como color un rojo sangre:

Fuentes globales

Ahora toca el turno a fuentes globales, que viene de versiones anteriores en Elementor y que era lo poco que había antes relacionado con ajustes globales. Esta característica permite definir cuatro fuentes para diversas situaciones (principal, secundario, texto y énfasis), y también te permite definir estilos personalizados e incluso una familia de fuente de respaldo, por si la fuente que elijes no está disponible.

Cada definición permite bastante control, incluso más que antes pues si no me falla la memoria en Elementor anterior a la versión 3 sólo permitía cambiar la fuente y el peso por cada una; ahora permite cambiar la familia, el tamaño, peso, transformación, estilo, decoración, altura de línea y espaciado entre letras:

Ahora bien; estos estilos de fuentes globales son algo así como de legado, pues Elementor 3 tiene un control más robusto de tipografía que es más adecuado para un sistema de diseño; sin embargo, éstos pueden servir como base para definir los controles más nuevos de tipografía. Por ahora, puedes dejar estos controles como están por default o bien redefinirlos como más te convenga.

Un mejor control de tipografía en Elementor 3

Como mencioné antes, en Ajustes de sitio > Tipografía Elementor 3 ahora ofrece ajustes para la tipografía del sitio de manera más adecuada; ahora ofrece ajustes para el cuerpo de texto, enlaces (con estados Normal y al pasar el cursor) y encabezados nivel H1 – H6. Para todos ellos puedes configurar color y opciones de fuente, y para el cuerpo de texto adicionalmente el espaciado de párrafo:

La forma de definirlos es muy sencilla, incluso mecánica. Para los controles de color, verás que siempre se muestran dos íconos: uno que es como un círculo con rayas (creo que es una especie de mundo con meridianos) que indica que ahí se mostrarán los colores globales (los que definimos antes), y junto a el verás un cuadro que muestra el color actual (o una raya roja en vertical que indica que no está en uso:

Si quieres reiniciarlo, sólo tienes que hacer clic en la segunda caja (el color actual) para abrir el desplegable y hacer clic en la flecha en círculo para reiniciarlo. Ese mismo desplegable que te muestra el selector de color igual sirve para agregar un nuevo color global, si presionas el botón con el signo +.

Los controles de tipografía son muy similares a los de color; muestran también dos cuadros, el primero es para elegir algún preajuste global (de fuentes globales), y el segundo es un control de edición estándar de fuente de Elementor. Los controles de ajustes por defecto y crear una nueva fuente global funcionan idéntico que en los colores.

Como se mencionó antes, para el cuerpo de texto puedes definir el espaciado entre párrafos en pixeles, relativo al tamaño de fuente actual (em) o el alto relativo del alto del puerto de visualización (vh).

Por último, los enlaces tienen dos estados, que son Normal y Al pasar el cursor:

Con esto ya tenemos cubierto el apartado de tipografía de manera satisfactoria.

Diseño de grid

El grid o la malla se refiere a los divisiones invisibles en renglones y columnas que se usan para estructurar contenido. El diseño del grid que elijas puede ser determinante en la efectividad de tu diseño en general, de ahí que es importante dedicarle contenido. Una de las formas de definir un grid en Elementor es mediante una combinación de características; la primera de ellas es definir el ancho del contenido; esto lo encontrarás en Ajustes del sitio > Disposición:

Como puede ver ahí tenemos el ancho en pixeles que ocupa nuestro contenido, así como el espacio entre widgets que por default es 20. En la misma sección no pierdas de vista la configuración de Diseño de la página por defecto, pues afectará a la parte de contenido.

La otra parte involucra hacer templates de secciones prediseñadas con las columnas que quieras en la disposición que necesites, por ejemplo, un grid para mostrar características podría ser como el siguiente:

Y esa sección se puede guardar como un template haciendo clic en el selector de sección (los seis puntos que se muestran en la parte superiro en medio de cada sección), y seleccionando después “Guardar como plantilla”, posteriormente asignando un nombre adecuado. Con esto ya podemos mandar a llamar la plantilla cuando lo deseemos; y repitiendo con las secciones que hayamos detectado podemos tener una biblioteca de plantillas para usar en nuestros diseños.

Usando este sistema podemos cubrir las necesidades básicas de grids de diseño. No es precisamente una reproducción exacta, pero es una aproximación decente.

Íconos

El manejo de íconos está estandarizado en Elementor, así que no hay problema en implementar esto; quizás lo que debes de recordar es que los íconos usan el color global asignado a Primario; por lo cual valdría la pena ajustarlo de modo que al usar íconos ya no tengas que hacer ajustes, o bien definir un color global adicional para usarlo para estos íconos.

Valga la pena mencionar que creo que hay margen para mejorar en este aspecto; por ejemplo, se podría controlar de manera global el tamaño de los íconos, para no tener que estar cambiando a cada rato si decides no usar el estándar. Pero lo que hay es mejor que nada, así que lo tomaremos.

Con este último elemento tenemos cubiertas las bases de los componentes básicos de nuestro sistema de diseño.

Librería de patrones

Aquí Elementor no tiene mucho problema para implementar lo necesario en un sistema de diseño, veamos:

Plantillas, módulos, componentes y elementos

Elementor tiene varios métodos para cubrir estos rubros:

• Plantillas: tal cual, una de las fortalezas de Elementor; las plantillas son bastante buenas, pero si tienes Elementor Pro tienes acceso al constructor de temas, y ahí puedes tener plantillas para lo que quieras, lo cual es extremadamente útil. Para esto es indispensable que tengas clara la idea de lo que tienes que resolver para determinar que tantas plantillas necesitarás. Cuando menos, serán las siguientes (todas construidas con el Constructor de Temas de Elementor 3):
  • Plantilla de cabecera: aquí van el logo del sitio, tu menú, cualquier barra superior que quieras.
  • Plantilla de pie de página: aquí es bastante libre, puedes poner básicamente lo que gustes, muchos lo usan para información de contacto y algunos documentos legales o de privacidad, pero básicamente es para lo que quieras.
  • Plantillas de productos: si los manejas, es indispensable que hagas todas las plantillas de productos que necesites.
  • Plantillas de archivos: para todos los diversos tipos de archivos que genera WordPress.
  • Plantillas de publicaciones: para todo lo que tenga que ver con entradas.
• Widgets globales (versión Pro): el hecho de que al hacer un widget global se haga una especie de biblioteca común para el proyecto lo hace bastante útil; sin embargo, los widgets globales son algo rígidos, pues recuerden que se definen y se incrustan donde quieras, pero siempre es el mismo.
• Otras facilidades de Elementor: no olvidemos el constructor de popups (en la versión Pro), que bien puede usarse para definir algunos componentes o módulos, dependiendo de como se les defina.

Reglas

El apartado de reglas puede ser bastante amplio, pero hay algunas que pueden implementarse en Elementor 3:

Logo del sitio

Puedes definir el logo del sitio tal cual se hace en el Personalizador; ahora en Elementor 3 puedes ir a Ajustes del sitio > Identidad del sitio:

Como puedes ver, combina algunas características generales de la configuración general de WordPress y también copia algunas del personalizador. También puedes indicar cual es el favicon del sitio. Ahora cuando quieras el logo sólo tienes que usar el widget apropiado (Logo del sitio), y tendrás un uso consistente del mismo – aunque no en tamaño.

Botones

En Ajustes del sitio > Botones puedes definir muchas opciones relacionadas con botones en su proyecto; esto me parece una buena idea y pongo un ejemplo de porqué; las esquinas de los botones en Elementor no terminan totalmente en punta, y hay que estar corrigiendo el radio del borde de modo que lo sean al 100%. Ahora con el control de ajuste global de botones puedes indicar que quieres un radio de borde cero para tener todos los botones con punta en las esquinas. Y adicionalmente puedes definir tipografía, colores tanto para el estado normal como para el hover (es decir el cursor encima del elemento), y sombras.

Imágenes

Otro control global que puedes tener con Elementor 3 es sobre las imágenes:

Puedes controlar bordes, opacidad, sombras, filtros CSS y tienes dos estados, Normal y Al pasar el cursor.

Campos del formulario

Este es un control global muy necesario; permite que predefinas estilos para los campos de todos tus formularios; tienes control sobre la etiqueta (color y tipografía) y el campo (tipografía, color de texto, fondo, sombra de caja, borde y relleno, así como dos estados, normal y enfoque).

Este es oro puro para los que necesitan muchos formularios en sus diseños, pues es en extremo tedioso aplicar un formato en particular cada que se crea uno.

Fondo de la página

Otro control que no es en realidad muy necesario, pero puede tener sus usos de vez en cuando, es el control de fondo del sitio; puedes controlar el tipo de fondo (color/imagen o degradado) y también el fondo del navegador móvil (color predefinido o personalizado).

No hay mucho en este rubro, pero aún así me parece útil el encontrarlo aquí.

Caja de luz

Elementor 3 también te permite definir un preset global para las cajas de luz de las imágenes, ya sabes, ese efecto que oscurece el fondo y muestra la imagen encima. Este caso ya lo dejo a tu consideración, pues pienso que las imágenes tienen diversos usos y cosas como el efecto de caja de luz no se pueden generalizar en todo el sitio – como les digo, estoy hablando en voz alta. Si ustedes tienen un caso en el que se pueda estandarizar el uso de la caja luz, adelante.

Y así llegamos al final de una implementación más o menos completa de un sistema de diseño.

¿Qué ganaste al implementar un sistema de diseño en Elementor?

En resumidas cuentas, la forma de producir un diseño cohesivo. Dejando claro que lo que estamos haciendo no es rigurosamente (ni de cerca) implementar un sistema de diseño completo, estamos usando las nuevas capacidades de Elementor 3 para definir estilos globales que puedes usar en todo tu proyecto; obviamente, ganas velocidad al trabajar, consistencia visual y hasta algo funcional en tu diseño y facilita el trabajo en equipo al tener todos las mismas definiciones para trabajar. No es poca cosa, y quizás en este momento no dimensiones lo importante son estas nuevas características de Elementor 3, pero cuando las uses un poco y te familiarices con ellas, al poco tiempo te preguntarás donde estuvieron todos estos años.

Valga la pena mencionar que WordPress mismo está preparando una forma de configurar estilos globales, dudo mucho que ofrezcan más que lo que tiene ahora Elementor, pero será interesante como será toda la interacción entre Elementor y WordPress con el editor Gutenberg en el futuro.

Palabras finales

Bueno mis estimados lectores (es decir 90% bots y dos o tres que me siguen) espero les haya servido esta guía para implementar un sistema de diseño; nadie les impide que sigan trabajando como hasta hoy, pero seguro aprecian su tiempo tanto como cualquier otra persona y lo que siempre se busca es trabajar menos, no más, y este es un camino para trabajar menos y más inteligentemente.