Dark Mode fortsätter att bli populär som ett bekvämt alternativ för användare att uppleva webben med mindre belastning på ögonen. Låt oss inse det, vi tenderar alla att spendera mer tid på att stirra på skärmar än vad vi förmodligen borde, så någon extra bekvämlighet för användarupplevelsen (som mörkt läge) kan gå långt.
Operativsystem, program och webbläsare inkluderar vanligtvis inbyggda mörklägesfunktioner, men vissa utvecklare tar det till en annan nivå genom att inkludera en anpassad mörklägesupplevelse för sina webbplats. Tanken är att ta mer kontroll över utseendet på deras webbplats i mörkt läge utan att behöva kompromissa med varumärke och/eller design.
I den här handledningen visar vi dig hur du skapar ett anpassat mörkt läge som växlar i Divi från grunden utan ett plugin. Med denna funktion för att växla i mörkt läge har du kontroll över designen för mörkt läge och har en bättre användarupplevelse skräddarsydd för ditt varumärke.
Låt oss börja!
undersökningen
Här är en förhandsgranskning av designen vi kommer att bygga i denna handledning.
Här är det anpassade mörka läget som vi ska skapa.
Och här är före och efter för mörkt läge tillämpat på en av våra fördefinierade layouter.
Och här är det mörka läget som läggs till i en global rubrik. Lägg märke till hur ljus / mörkt läge kvarstår när du surfar på webbplatsen.
Del 1: Bygga omkopplaren från mörkt läge
I den här första delen av handledningen kommer vi att bygga en mörklägesväxling med en sida i Divi. När växlingen har skapats med koden kommer du att kunna spara den i Divi-biblioteket och lägga till den var som helst i din webbplats.
För att komma igång, lägg till en rad i en kolumn i standardavsnittet när du bygger från grunden med Divi på framsidan.
Lägg till sammanfattningsmodul
För att bygga den anpassade växeln kommer vi att designa en Blurb-modul med lite anpassad CSS.
Lägg till en ny presentationstextmodul till raden.
Innehåll
Ta bort innehåll Standarddocka för titel och text. Lägg sedan till den fyrkantiga ikonen i stället för bilden.
Conception
Gå till designinställningarna och uppdatera följande:
- Ikonfärg: # 666666
- Justering av bild / ikon: vänster
- Ikonstorlek: 22 pixlar
- Bredd: 50px
- Justering av modulen: centrum
- Höjd: 25px
- Marginal: 0px låg
- Rundade hörn: 4px
- Kantbredd: 2px
- Kantfärg: # 666666
Anpassad CSS
När designen är på plats byter du till den avancerade fliken. Under Custom CSS, lägg till följande Custom CSS till huvudelementet för att se till att överflödet inte döljs av utformningen av de rundade hörnen.
överflöd: synligt! viktigt;
Lägg sedan till följande anpassade CSS i After-elementet:
innehåll: "lätt"; position: absolut; vänster: -35px; topp: 0px;
Detta lägger till en etikett till Blurb-modulen som vi kommer att ändra från "ljus" till "mörk" på klick.
Kroppstextdesign
Eftersom texten för post-pseudo-element ärver kroppstextstilarna, kan vi lägga till texttextstilarna med Divi-alternativen enligt följande:
- Kroppstypsnitt: Roboto
- Kroppens textfärg: # 666666
- Kroppstextstorlek: 13px
- Spacing av kroppens bokstäver: 1px
Lägga till anpassad kod med en kodmodul
För att lägga till den nödvändiga koden (CSS / JQuery) för att använda den mörka lägesomkopplingen kommer vi att använda en kodmodul.
Skapa en ny kodmodul under Blurb-modulen i samma kolumn.
Klistra sedan in följande kod i kodområdet:
/*** 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");}});
Lägga till anpassade CSS-klasser
Anpassad kod kräver att du lägger till en anpassad CSS-klass i Blurb-modulen eller växeln. Detta gör det möjligt för blurb att utlösa funktionerna för att växla och klicka på mörkt läge.
Blurb modul klass
Öppna inställningarna för Blurb-modulen och lägg till en anpassad CSS-klass enligt följande:
- CSS-klass: et-dark-toggle
Klass med mörkt läge
Vi måste också lägga till en anpassad CSS-klass till varje Divi-element som vi vill ha möjlighet för mörkt läge. När elementet väl har CSS-klassen ärver det det anpassade CSS "mörka läget" i koden som vi lade till efter att mörkt läge var aktiverat. Denna metod ger oss mer kontroll över vår design i mörkt läge, eftersom vissa element kanske inte behöver stylas i mörkt läge.
Till att börja med kan vi lägga till mörkt läge till det avsnitt som innehåller vårt mörka läge växla.
Öppna sektionsparametrarna och lägg till följande CSS-klass:
- CSS-klass: et-dark-mode-kapabel
Del 2: Lägga till Dark Mode-funktioner på en Divi-sida
Nu när vi har CSS-koden och klasserna på plats är vi redo att använda Dark Mode-funktionalitet och design på en hel sida i Divi. För att göra detta kommer vi att använda vår premade-layout för mobilappens målsida.
För att lägga till layouten öppnar du inställningsmenyn längst ner i den visuella byggaren och klickar på ikonen Lägg till ny layout.
Välj sedan layouten för mobilappens målsida från fliken Fördefinierade layouter.
Se till att alternativet "Ersätt innehåll existerande” är INTE valt. Du vill inte rensa avsnittet med växeln för mörkt läge.
Eftersom stilen för mörkt läge endast kommer att gälla för element med CSS-klassen "kapabel och mörk-läge", kan vi välja att lägga till sidan på olika sätt.
- Vi kan lägga till CSS-klassen till varje element på sidan separat.
- Vi kan utöka CSS-klassen till element över hela sidan (det skulle vara snabbare än att göra det manuellt). Vi kan till exempel öppna sektionsinställningar för det översta avsnittet och utöka CSS-klassen för det avsnittet till alla avsnitt på sidan.
- Vi kan lägga till CSS-klassen i elementets globala standardvärden. Detta kommer att tillämpa CSS-klassen på alla webbplatsövergripande element och lägga till mörkt läge för hela webbplatsen. Vi kan till exempel öppna sektionsinställningar och klicka på den globala standardikonen för att ändra standardvärdena för globala avsnitt. Sedan kan vi lägga till CSS-klassen och registrera den som en CSS-klass för alla delar av webbplatsen.
Lägga till CSS-klassen till sidelement
I det här exemplet uppdaterar vi sidelementen genom att lägga till CSS-klassen i globala standardvärden i avsnitt och textmoduler. Och vi kommer också att göra några tillägg till de andra elementen på sidan när vi går.
Alla avsnitt
För att lägga till CSS-klassen i alla sektioner, öppna inställningarna för den övre sektionen som innehåller växlingen för mörkt läge. Ändra sedan sektionens globala standardvärden och lägg till följande CSS-klass i avsnittet globala standardvärden:
- CSS-klass: et-dark-mode-kapabel
Alla specialiserade avsnitt
Lägg också till CSS-klassen till de globala standardvärdena i det specialiserade avsnittet.
Textmoduler
Öppna sedan inställningarna för en av textmodulerna på sidan och lägg till samma CSS-klass i de globala textinställningarna.
För att testa resultatet, gå till startsidan och klicka på det mörka läget för att växla högst upp på sidan.
Så här ska sidan se ut i klart läge.
Och här är hur sidan ska se ut i mörkt läge.
Ytterligare resurser
Här är andra medel som kan intressera dig.
- Hur man anpassar typografi och layout på Divi
- Hur du lägger till ett avslöjbart glidande samtal till handling på Divi
- Så här anpassar du elementen på samma rad på Divi
- Så här skapar du animerade sektioner genom att klicka på Divi Builder
Avslutande tankar
Att utrusta din Divisida med en anpassad växling i mörkt läge kan vara ett bra sätt att öka användarupplevelsen och skapa en helt ny design som både glädjer och lindrar ögat. Jag hoppas att detta kommer att vara användbart för dig.
