Divi: Det beste WordPress-temaet hele tiden!

mer 901.000 nedlastinger, Divi er det mest populære WordPress-temaet i verden. Den er komplett, enkel å bruke og leveres med mer enn 62 gratis maler.

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 muligheter for mørk modus, men noen utviklere tar det til et annet nivå ved å inkludere en tilpasset mørk modusopplevelse for nettstedet deres. Ideen er å ta mer kontroll over hvordan nettstedet deres ser ut i mørk modus uten å måtte gå på akkord med merkevarebygging 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.

Bytt mørk modus

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 skal vi bygge en mørk modusbryter 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 på nettstedet ditt.

For å komme i gang, legg til en rad i en kolonne til standarddelen når du bygger fra bunnen av med Divi i frontenden.

Divi-seksjon

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 standardinnhold for tittel og brødtekst. Deretter legger du til kvadratikonet i stedet for bildet.

Opprett enkelt nettstedet ditt med Elementor

Elementor lar deg lage Enkelt og gratis ethvert nettsted eller bloggdesign med et profesjonelt utseende. Slutt å betale mye for et nettsted du kan gjøre selv.

Divi oppsummeringsmodul

Conception

Gå til designinnstillingene og oppdater følgende:

  • Ikonfarge: # 666666
  • Justering av bilde / ikon: venstre
  • Ikonets skriftstørrelse: 22 piksler
Divi-ikonkonfigurasjon
  • Bredde: 50px
  • Justering av modulen: senter
  • Høyde: 25px
Divi dimensjonering konfigurasjon
  • Margin: 0px lav
  • Avrundede hjørner: 4px
  • Kantbredde: 2px
  • Kantfarge: # 666666
Divi border konfigurasjon

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.

Divi vippeknapp

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
Veksleknapp for font

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.

Legg til kodemodul

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

Ønsker du å selge produktene dine på internett?

Last ned WooCommerce gratis, de beste e-handelspluginene for å selge dine fysiske og digitale produkter på WordPress og enkelt lage din nettbutikk. Perfekt for nybegynnere.

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
Kode css divi

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
Divisjonsseksjon for CSS-velger

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.

Forsikre deg om at alternativet “Erstatt eksisterende innhold” IKKE er valgt. Du vil ikke slette seksjonen med mørk modus.

Velg divi 1-oppsett

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.

  1. Vi kan legge CSS-klassen til hvert element på siden hver for seg.
  2. 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.
  3. 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.

Legg til i alle spesialiserte seksjoner

Tekstmoduler

Åpne deretter innstillingene for en av tekstmodulene på siden, og legg til den samme CSS-klassen i de globale tekststandardene.

Legg til tekstmoduler

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.

Fjern modus

Og her er hvordan siden skal se ut i mørk modus.

Mørk modus

Ytterligere ressurser

Her er noen andre ressurser som kan være av interesse for deg.

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.

0 aksjer
del
tweet
Enregistrer