So fügen Sie Elementor den Dunkelmodus hinzu

In diesem Tutorial fügen wir einer Elementor-Website einen Front-End -Dunkelmodus hinzu.

Der Inhalt dieses Artikels folgt genau den Schritten, die in unserem allgemeinen Beitrag „Wie füge ich den Dunkelmodus zu WordPress hinzu“ von vor ein paar Monaten beschrieben wurden, aber wir haben hier alles angepasst, um Ihnen zu zeigen, wie Sie schnell und einfach einen Dunkelmodus hinzufügen können zu einer Elementor-Website.

Wenn Sie mit dem Dunkelmodus nicht vertraut sind, denken Sie an Ihr iOS-Gerät, Ihre Facebook-Seite oder Ihren Reddit-Browser. Alle diese Benutzeroberflächen ermöglichen es Ihnen, zwischen einem „normalen“ UI-Farbschema und einem „dunklen“ UI-Farbschema umzuschalten.

Der Dunkelmodus ist eine großartige Ergänzung für Ihre Website, da er das Lesen von Inhalten bei Nacht erleichtert, weniger Gerätebatterie verbraucht und einfach cool aussieht. Es hat in den letzten Jahren viel mehr Popularität erlangt, da die meisten großen Anwendungen und Plattformen ihren eigenen „Nachtmodus“ hinzugefügt haben.

Wenn Sie eine Website mit Elementor erstellt haben, ist es relativ einfach, Ihrem Frontend einen Nachtmodus hinzuzufügen.

Der Editor verfügt bereits über einen Backend-Dunkelmodus – jetzt ist es an der Zeit, diese Funktionalität zum Frontend hinzuzufügen.

Wenn es darum geht, den Dunkelmodus zu WordPress und Elementor hinzuzufügen, gibt es zwei Hauptkomponenten. Erstens ist dies die eigentliche Benutzeroberfläche, die Sie zum Umschalten zwischen den beiden Farbschemata verwenden, und zweitens die Farben, die angewendet werden, wenn der Dunkelmodus umgeschaltet wird.

Farben im dunklen Modus finden

Der erste Schritt zum Hinzufügen des Dunkelmodus zu Elementor ist das Finden/Generieren der Dunkelmodusfarben.

Wir verwenden gerne eine kostenlose Website namens Color Hunt, um dunkle Farbpaletten zu finden, die wir einfach in unsere Website integrieren können.

Gelegentlich wählen wir einfach die Umkehrung der Originalfarbe auf der Seite. Wenn Ihr Hintergrund beispielsweise weiß ist, wäre die Dunkelmodus-Version davon schwarz. Die Textfarbe wird normalerweise in Weiß oder Hellgrau umgewandelt, und Akzentfarben bleiben normalerweise gleich, wenn sie auf beiden Hintergründen funktionieren.

Hier sind einige unserer bevorzugten Farben, wenn wir dunkle Modi für Elementor-Sites erstellen:

Lesen Sie hier unseren Leitfaden zur Verwendung von Coolors.co.

Planen Sie Ihren Dark Mode

Sobald Sie Ihre Dunkelmodusfarben herausgefunden haben, ist es hilfreich zu planen, welche Elementor-Elemente tatsächlich geändert werden, wenn Sie den Dunkelmodus einschalten. In einigen Fällen gibt es bereits dunkle Hintergründe, die nicht geändert werden müssen, und in anderen Fällen müssen Sie Bilder, Schriftarten und allgemeine Hintergrundfarben ändern.

Nachdem wir festgestellt haben, welche Elemente ihre Farbe ändern müssen, wenn der Dunkelmodus umgeschaltet wird, weisen wir ihnen normalerweise eine benutzerdefinierte CSS-ID zu, indem wir die Registerkarte „Erweitert“ des Elementor-Editors verwenden.

Dunklen Modus zu Elementor hinzufügen

Um den Dunkelmodus tatsächlich zu Elementor hinzuzufügen, werden wir ein WordPress-Plugin verwenden, das für diese Aufgabe entwickelt wurde. Natürlich können Sie dies mit JavaScript und CSS tun (was dieses Plugin im Wesentlichen tut), aber wenn Sie es auf diese Weise tun, sparen Sie viel Zeit und Mühe.

Unseren Tests zufolge gibt es keinen merklichen Leistungsabfall, wenn Darkmode in die Website integriert wird.

