Relativfarben im Webdesign verstehen

Im Webdesign können sich selbst die einfachsten Entscheidungen vermehren. Was als einzelne Designauswahl beginnt, erweitert sich schnell zu Dutzenden von visuellen Variationen für Interaktionen, Hintergründe, Grenzen und mehr. Ihr Build kann mit nicht übereinstimmenden Werten und manuellen Änderungen ohne ein konsistentes System überfüllt sein.

Die relative Farbsyntax in CSS bietet einen intelligenteren, skalierbaren Ansatz. Sie können visuelle Variationen auf der Grundlage einer einzelnen Quelle definieren, wodurch Ihr Design kohärent und leicht verwaltet wird. Normalerweise erfordert dies das Schreiben von benutzerdefiniertem Code. Mit Divi 5 können Sie diese modernen Techniken jedoch von Anfang an visuell einsetzen. Schauen wir uns genauer an.

Häufige Probleme mit dem Farbmanagement

Diese eine perfekte Markenfarbe, die Sie auswählen, kann sich schnell in Dutzende von Variationen vermehren, die über Ihre Website verstreut sind. Hier sind einige Probleme, die zu diesem Thema beitragen:

Verwalten von Variationen für eine Farbe

Sie beginnen mit einer Basisblau und benötigen schnell Dutzende von Variationen. Der Farbwähler Ihres Seitenbauers wird zum Chaos. Hellblau, hellblau, dunkelblau, dunkler blau, verblasst blau - jeweils wird als separate Farbe gespeichert.

Ihre Marke Blue erstreckt sich über 20 verschiedene Farbtöne auf Ihrer Website. In einigen Abschnitten werden das Originalblau verwendet, andere verwenden eine leichtere Version, die Sie vor drei Wochen erstellt haben, und Ihre Tasten verwenden den dunkleren Farbton, den Sie für einen besseren Kontrast gemacht haben.

Keine dieser Farben verbindet sich mit den anderen. Wenn Ihr Kunde lila statt blau will, wird jede Farbe von Hand aktualisiert. Sie verbringen Stunden damit, Module zu klicken. Sie jagen jeden Farbton. Sie hoffen, Sie vermissen keine.

Eine Sammlung von vielen ähnlichen blauen Farbtönen auf der linken Seite verwandelt sich in verstreute, nicht verwandten Purpur auf der rechten Seite, da die Aktualisierung von ihnen nacheinander mühsam ist und ständige Konsistenz erfordert. Noch mehr sind diese Farbvariationen normalerweise Augen und haben keine Verbindung.

Das Problem der Deckkraft

Viele Seitenbauer enthalten Transparenzsteuerungen, die ein Albtraum für die Farbkonsistenz sein können. Sie können eine perfekte blaue Overlay mit 60% Deckkraft erstellen, aber später benötigen Sie das gleiche durchsichtige Rot für einen anderen Abschnitt.

Ihr Seitenbauer erinnert sich nicht an die genaue Mischung, sodass Sie den Slider der Deckkraft im Auge behaupten und versuchen, das zu erreichen, was Sie zuvor gemacht haben.

Die Versuche 1, 2 und 3 variieren in Schatten und Transparenz, da das Augapfel auch bei genauen Kontrollen genaue Ergebnisse liefert.

Mit einigen Seitenbauern können Sie transparente Farben sparen. Andere nicht. Am Ende haben Sie ein paar ähnlich aussehende blau aussehende blau.

Sie sind alle etwas anders. Ihr Design verliert Konsistenz. Sie können nicht zuverlässig die gleiche transparente Farbe über verschiedene Module hinweg nachbauen. Jedes Mal, wenn Sie Transparenz benötigen, beginnen Sie von vorne. Sie erraten an Deckkraftwerten. Sie hoffen, dass sie Ihrem vorhandenen Design entsprechen.

Variablen manuell erstellen

Die meisten Seitenbauer bieten eine Form von Farbeinsparungen an, aber es wird schnell unüberschaubar. Sie sparen Farben mit generischen Namen wie "Yellow 1", "Yellow 2" und "Yellow Light".

