Gå til hovedindhold

Sådan implementeres mørk tilstand på dit websted med Divi

Divi: Det nemmeste WordPress tema at bruge

Divi: Det bedste WordPress tema hele tiden!

mere 901.000 downloads, Divi er det mest populære WordPress tema i verden. Den er komplet, nem at bruge og leveres med mere end 62 gratis skabeloner. [Anbefalet]

Dark Mode fortsætter med at vinde popularitet som en praktisk mulighed for brugere at opleve internettet med mindre belastning på øjnene. Lad os indse det, vi har alle en tendens til at bruge mere tid på at stirre på skærme, end vi sandsynligvis burde, så enhver ekstra bekvemmelighed til brugeroplevelsen (som mørk tilstand) kan gå langt. 

Operativsystemer, programmer og browsere inkluderer typisk indbyggede muligheder i mørk tilstand, men nogle udviklere tager det til et andet niveau ved at inkludere en brugerdefineret mørk tilstandsoplevelse til deres websted. Ideen er at tage mere kontrol over, hvordan deres hjemmeside ser ud i mørk tilstand uden at skulle gå på kompromis med branding og / eller design.

I denne vejledning viser vi dig, hvordan du opretter en brugerdefineret mørk tilstand, der skifter i Divi fra bunden uden et plugin. Med denne funktion til skift af mørk tilstand har du kontrol over mørk tilstandsdesign og har en bedre brugeroplevelse skræddersyet til dit brand.

Lad os starte!

undersøgelse

Her er en forhåndsvisning af designet, vi vil bygge i denne tutorial.

Her er den tilpassede mørke tilstand, vi skifter.

Skift mørk tilstand

Og her er før og efter for mørk tilstand anvendt på et af vores foruddefinerede layout.

Og her er den mørke tilstandsknap tilføjet til et globalt overskrift. Læg mærke til, hvordan tilstanden lys / mørk forbliver, når du gennemsøger webstedet.

Del 1: Byg kontakten fra mørk tilstand

I denne første del af vejledningen skal vi bygge en mørk tilstand, der skifter med en side i Divi. Når skiftet er oprettet med koden, kan du gemme det i Divi-biblioteket og føje det til ethvert sted på dit websted.

For at starte skal du tilføje en række med en kolonne til standardsektionen, når du bygger fra bunden med Divi i frontenden.

Divi sektion

Tilføj oversigtsmodul

For at opbygge den tilpassede skift skal vi designe et Blurb-modul med en smule tilpasset CSS.

Føj et nyt præsentationstekstmodul til linjen.

Indhold

Fjern standardindholdsindholdet for titlen og brødteksten. Tilføj derefter det firkantede ikon i stedet for billedet.

Opret nemt dit websted med Elementor

Elementor giver dig mulighed for nemt at oprette ethvert webstedsdesign med et professionelt look. Stop med at betale dyre for hvad du selv kan gøre. [Gratis]

Divi-opsummeringsmodul

Conception

Gå til designindstillingerne, og opdater følgende:

  • Ikonfarve: # 666666
  • Tilpasning af billede / ikon: venstre
  • Ikonets skriftstørrelse: 22 pixels
Konfiguration af Divi-ikon
  • Bredde: 50px
  • Justering af modulet: center
  • Højde: 25px
Konfiguration af divisstørrelse
  • Marginal: 0px lav
  • Rundede hjørner: 4px
  • Kantbredde: 2px
  • Kantfarve: # 666666
Divi kantkonfiguration

Tilpasset CSS

Når designet er på plads, skal du skifte til den avancerede fane. Under Custom CSS skal du tilføje følgende tilpassede CSS til hovedelementet for at sikre, at overløbet ikke tilsløres af stylingen af ​​de afrundede hjørner.

overløb: synlig! vigtig;

Føj derefter følgende tilpassede CSS til After-elementet:

indhold: "lys"; position: absolut; venstre: -35px; top: 0px;

Dette tilføjer en etiket til Blurb-modulet, som vi vil ændre fra "lys" til "mørk" ved klik.

Divi vippeknap

Tekstdesign

Da post-pseudo-elementteksten arver brødtekstformaterne, kan vi tilføje brødtekstformaterne ved hjælp af Divi-indstillingerne som følger:

  • Kropsskrifttype: Roboto
  • Tekstfarve på krop: # 666666
  • Krops tekststørrelse: 13px
  • Spacing af kroppens bogstaver: 1px
Skift af skrifttype

Tilføjelse af tilpasset kode med et kodemodul

For at tilføje den nødvendige kode (CSS / JQuery) til at betjene den mørke tilstand, skifter vi et kodemodul.

Opret et nyt kodemodul under Blurb-modulet i samme kolonne.

Tilføj kodemodul

Indsæt derefter 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");}});

Tilføjelse af tilpassede CSS-klasser