Das Plugin heißt WP Night Mode und ist im WordPress-Repository frei verfügbar. Es gibt ein paar andere Angebote, obwohl WP Night Mode bei weitem das leistungsfähigste und erweiterbarste ist (ganz zu schweigen davon – es ist kostenlos!).

Dieses Plugin bietet die zwei wichtigsten Dinge, die Sie benötigen, wenn Sie einer Elementor-Website einen Dunkelmodus hinzufügen. Erstens können Sie über einen kurzen Code überall auf Ihrer Website einen Umschalter für den Dunkelmodus platzieren. Zweitens können Sie festlegen, welche Farben überall auf der Website angewendet werden, wenn Sie diesen Dunkelmodus umschalten.

Fügen Sie nach der Installation den Dunkelmodus-Schalter zu Ihrer Elementor-Website hinzu. Dies geschieht durch Hinzufügen eines Shortcodes an beliebiger Stelle. In diesem Beispiel fügen wir den Kurzcode oben auf der Seite hinzu (nur zu Demozwecken), aber der Elementor Pro Header Editor ist praktisch für Produktionsanwendungen des Dark Mode in Elementor.

                            

                        
Codesprache: JSON / JSON mit Kommentaren ( json )

Sie können den Shortcode auch in einer Seitenleiste oder direkt im Menü platzieren, indem Sie dieses Plugin verwenden. Das Plugin verfügt über vier integrierte Umschaltstile, zwischen denen Sie durch Angabe im Shortcode wählen können.

                            

                        
Codesprache: JSON / JSON mit Kommentaren ( json ) 

Nachdem Sie den Schalter platziert haben, ist es an der Zeit, das Dunkelmodus-Styling auf Ihre Website anzuwenden. Öffnen Sie zuerst den Customizer und implementieren Sie Ihre Grundfarbe.

Auf der Registerkarte „Nachtmodus“ im Customizer können Sie Ihren Körperhintergrund, die Textfarbe, die Linkfarbe und die Link-Hover-Farbe ändern. Um irgendetwas anderes zu ändern, müssen wir ein benutzerdefiniertes CSS verwenden, das wir im nächsten Abschnitt dieses Artikels besprechen werden.

Füllen Sie zunächst die Farboptionen im Customizer mit Ihrem Dunkelmodus-Farbschema aus. Sie können sogar den Nacht-/Dunkelmodus als Standardfarbe Ihrer Website festlegen.

Wenn Sie im Customizer den Dunkelmodus einschalten, sehen Sie, dass einige Änderungen vorgenommen wurden, aber die Website sieht etwas kaputt aus. Dies liegt daran, dass der Nachtmodus nicht auf alles angewendet werden kann, was Elementor und Ihr Thema standardmäßig zu bieten haben. Stattdessen müssen wir einige benutzerdefinierte CSS-Spezifikationen erstellen.

Benutzerdefinierte CSS-Nachtmodusanwendung in Elementor

Der benutzerdefinierte CSS-Bezeichner macht dieses Plugin so leistungsfähig. Sie müssen nicht einmal benutzerdefiniertes CSS kennen, um den Dunkelmodus auf Elementor anzuwenden, da dies sehr einfach und leicht durchzuführen ist.

 body.wp-night-mode-on .elementor-selector { night mode styling }

Ihr Arbeitsablauf ist einfach: Identifizieren Sie die Bereiche, die benutzerdefinierte CSS-Dunkelmodus-Stile benötigen, und wenden Sie dann die Farben an.

Derzeit sieht unsere Seite mit dem standardmäßigen Nachtmodus-Stil (im vorherigen Schritt angewendet) etwas kaputt aus. Um die Dinge zu bereinigen, werden wir alles spezifizieren, auf das der Dunkelmodus nicht angewendet wird, indem wir unser benutzerdefiniertes CSS verwenden.

Dies kann auf Seitenbasis hinzugefügt werden, indem die erweiterten benutzerdefinierten CSS-Einstellungen von Elementor für die Seite, die benutzerdefinierte CSS-Eingabe im WordPress-Anpasser oder ein Drittanbieter-Plugin wie YellowPencil verwendet werden.

Sie können sicherstellen, dass Ihre benutzerdefinierten CSS-Stile nur für den Nachtmodus gelten, indem Sie ihnen das Präfix „body.wp-night-mode-on“ voranstellen, dann Ihren allgemeinen Selektor hinzufügen und schließlich die Stilregeln hinzufügen.

