Cum să implementați o comutare în mod întunecat pe site-ul dvs. Divi

Modul întunecat continuă să crească în popularitate ca o opțiune convenabilă pentru utilizatori de a experimenta webul cu mai puțină presiune asupra ochilor. Să recunoaștem, cu toții avem tendința de a petrece mai mult timp uitându-ne la ecrane decât ar trebui probabil, astfel încât orice confort suplimentar pentru experiența utilizatorului (cum ar fi modul întunecat) poate merge mult. Sistemele de operare, programele și browserele includ de obicei capabilități încorporate în modul întunecat, dar unii dezvoltatori îl duc la un alt nivel, incluzând o experiență personalizată în modul întunecat pentru site-ul lor web. Ideea este să preia mai mult control asupra modului în care arată site-ul web în modul întunecat, fără a fi nevoie să facă compromisuri cu privire la branding și / sau design.

În acest tutorial, vă vom arăta cum să creați o comutare în mod întunecat personalizat în Divi de la zero fără un plugin. Cu această funcționalitate de comutare a modului întunecat, veți avea control asupra designului modului întunecat și veți avea o experiență de utilizare mai bună adaptată mărcii dvs.

Să începem!

Trage cu ochiul

Iată o privire rapidă asupra designului pe care îl vom construi în acest tutorial.

Iată comutarea personalizată a modului întunecat pe care o vom construi.

Și iată înainte și după modul întunecat aplicat uneia dintre aspectele noastre premade.

Și aici este comutarea modului întunecat adăugată la un antet global. Observați cum rămâne modul luminos / întunecat în timp ce navigați pe site.

Descărcați aspectul GRATUIT

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Pentru a importa aspectul secțiunii în biblioteca Divi, navigați la biblioteca Divi.

Faceți clic pe butonul Import.

În fereastra pop-up de portabilitate, selectați fila de import și alegeți fișierul de descărcare de pe computer.

Apoi faceți clic pe butonul de import.

După ce ați terminat, aspectul secțiunii va fi disponibil în Divi Builder.

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi.
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Alegeți opțiunea „Build From Scratch”.

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

Partea 1: Construirea comutării modului întunecat

În această primă parte a tutorialului, vom construi o comutare în modul întunecat cu o pagină în Divi. Odată ce comutatorul este creat cu codul, îl veți putea salva în Biblioteca Divi și îl puteți adăuga în orice loc de pe site-ul dvs. web.

Pentru a începe, adăugați un rând cu o coloană la secțiunea implicită în timp ce construiți cu Divi pe partea frontală de la zero.

Adăugați Blurb

Pentru a construi comutarea personalizată, vom proiecta un modul blurb cu un pic CSS personalizat.

Adăugați un nou modul de blurb pe rând.

Conţinut

Scoateți conținutul simulat implicit pentru titlu și corp. Apoi adăugați pictograma pătrată în locul imaginii.

Proiecta

Treceți la setările de proiectare și actualizați următoarele:

• Culoare pictogramă: # 666666
• Aliniere imagine / pictogramă: stânga
• Pictogramă Dimensiune font: 22 px

• Lățime: 50 px
• Alinierea modulului: centru
• Înălțime: 25 px

• Marja: 0 px de jos
• Colțuri rotunjite: 4 px
• Lățimea chenarului: 2 px
• Culoare margine: # 666666

CSS personalizat

Odată ce designul este în poziție, treceți la fila avansată. Sub CSS personalizat, adăugați următorul CSS personalizat la elementul principal pentru a vă asigura că revărsatul nu este ascuns de stilul colțurilor rotunjite.

overflow: visible !important;

Apoi adăugați următorul CSS personalizat la elementul After:

content: "light";
position: absolute;
left: -35px;
top:0px;

Aceasta adaugă o etichetă la modulul blurb pe care o vom schimba de la „lumină” la „întunecată” la clic.

Proiectarea textului corpului

Deoarece textul din pseudo-elementul după moștenește stilurile de text ale corpului, putem adăuga stilurile de text ale corpului folosind opțiunile Divi după cum urmează:

• Font corp: Roboto
• Culoarea textului corpului: # 666666
• Dimensiunea textului corpului: 13 px
• Spațierea literelor corporale: 1 px

Adăugarea unui cod personalizat cu un modul de cod

Pentru a adăuga codul necesar (CSS / JQuery) pentru ca comutarea modului întunecat să funcționeze cu magia, vom folosi un modul de cod.

