Dark Mode fortsetter å bli populært som et praktisk alternativ for brukere å oppleve nettet med mindre belastning på øynene. La oss innse det, vi pleier alle å bruke mer tid på å stirre på skjermene enn vi sannsynligvis burde, så enhver ekstra bekvemmelighet for brukeropplevelsen (som mørk modus) kan komme langt.
Operativsystemer, programmer og nettlesere inkluderer vanligvis innebygde mørk modus-funksjoner, men noen utviklere tar det til et annet nivå ved å inkludere en tilpasset mørk modus-opplevelse for deres nettstedet Web. Tanken er å ta mer kontroll over utseendet til deres nettstedet Web i mørk modus uten å måtte gå på akkord med merke og/eller design.
I denne opplæringen viser vi deg hvordan du oppretter en tilpasset mørk modus som veksles i Divi fra bunnen av uten et plugin. Med denne funksjonen for mørk modus kan du kontrollere kontrollen over mørk modus og få en bedre brukeropplevelse skreddersydd for merkevaren din.
La oss begynne!
undersøkelsen
Her er en forhåndsvisning av designet vi skal bygge i denne opplæringen.
Her er den egendefinerte mørke modus-vekslingen vi skal lage.
Og her er før og etter for mørk modus brukt på en av våre forhåndsdefinerte oppsett.
Og her er den mørke modusbryteren lagt til en global overskrift. Legg merke til hvordan lys / mørk modus forblir når du surfer på nettstedet.
Del 1: Bygg bryteren fra mørk modus
I denne første delen av opplæringen vil vi bygge en mørk modus-veksling med en side i Divi. Når bryteren er opprettet med koden, vil du kunne lagre den i Divi-biblioteket og legge den til hvor som helst i nettstedet Web.
For å komme i gang, legg til en rad i en kolonne til standarddelen når du bygger fra bunnen av med Divi i frontenden.
Legg til sammendragsmodul
For å bygge den tilpassede vekslingen, skal vi designe en Blurb-modul med litt tilpasset CSS.
Legg til en ny presentasjonstekstmodul på linjen.
Innhold
Fjern innhold Standard dummy for tittel og brødtekst. Legg deretter til det firkantede ikonet i stedet for bildet.
Conception
Gå til designinnstillingene og oppdater følgende:
- Ikonfarge: # 666666
- Justering av bilde / ikon: venstre
- Ikonets skriftstørrelse: 22 piksler
- Bredde: 50px
- Justering av modulen: senter
- Høyde: 25px
- Margin: 0px lav
- Avrundede hjørner: 4px
- Kantbredde: 2px
- Kantfarge: # 666666
Tilpasset CSS
Når designen er på plass, bytter du til den avanserte fanen. Under tilpasset CSS, legg til følgende tilpassede CSS til hovedelementet for å sikre at overløpet ikke blir skjult av utformingen av de avrundede hjørnene.
overløp: synlig! viktig;
Deretter legger du til følgende tilpassede CSS i After-elementet:
innhold: "lett"; posisjon: absolutt; venstre: -35px; topp: 0px;
Dette legger til en etikett til Blurb-modulen som vi vil endre fra "lys" til "mørk" på klikk.
Tekstdesign
Siden post-pseudo-elementteksten arver brødtekststilene, kan vi legge til kroppstekststiler ved hjelp av Divi-alternativene som følger:
- Body font: Roboto
- Tekstfarge på kroppen: # 666666
- Kropps tekststørrelse: 13px
- Spacing av kroppens bokstaver: 1px
Legge til tilpasset kode med en kodemodul
For å legge til nødvendig kode (CSS / JQuery) for å betjene den mørke modusen, vil vi bruke en kodemodul.
Lag en ny kodemodul under Blurb-modulen i samme kolonne.
Lim deretter inn følgende kode i kodeområ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");}});
Legger til tilpassede CSS-klasser
Tilpasset kode krever at du har en tilpasset CSS-klasse lagt til Blurb-modulen eller bryteren. Dette vil gjøre det mulig for utløseren å utløse funksjonen for å slå av og på i mørkt modus.
Blurb modulklasse
Åpne Blurb-modulinnstillingene og legg til en tilpasset CSS-klasse som følger:
- CSS-klasse: et-dark-toggle
Klasse i stand til mørk modus
Vi må også legge til en egendefinert CSS-klasse til hvert Divi-element som vi vil ha muligheten for mørk modus. Når elementet har CSS-klassen, vil det elementet arve den egendefinerte "mørke modusen" CSS i koden vi la til etter at mørk modus ble aktivert. Denne metoden gir oss mer kontroll over vårt mørke modus design, da noen elementer kanskje ikke trenger styling i mørk modus.
For å starte, kan vi legge til mørk modus til delen som inneholder vår mørke modus.
Åpne seksjonsparametrene og legg til følgende CSS-klasse:
- CSS Class: et-dark-mode-stand
Del 2: Legge til funksjoner i mørk modus på en diviside
Nå som vi har CSS-koden og klassene på plass, er vi klare til å bruke Dark Mode-funksjonalitet og design på en hel side i Divi. For å gjøre dette bruker vi Premade-oppsettet av landingssiden for mobilappen.
For å legge til oppsettet, åpner du innstillingsmenyen nederst i den visuelle byggeren og klikker på ikonet Legg til nytt layout.
Velg deretter oppsettet til mobilappens destinasjonsside fra Forhåndsdefinerte oppsett-fanen.
Pass på at alternativet "Erstatt innhold eksisterende” er IKKE valgt. Du vil ikke tømme delen med mørk modus-bryteren.
Siden mørk modusstil bare vil gjelde for elementer med CSS-klassen "i stand og mørk modus", kan vi velge å legge til siden på forskjellige måter.
- Vi kan legge CSS-klassen til hvert element på siden hver for seg.
- Vi kunne utvide CSS-klassen til elementer over hele siden (det ville være raskere enn å gjøre det manuelt). For eksempel kan vi åpne seksjonsinnstillingene for toppseksjonen og utvide CSS-klassen for den delen til alle seksjoner på siden.
- Vi kan legge til CSS-klassen i elementets globale standardinnstillinger. Dette vil bruke CSS-klassen på alle elementene på hele nettstedet, og legge til mulighet for mørk modus på hele nettstedet. For eksempel kan vi åpne seksjonsinnstillinger og klikke på det globale standardikonet for å endre standardinnstillingene for global seksjon. Deretter kan vi legge til CSS-klassen og registrere den som en CSS-klasse for alle seksjoner av nettstedet.
Legge til CSS-klassen til sideelementer
For dette eksemplet vil vi oppdatere sideelementene ved å legge til CSS-klassen i globale standardinnstillinger i seksjoner og tekstmoduler. Og vi vil også gjøre noen tillegg til andre sideelementer mens vi går.
Alle seksjoner
Hvis du vil legge til CSS-klassen i alle seksjoner, åpner du innstillingene til toppseksjonen som inneholder mørk modus. Endre deretter seksjonen globale standarder og legg til følgende CSS-klasse i seksjonen globale standarder:
- CSS Class: et-dark-mode-stand
Alle spesialiserte seksjoner
Legg også CSS-klassen til de globale standardverdiene i den spesialiserte delen.
Tekstmoduler
Åpne deretter innstillingene for en av tekstmodulene på siden, og legg til den samme CSS-klassen i de globale tekststandardene.
For å teste resultatet, gå til direktesiden og klikk på den mørke modusen for å bytte øverst på siden.
Slik skal siden se ut i klar modus.
Og her er hvordan siden skal se ut i mørk modus.
Ytterligere ressurser
Her er andre ressources som kan interessere deg.
- Hvordan tilpasse typografi og layout på Divi
- Hvordan legge til en avslørende glidende oppfordring til handling på Divi
- Slik justerer du elementer på samme linje på Divi
- Hvordan lage animerte seksjoner ved å klikke på Divi Builder
avslutt~~POS=TRUNC tanker
Å utstyre Divi-nettstedet ditt med en tilpasset bryter for mørk modus kan være en fin måte å øke brukeropplevelsen og skape et helt nytt design som både gleder og lindrer øyet. Jeg håper dette vil være nyttig for deg.
