How Elementor's Theme Style and Layout System Options Work Together

A 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 contents pueden consultar la guía del sistema de diseño al diseñar una página, escribir contenido, etc.

But even this type of design system has its limitations. Web builders must constantly go back and forth between the guide and the work they are doing, tweaking each element, one at a time.

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 headers 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.

There is a better way to use a layout system

A design system that is built into the web authoring product itself is a huge step up from merely referring to a written guide. Imagine that our website builder built the entire design system directly in Elementor from the beginning of the project. If an item required a specific color and typography combination that had been designated as a standard branding combination, and that combination was a simple one-click option to choose from when editing the item, that would be a huge time saver over the previous. manual guide reference process.

Equally important: future site-wide changes

Now imagine in the old way of referencing a design system guide, that the company is undertaking a complete branding makeover and that it is the web builder's job to change every color, font family, font weight. source, etc. all over the site. This could be a huge undertaking, and many items would likely be lost in the process, causing weird and inconsistent design in odd places here and there.

However, with the layout system built into the site layout product, this kind of change can take literally minutes. Elementor makes it easy to make changes in one place and makes that change reflected throughout the entire site. The combination of the Elementor Theme Style and Global Colors and Typography options embodies this design system methodology.

Frequently asked questions

Q: I'm confused. What is the difference between Theme style and System design Global Colors / Globlal Fonts? Don't control colors and typography between sites?

A: Despite Theme style and Global colors and typography they are related, they fulfill different functions. Theme style establece definiciones de estilo de reserva para etiquetas HTML how <H1>, , and so on. They are not Elementor specific, but they are as general as possible. This is the baseline setting for the site, which comes into play only as a backup, if no specific element definitions were set.

Global colors and global fonts are capas de estilo adicionales que utilizan variables CSS. Esta capa se asienta sobre la Theme style layer and take precedence. Provides the building blocks for your entire site design system. Assign the colors and fonts for the four predefined global settings and add any additional global font and color settings you want, giving each one a name. For whatever element you use in Elementor, you can quickly select one of its predefined settings from its global layout system.

En el futuro, solo un cambio en la configuración global afectará a todas las instancias en su sitio. Si algún elemento, ya be 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 Theme style. So as you can see, both Theme style and System design Global colors and global fonts they are very necessary functions, so be sure to pay attention to both.

Q: That helps clear things up, but could you give me a specific example?

A: Of course! Edit any Elementor page and set the color of an H2 header and its typography to the global child style you have previously assigned via Site Settings> Design System> Global Colors and Global Fonts. Now do the same for any other element on this page, and all pages, that you want to have this same text color or style. Do you want your buttons to be the same color as your H2 headers? Great, just select the secondary color for each of your buttons.

Now, set your H3 headers to a different text color and style, using one of your other predefined global settings. Suppose you created a new global configuration called Complementary. Do you want some of your column backgrounds to have the same color? Okay, assign the complementary global color settings you created to those column backgrounds as well.

Do this with any other item, as needed.

In the future, if you ever decide to change one of your site's colors or font settings, you will be able to do it once and you will know exactly which elements will be affected on your site. With a simple change to the global settings, every item that uses that particular setting will instantly change on your site.

Q: Ok, I get it, and it's really cool. But do I have some pages that are not edited with Elementor? What about your column headings, buttons, and backgrounds? What styles will they inherit?

A: That's where you Theme style settings come into play. Although those pages are not Elementor-edited pages, the Theme style that you set within Elementor Global setting you will still be in control. The elements on those pages will continue to inherit the styles you set in Theme style since none have been assigned Global colors or Global sources styles. In this way, Elementor is able to control the style of your entire site, even on pages that are not edited with Elementor.

Note: If, by any chance, you have an item for which you have not set its style in the Design system> Global colors or global fonts or in Theme style, entonces el estilo de ese elemento se heredará del tema o del browser, 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 Theme style. Set all possible options there, so you know that your settings will be the default alternative for any settings not controlled by the System design Global colors or global fonts options.

Q: Prior to Global colors were released, the color picker had the ability to save colors. This was a small way to keep the design consistent by always having my brand colors available in each color picker. The ones that no longer exist in the new color picker. Did I lose all my hard work adding my brand colors to the color picker?

A: Your hard work was not in vain. When upgrading to Elementor 3.0, which is when the new Global colors and the updated color picker was introduced, the update process automatically added the colors saved in the Global colors pallette. You can easily choose them from the drop-down list for any item's color option, without even opening the color picker now!