Dark Mode si naďalej získava popularitu ako pohodlná voľba, ktorá používateľom umožňuje využívať web s menšou záťažou pre oči. Zmierte sa s tým, všetci máme tendenciu tráviť viac času pozeraním na obrazovky, ako by sme pravdepodobne mali, takže akékoľvek ďalšie pohodlie pre používateľov (napríklad tmavý režim) môže trvať dlho.
Operačné systémy, programy a prehliadače zvyčajne obsahujú vstavané možnosti tmavého režimu, no niektorí vývojári to posúvajú na inú úroveň zahrnutím vlastného prostredia tmavého režimu pre svoje webové stránky. Cieľom je prevziať väčšiu kontrolu nad ich vzhľadom webové stránky v tmavom režime bez toho, aby ste museli robiť kompromisy v oblasti značky a/alebo dizajnu.
V tomto tutoriále vám ukážeme, ako vytvoriť vlastný tmavý režim, ktorý umožňuje prepínať v Divi úplne od začiatku bez doplnku. Vďaka tejto funkcii prepínania tmavého režimu budete mať kontrolu nad dizajnom tmavého režimu a budete mať lepší dojem používateľa prispôsobený vašej značke.
Začnime!
prehľad
Tu je ukážka dizajnu, ktorý vytvoríme v tomto návode.
Tu je prepínač vlastného temného režimu, ktorý chceme vytvoriť.
A tu je režim pred a po tmavom aplikovaný na jedno z našich preddefinovaných rozložení.
A tu je prepínač tmavého režimu pridaný do globálnej hlavičky. Všimnite si, ako pri prehliadaní webu zostáva svetlý / tmavý režim.
Časť 1: Vytvorenie prepínača z tmavého režimu
V tejto prvej časti tutoriálu vytvoríme prepínanie tmavého režimu so stránkou v Divi. Po vytvorení prepínača s kódom ho budete môcť uložiť do knižnice Divi a pridať ho kdekoľvek vo svojom webové stránky.
Ak chcete začať, pridajte do predvolenej sekcie jeden riadok stĺpca, keď budete od začiatku vytvárať program Divi na prednej strane.
Pridať modul súhrnu
Na zostavenie vlastného prepínača navrhneme modul Blurb s trochou prispôsobeného CSS.
Pridajte nový riadok textového modulu na riadok.
Obsah
Odstrániť obsah Predvolená figurína pre názov a telo. Potom pridajte štvorcovú ikonu na miesto obrázka.
Koncepcia
Prejdite na nastavenia dizajnu a aktualizujte nasledujúce informácie:
- Farba ikony: # 666666
- Zarovnanie obrázka / ikony: vľavo
- Veľkosť písma ikony: 22 pixelov
- Šírka: 50px
- Zarovnanie modulu: stred
- Výška: 25px
- Marža: nízka 0px
- Zaoblené rohy: 4px
- Šírka okraja: 2px
- Farba orámovania: # 666666
Vlastné CSS
Keď je dizajn na mieste, prepnite na kartu Rozšírené. V časti Vlastné CSS pridajte do hlavného prvku nasledujúce vlastné CSS, aby ste sa ubezpečili, že pretečenie nie je zakryté štýlom zaoblených rohov.
pretečenie: viditeľné! dôležité;
Potom pridajte do elementu After nasledujúce vlastné CSS:
obsah: "svetlo"; poloha: absolútna; vľavo: -35px; horná: 0px;
Tým sa k modulu Blurb pridá označenie, ktoré po kliknutí zmeníme zo „svetlého“ na „tmavý“.
Návrh textu tela
Pretože text po pseudoelementu dedí štýly základného textu, môžeme štýly základného textu pridať pomocou možností Divi nasledovne:
- Text tela: Roboto
- Farba textu tela: # 666666
- Veľkosť textu tela: 13px
- Medzera písmen tela: 1px
Pridanie vlastného kódu s modulom kódu
Na pridanie potrebného kódu (CSS / JQuery) na ovládanie prepínača v tmavom režime použijeme kódový modul.
Vytvorte nový modul kódu pod modulom Blurb v rovnakom stĺpci.
Potom vložte nasledujúci kód do oblasti kódu:
/*** 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");}});
Pridávanie vlastných tried CSS
Vlastný kód vyžaduje, aby ste do modulu alebo prepínača Blurb pridali vlastnú triedu CSS. To umožní, aby reklama spustila funkciu prepínania tmavého režimu a funkčnosť po kliknutí.
Trieda modulu Blurb
Otvorte nastavenia modulu Blurb a pridajte vlastnú triedu CSS takto:
- Trieda CSS: et-dark-toggle
Trieda schopná tmavého režimu
Tiež musíme do každého prvku Divi pridať vlastnú triedu CSS, ktorú chceme mať v tmavom režime. Keď má prvok triedu CSS, tento prvok dedí vlastné CSS „tmavého režimu“ v kóde, ktorý sme pridali po povolení tmavého režimu. Táto metóda nám dáva väčšiu kontrolu nad dizajnom tmavého režimu, pretože niektoré prvky nemusia vyžadovať styling v tmavom režime.
Na začiatok môžeme pridať temný režim do časti obsahujúcej prepínač v tmavom režime.
Otvorte parametre sekcie a pridajte nasledujúcu triedu CSS:
- Trieda CSS: schopná využívať režim et-dark
Časť 2: Pridanie funkcií temného režimu na stránku Divi
Teraz, keď máme zavedený kód a triedy CSS, sme pripravení použiť funkčnosť a dizajn tmavého režimu na celú stránku v Divi. Aby sme to dosiahli, použijeme naše premade rozloženie vstupnej stránky mobilnej aplikácie.
Ak chcete pridať rozloženie, otvorte ponuku nastavení v dolnej časti vizuálneho nástroja na tvorbu a kliknite na ikonu Pridať nové rozloženie.
Potom vyberte rozloženie vstupnej stránky mobilnej aplikácie na karte Preddefinované rozloženia.
Uistite sa, že možnosť „Nahradiť obsah existujúce“ NIE JE vybraté. Sekciu s prepínačom tmavého režimu nechcete vymazať.
Pretože štýl tmavého režimu sa bude vzťahovať iba na prvky triedy CSS „schopný a tmavý režim“, môžeme sa rozhodnúť pridať na stránku rôznymi spôsobmi.
- Triedu CSS môžeme pridať do každého prvku stránky samostatne.
- Triedu CSS by sme mohli rozšíriť na prvky na celej stránke (to by bolo rýchlejšie, ako keby sme to robili ručne). Mohli by sme napríklad otvoriť nastavenia sekcie pre hornú sekciu a rozšíriť triedu CSS pre túto sekciu na všetky sekcie stránky.
- Triedu CSS môžeme pridať k globálnym predvoleným hodnotám prvku. Týmto sa trieda CSS použije na všetky prvky na celom webe a na celom webe sa pridá funkcia tmavého režimu. Mohli by sme napríklad otvoriť nastavenia sekcií a kliknúť na ikonu globálnej predvolenej hodnoty, aby sme zmenili predvolené hodnoty globálnej sekcie. Potom môžeme pridať triedu CSS a zaregistrovať ju ako triedu CSS pre všetky sekcie webu.
Pridanie triedy CSS do prvkov stránky
V tomto príklade aktualizujeme prvky stránky pridaním triedy CSS do globálnych predvolených hodnôt pre sekcie a textové moduly. Postupne tiež urobíme nejaké doplnky k ďalším prvkom stránky.
Všetky oddiely
Ak chcete pridať triedu CSS do všetkých sekcií, otvorte nastavenia hornej časti, ktorá obsahuje prepínač tmavého režimu. Potom zmeňte globálne predvolené nastavenia sekcie a do sekcie globálne predvolené hodnoty pridajte nasledujúcu triedu CSS:
- Trieda CSS: schopná využívať režim et-dark
Všetky špecializované sekcie
Do globálnych predvolených nastavení v špecializovanej sekcii tiež pridajte triedu CSS.
Textové moduly
Potom otvorte nastavenia jedného z textových modulov na stránke a do globálnych predvolených nastavení textu pridajte rovnakú triedu CSS.
Ak chcete otestovať výsledok, prejdite na živú stránku a kliknite na prepínač v tmavom režime v hornej časti stránky.
Táto stránka by mala vyzerať v jasnom režime.
A tu by mala vyzerať stránka v tmavom režime.
Dodatočné zdroje
Tu sú ďalšie zdroje to by vás mohlo zaujímať.
- Ako prispôsobiť typografiu a rozloženie na Divi
- Ako pridať opakovateľné posuvné volanie k akcii na Divi
- Ako zarovnať prvky na rovnakom riadku v programe Divi
- Ako vytvoriť animované sekcie kliknutím na Divi Builder
záverečné myšlienky
Vybavenie vášho webu Divi prispôsobeným prepínaním tmavého režimu môže byť skvelým spôsobom, ako zvýšiť užívateľskú skúsenosť a vytvoriť úplne nový dizajn, ktorý poteší aj uľaví oku. Dúfam, že to bude pre vás užitočné.
