So wechseln Sie in 5 Schritten zu einem dunklen Layout mit den Effizienzfunktionen von Divi

Bei der Gestaltung einer Website ist eine der ersten Entscheidungen, die Sie bewusst oder unbewusst treffen, der Farbstil, den Sie Ihrer Website geben werden. Die Mutigen unter uns würden es wagen, sich für eine komplette, lebendige Farbpalette zu entscheiden, aber seien wir ehrlich, das ist unglaublich schwer durchzuziehen. Aus diesem Grund ist es normalerweise sicherer, entweder ein helles oder ein dunkles Layout zu wählen. Im Abschnitt Vorgefertigte Layouts der Divi-Bibliothek finden Sie eine Menge heller und dunkler Layouts, die Sie beim Erstellen jeder Art von Website kostenlos verwenden können. Was aber, wenn Ihnen das Layout gefällt, Sie aber lieber eine dunklere Farbpalette hätten oder umgekehrt?

Mit den Effizienzfunktionen von Divi ist der Wechsel von einem hellen zu einem dunklen Layoutpaket und umgekehrt einfacher denn je. In diesem Beitrag zeigen wir Ihnen, wie Sie in nur 5 Schritten aus einem hellen Layout ein dunkles machen. Die Zeit, die für diesen Übergang benötigt wird, ist unglaublich gering, wenn Sie die richtigen Techniken anwenden. Beachten Sie, dass die Anzahl der Schritte, die Sie ausführen müssen, immer von dem Layout abhängt, an dem Sie arbeiten, aber sobald Sie den Gesamtansatz verstanden haben, können Sie ihn für jedes Layout verwenden, mit dem Sie zu tun haben.

Lasst uns anfangen!

Vorschau

In nur 5 Schritten ändern wir die helle Landingpage des Web Freelancer Layout Packs in eine dunkle.

Landing Page für Web-Freelancer hochladen

Fügen Sie eine neue Seite hinzu und aktivieren Sie Visual Builder

Beginnen Sie damit, eine neue Seite hinzuzufügen, Ihrer Seite einen Titel zu geben und zu Visual Builder zu wechseln.

Laden Sie das Layout-Paket für Web-Freelancer hoch

Wählen Sie aus den drei Optionen, die auf Ihrem Bildschirm angezeigt werden, ein vorgefertigtes Layout hoch.

Suchen Sie die Landingpage des Web Freelancer Layout Packs in der Liste der kostenlosen Layout Packs und laden Sie sie hoch, indem Sie auf die grüne Schaltfläche mit der Aufschrift 'Dieses Layout verwenden' klicken.

Schritt 1: Gesamthintergrundfarbe ändern

Abschnittshintergrundfarbe des ersten Abschnitts ändern

Zeit zu starten! Als ersten Schritt empfehlen wir Ihnen, die Hintergrundfarbe aller Abschnitte auf Ihrer Seite zu ändern. Sobald Sie dies getan haben, werden Sie schnell erkennen, welche Designelemente geändert werden müssen, damit sie der dunklen Hintergrundfarbe entsprechen. Öffnen Sie den ersten Abschnitt der Seite und wählen Sie '#0c0c0c' als Hintergrundfarbe des Abschnitts.

Stil auf alle Abschnitte erweitern

Sobald Sie die Hintergrundfarbe hinzugefügt haben, klicken Sie mit der rechten Maustaste darauf und klicken Sie auf die Option "Hintergrundfarbe erweitern".

Wenn Sie dies getan haben, können Sie die Hintergrundfarbe auf alle Abschnitte auf der Seite erweitern.

Schritt 2: Textfarben ändern

Öffnen Sie das Header-Modul in voller Breite und ändern Sie die Textfarbe

Der nächste Schritt ist das Ändern der verwendeten Textfarben. Wie Sie vielleicht wissen oder nicht, gibt es in Divi eine Standardoption, mit der Sie eine helle oder dunkle Farbpalette für den Text auf Ihrer Seite auswählen können. Sobald Sie jedoch eine benutzerdefinierte Farbe auswählen, wird diese Option durch die von Ihnen ausgewählte benutzerdefinierte Farbe ersetzt. Anstatt jedes der Elemente zu überprüfen, um zu sehen, ob dort eine benutzerdefinierte Farbe vorhanden ist, wählen Sie im Fullwidth Header-Modul "Light" als Textfarbe aus.

Stil auf alle Module erweitern

Erweitern Sie dann diese helle Textfarbe, indem Sie mit der rechten Maustaste klicken und die Option "Textfarbe erweitern" auswählen.

Erweitern Sie diese neue Farbe auf alle Module auf der gesamten Seite.

Ändern Sie benutzerdefinierte Farben mit der Mehrfachauswahlfunktion

Wie bereits erwähnt, gilt der vorherige Schritt nicht für Farben, die im Voraus ausgewählt wurden. Die Toggle-Module haben beispielsweise eine benutzerdefinierte Titeltextfarbe. Anstatt jeden der Schalter einzeln zu ändern, wählen Sie alle auf einmal aus, indem Sie die Strg-/Befehlstaste auf Ihrer Tastatur verwenden und jedes der Module einzeln anklicken. Wenn Sie alle ausgewählt haben, klicken Sie auf das Einstellungssymbol.

