Preskoči na glavni sadržaj

Kako implementirati tamni način rada na svoju stranicu s Divi

Divi: najlakša tema za WordPress

Divi: najbolja WordPress tema svih vremena!

više 901.000 preuzimanja, Divi je najpopularnija WordPress tema na svijetu. Kompletan je, jednostavan za korištenje i dolazi s više od 62 besplatnih predložaka. [Preporučeno]

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 tamnog načina rada, no neki ga programeri podižu na drugu razinu uključivanjem prilagođenog mračnog načina rada za svoje web mjesto. Ideja je preuzeti veću kontrolu nad izgledom njihove web stranice u mračnom načinu rada bez kompromisa u vezi s brendiranjem i / ili dizajnom.

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.

Uključi / isključi tamni način rada

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 izradit ćemo tamni način prebacivanja sa stranicom u Divi-u. Nakon što stvorite preklopnik s kodom, moći ćete ga spremiti u biblioteku Divi i dodati na bilo koje mjesto na vašem web mjestu.

Da biste započeli, dodajte red s jednim stupcem u zadani odjeljak kada gradite ispočetka s Divi na prednjem kraju.

Odjeljak Divi

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 zadani lažni sadržaj za naslov i tijelo. Zatim dodajte kvadratnu ikonu umjesto slike.

Jednostavno izradite svoju web stranicu s Elementor-om

Elementor vam omogućuje jednostavno stvaranje bilo kojeg dizajna web stranice s profesionalnim izgledom. Prestanite plaćati skupo za ono što možete učiniti sami. [Slobodni]

Modul sažetka Divi

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
Konfiguracija ikone Divi
  • Širina: 50px
  • Usklađivanje modula: centar
  • Visina: 25px
Konfiguracija veličine divi
  • Margina: 0px niska
  • Zaobljeni uglovi: 4px
  • Širina obruba: 2 px
  • Boja obruba: # 666666
Konfiguracija granice Divi

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".

Preklopni gumb Divi

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
Gumb za prebacivanje fonta

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.

Dodaj modul koda

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:

Tražite li najbolje WordPress teme i dodatke?

Preuzmite najbolje dodatke i WordPress teme na Envato i jednostavno stvorite svoju web stranicu. Već više od preuzimanja 49.720.000. [ISKLJUČIVO]

  • CSS klasa: et-dark-toggle
Kod css divi

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
Css selektor divi odjeljak

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 postojeći sadržaj" NIJE odabrana. Ne želite očistiti odjeljak prekidačem tamnog načina rada.

Odaberite raspored divi 1

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.

  1. CSS klasu možemo dodati svakom elementu stranice pojedinačno.
  2. 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.
  3. 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.

Dodaj u sve specijalizirane odjeljke

Tekstualni moduli

Zatim otvorite postavke jednog od tekstualnih modula na stranici i dodajte istu CSS klasu u zadane postavke globalnog teksta.

Dodaj u tekstualne module

Da biste testirali rezultat, idite na stranicu uživo i kliknite mračni preklopnik na vrhu stranice.

Jednostavno izradite svoju mrežnu trgovinu

Preuzmite besplatnu WooCommerce, najbolji e-trgovinski dodatak za prodaju fizičkih i digitalnih proizvoda na WordPressu. [Preporučeno]

Evo kako bi stranica trebala izgledati u jasnom načinu rada.

Clear način rada

A evo kako bi stranica trebala izgledati u mračnom načinu.

Mračni način rada

Dodatni resursi

Evo nekih drugih resursa koji bi vas mogli zanimati.

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.

Ovaj članak sadrži komentare 0

Ostavi komentar

Vaša email adresa neće biti objavljena. Obavezna polja su označena *

Ova web stranica koristi Akismet kako bi smanjila neželjene. Saznajte više o načinu upotrebe podataka o vašim komentarima.

Povratak na vrh
0 dionice
udio
cvrkut
Prijaviti