Creați un nou modul de cod sub modulul blurb din aceeași coloană.

Apoi lipiți următorul cod în caseta de cod:

<style>
/**
 * 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;
}
</style>
<script>
  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 Firefox
            e.code === 22 ||
            // Firefox
            e.code === 1014 ||
            // test name field too, because code might not be present
            // everything except Firefox
            e.name === 'QuotaExceededError' ||
            // Firefox
            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
            // acknowledge QuotaExceededError only if there's something already stored
            storage.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");
      }
  });
</script>

Adăugarea claselor CSS personalizate

Codul personalizat necesită să aveți o Clasă CSS personalizată adăugată la modulul de comutare sau comutare. Acest lucru va permite ca blurbul să declanșeze comutarea modului întunecat și funcționalitatea la clic.

Blurb Module Class

Deschideți setările modulului Blurb și adăugați o clasă CSS personalizată după cum urmează:

• Clasa CSS: et-dark-toggle

Clasa capabilă în modul întunecat

De asemenea, trebuie să adăugăm o clasă CSS personalizată la fiecare element Divi pe care dorim să îl avem în modul întunecat. Odată ce elementul are clasa CSS, acel element va moșteni „modul întunecat” CSS personalizat în codul pe care l-am adăugat odată ce modul întunecat a fost activat. Această metodă ne oferă mai mult control asupra proiectării modului întunecat, deoarece este posibil ca unele elemente să nu necesite niciun stil de mod întunecat.

Pentru a începe, putem adăuga modul întunecat la secțiunea care conține comutarea modului întunecat.

Deschideți setările secțiunii și adăugați următoarea clasă CSS:

• Clasa CSS: et-dark-mode-capable

Partea 2: Adăugarea funcționalității modului întunecat la o pagină Divi

Acum că avem codurile și clasele CSS la locul lor, suntem gata să aplicăm funcționalitatea și designul modului întunecat pe o pagină întreagă din Divi. Pentru a face acest lucru, vom folosi aspectul premade al paginii de destinație a aplicației mobile.

Pentru a adăuga aspectul, deschideți meniul de setări din partea de jos a constructorului vizual și faceți clic pe pictograma Adăugați un aspect nou.

Apoi, selectați aspectul paginii de destinație a aplicației mobile din fila layout-uri premade.

Asigurați-vă că opțiunea „Înlocuiește conținutul existent” NU este selectată. Nu doriți să ștergeți secțiunea cu comutarea modului întunecat.

Deoarece stilul modul întunecat se va aplica numai elementelor cu clasa CSS „et-dark-mode-capable”, putem alege să adăugăm la pagină câteva moduri diferite.

1. Putem adăuga individual CSS Class la fiecare element de pe pagină.
2. Am putea extinde Clasa CSS la elemente de-a lungul paginii (acest lucru ar fi mai rapid decât să facem fiecare manual). De exemplu, am putea deschide setările secțiunii pentru secțiunea de sus și extinde Clasa CSS pentru acea secțiune la toate secțiunile din întreaga pagină.
   
3. Putem adăuga clasa CSS la valorile implicite globale ale elementului. Aceasta va aplica clasa CSS tuturor elementelor la nivel de site, adăugând capacitatea de mod întunecat pe întregul site. De exemplu, am putea deschide setările secțiunii și faceți clic pe pictograma globală implicită pentru a edita valorile implicite ale secțiunii globale. Apoi putem adăuga clasa CSS și o putem salva ca o clasă CSS pentru toate secțiunile la nivel de site.
   

Adăugarea clasei CSS la elementele de pagină

Pentru acest exemplu, vom actualiza elementele paginii prin adăugarea clasei CSS la valorile implicite globale la secțiuni și module de text. Și vom face, de asemenea, câteva adăugiri la celelalte elemente de pe pagină pe măsură ce mergem.

Toate secțiunile

Pentru a adăuga clasa CSS la toate secțiunile, deschideți setările pentru secțiunea de sus care conține comutarea modului întunecat. Apoi modificați valorile implicite globale pentru secțiune și adăugați următoarea clasă CSS la valorile implicite globale ale secțiunii:

• Clasa CSS: et-dark-mode-capable

Toate secțiunile de specialitate

Adăugați clasa CSS și la valorile implicite globale ale secțiunii de specialitate.

Module de text

Apoi, deschideți setările pentru unul dintre modulele de text de pe pagină și adăugați aceeași clasă CSS la valorile implicite globale ale textului.

Blurbs

Apoi, deschideți setările pentru unul dintre blurbs-urile din aspectul paginii și adăugați clasa CSS la Blurb Global Defaults.

Coloane Mărturii

Mai jos în aspectul paginii, există câteva mărturii, fiecare în interiorul unei coloane cu un fundal alb personalizat. Pentru a suprascrie stilurile de coloane în modul întunecat, adăugați clasa CSS la una dintre coloane și extindeți-o la celelalte coloane din rând.

NOTĂ: Nu este o idee grozavă să adăugați clasa CSS la valorile implicite globale ale coloanei, deoarece aceasta va rupe unele dintre elementele de proiectare (de exemplu, nu este o idee bună să oferiți tuturor coloanelor un fundal întunecat atunci când de cele mai multe ori fundaluri de coloane sunt transparente).

Pentru a testa rezultatul, treceți la pagina live și faceți clic pe comutarea modului întunecat din partea de sus a paginii.

Iată cum ar trebui să arate pagina în modul luminos.

Iată cum ar trebui să arate pagina în modul întunecat.

Partea 3: Adăugarea comutării modului întunecat la un antet global

Dacă doriți să extindeți funcționalitatea modului întunecat la nivel de site, ar fi o idee bună să adăugați comutatorul modului întunecat la Divi Global Header. În acest fel, acesta va fi disponibil utilizatorilor pe întregul site într-un singur loc convenabil.

Salvarea comutării și codului modului întunecat în biblioteca Divi

Dar înainte de a face acest lucru, trebuie să salvăm comutarea și codul modului întunecat în Biblioteca Divi. Acest lucru va facilita adăugarea la alte zone ale site-ului nostru, inclusiv la antetul global.

Reveniți la aspectul pe care l-am construit cu Divi implementat pe partea frontală. Apoi deschideți meniul pentru modulul blurb folosit pentru a construi comutarea modului întunecat și selectați Salvați în bibliotecă. Dați aspectului un nume și salvați-l în bibliotecă.

Apoi, salvați modulul de cod și în biblioteca Divi.

Importul unui șablon de antet global Premade

Dacă nu aveți deja un antet global, va trebui să vă construiți propriul sau să utilizați unul dintre pachetele noastre de construire a temelor premade.

Pentru acest tutorial, vom folosi antetul global inclus în al cincilea pachet de generatoare de teme. Pentru a adăuga antetul global utilizând generatorul de teme, va trebui să descărcați pachetul de generare a temelor și apoi să utilizați opțiunile de portabilitate pentru a importa fișierul JSON numit „divi-theme-builder-pack-5-default-website-template.json” .

După ce șablonul a fost încărcat, faceți clic pentru a edita antetul global.

Apoi adăugați comutarea modului întunecat din bibliotecă la coloana 1 din al doilea rând al antetului.

Sub modulul de comutare în mod întunecat / blurb, adăugați modulul de cod pe care l-ați salvat în bibliotecă direct sub comutarea în modul întunecat.

Deoarece avem clasa CSS „et-dark-mode-capable-capable” ca setare implicită pentru toate secțiunile, secțiunile din antet o vor avea și ea implicit. Pentru a dezactiva acest lucru, pur și simplu acordați-i o clasă CSS predominantă.

Rezultate finale

Iată rezultatele finale ale paginii noastre de comutare în modul întunecat.

Și aici este comutarea modului întunecat pe antet. Modul selectat (întunecat sau luminos) va rămâne în timp ce navigați către alte pagini de pe site.

Reglarea stilurilor personalizate ale modului întunecat CSS

Dacă doriți să reglați stilul în modul întunecat al elementelor de comutare sau Divi, va trebui să faceți acest lucru în interiorul codului din modulul de cod.

Codul are în prezent doar un stil de bază în modul întunecat aplicat fiecăruia dintre elemente o dată în modul întunecat. Aceasta constă dintr-o culoare de fundal închisă și o culoare de text deschisă.

Gânduri finale

Echiparea site-ului dvs. Divi cu o comutare personalizată a modului întunecat poate fi o modalitate excelentă de a stimula UX-ul și de a crea un design cu totul nou, care să placă și să ușureze privirea. Sperăm că vă va fi de folos.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!