Tamni način rada i dalje stječe popularnost kao prikladna opcija koja korisnicima omogućuje doživljaj weba s manje naprezanja na očima. Pomirimo se s tim da svi provodimo više vremena zureći u zaslone nego što bismo vjerojatno trebali, tako da svaka dodatna pogodnost za korisničko iskustvo (poput mračnog načina) može uvelike pomoći.
Operativni sustavi, programi i preglednici obično uključuju ugrađene mogućnosti mračnog načina rada, ali neki programeri to podižu na višu razinu uključivanjem prilagođenog iskustva tamnog načina rada za svoje web stranica. Ideja je preuzeti veću kontrolu nad svojim izgledom web stranica u tamnom načinu rada bez potrebe za kompromisom u pogledu robne marke i/ili dizajna.
U ovom uputstvu pokazat ćemo vam kako stvoriti prilagođeni prekidač tamnog načina rada u Diviju od nule bez dodatka. Pomoću ove značajke prebacivanja mračnog načina imat ćete kontrolu nad dizajnom mračnog načina rada i imati bolje korisničko iskustvo prilagođeno vašoj marki.
Krenimo!
pregled
Ovdje je pregled dizajna koji ćemo graditi u ovom vodiču.
Evo prilagođenog preklopa za mračni način koji ćemo stvoriti.
I evo prije i poslije za tamni način rada primijenjen na jedan od naših unaprijed definiranih izgleda.
I evo prekidača tamnog načina rada dodanog globalnom zaglavlju. Primijetite kako svijetli / tamni način rada ostaje kada pregledavate web mjesto.
Dio 1: Izgradnja prekidača iz tamnog načina rada
U ovom prvom dijelu vodiča izgradit ćemo prekidač tamnog načina sa stranicom u Diviju. Nakon što se sklopka izradi s kodom, moći ćete je spremiti u Divi knjižnicu i dodati bilo gdje u svoj web stranica.
Da biste započeli, dodajte red s jednim stupcem u zadani odjeljak kada gradite ispočetka s Divi na prednjem kraju.
Dodaj modul sažetka
Da bismo izradili prilagođeno prebacivanje, dizajnirat ćemo modul Blurb s malo prilagođenog CSS-a.
Crti dodajte novi modul prezentacijskog teksta.
Sadržaj
Uklonite sadržaj Zadana lutka za naslov i tijelo. Zatim dodajte kvadratnu ikonu umjesto slike.
Začeće
Idite na postavke dizajna i ažurirajte sljedeće:
- Boja ikone: # 666666
- Usklađivanje slike / ikone: lijevo
- Veličina fonta ikone: 22 piksela
- Širina: 50px
- Usklađivanje modula: centar
- Visina: 25px
- Margina: 0px niska
- Zaobljeni uglovi: 4px
- Širina obruba: 2 px
- Boja obruba: # 666666
Prilagođeni CSS
Nakon što je dizajn na mjestu, prebacite se na naprednu karticu. U odjeljku Prilagođeni CSS dodajte sljedeći Prilagođeni CSS glavnom elementu kako biste bili sigurni da preljev ne prekriva oblikovanje zaobljenih kutova.
preljev: vidljiv! važan;
Zatim dodajte sljedeći prilagođeni CSS u element After:
sadržaj: "svjetlo"; položaj: apsolutni; lijevo: -35px; vrh: 0px;
To dodaje oznaku modula Blurb koju ćemo mijenjati iz "svjetlosti" u "tamnu".
Dizajn teksta tijela
Budući da tekst pseudo-elementa post nasljeđuje stilove osnovnog teksta, možemo dodati stilove osnovnog teksta koristeći opcije Divi kako slijedi:
- Krstionica za tijelo: Roboto
- Boja teksta tijela: # 666666
- Veličina tijela: 13px
- Razmak između slova tijela: 1px
Dodavanje prilagođenog koda modulom za kodiranje
Za dodavanje potrebnog koda (CSS / JQuery) za rad na preklopnom modu, koristit ćemo modul koda.
Izradite novi modul koda ispod modula Blurb u istom stupcu.
Zatim na područje koda zalijepite sljedeći kôd:
/*** 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");}});
Dodavanje prilagođenih CSS klasa
Prilagođeni kod zahtijeva da na modul ili prekidač Blurb dodate prilagođenu CSS klasu. To će omogućiti da blurb aktivira funkciju prebacivanja mračnog načina rada i funkciju na klik.
Razred modula zamućenja
Otvorite postavke modula Blurb i dodajte prilagođenu CSS klasu na sljedeći način:
- CSS klasa: et-dark-toggle
Klasa sposobna za tamni mod
Također moramo dodati prilagođenu CSS klasu svakom Divi elementu za koji želimo da ima mogućnost tamnog načina rada. Jednom kada element ima CSS klasu, taj će element naslijediti prilagođeni CSS "tamni način rada" u kodu koji smo dodali nakon što je omogućen tamni način rada. Ova metoda daje nam veću kontrolu nad dizajnom tamnog načina rada, jer neki elementi možda neće trebati oblikovanje u tamnom načinu.
Za početak možemo dodati mračni način u odjeljak koji sadrži našu preklopljenu modu.
Otvorite parametre odjeljka i dodajte sljedeću CSS klasu:
- CSS klasa: omogućuje et-dark mod
Dio 2: Dodavanje značajki tamnog načina rada na Divi stranicu
Sad kad imamo CSS kôd i klase, spremni smo primijeniti funkcionalnost i dizajn Dark Mode na cijelu stranicu u Diviju. Da bismo to učinili, upotrijebit ćemo naš unaprijed izrađeni izgled odredišne stranice mobilne aplikacije.
Da biste dodali izgled, otvorite izbornik postavki na dnu alata za izgradnju vizualnog programa i kliknite ikonu Dodaj novi izgled.
Zatim odaberite izgled odredišne stranice mobilne aplikacije na kartici Predefinirani izgledi.
Provjerite je li opcija “Zamijeni sadržaj postojeće” NIJE odabrano. Ne želite očistiti odjeljak s prekidačem tamnog načina rada.
Budući da će se stil mračnog načina primjenjivati samo na elemente s CSS klasom "sposoban i mračan", možemo dodati dodavanje na stranicu na različite načine.
- CSS klasu možemo dodati svakom elementu stranice pojedinačno.
- Mogli bismo proširiti CSS klasu na elemente po cijeloj stranici (to bi bilo brže nego ručno). Na primjer, mogli bismo otvoriti postavke odjeljka za gornji odjeljak i proširiti CSS klasu za taj odjeljak na sve odjeljke stranice.
- Klasu CSS možemo dodati globalnim zadanim postavkama elementa. To će primijeniti CSS klasu na sve elemente na cijeloj web lokaciji, dodajući mogućnost tamnog načina rada na cijeloj web lokaciji. Na primjer, mogli bismo otvoriti postavke odjeljka i kliknuti globalnu zadanu ikonu da bismo promijenili zadane postavke globalnog odjeljka. Tada možemo dodati CSS klasu i registrirati je kao CSS klasu za sve odjeljke web mjesta.
Dodavanje CSS klase elementima stranice
U ovom ćemo primjeru ažurirati elemente stranice dodavanjem klase CSS globalnim zadanim postavkama odjeljaka i tekstualnih modula. A u toku ćemo dodavati i neke druge elemente stranice.
Svi odjeljci
Da biste CSS klasi dodali sve odjeljke, otvorite postavke gornjeg odjeljka koji sadrži prekidač tamnog načina rada. Zatim promijenite zadane vrijednosti odjeljka i dodajte sljedeću CSS klasu u globalne zadane vrijednosti odjeljka:
- CSS klasa: omogućuje et-dark mod
Svi specijalizirani odjeljci
Također dodajte CSS klasu u globalne zadane postavke u specijaliziranom odjeljku.
Tekstualni moduli
Zatim otvorite postavke jednog od tekstualnih modula na stranici i dodajte istu CSS klasu u zadane postavke globalnog teksta.
Da biste testirali rezultat, idite na stranicu uživo i kliknite mračni preklopnik na vrhu stranice.
Evo kako bi stranica trebala izgledati u jasnom načinu rada.
A evo kako bi stranica trebala izgledati u mračnom načinu.
Dodatni resursi
Evo i drugih sredstva to bi te moglo zanimati.
- Kako prilagoditi tipografiju i izgled na Divi
- Kako dodati povratni klizni poziv akciji na Divi
- Kako uskladiti elemente na istoj liniji na Divi
- Kako stvoriti animirane odjeljke klikom na Divi Builder
Završne misli
Opremanje vašeg Divi web mjesta prilagođenim preklopnikom tamnog načina može biti izvrstan način za poboljšanje korisničkog iskustva i stvaranje potpuno novog dizajna koji ugodno i rasterećuje oko. Nadam se da će vam ovo biti korisno.
