Wie Elementors Design- und Layoutsystemoptionen von Elementor zusammenarbeiten

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

Aber auch diese Art von Designsystem hat seine Grenzen. Webbuilder müssen ständig zwischen dem Leitfaden und der von ihnen ausgeführten Arbeit hin und her wechseln und jedes Element einzeln optimieren.

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 Überschriften 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.

Es gibt eine bessere Möglichkeit, ein Layoutsystem zu verwenden

Ein Design-System, das in das Web-Authoring-Produkt selbst integriert ist, ist ein großer Schritt weiter, als nur auf einen schriftlichen Leitfaden zu verweisen. Stellen Sie sich vor, unser Website-Builder hat das gesamte Design-System von Beginn des Projekts an direkt in Elementor erstellt. Wenn für einen Artikel eine bestimmte Farb- und Typografiekombination erforderlich ist, die als Standard-Markenkombination festgelegt wurde, und diese Kombination eine einfache Ein-Klick-Option ist, aus der Sie beim Bearbeiten des Artikels auswählen können, ist dies eine enorme Zeitersparnis gegenüber der vorherigen. Referenzhandbuch für die manuelle Anleitung.

Ebenso wichtig: zukünftige standortweite Änderungen

Stellen Sie sich nun auf die alte Art und Weise vor, auf ein Design-System-Handbuch zu verweisen, dass das Unternehmen eine komplette Branding-Überarbeitung durchführt und dass es die Aufgabe des Web-Builders ist, jede Farbe, Schriftfamilie, Schriftgröße, Quelle usw. zu ändern. überall auf der Website. Dies könnte ein großes Unterfangen sein, und viele Gegenstände würden dabei wahrscheinlich verloren gehen, was hier und da an seltsamen Stellen zu seltsamem und inkonsistentem Design führen würde.

Mit dem in das Site-Layout-Produkt integrierten Layoutsystem kann diese Art der Änderung jedoch buchstäblich Minuten dauern. Mit Elementor ist es einfach, Änderungen an einem Ort vorzunehmen, und diese Änderung spiegelt sich auf der gesamten Site wider. Die Kombination der Optionen Elementor Theme Style und Global Colors and Typography verkörpert diese Methodik des Designsystems.

Häufig gestellte Fragen

Q.: Ich bin verwirrt. Was ist der Unterschied zwischen Themenstil y System-Design Globale Farben / Globale Schriftarten? Kontrollieren Sie nicht Farben und Typografie zwischen Websites?

EIN: Trotz Themenstil y Globale Farben und Typografie sie sind verwandt, sie erfüllen unterschiedliche Funktionen. Themenstil establece definiciones de estilo de reserva para etiquetas HTML Was <H1>, , und so weiter. Sie sind nicht elementorspezifisch, aber so allgemein wie möglich. Dies ist die Grundeinstellung für die Site, die nur als Sicherung verwendet wird, wenn keine spezifischen Elementdefinitionen festgelegt wurden.

Globale Farben und globale Schriftarten sind capas de estilo adicionales que utilizan variables CSS. Esta capa se asienta sobre la Themenstil schichten und Vorrang haben. Bietet die Bausteine für Ihr gesamtes Site-Design-System. Weisen Sie die Farben und Schriftarten für die vier vordefinierten globalen Einstellungen zu und fügen Sie alle gewünschten zusätzlichen globalen Schrift- und Farbeinstellungen hinzu, wobei Sie jedem einen Namen geben. Für jedes Element, das Sie in Elementor verwenden, können Sie schnell eine der vordefinierten Einstellungen aus dem globalen Layoutsystem auswählen.

En el futuro, solo un cambio en la configuración global afectará a todas las instancias en su sitio. Si algún elemento, ya Sein 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 Themenstil. Wie Sie sehen können, beides Themenstil y System-Design Globale Farben und globale Schriftarten Sie sind sehr notwendige Funktionen, achten Sie also unbedingt auf beide.

Q.: Das hilft, die Dinge zu klären, aber können Sie mir ein konkretes Beispiel geben?

