Treci la conținutul principal

Cum să implementați modul întunecat pe site-ul dvs. cu Divi

Divi: cea mai ușoară temă WordPress de utilizat

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62. [Recomandat]

Modul Întunecat continuă să câștige 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 comoditate 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 personalizată a modului întunecat în Divi de la zero, fără un plugin. Cu această funcție 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!

studiu

Iată o previzualizare a designului pe care îl vom construi în acest tutorial.

Iată care este comutarea modului întunecat personalizat pe care vom crea.

Comutați modul întunecat

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

Și iată comutarea modului întunecat adăugată la un antet global. Observați cum rămâne modul luminos / întunecat atunci când navigați pe site.

Partea 1: Construirea comutatorului din modul întunecat

În această primă parte a tutorialului, vom construi o comutare în modul întunecat cu o pagină în Divi. Odată ce comutatorul a fost 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 dintr-o coloană la secțiunea implicită atunci când construiți de la zero cu Divi pe partea frontală.

Secțiunea Divi

Adăugați modul de rezumare

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

Adăugați un nou modul de prezentare text la linie.

Conținut

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

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați cu ușurință orice design de site web cu un aspect profesionist. Nu mai plătiți scump pentru ceea ce puteți face singur. [Gratuit]

Modul rezumat Divi

Concepție

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

  • Culoare pictogramă: # 666666
  • Aliniere imagine / pictogramă: stânga
  • Dimensiunea fontului pictogramei: 22 pixeli
Configurare pictogramă Divi
  • Lățime: 50px
  • Alinierea modulului: centru
  • Înălțime: 25px
Configurare dimensionare divizare
  • Marja: 0px redusă
  • Colțuri rotunjite: 4px
  • Lățimea marginii: 2px
  • Culoarea frontierei: # 666666
Configurare frontieră Divi

CSS personalizate

Odată ce designul este în poziție, comutaț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.

revărsat: vizibil! important;

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

continut: "lumina"; pozitie: absoluta; stanga: -35px; top: 0px;

Acest lucru adaugă o etichetă la modulul Blurb pe care îl vom schimba de la „lumină” la „întuneric” la clic.

Butonul de comutare Divi

Proiectarea textului corporal

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

  • Font pentru corp: Roboto
  • Culoarea textului corpului: # 666666
  • Dimensiunea textului corpului: 13px
  • Spațierea literelor corpului: 1px
Butonul de comutare a fontului

Adăugarea codului personalizat cu un modul de cod

Pentru a adăuga codul necesar (CSS / JQuery) pentru a opera comutarea în modul întunecat, vom folosi un modul de cod.

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

Adăugați un modul de cod

Apoi lipiți următorul cod în zona codului:

/*** 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");}});

Adăugarea de clase CSS personalizate

Codul personalizat necesită adăugarea unei clase CSS personalizate la modulul sau comutatorul Blurb. Acest lucru va permite ca blurbul să declanșeze funcția de comutare a modului întunecat și funcția de clic.

Clasa modulului Blurb

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

Căutați cele mai bune teme și pluginuri WordPress?

Descărcați cele mai bune pluginuri și teme WordPress pe Envato și creați cu ușurință site-ul dvs. Web. Deja mai mult de descărcări 49.720.000. [EXCLUSIV]

  • Clasa CSS: et-dark-toggle
Cod css divi

Clasa capabilă de 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 CSS „mod întunecat” personalizat în codul pe care l-am adăugat după 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 stilizare în modul întunecat.

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

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

  • Clasa CSS: et-dark-mode-capable
Secțiunea divi selector CSS

Partea 2: Adăugarea funcțiilor Dark Mode la o pagină Divi

Acum că avem codul ș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 nostru 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 Layouts predefinite.

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

Alegeți aspectul divi 1

Deoarece stilul mod întunecat se va aplica numai elementelor cu clasa CSS „capabilă și în mod întunecat”, putem alege să adăugăm la pagină în moduri diferite.

  1. Putem adăuga clasa CSS la fiecare element al paginii individual.
  2. Am putea extinde clasa CSS la elemente din toată pagina (ar fi mai rapid decât să o faci 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 de pe 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 tot site-ul. De exemplu, am putea deschide setările secțiunii și faceți clic pe pictograma globală implicită pentru a modifica valorile implicite ale secțiunii globale. Apoi putem adăuga clasa CSS și o putem înregistra ca o clasă CSS pentru toate secțiunile site-ului.

Adăugarea clasei CSS la elementele paginii

Pentru acest exemplu, vom actualiza elementele paginii adăugând clasa CSS la valorile implicite globale ale secțiunilor și modulelor 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 secțiunii de sus care conține comutarea modului întunecat. Apoi modificați valorile implicite globale ale secțiunii și adăugați următoarea clasă CSS la valorile implicite globale ale secțiunii:

  • Clasa CSS: et-dark-mode-capable

Toate secțiunile specializate

De asemenea, adăugați clasa CSS la valorile prestabilite globale din secțiunea specializată.

Adăugați la toate secțiunile specializate

Module 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 ale textului global.

Adăugați la module de text

Pentru a testa rezultatul, accesați pagina live și faceți clic pe modul întunecat pentru a comuta în partea de sus a paginii.

Creați ușor magazinul dvs. online

Descărcați gratuit WooCommerce, cele mai bune pluginuri de e-commerce pentru a vă vinde produsele fizice și digitale pe WordPress. [Recomandat]

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

Mod clar

Și iată cum ar trebui să arate pagina în modul întunecat.

Modul întunecat

Resurse suplimentare

Iată câteva alte resurse care vă pot interesa.

Ultimele gânduri

Echiparea site-ului dvs. Divi cu o comutare personalizată a modului întunecat poate fi o modalitate excelentă de a spori experiența utilizatorului și de a crea un design complet nou, care să placă și să ușureze privirea. Sper că acest lucru vă va fi de folos.

Acest articol conține comentarii 0

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Acest site folosește Akismet pentru a reduce nedorite. Aflați mai multe despre modul în care sunt utilizate datele dvs. de comentarii.

Inapoi in top
0 acțiuni
acțiune
tweet
Registru