Brugerdefineret kode kræver, at du har tilføjet en brugerdefineret CSS-klasse til Blurb-modulet eller switch. Dette gør det muligt for blurb at udløse funktionen til skift af mørk tilstand og on-click-funktionalitet.

Blurb modulklasse

Åbn indstillingerne for Blurb-modul, og tilføj en tilpasset CSS-klasse som følger:

  • CSS-klasse: et-dark-toggle
Divi CSS-kode

Klasse i stand til mørk tilstand

Vi skal også tilføje en brugerdefineret CSS-klasse til hvert Divi-element, som vi vil have den mørke tilstandsfunktion. Når elementet har CSS-klassen, arver dette element den brugerdefinerede "mørke tilstand" CSS i den kode, vi tilføjede, efter at mørk tilstand var aktiveret. Denne metode giver os mere kontrol over vores design i mørk tilstand, da nogle elementer muligvis ikke kræver styling i mørk tilstand.

For at starte kan vi tilføje mørk tilstand til det afsnit, der indeholder vores mørke tilstandskifte.

Åbn sektionsparametrene, og tilføj følgende CSS-klasse:

  • CSS-klasse: et-dark-mode-stand
CSS vælger divi sektion

Del 2: Føjelse af mørke tilstandsfunktioner til en diviside

Nu hvor vi har CSS-koden og klasser på plads, er vi klar til at anvende Dark Mode-funktionalitet og design på en hel side i Divi. For at gøre dette bruger vi vores Premade-layout af mobilappens destinationsside.

For at tilføje layoutet skal du åbne indstillingsmenuen i bunden af ​​den visuelle builder og klikke på ikonet Tilføj nyt layout.

Vælg derefter layoutet på mobilappens destinationsside fra fanen Foruddefinerede layout.

Sørg for, at indstillingen "Erstat eksisterende indhold" IKKE er valgt. Du vil ikke slette sektionen med den mørke tilstandsknap.

Vælg layout 1 divi

Da stilen mørk tilstand kun gælder for elementer med CSS-klassen "stand og mørk tilstand", kan vi vælge at føje til siden på forskellige måder.

  1. Vi kan tilføje CSS-klassen til hvert element på siden hver for sig.
  2. Vi kunne udvide CSS-klassen til elementer overalt på siden (det ville være hurtigere end at gøre det manuelt). For eksempel kunne vi åbne sektionsindstillingerne for den øverste sektion og udvide CSS-klassen for den sektion til alle sektioner på siden.
  3. Vi kan tilføje CSS-klassen til elementets globale standardindstillinger. Dette vil anvende CSS-klassen på alle elementer på hele webstedet, hvilket tilføjer mørk tilstandsfunktion på hele webstedet. For eksempel kunne vi åbne sektionsindstillinger og klikke på det globale standardikon for at ændre standardindstillingerne for det globale afsnit. Derefter kan vi tilføje CSS-klassen og registrere den som en CSS-klasse for alle sektioner af webstedet.

Tilføjelse af CSS-klassen til sideelementer

I dette eksempel skal vi opdatere sideelementerne ved at føje CSS-klassen til globale standardindstillinger i sektioner og tekstmoduler. Og vi vil også tilføje nogle tilføjelser til andre sideelementer, når vi går.

Alle sektioner

For at tilføje CSS-klassen til alle sektioner skal du åbne indstillingerne for den øverste sektion, der indeholder skift mellem mørk tilstand. Skift derefter sektionens globale standardindstillinger, og tilføj følgende CSS-klasse til sektionen globale standardindstillinger:

  • CSS-klasse: et-dark-mode-stand

Alle specialiserede sektioner

Tilføj også CSS-klassen til de globale standardindstillinger i det specialiserede afsnit.

Føj til alle specialiserede sektioner

Tekstmoduler

Åbn derefter indstillingerne for et af tekstmodulerne på siden, og tilføj den samme CSS-klasse til de globale standardindstillinger.

Føj til tekstmoduler

For at teste resultatet skal du gå til startsiden og klikke på den mørke tilstand for at skifte øverst på siden.

Sådan ser siden ud i klar tilstand.

Ryd tilstand

Og her er hvordan siden skal se ud i mørk tilstand.

Mørk tilstand

Yderligere ressourcer

Her er nogle andre ressourcer, der kan være af interesse for dig.

endelige tanker

At udstyre dit Divi-sted med en tilpasset skift af mørk tilstand kan være en fantastisk måde at øge brugeroplevelsen på og skabe et helt nyt design, der både glæder og lindrer øjet. Jeg håber, det vil være nyttigt for dig.

Denne artikel indeholder kommentarer 0

Skriv en kommentar

Din e-mail-adresse vil ikke blive offentliggjort. Påkrævede felter er markeret med *

Dette websted bruger Akismet til at reducere uønskede. Få flere oplysninger om, hvordan dine kommentarer data bruges.

Tilbage til toppen
0 aktier
andel
tweet
Tilmeld