EIN: Natürlich! Bearbeiten Sie eine beliebige Elementor-Seite und stellen Sie die Farbe eines H2-Headers und seiner Typografie auf den globalen untergeordneten Stil ein, den Sie zuvor über zugewiesen haben Site-Einstellungen> Design System> Globale Farben und globale Schriftarten. Machen Sie jetzt dasselbe für jedes andere Element auf dieser Seite und für alle Seiten, für die Sie dieselbe Textfarbe oder denselben Stil haben möchten. Möchten Sie, dass Ihre Schaltflächen dieselbe Farbe haben wie Ihre H2-Header? Großartig, wählen Sie einfach die Sekundärfarbe für jede Ihrer Schaltflächen.

Stellen Sie nun Ihre H3-Header mithilfe einer Ihrer anderen vordefinierten globalen Einstellungen auf eine andere Textfarbe und einen anderen Stil ein. Angenommen, Sie haben eine neue globale Konfiguration mit dem Namen "Komplementär" erstellt. Möchten Sie, dass einige Ihrer Spaltenhintergründe dieselbe Farbe haben? Okay, weisen Sie diesen Spaltenhintergründen auch die ergänzenden globalen Farbeinstellungen zu, die Sie erstellt haben.

Tun Sie dies nach Bedarf mit jedem anderen Gegenstand.

Wenn Sie sich in Zukunft entscheiden, eine der Farben oder Schriftarteneinstellungen Ihrer Site zu ändern, können Sie dies einmal tun und wissen genau, welche Elemente auf Ihrer Site betroffen sind. Mit einer einfachen Änderung der globalen Einstellungen ändert sich jedes Element, das diese bestimmte Einstellung verwendet, sofort auf Ihrer Site.

Q.: Ok, ich verstehe, und es ist wirklich cool. Aber habe ich einige Seiten, die nicht mit Elementor bearbeitet wurden? Was ist mit Ihren Spaltenüberschriften, Schaltflächen und Hintergründen? Welche Stile werden sie erben?

EIN: Da bist du Themenstil Einstellungen kommen ins Spiel. Obwohl diese Seiten keine von Elementor bearbeiteten Seiten sind, wird die Themenstil dass Sie in Elementor festlegen Globale Einstellung Sie haben immer noch die Kontrolle. Die Elemente auf diesen Seiten erben weiterhin die von Ihnen festgelegten Stile Themenstil da keine vergeben wurden Globale Farben oder Globale Quellen Stile. Auf diese Weise kann Elementor den Stil Ihrer gesamten Site steuern, auch auf Seiten, die nicht mit Elementor bearbeitet wurden.

Hinweis: Wenn Sie zufällig einen Gegenstand haben, für den Sie seinen Stil nicht festgelegt haben Design System> Globale Farben oder globale Schriftarten oder in Themenstil, 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 Themenstil. Stellen Sie dort alle möglichen Optionen ein, damit Sie wissen, dass Ihre Einstellungen die Standardalternative für alle Einstellungen sind, die nicht von der gesteuert werden System-Design Globale Farben oder globale Schriftarten Optionen.

Q.: Vor Globale Farben freigegeben wurden, hatte der Farbwähler die Möglichkeit, Farben zu speichern. Dies war eine kleine Möglichkeit, das Design konsistent zu halten, indem meine Markenfarben immer in jedem Farbwähler verfügbar waren. Diejenigen, die im neuen Farbwähler nicht mehr vorhanden sind. Habe ich all meine harte Arbeit verloren, indem ich dem Farbwähler meine Markenfarben hinzugefügt habe?

EIN: Ihre harte Arbeit war nicht umsonst. Beim Upgrade auf Elementor 3.0, wenn das neue Globale Farben und der aktualisierte Farbwähler wurde eingeführt, der Aktualisierungsprozess fügte automatisch die in der gespeicherten Farben hinzu Globale Farben Palette. Sie können sie einfach aus der Dropdown-Liste für die Farboption eines Elements auswählen, ohne den Farbwähler jetzt zu öffnen!