Beispielsweise würde dies jedes Schriftelement mit der CSS-Klasse „element-class“ nur dann in Schwarz ändern, wenn der Nachtmodus aktiviert ist.

body.wp-night-mode-on .element-class { color: #000; }

Wir werden YellowPencil verwenden, und es ist unser empfohlenes Plugin für die Verwaltung vieler benutzerdefinierter CSS mit Elementor. Zuerst behandeln wir den Dev Tools-Workflow, der kostenlos ist.

Entwicklungstools-Workflow

Identifizieren Sie zunächst den spezifischen Selektor des Elements, das Sie ändern müssen, wenn der Dunkelmodus angewendet wird. Zum Beispiel ändern alle unsere Überschriften ihre Farbe nicht, wenn das standardmäßige Nachtmodus-Styling angewendet wird. Um dies sicherzustellen, verwenden wir benutzerdefiniertes CSS.

Um seinen Selektor zu identifizieren, können Sie Entwicklungswerkzeuge oder den gelben Stift verwenden. Klicken Sie mit den Entwicklungswerkzeugen mit der rechten Maustaste auf das Element, das Sie für Ihr Dunkelmodus-Styling ändern müssen, und klicken Sie auf „Element prüfen“.

Hier können Sie sehen, dass unsere Überschrift durch den h2-Selektor und die benutzerdefinierte CSS-Klasse „.Elementor-heading-title“ angegeben wird.

Um dies in Weiß zu ändern, wenn der Dunkelmodus auf unserer Elementor-Site aktiviert ist, erstellen wir einfach eine CSS-Regel wie diese:

body.wp-night-mode-on h2 .Elementor-heading-title { color: #fff; }

Im Wesentlichen bedeutet dies, dass die Titelklasse der Elementor-Überschrift weiß ist, wenn der Dunkelmodus aktiviert ist. Wenn der Dunkelmodus deaktiviert ist, wird dieses Styling nicht angewendet.

Anschließend schreiben wir alle CSS-Stilregeln für den Dunkelmodus mit dem kostenlosen Tool Microsoft Visual Studio Code in ein Desktop-Stylesheet.

Normalerweise wenden wir das Styling auf allgemeine Selektoren wie h1, h2, h3 oder Section oder Div an und optimieren es dann, indem wir die eindeutige Klasse verwenden, die jedem Elementor-Element zugewiesen wird. Wenn wir beispielsweise die Hintergrundfarbe einer bestimmten Spalte in Elementor ändern möchten, müssen wir lediglich ihre eindeutige CSS-Klasse identifizieren.

Aus dieser einzigartigen CSS-Klasse generieren wir unsere CSS-Regel:

body .wp-night-mode-on .elementor-element-5b14c912 { background-color : rgba ( 0 , 0 , 0 , 0 ); }
 Codesprache: CSS ( css )

Auch diese Regel ist in unserem Stylesheet niedergeschrieben, das im Visual Studio-Code enthalten ist.

Mit dem Dunkelmodus in Elementor ändern wir normalerweise nur die Hintergrundfarbe oder die Textfarbe.

Der Workflow wird fortgesetzt, bis das Stylesheet erstellt ist. Firefox Devtools zum Identifizieren des Selektors des Elements, VS Code zum Schreiben des CSS.

Wir kopieren es dann und fügen es direkt in die benutzerdefinierte CSS-Eingabe unter Erscheinungsbilder anpassen ein und testen, ob unser Nachtmodus/Dunkelmodus jetzt auf alle Elemente der Website angewendet wird.

Wenn Sie das „Identifizieren einer eindeutigen Klasse“ für diesen Workflow ausschneiden möchten, können Sie Ihre eigene benutzerdefinierte CSS-ID oder -Klasse direkt im Elementor-Editor angeben und dann das Dunkelmodus-Styling aus diesem Selektor generieren.

Yellowpencil-Workflow

Unsere Agentur verwendet YellowPencil, um benutzerdefiniertes CSS für unsere Elementor-Websites zu verwalten, und wollte Ihnen zeigen, wie sich dies in unseren Arbeitsablauf einfügt, wenn wir Elementor den Dunkelmodus hinzufügen. Mit YellowPencil können Sie auf bestimmte Elemente zeigen und klicken, und es füllt Ihren CSS-Editor automatisch mit dem entsprechenden Selektor.

Wenn Sie interessiert sind, werfen Sie einen Blick auf diesen Artikel:

YellowPencil spart uns viel Zeit und macht es wirklich einfach, viele benutzerdefinierte CSS anzuwenden und zu verwalten.

Sie müssen es nicht einmal schreiben, da dieses Tool über eine visuelle Benutzeroberfläche verfügt, die automatisch CSS aus Ihren Eingaben generiert.

Stellen Sie nach dem Generieren dieses Basiscodes sicher, dass Sie ihm body.wp-night-mode-on voranstellen , klicken Sie auf Speichern, und er wird auf Ihre Website angewendet.

Allgemeine CSS-Regeln für den dunklen Modus für Elementor

Sie können die meisten Ihrer Hauptüberschriften ändern, indem Sie einfach:

body .wp-night-mode-on h1 , body .wp-night-mode-on h2 , body .wp-night-mode-on h3 , body .wp-night-mode-on h4 , body .wp-night-mode-on h5 , body .wp-night-mode-on h6 { color : #fff }
 Codesprache: CSS ( css )

Sie können Abschnittshintergründe ändern, indem Sie alle zu ändernden Abschnitte angeben:

body .wp-night-mode-on section { background-color : #2F374A }
 Codesprache: CSS ( css )

Sie können dies auch mit Spalten und anderen Selektoren tun.

body .wp-night-mode-on .elementor-column { background-color : #2F374A }
 Codesprache: CSS ( css )

Zu den gängigen Elementor-CSS-Selektoren gehören:

• Elementor-Zeile
• Elementor-Bild
• Elementor-Widget
• elementor-button

Elementor verwendet gerne span, sodass Sie Elemente adressieren können, die so aussehen,

Mit:

body .wp-night-mode-on span { background-color : #2F374A }
 Codesprache: CSS ( css )

Sie können auch Hover-Effekte festlegen (obwohl Sie bei Ihrer Auswahl spezifisch sein sollten):

body .wp-night-mode-on span :hover { background-color :pink}
 Codesprache: CSS ( css )

Wenn die Bilder auf Ihrem dunklen Hintergrund funktionieren, können Sie sie in Ruhe lassen, aber oft haben Sie dunkle Bilder, die geändert werden müssen. Sie adressieren Bilder in Ihrem Elementor-Dunkelmodus mit einer Sammlung von Methoden.

Erstens könnten Sie einfach die Hintergrundfarbe ändern (wie wir es im obigen Beispiel getan haben).

Sie können auch den CSS-Filter invert(1) anwenden, um die Farben vollständig zu invertieren. Das ist großartig, wenn Sie ein solides PNG mit transparentem Hintergrund haben.

Wenn Sie noch einen Schritt weiter gehen, können Sie sowohl den Helligkeits- als auch den Umkehrfilter integrieren, um das PNG mit einem transparenten Hintergrund in Weiß zu ändern.

 Filter : brightness(0) invert (1)
 Codesprache: HTTP ( http )

Sie können das Originalbild auch einfach ersetzen, indem Sie es ausblenden (Opazität, Anzeige oder Sichtbarkeit) und background-image in seinem Wrapper verwenden, um es durch etwas Neues zu ersetzen.

Abgesehen davon besteht es nur darin, dass Sie die Selektoren für jedes der Elemente finden, für die Sie das Styling ändern müssen, wenn der Dunkelmodus in Elementor angewendet wird, die CSS-Regel schreiben und sie dann zu Ihrer WordPress-Website hinzufügen.

Youtube-Tutorial

Wenn Sie interessiert sind, hier ist unser YouTube-Tutorial. Dies wurde nicht speziell für Elementor erstellt, aber es gibt Ihnen eine allgemeine Anleitung und hilft Ihnen, den Prozess des Hinzufügens eines Dunkelmodus zu Ihrem Elementor-Website-Frontend zu visualisieren.

Fazit

Wir hoffen, dass dieser Artikel hilfreich war und Ihnen beigebracht hat, wie Sie einer Elementor-Website einen Front-End-Dunkelmodus hinzufügen. Weitere Informationen finden Sie in diesem Artikel, obwohl er im Wesentlichen die gleichen Informationen enthält (nicht für Elementor angepasst).

Wir wenden diesen Effekt auf vielen Kunden-Websites an. Wenn Sie also spezielle Fragen haben, wenden Sie sich bitte an unseren Kommentarbereich.