So implementieren Sie mit Divi den Dunkelmodus auf Ihrer Site

Der Dunkle Modus erfreut sich immer größerer Beliebtheit als praktische Option, mit der Benutzer das Web mit weniger Belastung für die Augen erleben können. Seien wir ehrlich, wir alle verbringen mehr Zeit damit, auf Bildschirme zu starren, als wir wahrscheinlich sollten, sodass jeder zusätzliche Komfort für die Benutzererfahrung (wie der Dunkelmodus) einen langen Weg gehen kann. 

Betriebssysteme, Programme und Browser enthalten in der Regel integrierte Dark-Mode-Funktionen, aber einige Entwickler bringen es auf eine andere Ebene, indem sie eine benutzerdefinierte Dark-Mode-Erfahrung für sie integrieren Website. Die Idee ist, mehr Kontrolle über das Erscheinungsbild ihrer zu übernehmen Website im dunklen Modus, ohne Kompromisse bei Marke und/oder Design eingehen zu müssen.

In diesem Tutorial zeigen wir Ihnen, wie Sie in Divi ohne Plugin einen benutzerdefinierten Umschalter für den dunklen Modus erstellen. Mit dieser Umschaltfunktion für den dunklen Modus haben Sie die Kontrolle über das Design des dunklen Modus und eine bessere Benutzererfahrung, die auf Ihre Marke zugeschnitten ist.

Lassen Sie uns beginnen!

Übersicht

Hier ist eine Vorschau des Designs, das wir in diesem Tutorial erstellen werden.

Hier ist der benutzerdefinierte Umschalter für den dunklen Modus, den wir erstellen werden.

Und hier ist das Vorher-Nachher-für-Dunkel-Modus, das auf eines unserer vordefinierten Layouts angewendet wird.

Und hier ist der Umschalter für den dunklen Modus, der einem globalen Header hinzugefügt wurde. Beachten Sie, wie der Hell / Dunkel-Modus beim Durchsuchen der Site erhalten bleibt.

Teil 1: Aufbau des Schalters aus dem Dunkelmodus

In diesem ersten Teil des Tutorials erstellen wir einen Dunkelmodus-Schalter mit einer Seite in Divi. Sobald der Schalter mit dem Code erstellt wurde, können Sie ihn in der Divi-Bibliothek speichern und an einer beliebigen Stelle in Ihrer Bibliothek hinzufügen Website.

Fügen Sie zunächst eine einspaltige Zeile zum Standardabschnitt hinzu, wenn Sie mit Divi am Frontend von Grund auf neu erstellen.

Zusammenfassungsmodul hinzufügen

Um den benutzerdefinierten Umschalter zu erstellen, entwerfen wir ein Blurb-Modul mit etwas benutzerdefiniertem CSS.

Fügen Sie der Zeile ein neues Präsentationstextmodul hinzu.

Inhalt

Entferne das Inhalt Standard-Dummy für Titel und Text. Fügen Sie dann anstelle des Bildes das quadratische Symbol hinzu.

Technologie

Gehen Sie zu den Designeinstellungen und aktualisieren Sie Folgendes:

• Symbolfarbe: # 666666
• Bild- / Symbolausrichtung: links
• Symbol Schriftgröße: 22 Pixel

• Breite: 50px
• Ausrichtung des Moduls: Mitte
• Höhe: 25px

• Rand: 0px niedrig
• Abgerundete Ecken: 4px
• Randbreite: 2px
• Randfarbe: # 666666

Benutzerdefiniertes CSS

Wechseln Sie nach dem Entwurf zur Registerkarte "Erweitert". Fügen Sie unter Benutzerdefiniertes CSS das folgende benutzerdefinierte CSS zum Hauptelement hinzu, um sicherzustellen, dass der Überlauf nicht durch die Gestaltung der abgerundeten Ecken verdeckt wird.

Überlauf: sichtbar! wichtig;

Fügen Sie dann dem After-Element das folgende benutzerdefinierte CSS hinzu:

Inhalt: "Licht"; Position: absolut; links: -35px; oben: 0px;

Dies fügt dem Klappentext-Modul eine Beschriftung hinzu, die wir beim Klicken von "hell" auf "dunkel" ändern.

Körpertextdesign

Da der Post-Pseudo-Element-Text die Body-Text-Stile erbt, können wir die Body-Text-Stile mithilfe der Divi-Optionen wie folgt hinzufügen:

• Körperschrift: Roboto
• Körpertextfarbe: # 666666
• Körpertextgröße: 13px
• Abstand der Buchstaben des Körpers: 1px