Sechs Monate später haben Sie keine Ahnung, welches Gelb was tut. Ihre gespeicherte Farbpalette wird zu einem Durcheinander ähnlich aussehender Farben mit bedeutungslosen Namen. Ihre Farbbibliothek wächst ohne organisatorisches System. Sie haben drei verschiedene Orangen, die fast gleich aussehen, aber sie dienen verschiedenen Zwecken.

Ein Gitter vieler Farbmuster mit überlappenden Farbtönen und inkonsistenten, unklaren Namen trägt zu einer überfüllten, verwirrenden Palette bei, die schwierig zu organisieren oder effektiv zu verwenden ist.

Teammitglieder fügen ihre Farbvariationen hinzu und erstellen doppelte Farbtöne mit unterschiedlichen Namen. Ihre Marke Orange existiert als "Orange", "Marke Orange", "Primary Orange" und "Orange Main". Niemand weiß, welcher zu verwenden ist.

Einige Entwickler versuchen, dies zu lösen, indem sie benutzerdefinierte CSS -Variablen schreiben. Dies gibt ihnen eine bessere Kontrolle über Farbbeziehungen.

Aber jetzt haben Sie eine technische Hürde erstellt. Ihre Nicht-Tech-Teammitglieder können die Farben nicht mehr aktualisieren und Ihre Kunden können selbst keine einfachen Farbänderungen vornehmen. Sie werden für jede geringfügige Farbanpassung verantwortlich.

Welche relativen Farben in CSS sind (und warum Sie sie brauchen)

Relative Farben lösen Ihre Farbprobleme. Sie wählen eine Markenfarbe. CSS macht alle Versionen, die Sie benötigen. Leichte für Hintergründe. Dunkle für Grenzen. Klare für Overlays. Alles von einer Startfarbe.

CSS fungiert als dynamisches Farbwerkzeug. Sie sagen es: "Machen Sie dieses gelbe leichter." CSS erledigt die Arbeit. Ihre rote Taste muss beim Schwebewechsel verblassen. CSS fügt die Transparenz hinzu. Dein blauer Kopf braucht einen dunkleren Rand. CSS schafft es sofort.

Herkömmliche Arbeitsabläufe erforderten mehr manuelle Anstrengung. Designer machten Farbsets in Photoshop. Codierer verwendeten Tools wie Sass. Website -Bauherren mussten an passenden Farben erraten. CSS behandelt dies jetzt automatisch.

Wie CSS Farben aus Farben erzeugt

Das Wort „von“ fordert CSS an, eine vorhandene Farbe als Ausgangspunkt zu verwenden. Sie geben CSS eine Farbe und es zerfällt diese Farbe in Stücke, die es verwenden kann.

Ihre Startfarbe wird zur Basis. CSS teilt es in Teile. Rote Beträge, grüne Beträge, blaue Beträge. Oder Farbton, Helligkeit und Sättigung, wenn Sie diese Steuerelemente bevorzugen.

Sie können mit jedem Farbformat beginnen. Verwenden Sie eine Hex -Farbe wie #e91e63. Sagen Sie CSS, mit ihm als HSL zu arbeiten, um sich für einfache Helligkeit zu ändern. Wenn Ihr Code dies benötigt, geben Sie es als RGB aus. CSS wandelt alles automatisch um.

Der Code folgt einem einfachen Muster. Zuerst sagen Sie, woher Sie die Farbe bekommen können, und dann sagen Sie, was Sie sich ändern sollen. Sie können alles gleich halten, aber Transparenz hinzufügen oder den Farbton ändern, aber die Helligkeit behalten. Beide arbeiten auf die gleiche Weise.

Farben in Teile zerbrechen

Verschiedene Farbformate bieten Ihnen unterschiedliche Werkzeuge. Mit RGB können Sie rot, grün und blau separat ändern. HSL gibt Ihnen Farbton-, Sättigungs- und Leichtigkeitskontrollen.