Jetzt können Sie Änderungen für jedes der ausgewählten Module gleichzeitig vornehmen. In diesem Fall ändern wir die Titeltextfarbe in '#848484'.

Schritt 3: Schaltflächen ändern

Open Button One Einstellungen des Fullwidth Headers

Es ist wichtig, dass die Calls-to-Action auf Ihrer Seite immer mit der Farbpalette des Layouts übereinstimmt. In diesem Fall haben wir ein Button-Modul, das sowohl auf einem hellen als auch auf einem dunklen Layout gut aussieht. Aus diesem Grund werden wir es auch auf die anderen Schaltflächen auf der Seite ausweiten. Gehen Sie weiter und öffnen Sie das Fullwidth Header Module und gehen Sie zu den Button One-Einstellungen.

Erweitern Sie den Stil der Schaltfläche auf alle Schaltflächen auf der Seite

Klicken Sie dann mit der rechten Maustaste auf die Button One-Einstellungen und wählen Sie die Option "Button One-Stile erweitern".

Erweitern Sie den Schaltflächenstil auf alle Schaltflächen auf der gesamten Seite.

Ändern Sie die Textfarbe von Button 2 im Heldenbereich

Die Erweiterungsfunktion erreicht nicht die zweite Schaltfläche des Fullwidth Header Module, da es sich nicht um ein eigenständiges Modul handelt. Aus diesem Grund werden wir die Einstellungen von Button Two öffnen und die Textfarbe in '#ffffff' ändern.

Stile auf alle Header mit voller Breite auf der Seite erweitern

Um sicherzustellen, dass diese Textfarbe auf alle Header-Module mit voller Breite auf der Seite angewendet wird, werden wir sie ebenfalls erweitern.

Nachdem Sie mit der rechten Maustaste auf die Textfarbe geklickt und die Option "Textfarbe für Schaltfläche zwei erweitern" ausgewählt haben, können Sie sie auf alle Kopfzeilen in voller Breite auf der gesamten Seite anwenden.

Schritt 4: Benutzerdefinierten Rand entfernen und durch benutzerdefinierten Abstand ersetzen

Benutzerdefinierten Rand entfernen

Wenn Sie zu einem dunklen Layout wechseln, ist es auch wichtig, alle benutzerdefinierten Randwerte zu entfernen, die Leerzeichen auf Ihre Seite bringen.

Verwenden Sie stattdessen benutzerdefiniertes Padding

Sie können jedoch den zuvor vorhandenen Abstand beibehalten, indem Sie stattdessen den benutzerdefinierten Rand als benutzerdefinierten Abstand hinzufügen.

Schritt 5: Spezielle Designeinstellungen suchen und ändern

Bestimmen Sie spezielle Designeinstellungen

Der letzte Schritt, den Sie ausführen müssen, ist für jedes der Layouts sehr spezifisch. Die Designelemente, die für ein Layout einzigartig sind, müssen ebenfalls geändert werden. Dies kann einige der folgenden Einstellungen umfassen, ist aber nicht darauf beschränkt:

• Box-Schatten
• Spaltenhintergründe
• Symbolfarben
• Teilerfarben
• …

Verwenden Sie Suchen und Ersetzen für die Schattenfarbe des Zeilenrahmens

Für dieses spezielle Layout müssen wir unter anderem die Schattenfarbe der Zeilenbox ändern. Öffnen Sie die Zeileneinstellungen und klicken Sie mit der rechten Maustaste auf den Boxschatten, ohne ihn zu ändern. Wählen Sie dann die Option "Suchen und Ersetzen".

Die Verwendung der Funktion Suchen & Ersetzen ist der beste Weg, wenn Sie einen bestimmten Farbcode auf der gesamten Seite ändern möchten. Sie können ihn einfach durch einen anderen Farbcode ersetzen, in diesem Fall '#33302f'. Dadurch wird sichergestellt, dass Sie nicht alle Designelemente durchsuchen müssen, um genau zu sehen, wo eine Farbe verwendet wurde.

Einmalige Einstellungen manuell ändern

Es gibt jedoch auch innerhalb von Layouts einmalig wiederkehrende Designeinstellungen. Um diese zu ändern, müssen Sie dies manuell tun. Die Zeile im Druckbildschirm unten hat beispielsweise eine Kastenschattenfarbe, die an anderer Stelle auf der Seite nicht verwendet wurde. Deshalb ändern wir es manuell in '#33302f'.

Vorschau

Werfen wir einen letzten Blick auf das Endergebnis, nachdem wir die fünf Schritte durchlaufen haben.

Abschließende Gedanken

In diesem Beitrag haben wir Sie durch die Umwandlung eines hellen Layout-Pakets in ein dunkles in nur 5 Schritten geführt. Die Anzahl der Schritte, die Sie ausführen müssen, hängt immer vom Layout ab, an dem Sie arbeiten, aber insgesamt bleibt der Ansatz gleich. Wenn Sie Fragen oder Anregungen haben, lassen Sie es uns im Kommentarbereich unten wissen!