Hinzufügen von benutzerdefiniertem Code mit einem Codemodul

Um den erforderlichen Code (CSS / JQuery) für die Umschaltung des Dunkelmodus hinzuzufügen, verwenden wir ein Codemodul.

Erstellen Sie ein neues Codemodul unter dem Klappentext in derselben Spalte.

Fügen Sie dann den folgenden Code in den Codebereich ein:

/*** Dark Mode Toggle Styles*/.et-dark-mode {transition: all .5s;}.et-dark-toggle {cursor: pointer;transition: all .5s;}body.et-dark-mode .et-dark-toggle {border-color: #666666;}body.et-dark-mode .et-dark-toggle:after {content:"dark";color: #666666;left: 54px;}body.et-dark-mode .et-dark-toggle .et_pb_blurb_content {text-align:right;}body.et-dark-mode .et-dark-toggle .et-pb-icon {color: #666666;}/*** Body Dark Mode Style*/body.et-dark-mode {background-color: #23282d !important;}/*** Divi Element Dark Mode Styles** Here you can add styling for each Divi Element that has the class "et-dark-mode-capable".*//* Section with dark mode */.et_pb_section.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;background-blend-mode: overlay;transition: opacity .5s ease-in-out;color: #dddddd !important;}/* Row with dark mode */.et_pb_row.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Column with dark mode */.et_pb_column.et-dark-mode-capable.et-dark-mode {background-color: #23282d !important;color: #dddddd !important;}/* Module with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode {background-color: transparent !important;color: #dddddd !important;}/* Text Headings with dark mode */.et_pb_module.et-dark-mode-capable.et-dark-mode.et_pb_module_header,.et_pb_module.et-dark-mode-capable.et-dark-mode h1,.et_pb_module.et-dark-mode-capable.et-dark-mode h2,.et_pb_module.et-dark-mode-capable.et-dark-mode h3,.et_pb_module.et-dark-mode-capable.et-dark-mode h4,.et_pb_module.et-dark-mode-capable.et-dark-mode h5,.et_pb_module.et-dark-mode-capable.et-dark-mode h6 {color: #dddddd !important;}function storageAvailable(type) {try {var storage = window[type],x = '__storage_test__';storage.setItem(x, x);storage.removeItem(x);return true;}catch(e) {return e instanceof DOMException && (// everything except Firefoxe.code === 22 ||// Firefoxe.code === 1014 ||// test name field too, because code might not be present// everything except Firefoxe.name === 'QuotaExceededError' ||// Firefoxe.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&// acknowledge QuotaExceededError only if there's something already storedstorage.length !== 0;}}jQuery(document).ready(function($) {var storageAvailable = window.storageAvailable('sessionStorage');$(".et-dark-toggle").click(function() {$(".et-dark-mode-capable,body").toggleClass("et-dark-mode");if ( storageAvailable ) {$("body").hasClass("et-dark-mode") ?sessionStorage.setItem('etDarkModeEnabled','1'):sessionStorage.removeItem('etDarkModeEnabled');}});if (storageAvailable) {'1' == sessionStorage.getItem('etDarkModeEnabled') ?$(".et-dark-mode-capable,body").addClass("et-dark-mode"):$(".et-dark-mode-capable,body").removeClass("et-dark-mode");}});

Hinzufügen von benutzerdefinierten CSS-Klassen

Für benutzerdefinierten Code muss dem Blurb-Modul oder -Switch eine benutzerdefinierte CSS-Klasse hinzugefügt werden. Auf diese Weise kann der Klappentext die Umschalt- und Klickfunktion im Dunkelmodus auslösen.

Klappentext-Modulklasse

Öffnen Sie die Blurb-Moduleinstellungen und fügen Sie eine benutzerdefinierte CSS-Klasse wie folgt hinzu:

• CSS-Klasse: et-dark-toggle

Klasse im dunklen Modus

Wir müssen außerdem jedem Divi-Element eine benutzerdefinierte CSS-Klasse hinzufügen, für die der Dunkelmodus aktiviert werden soll. Sobald das Element die CSS-Klasse hat, erbt dieses Element das benutzerdefinierte CSS für den „dunklen Modus“ in dem Code, den wir nach Aktivierung des dunklen Modus hinzugefügt haben. Diese Methode gibt uns mehr Kontrolle über unser Dunkelmodus-Design, da einige Elemente im Dunkelmodus möglicherweise nicht gestylt werden müssen.

Zu Beginn können wir dem Abschnitt, der unseren Dunkelmodus-Umschalter enthält, den Dunkelmodus hinzufügen.

Öffnen Sie die Abschnittsparameter und fügen Sie die folgende CSS-Klasse hinzu:

• CSS-Klasse: Et-Dark-Mode-fähig

Teil 2: Hinzufügen von Dark Mode-Funktionen zu einer Divi-Seite

Nachdem wir den CSS-Code und die CSS-Klassen eingerichtet haben, können wir die Dark Mode-Funktionalität und das Design auf eine ganze Seite in Divi anwenden. Zu diesem Zweck verwenden wir unser vorgefertigtes Layout der Zielseite der mobilen App.

Öffnen Sie zum Hinzufügen des Layouts das Einstellungsmenü unten im Visual Builder und klicken Sie auf das Symbol Neues Layout hinzufügen.

Wählen Sie dann das Layout der Zielseite der mobilen App auf der Registerkarte Vordefinierte Layouts aus.

Stellen Sie sicher, dass die Option „Ersetzen Inhalt vorhanden“ ist NICHT ausgewählt. Sie möchten den Abschnitt nicht mit der Dunkelmodus-Umschaltung löschen.

Da der Dunkelmodus nur für Elemente mit der CSS-Klasse "fähiger und dunkler Modus" gilt, können Sie die Seite auf verschiedene Arten hinzufügen.

1. Wir können die CSS-Klasse jedem Element der Seite einzeln hinzufügen.
2. Wir könnten die CSS-Klasse auf Elemente auf der ganzen Seite erweitern (das wäre schneller als manuell). Beispielsweise könnten wir die Abschnittseinstellungen für den oberen Abschnitt öffnen und die CSS-Klasse für diesen Abschnitt auf alle Abschnitte auf der Seite erweitern.
3. Wir können die CSS-Klasse zu den globalen Standardeinstellungen des Elements hinzufügen. Dadurch wird die CSS-Klasse auf alle standortweiten Elemente angewendet, wodurch die Dunkelmodusfunktion für die gesamte Site hinzugefügt wird. Beispielsweise könnten wir Abschnittseinstellungen öffnen und auf das globale Standardsymbol klicken, um die Standardeinstellungen für globale Abschnitte zu ändern. Dann können wir die CSS-Klasse hinzufügen und als CSS-Klasse für alle Abschnitte der Site registrieren.

Hinzufügen der CSS-Klasse zu Seitenelementen

In diesem Beispiel aktualisieren wir die Seitenelemente, indem wir die CSS-Klasse zu globalen Standardeinstellungen für Abschnitte und Textmodule hinzufügen. Außerdem werden wir im Laufe der Zeit einige Ergänzungen zu anderen Seitenelementen vornehmen.

Alle Abschnitte

Um die CSS-Klasse allen Abschnitten hinzuzufügen, öffnen Sie die Einstellungen des oberen Abschnitts, der den Umschalter für den Dunkelmodus enthält. Ändern Sie dann die globalen Standardeinstellungen des Abschnitts und fügen Sie den globalen Standardeinstellungen des Abschnitts die folgende CSS-Klasse hinzu:

• CSS-Klasse: Et-Dark-Mode-fähig

Alle Fachabteilungen

Fügen Sie die CSS-Klasse auch zu den globalen Standardeinstellungen im Fachbereich hinzu.

Textmodule

Öffnen Sie dann die Einstellungen für eines der Textmodule auf der Seite und fügen Sie den globalen Textstandards dieselbe CSS-Klasse hinzu.

Um das Ergebnis zu testen, gehen Sie zur Live-Seite und klicken Sie auf den dunklen Modus-Schalter oben auf der Seite.

So sollte die Seite im Löschmodus aussehen.

Und so sollte die Seite im dunklen Modus aussehen.

Zusätzliche Ressourcen

Hier sind andere Ressourcen das könnte dich interessieren.

• Wie man Typografie und Layout auf Divi anpassen kann
• So fügen Sie der Aktion auf Divi einen wiederverschließbaren Schiebeaufruf hinzu
• Wie man Elemente auf der gleichen Linie auf Divi ausrichtet
• So erstellen Sie animierte Abschnitte durch Klicken auf Divi Builder

Abschließende Gedanken

Die Ausstattung Ihrer Divi-Site mit einem benutzerdefinierten Umschalter für den dunklen Modus kann eine großartige Möglichkeit sein, die Benutzererfahrung zu verbessern und ein völlig neues Design zu erstellen, das das Auge sowohl erfreut als auch entlastet. Ich hoffe, das wird Ihnen nützlich sein.