Comment le style de thème d'Elementor et les options du système de mise en page fonctionnent ensemble

UNE sistema de diseño permite a los creadores la toile 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 Contenu pueden consultar la guía del sistema de diseño al diseñar una página, escribir contenido, etc.

Mais même ce type de système de conception a ses limites. Les concepteurs de sites Web doivent constamment faire des allers-retours entre le guide et le travail qu'ils font, en peaufinant chaque élément, un à la fois.

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 en-têtes 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.

Il existe une meilleure façon d'utiliser un système de mise en page

Un système de conception intégré au produit de création Web lui-même est une avancée considérable par rapport à la simple référence à un guide écrit. Imaginez que notre créateur de site Web ait construit l'ensemble du système de conception directement dans Elementor dès le début du projet. Si un élément nécessitait une combinaison de couleur et de typographie spécifique qui avait été désignée comme combinaison de marque standard, et que cette combinaison était une simple option en un clic à choisir lors de la modification de l'élément, ce serait un gain de temps énorme par rapport à la précédente. processus de référence manuel du guide.

Tout aussi important: les futurs changements à l'échelle du site

Imaginez maintenant, à l'ancienne façon de référencer un guide de système de conception, que l'entreprise entreprend une refonte complète de la marque et que c'est le travail du constructeur Web de changer chaque couleur, famille de police, poids de police, source, etc. partout sur le site. Cela pourrait être une entreprise énorme, et de nombreux éléments seraient probablement perdus dans le processus, provoquant une conception étrange et incohérente dans des endroits étranges ici et là.

Cependant, avec le système de mise en page intégré au produit de mise en page de site, ce type de changement peut prendre littéralement quelques minutes. Elementor permet d'apporter facilement des modifications à un seul endroit et de refléter ce changement sur l'ensemble du site. La combinaison des options Style de thème Elementor et Couleurs globales et typographie incarne cette méthodologie de système de conception.

Questions les plus fréquentes

Q: Je suis confus. Quelle est la différence entre Style de thème y Conception du système Couleurs globales / Polices globales? Vous ne contrôlez pas les couleurs et la typographie entre les sites?

ONGLE: Malgré que Style de thème y Couleurs globales et typographie ils sont liés, ils remplissent des fonctions différentes. Style de thème establece definiciones de estilo de reserva para etiquetas HTML Quoi <H1>, , et ainsi de suite. Ils ne sont pas spécifiques à Elementor, mais ils sont aussi généraux que possible. Il s'agit du paramètre de base du site, qui n'intervient qu'en tant que sauvegarde, si aucune définition d'élément spécifique n'a été définie.

Les couleurs globales et les polices globales sont capas de estilo adicionales que utilizan variables CSS. Esta capa se asienta sobre la Style de thème couche et ont priorité. Fournit les éléments constitutifs de l'ensemble de votre système de conception de site. Attribuez les couleurs et les polices pour les quatre paramètres globaux prédéfinis et ajoutez les paramètres globaux de police et de couleur supplémentaires que vous souhaitez, en donnant à chacun un nom. Quel que soit l'élément que vous utilisez dans Elementor, vous pouvez rapidement sélectionner l'un de ses paramètres prédéfinis dans son système de mise en page 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 être 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 Style de thème. Donc, comme vous pouvez le voir, les deux Style de thème y Conception du système Couleurs globales et polices globales ce sont des fonctions très nécessaires, alors assurez-vous de faire attention aux deux.

Q: Cela aide à clarifier les choses, mais pouvez-vous me donner un exemple précis?

ONGLE: Bien sûr! Modifiez n'importe quelle page Elementor et définissez la couleur d'un en-tête H2 et sa typographie sur le style enfant global que vous avez précédemment attribué via Paramètres du site> Système de conception> Couleurs globales et polices globales. Maintenant, faites de même pour tout autre élément de cette page, et toutes les pages, pour lesquels vous souhaitez avoir la même couleur ou le même style de texte. Voulez-vous que vos boutons soient de la même couleur que vos en-têtes H2? Génial, sélectionnez simplement la couleur secondaire pour chacun de vos boutons.

Maintenant, définissez vos en-têtes H3 sur une couleur et un style de texte différents, en utilisant l'un de vos autres paramètres globaux prédéfinis. Supposons que vous ayez créé une nouvelle configuration globale appelée Complémentaire. Voulez-vous que certains de vos arrière-plans de colonnes aient la même couleur? D'accord, attribuez également les paramètres de couleur globaux complémentaires que vous avez créés à ces arrière-plans de colonne.

Faites-le avec n'importe quel autre élément, si nécessaire.

À l'avenir, si jamais vous décidez de changer l'une des couleurs ou les paramètres de police de votre site, vous pourrez le faire une fois et vous saurez exactement quels éléments seront affectés sur votre site. Avec une simple modification des paramètres globaux, chaque élément qui utilise ce paramètre particulier changera instantanément sur votre site.

Q: Ok, je comprends, et c'est vraiment cool. Mais ai-je des pages qui ne sont pas éditées avec Elementor? Qu'en est-il de vos en-têtes de colonnes, boutons et arrière-plans? De quels styles hériteront-ils?

ONGLE: C'est là que tu Style de thème les paramètres entrent en jeu. Bien que ces pages ne soient pas des pages éditées par Elementor, le Style de thème que vous définissez dans Elementor Paramètre général vous serez toujours en contrôle. Les éléments de ces pages continueront d'hériter des styles que vous avez définis Style de thème puisqu'aucun n'a été attribué Couleurs globales ou Sources mondiales modes. De cette façon, Elementor est capable de contrôler le style de l'ensemble de votre site, même sur les pages qui ne sont pas éditées avec Elementor.

Noter: Si, par hasard, vous avez un élément pour lequel vous n'avez pas défini son style dans le Système de conception> Couleurs globales ou polices globales ou dans Style de thème, entonces el estilo de ese elemento se heredará del tema o del le navigateur, o de alguna otra fuente desconocida, como un brancher que podría estar configurando el estilo de un elemento. Entonces, para tener un control total, no deje nada en blanco Style de thème. Définissez toutes les options possibles ici, afin que vous sachiez que vos paramètres seront l'alternative par défaut pour tous les paramètres non contrôlés par le Conception du système Couleurs globales ou polices globales options.

Q: Avant de Couleurs globales ont été libérés, le sélecteur de couleurs avait la possibilité d'enregistrer les couleurs. C'était un petit moyen de garder le design cohérent en ayant toujours les couleurs de ma marque disponibles dans chaque sélecteur de couleurs. Ceux qui n'existent plus dans le nouveau sélecteur de couleurs. Ai-je perdu tout mon travail acharné en ajoutant les couleurs de ma marque au sélecteur de couleurs?

ONGLE: Votre travail acharné n’a pas été vain. Lors de la mise à niveau vers Elementor 3.0, c'est-à-dire lorsque le nouveau Couleurs globales et le sélecteur de couleurs mis à jour a été introduit, le processus de mise à jour a automatiquement ajouté les couleurs enregistrées dans le Couleurs globales palette. Vous pouvez facilement les choisir dans la liste déroulante pour l'option de couleur de n'importe quel élément, sans même ouvrir le sélecteur de couleur maintenant!