Cómo funcionan juntas el estilo del tema y las opciones del sistema de diseño de Elementor

Un sistema de diseño permite a los creadores web mantener la coherencia en un sitio mediante el establecimiento de un conjunto de estándares y elementos de diseño comunes. Esto es especialmente útil cuando un sitio es grande o cuando un equipo de creadores puede estar trabajando simultáneamente en el sitio. Este sistema de diseño puede tener la forma de una documentación escrita que puede incluir una guía de estilo de color y tipografía, una lista de íconos o imágenes comunes que se utilizarán en todo el sitio y otros elementos de la marca que formarán un sitio web consistente y coherente. Los diseñadores y creadores de contenido pueden consultar la guía del sistema de diseño al diseñar una página, escribir contenido, etc.

Pero incluso este tipo de sistema de diseño tiene sus limitaciones. Los creadores web deben ir y venir constantemente entre la guía y el trabajo que están haciendo, ajustando cada elemento, uno a la vez.

Un pensamiento común que podría pasar por la cabeza de un creador al agregar un encabezado simple a una página: “¿Cuál fue el valor hexadecimal del encabezado H3 nuevamente? ¿Y qué peso de fuente era? 500? No, creo que eso fue para los títulos H2, 400 fue para los títulos H3, ¿no? » Luego, el creador busca la guía de estilo en una carpeta física o en línea, encuentra la información de estilo y comienza el proceso de cambiar el color y el peso de la fuente. Multiplique este proceso solo por la cantidad de encabezados en un sitio y luego agregue todos los demás elementos a ese proceso, y rápidamente se convierte en un proceso de diseño consistente pero que requiere mucho tiempo.

Existe una forma mejor de utilizar un sistema de diseño

Un sistema de diseño que está integrado en el producto de creación web en sí es un gran paso adelante con respecto a la mera referencia a una guía escrita. Imagine que nuestro creador web construyó todo el sistema de diseño directamente en Elementor desde el inicio del proyecto. Si un elemento necesitaba una combinación específica de color y tipografía que se había designado como una combinación de marca estándar, y esa combinación era una opción simple de un clic para elegir al editar el elemento, eso sería un gran ahorro de tiempo con respecto a la anterior. proceso de referencia de la guía manual.

Igualmente importante: cambios futuros en todo el sitio

Ahora imagínese en la antigua forma de hacer referencia a una guía de sistema de diseño, que la empresa está llevando a cabo un cambio de imagen completo de la marca y que es el trabajo del creador web cambiar cada color, familia de fuentes, peso de fuente, etc. en todo el sitio. Esto podría ser una empresa enorme, y muchos elementos probablemente se perderían en el proceso, causando un diseño extraño e incoherente en lugares extraños aquí y allá.

Sin embargo, con el sistema de diseño integrado en el producto de diseño del sitio, este tipo de cambio puede llevar literalmente minutos. Elementor facilita la realización de cambios en un solo lugar y hace que ese cambio se refleje en todo el sitio. La combinación de las opciones de Estilo de tema de Elementor y Colores y tipografía globales encarna esta metodología de sistema de diseño.

Preguntas más frecuentes

Q: Estoy confundido. Cuál es la diferencia entre Estilo del tema y Diseño del sistema Colores globales / fuentes Globlal? ¿No controlan los colores y la tipografía entre sitios?

UNA: A pesar de que Estilo del tema y Colores y tipografía globales están relacionados, cumplen funciones diferentes. Estilo del tema establece definiciones de estilo de reserva para etiquetas HTML como <H1>, , y así sucesivamente. No son específicos de Elementor, pero son lo más generales posible. Esta es la configuración de referencia para el sitio, que entra en juego solo como un respaldo, si no se establecieron definiciones de elementos específicas.

Los colores globales y las fuentes globales son capas de estilo adicionales que utilizan variables CSS. Esta capa se asienta sobre la Estilo del tema capa y tienen prioridad. Proporciona los componentes básicos para todo el sistema de diseño de su sitio. Asigne los colores y la tipografía de las cuatro configuraciones globales predefinidas y agregue cualquier configuración de color y tipografía global adicional que desee, dando un nombre a cada una. Para cualquier elemento que use en Elementor, puede seleccionar rápidamente una de sus configuraciones predefinidas de su sistema de diseño global.