So funktioniert es. Sie schreiben RGB (aus #FF4081 RGB). CSS nimmt diesen rosa Sechskantcode und spaltet ihn in rote, grüne und blaue Zahlen. Dann können Sie diese Zahlen verwenden, wie Sie möchten. Das Muster bleibt gleich: Farbfunktion (aus Ihrem Color Channel1 Channel2 Channel3).

Anstatt Farben von Grund auf neu zu schreiben, bauen Sie also auf einer vorhandenen Farbe und ändern nur die Teile, die Sie ändern möchten.

Jedes Teil wird zu dem, was Sie ausgewählt haben, konvertiert. Wenn Sie dieses rosa Hex konvertieren, erhalten Sie r = 255, g = 64, b = 129. Verwenden Sie sie als Is oder ändern Sie sie mit Calc ().

Sie können auch Kanäle mischen und anpassen. Möchten Sie, dass alle roten Pixel gleich sind? Verwenden Sie RGB (von var (–Color) GGG). Dies nimmt den grünen Wert an und verwendet ihn für Rot, Grün und Blau, wodurch ein Grauston aus Ihrer ursprünglichen Farbe erstellt wird.

Browserunterstützung und andere Überlegungen

Große Websites können Besucher nicht ignorieren, da sie alle unterbringen müssen. Safaris alte Versionen funktionieren anders. Chrome -Versionen handeln von einigen Dingen auf ihre eigene Weise. Firefox, es ist eigen. Sie werden am Ende drei verschiedene Codeversionen für einen Farbton -Effekt schreiben.

All diese zusätzliche Arbeit braucht Zeit von besseren Dingen. Sie können die Funktionalität der Website verbessern und Funktionen hinzufügen, die Menschen möchten.

Viele Entwickler verwenden selektiv relative Farben. Interne Tools und persönliche Projekte funktionieren gut, da Sie den Browser kontrollieren. Marketing -Websites und Kundenarbeit benötigen sorgfältigere Planung.

Die Technologie funktioniert großartig, wo sie unterstützt wird. Die Frage ist, ob die zusätzliche Komplexität zu Ihrer Projektzeitleiste und Ihrem Team oder den technischen Fähigkeiten des Kunden passt. In den meisten Fällen wäre es jedoch für die meisten Teammitglieder ein Overkill und ein Overhead.

Genau aus diesem Grund hat das Divi -Team eingetreten. Wir haben Webdesigner mit der Browserkompatibilität zu kämpfen, während wir leistungsstarke Farbwerkzeuge verpassten. Unsere Lösung in Divi 5 nimmt die besten Teile relativer Farben ein und wickelt sie in ein System ein, das überall funktioniert und keine Codierung erfordert.

Wie Divi 5 relative Farben einfach macht

Jetzt kennen Sie die Kraft relativer Farben; Möglicherweise haben Sie jedoch erkannt, dass es nicht so einfach zu implementieren ist. Divi 5 verfolgte einen anderen Ansatz und baute die Farbflexibilität direkt in seine visuelle Schnittstelle ein. Aber lassen Sie uns herausfinden, was Divi genau ist.

Was ist Divi?

Divi ist der beliebteste WordPress -Seitenbauer. Es priorisiert das visuelle Design und gibt Ihnen die vollständige Kontrolle über Ihr Design.

Sie können Ihre Änderungen live sehen, Schriftgrößen oder Linienabstand anpassen und sofort die Ergebnisse auf Ihrer Seite sehen. Sie erhalten Zugriff auf mehr als 200 Module, die überall dorthin gehen, wo Sie sie möchten. Textblöcke, Überschriften und Inhaltsstücke funktionieren als Team. Keine starren Vorlagen, die Ihre Ideen in unangenehme Formen drücken.

Hier ist, was Divi anders macht: über 2000 vorgefertigte Layouts für echte Unternehmen. Dies sind keine grundlegenden Startervorlagen. Jedes Design zielt auf bestimmte Branchen ab. Sie finden Layouts, die die Sprache Ihres Publikums sprechen und Ihren geschäftlichen Anforderungen entsprechen.

Überspringen Sie die leeren Seite Blues mit Divi -Schnellseiten

Divi Quick -Websites beheben die einschüchternde leere Leinwand, die Projekte tötet, bevor sie beginnen. Sie erhalten professionelle Starter -Websites mit solidem Design, das unser Designteam mit Originalbildern und Kunstwerken baut, die Sie sonst nirgendwo finden.

Wenn Sie etwas Personalisierteres wünschen, arbeitet Divi Quick Sites mit Divi AI, um kundenspezifische Layouts basierend auf Ihren Geschäftsdetails zu erstellen. Beschreiben Sie Ihr Beratungsunternehmen oder Ihr Restaurant und produzieren relevante Seiten mit branchenspezifischen Inhalten.

Dies sind nicht grundlegende Wireframes: Sie erhalten tatsächliche Schlagzeilen, schriftliche Inhalte und Bilder, die zu Ihrem Geschäftstyp passen. Es entwirft sogar Header und Fußzeilen, Produktseiten und Blog -Postvorlagen für Sie.

Sie können Ihre Markenschriften und Farben von Anfang an festlegen oder die KI für Sie auswählen lassen. Die KI arbeitet innerhalb dieser Richtlinien. Danach bleibt alles völlig bearbeitet, sodass Sie die Typografie anpassen können, bis sie genau Ihren Anforderungen entspricht.

Vollständige Kontrolle über das Design Ihrer Website, jetzt mit KI

Der Themenbauer übernimmt Sie für das Design auf Ihrer gesamten Website. Erstellen Sie benutzerdefinierte Header, die Ihre Markenpersönlichkeit widerspiegeln. Erstellen Sie Blog -Layouts, die die Leser mit langen Artikeln beschäftigen. Ihre 404 Seiten können mit passenden Schriftarten und Styling in Brand bleiben.

Divi AI steckt, wie bereits erwähnt, KI direkt in Ihren Design -Workflow. Erstellen Sie Schlagzeilen, die so klingen, als hätten Sie sie geschrieben und Produktbeschreibungen, die Ihre Markenstimme erfassen.

Die Fotobearbeitung kann im Bauunternehmer durchgeführt werden. Sagen Sie der KI, welche Änderungen Sie in einem Bild möchten, und es behandelt die Änderungen.

Benötigen Sie frische Bilder? Es schafft auch diese.

Füllen Sie Seitenabschnitte aus, die perfekt zu Ihrem Geschäft passen.

Plus Code -Ausschnitte, wenn Sie sie benötigen.

Divi 5: Die nächste Entwicklung

Divi 5 tritt mit einer klaren Mission in Alpha -Tests ein: Verbesserung der Leistung Ihres Webdesignprozesses. Wir haben uns ein echtes Feedback darüber angehört, was Sie verlangsamt und was Ihnen helfen würde.

Alles, was Sie an dem aktuellen Divi mögen, bleibt. Wir haben es einfach besser gelassen. Die Benutzeroberfläche sieht sauberer aus. Seiten laden schneller als zuvor. Steuerelemente reagieren richtig, wenn Sie sie klicken.

Wir haben die Stiftung mit den heutigen Webstandards umgebaut. Dies bedeutet insgesamt weniger seltsame Fehler und eine glattere Leistung.

Sie verbringen weniger Zeit damit, gegen den Baumeister zu kämpfen und mehr Zeit zu entwerfen. Ihre Websites sehen professioneller aus, da die Konsistenz automatisch auftritt. Kunden erhalten bessere Websites, da Sie sich auf ihre Bedürfnisse anstatt auf technische Probleme konzentrieren können.

Die Alpha -Version kann auf neuen Websites verwendet werden. Wir empfehlen jedoch nicht, Ihre vorhandenen Divi 4 -Websites auf Divi 5 zu konvertieren.

Was ist neu in Divi 5

Divi 5 verändert wichtige Änderungen, wie Sie Websites erstellen. Die öffentliche Alpha -Version eignet sich derzeit hervorragend für neue Projekte. Unsere Entwicklungsteams versenden alle zwei Wochen neue Funktionen, wobei mehrere wichtige Updates bereits seit Beginn von Alpha veröffentlicht wurden.

Hier sind einige wichtige Updates:

• Die moderne Codebasis beschleunigt die Dinge, indem sie nur die Module geladen, die Sie tatsächlich benötigen, und das Aufblähen des Codes, der Divi 4 verlangsamte, entfernt.
• Ein komplettes Flexbox -Layout -System enthält nun neue Zeilenvorlagen, automatische vertikale Zentrierung, Inhaltsumwicklung und Abstandsverteilung durch visuelle Steuerelemente.
• Ein brandneuer Schleifenbauer , der Module, Gruppen oder Abschnitte mit dynamischem Inhalt wiederholt und verschachtelte Schleifen für komplexe Datenstrukturen unterstützt.
• Relative Farben mit HSL liefern dynamische Farbsteuerung basierend auf den Werten der Farbton-, Sättigung und Helligkeit.
• Das HTML-5-basierte System ersetzt Shortcodes vollständig , was weniger Fehler und eine bessere WordPress-Kompatibilität bedeutet.
• Die Visual Builder -Schnittstelle wurde vollständig überarbeitet, mit hellen und dunklen Modi, anlagenbaren Panels, Tabellenfenstern, Tastaturverknüpfungen und einer verbesserten Schichtansicht mit Brotkrumen.
• Die drei festen Divi 4 -Divi 4 ersetzen die anpassbaren Responsive Breakpoints und geben Ihnen mehr Kontrolle mit Canvas Skaling, um genau zu sehen, wie Designs verschiedene Bildschirmgrößen betrachten.
• Modulgruppen funktionieren wie vielseitige Container, die verwandte Elemente miteinander bündeln, sodass Sie sie als Einheiten stylen oder sich bewegen können, ohne Beziehungen zu verlieren.
• Mit Designvariablen können Sie auf Ihrer gesamten Website Farben, Schriftarten, Zahlen, Bilder, Text und URLs weltweit festlegen.
• Option Gruppenvoreinstellungen speichern bestimmte Designeigenschaften wie Typografie oder Schatten, die über verschiedene Modularten hinweg funktionieren.
• Advanced CSS -Einheiten unterstützen nun Clamp (), Calc (), Min () und max () über die visuelle Schnittstelle, ohne Code zu schreiben.
• Das Interactions-System erzeugt Popups, Umschaltungen, Scroll-Effekte und Mausbewegungseffekte ohne externe Plugins.

Was kommt vor ...

• WooCommerce -Module mithilfe der Divi 5 -Architektur mit voll voreingestellter und variabler Kompatibilität von Grund auf neu aufgebaut.
• Der Element Inspector bietet fortschrittliche Benutzer neue Debugging- und Entwicklungstools an.
• Ebenso kann das Group -Carousel -Modul Ihnen helfen, ein Karussell aus Gruppen zu erstellen, und dann den Inhalt für jede Folie durch die Verwendung von Divi's Komplettelementen zum Entwerfen einer beliebigen Karussellstile zu entwickeln.

Bauen von Paletten, die sich mit Divi 5 skalieren

Ihr Farbwähler wird zu einem Chaos, wenn Sie Dutzende Ihrer Markenfarbvariationen benötigen. Divi 5 fixiert dies, indem Sie jeden Farbton mit einer Grundfarbe verbinden. Die folgenden Schritte zeigen Ihnen, wie Sie ein skalierbares und wartbares Farbsystem erstellen.

1. Einrichten Ihrer primären Farbfundament

Öffnen Sie den visuellen Bauunternehmer und finden Sie das Symbol Variable Manager in der linken Seitenleiste. Klicken Sie darauf, um die Farbstiftung Ihrer Website anzuzeigen. Divi 5 wird mit voreingestellten Farbvariablen geliefert, die bereits auf Sie warten: Primär-, Sekundär-, Überschrift- und Körperfarben.

Sie können diese voreingestellten Variablen nicht löschen, aber Sie können ihre Werte ändern. Dies funktioniert perfekt, weil diese vier Farben die meisten Websites verarbeiten. Klicken Sie auf die primäre Farbvariable und geben Sie die Hauptfarbe Ihrer Marke ein. Dies wird zur Grundlage für jede andere Farbvariation auf Ihrer Website.

Ihre primäre Farbvariable sollte die gesättigte Version Ihrer Markenfarbe widerspiegeln. Betrachten Sie es als die reine, unverdünnte Version, bevor Sie leichtere Hintergründe erstellen oder Transparenzeffekte hinzufügen. Dies bietet Ihnen den größten Bereich, wenn Sie später Variationen erstellen.

Die sekundäre Farbe eignet sich gut für Akzente, Schaltflächen oder Highlights, die sich von Ihrer primären Markenfarbe abheben müssen. Stellen Sie Ihre Überschriftenfarbe auf etwas ein, das sich gut mit Ihren Hintergründen liest. Die Körperfarbe bleibt typischerweise dunkelgrau oder schwarz zur Lesbarkeit.

Diese vier voreingestellten Variablen verbinden sich mit dem gesamten System von Divi. Wenn Sie Module erstellen, erscheinen diese Farben als schnelle Optionen. Wechseln Sie hier von Blau nach Grün und jedem Modul mit diesen primären variablen Updates sofort auf Ihrer Website.

Vermeiden Sie es, frühzeitig übermäßige benutzerdefinierte Variablen zu erstellen. Beginnen Sie stattdessen mit diesen vier Voreinstellungen. Die meisten Websites benötigen möglicherweise nur diese Grundfarben, wobei die Variationen durch die relativen Farbkontrollen von Divi 5 erzeugt werden. Aber natürlich können Sie, wenn Sie es brauchen, so viele Variablen hinzufügen, wie Sie möchten.

2. Erstellen Sie Farbschirme mit HSL -Steuerelementen

Fügen Sie nun eine weitere Farbvariable hinzu. Dieses Mal bauen Sie einen Farbton aus Ihrer Primärfarbe auf, anstatt eine neue Basisfarbe festzulegen. Wählen Sie im Farbwähler Ihre Primärfarbvariable aus der Liste aus.

Jetzt sehen Sie drei Schieberegler: Farbton, Sättigung und Leichtigkeit. Diese steuern, wie sich Ihre Basisfarbe ändert.

Der Farbton bewegt sich um das Farbrad von 0 bis 360 Grad. Lassen Sie dies in Ruhe, wenn Sie Farben derselben Farbe machen. Die Sättigung geht von 0% bis 100% und steuert, wie lebendig Ihre Farbe aussieht. Bei 0%wird jede Farbe grau. Mit 100%erhalten Sie volle Intensität.

Die Leichtigkeit verläuft von 0% bis 100%. Dieser Schieberegler erstellt Ihre tatsächlichen Farbtöne. Bei 0 erhalten Sie die reine Form Ihrer Farbe. Bewegen Sie es bis zu 50% für leichtere Farbtöne. Lassen Sie es für dunklere Farbtöne auf -20% fallen.

Sie können diese HSL -Farben mischen und anpassen, um nach Bedarf neue Farben und Variationen zu erstellen.

Erstellen wir zwei Variationen unserer primären Farbe. Fügen Sie eine Variable hinzu und nennen Sie Ihren neuen Farbton etwas klares wie „primäres Licht“ oder „primäres Dunkel“. Wiederholen Sie diesen Vorgang, um mehrere Farbtöne zu erstellen. Ein typisches Setup verwendet Ihre Basis -Primär -Leichte für Hintergründe und dergleichen und dunkel bei -15%.

Sie können auch so leichtere und dunklere Farbtöne für Ihre sekundäre Farbe hinzufügen.

3.. Gebäude verschachtelte Farbvariablen

Sie haben in Schritt 2 primäre Hell und primäre Dunkelheit hergestellt. Jetzt können Sie mehr Farben aus diesen Farbtönen bauen.

Machen Sie eine neue Variable namens „Kartenhintergrund“. Wählen Sie Ihr primäres Licht aus der Liste. Depazität auf 50%fallen. Dies gibt Ihnen einen kaum Tönung für Kartenhintergründe. Erstellen Sie als Nächstes "Button Hover". Wählen Sie erstklassige Dunkelheit. Drop Leichte weitere 10%, um es noch dunkler zu machen. Jetzt können Ihre Tasten eine dunklere Farbe haben, wenn Menschen über sie schweben.

Sie können auch benutzerdefinierte Farben aus Ihren Farbtönen bauen. Machen Sie "Text Shadow", indem Sie die Schaltflächenschaltfläche auswählen. Setzen Sie die Deckkraft auf 15%. Jetzt stellt Ihr Textschatten eine Verbindung zum Schaltflächenschwebe her, das eine Verbindung zu Primärdunkel herstellt und eine Verbindung zu Primäranlagen herstellt.

Versuchen Sie "Randakzent" aus Primärlicht. Beulen Sie die Sättigung auf 100%, damit es mehr knallt. Dies gibt Ihnen einen hellen Grenze, der immer noch Ihrer Marke entspricht. Jede Kette wird länger. Alle fünf Farben zeichnen zu einer primären Wahl zurück.

Fügen Sie ähnliche Farbtöne für Ihre sekundäre Farbe hinzu, um eine schöne Auswahl von Farben auszuwählen.

4. Anwenden Sie relative Farben auf Ihre Website an

Sie haben Ihre Farbfundament gebaut und all diese Farbtöne erstellt. Jetzt kommt der praktische Teil: implementieren Sie sie auf Ihrer Website.

Öffnen Sie jedes Modul im visuellen Bauunternehmer. Klicken Sie auf eine Farboption für Hintergründe, Text oder Grenzen. Ihre gespeicherten Farbvariablen erscheinen direkt im Farbwähler. Sie müssen sich nicht an die Namen oder die Hex -Codes erinnern.

Wählen Sie Ihre Primärfarbe für die Haupttasten. Wählen Sie Primärlicht für Abschnittsgründe. Verwenden Sie die erstklassige Dunkelheit für Grenzen und subtile Akzente wie CTA -Tasten. Jede Auswahl verbindet Ihr Grundfarbsystem zurück.

Ihre Farbvariablen funktionieren überall: Header, Fußzeilen, Blog -Layouts und Produktseiten. Ihre Teammitglieder und Kunden können Farben ohne Vermutung auswählen. Sie sehen „Primärlicht“ anstelle von zufälligen Hex -Codes im Picker. Klare Namen bedeuten weniger Fehler und schnellere Designarbeiten. Jeder weiß, welche Farbe welchen Zweck erfüllt.

Dieses variable basierte System verhindert visuelle Inkonsistenz. Sie müssen nicht Dutzende ähnlicher Blues oder fragen, welchen Farbton für Schwebeffekte verwendet werden soll. Ihre Variablen bieten Ihnen Struktur und halten Sie die Flexibilität bei der Gestaltung.

5. Farben bei Bedarf aktualisieren

Ihr Kunde beschließt, Mitternachtsblau statt nur blau zu wollen. Mit dem traditionellen Farbmanagement bedeutet dies stundenlanges Sieben durch Module und die manuelle Aktualisierung jedes Schattens oder die gleichzeitige Aktualisierung einer Reihe globaler Farben gleichzeitig. Mit den relativen Farben von Divi 5 ändern Sie eine Variable, und alles andere folgt.

Ihre primären Lichtgründe werden hellgrün. Die primären dunklen Grenzen bewegen sich zu dunkelgrünem. Button -Schwebefarben werden sich auf ein dunkleres Blau einstellen. Alle diese verschachtelten Beziehungen, die Sie aufgebaut haben, bleiben intakt.

Ihr Kartenhintergrund hatte eine 15% ige Deckkraft von Primärlicht. Es wird zu 15% Deckkraft des neuen grünen Primärlichts, ohne dass Sie es berühren. Ihr Textschatten verbindet eine Verbindung zum Schaltflächen -Schwebe, das eine Verbindung zu Primärdunkel herstellt und eine Verbindung zu Primäranlagen herstellt.

Der alte Weg bedeutete jedes Mal, Farbharmonie von Grund auf neu zu erstellen. Sie bewahren die Beziehungen und verändern das Fundament, und Ihr Design bleibt ausgewogen.

Ihre Farben, Ihre Regeln

Inkonsistenter Farbverbrauch untergräbt ein gutes Design. Sie haben zufällige Farbtöne mit bedeutungslosen Namen gespeichert, Module nach Updates durch die Jagd und die Wiederaufbau von Paletten von Grund auf neu, wenn Kunden ihre Meinung ändern.

Die relativen Farben von Divi 5 beenden diesen Workflow -Albtraum. Erstellen Sie einmal aus einer Basisfarbe und sehen Sie sich alle Variations -Update auf Ihrer Website automatisch an. Das System übernimmt Browserkompatibilität, pflegt die Beziehungen und hält Ihren Farbwähler organisiert, sodass Sie nicht mit CSS spielen müssen.

Ihr nächstes Projekt verdient ein besseres Farbmanagement. Laden Sie Divi 5 herunter und sehen Sie, wie sich organisiertes Design anfühlt.