Gå till innehållet

Hur du implementerar mörkt läge på din webbplats med Divi

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

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 funktioner i mörkt läge, men vissa utvecklare tar det till en annan nivå genom att inkludera en anpassad mörkupplevelse för sin webbplats. Tanken är att ta mer kontroll över hur deras webbplats ser ut 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.

Växla mörkt läge

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 ska vi bygga ett mörkt läge som växlar med en sida i Divi. När växeln har skapats med koden kommer du att kunna spara den i Divi-biblioteket och lägga till den på vilken plats som helst på 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.

Divi avsnitt

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 standarddummyinnehållet för titeln och brödtexten. Lägg sedan till fyrkantig ikon istället för bilden.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

Divi sammanfattningsmodul

Conception

Gå till designinställningarna och uppdatera följande:

  • Ikonfärg: # 666666
  • Justering av bild / ikon: vänster
  • Ikonstorlek: 22 pixlar
Konfiguration av Divi-ikon
  • Bredd: 50px
  • Justering av modulen: centrum
  • Höjd: 25px
Konfiguration av delningsstorlek
  • Marginal: 0px låg
  • Rundade hörn: 4px
  • Kantbredd: 2px
  • Kantfärg: # 666666
Divi kantkonfiguration

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.

Divi-växlingsknapp

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
Växlingsknapp för teckensnitt

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.

Lägg till kodmodul

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:

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

  • CSS-klass: et-dark-toggle
Divi CSS-kod

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
Css-väljardivisektion

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 befintligt innehåll" INTE är valt. Du vill inte radera avsnittet med växla i mörkt läge.

Välj layout 1 divi

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.

  1. Vi kan lägga till CSS-klassen till varje element på sidan separat.
  2. 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.
  3. 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.

Lägg till i alla specialavdelningar

Textmoduler

Öppna sedan inställningarna för en av textmodulerna på sidan och lägg till samma CSS-klass i de globala textinställningarna.

Lägg till i textmoduler

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.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

Så här ska sidan se ut i klart läge.

Rensa läge

Och här är hur sidan ska se ut i mörkt läge.

Mörkt läge

Ytterligare resurser

Här är andra resurser som kan vara av intresse för dig.

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.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
0 aktier
del
tweet
Enregistrer