En el futuro, solo un cambio en la configuración global afectará a todas las instancias en su sitio. Si algún elemento, ya sea dentro de Elementor o fuera de Elementor, no tiene una configuración global asignada, entonces se establecerá de forma predeterminada en la configuración definida dentro del Estilo del tema. Entonces, como puede ver, ambos Estilo del tema y Diseño del sistema Colores globales y fuentes globales son funciones muy necesarias, así que asegúrese de prestar atención a ambas.

Q: Eso ayuda a aclarar las cosas, pero ¿podría darme un ejemplo específico?

UNA: ¡Por supuesto! Edite cualquier página de Elementor y establezca el color de un encabezado H2 y su tipografía en el estilo secundario global que ha asignado previamente a través de Configuración del sitio> Sistema de diseño> Colores globales y fuentes globales. Ahora, haga lo mismo con cualquier otro elemento de esta página, y todas las páginas, que desee tener este mismo color o estilo de texto. ¿Quiere que sus botones tengan el mismo color que sus encabezados H2? Genial, solo seleccione el color secundario para cada uno de sus botones.

Ahora, configure sus encabezados H3 con un color y estilo de texto diferente, utilizando una de sus otras configuraciones globales predefinidas. Supongamos que creó una nueva configuración global llamada Complementaria. ¿Quiere que algunos de los fondos de sus columnas tengan el mismo color? Bien, asigne la configuración de color global complementario que creó a esos fondos de columna también.

Haga esto con cualquier otro elemento, según sea necesario.

En el futuro, si alguna vez decide cambiar uno de los colores o la configuración de tipografía de su sitio, podrá hacerlo una vez y sabrá exactamente qué elementos se verán afectados en su sitio. Con un simple cambio en la configuración global, cada elemento que usa esa configuración en particular cambiará instantáneamente en su sitio.

Q: Ok, lo entiendo, y es realmente genial. ¿Pero tengo algunas páginas que no están editadas con Elementor? ¿Qué pasa con sus títulos, botones y fondos de columna? ¿Qué estilos heredarán?

UNA: Ahí es donde tu Estilo del tema los ajustes entran en juego. Aunque esas páginas no son páginas editadas por Elementor, el Estilo del tema que estableces dentro de Elementor Configuración global todavía tendrá el control. Los elementos de esas páginas seguirán heredando los estilos que establezca en Estilo del tema ya que no se les ha asignado ninguna Colores globales o Fuentes globales estilos. De esta manera, Elementor es capaz de controlar el estilo de todo su sitio, incluso en páginas que no se editan con Elementor.

Nota: Si, por casualidad, tiene algún elemento para el que no ha configurado su estilo en el Sistema de diseño> Colores globales o fuentes globales o en Estilo del tema, entonces el estilo de ese elemento se heredará del tema o del navegador, o de alguna otra fuente desconocida, como un plugin que podría estar configurando el estilo de un elemento. Entonces, para tener un control total, no deje nada en blanco Estilo del tema. Establezca todas las opciones posibles allí, para que sepa que su configuración será la alternativa predeterminada para cualquier configuración no controlada por el Diseño del sistema Colores globales o fuentes globales opciones.

Q: Antes de Colores globales fueron lanzados, el selector de color tenía la capacidad de guardar colores. Esta fue una pequeña forma de mantener la coherencia del diseño al tener siempre los colores de mi marca disponibles en cada selector de color. Los que ya no existen en el nuevo selector de color. ¿Perdí todo mi arduo trabajo de agregar los colores de mi marca al selector de color?

UNA: Tu arduo trabajo no fue en vano. Al actualizar a Elementor 3.0, que es cuando el nuevo Colores globales y se introdujo el selector de color actualizado, el proceso de actualización agregó automáticamente los colores guardados en el Colores globales paleta. Puede elegirlos fácilmente de la lista desplegable para la opción de color de cualquier elemento, ¡sin siquiera abrir el selector de color ahora!