Springe zum Hauptinhalt

So implementieren Sie mit Divi den Dunkelmodus auf Ihrer Site

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

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 verfügen normalerweise über integrierte Funktionen für den Dunkelmodus. Einige Entwickler bringen diese jedoch auf eine andere Ebene, indem sie ein benutzerdefiniertes Dunkelmodus-Erlebnis für ihre Website hinzufügen. Die Idee ist, mehr Kontrolle darüber zu erlangen, wie ihre Website im dunklen Modus aussieht, ohne Kompromisse bei Branding 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.

Dunkelmodus umschalten

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 werden wir einen Dark-Mode-Toggle mit einer Seite in Divi erstellen. Sobald der Umschalter mit dem Code erstellt wurde, können Sie ihn in der Divi-Bibliothek speichern und an einer beliebigen Stelle auf Ihrer Website hinzufügen.

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

Divi Abschnitt

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

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

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Divi-Zusammenfassungsmodul

Konzeption

Gehen Sie zu den Designeinstellungen und aktualisieren Sie Folgendes:

  • Symbolfarbe: # 666666
  • Bild- / Symbolausrichtung: links
  • Symbol Schriftgröße: 22 Pixel
Divi Icon Konfiguration
  • Breite: 50px
  • Ausrichtung des Moduls: Mitte
  • Höhe: 25px
Aufteilungskonfiguration
  • Rand: 0px niedrig
  • Abgerundete Ecken: 4px
  • Randbreite: 2px
  • Randfarbe: # 666666
Divi Border Konfiguration

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.

Divi-Umschalttaste

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
Umschalttaste für Schriftarten

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.

Codemodul hinzufügen

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
Code CSS Divi

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
CSS Selector Divi Abschnitt

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 "Vorhandenen Inhalt ersetzen" NICHT ausgewählt ist. Sie möchten den Abschnitt nicht mit dem Dunkelmodus-Umschalter löschen.

Wählen Sie Divi 1 Layout

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.

Zu allen Fachabschnitten hinzufügen

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.

Zu Textmodulen hinzufügen

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.

Löschmodus

Und so sollte die Seite im dunklen Modus aussehen.

Dunkler Modus

Zusätzliche Ressourcen

Hier sind einige andere Ressourcen, die für Sie von Interesse sein können.

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.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
0 Aktien
Aktie
tweet
Registrieren