Přejít k hlavnímu obsahu

Jak implementovat temný režim na vašem webu s Divi

Divi: nejjednodušší téma WordPress k použití

Divi: Nejlepší WordPress téma všech dob!

více Stahování 701.000, Divi je nejoblíbenější téma WordPress na světě. Je kompletní, snadno použitelný a je dodáván s více než šablonami 62 zdarma. [Doporučeno]

Dark Mode si stále získává popularitu jako pohodlná volba, která umožňuje uživatelům zažít web s menším namáháním očí. Přiznejme si to, všichni máme tendenci trávit více času zíráním na obrazovky, než bychom pravděpodobně měli, takže jakékoli další pohodlí uživatele (jako temný režim) může jít dlouhou cestou. 

Operační systémy, programy a prohlížeče obvykle obsahují vestavěné funkce tmavého režimu, ale někteří vývojáři to posouvají na jinou úroveň tím, že pro své webové stránky nabízejí vlastní prostředí tmavého režimu. Cílem je převzít větší kontrolu nad tím, jak jejich web vypadá v temném režimu, aniž by bylo nutné dělat kompromisy ohledně značky a / nebo designu.

V tomto tutoriálu vám ukážeme, jak vytvořit vlastní tmavý režim přepínání v Divi od nuly bez pluginu. S touto funkcí přepínání tmavého režimu budete mít kontrolu nad designem tmavého režimu a budete mít lepší uživatelský zážitek přizpůsobený vaší značce.

Začněme!

přehled

Zde je ukázka designu, který postavíme v tomto tutoriálu.

Zde je přepínač vlastního temného režimu, který chceme vytvořit.

Přepnout tmavý režim

A tady je před a po tmavém režimu použito na jedno z našich předdefinovaných rozvržení.

A tady je přepínač temného režimu přidaný do globální hlavičky. Všimněte si, jak při procházení webu zůstává režim světla / tmy.

Část 1: Vytvoření přepínače z tmavého režimu

V této první části tutoriálu budeme stavět přepínání tmavého režimu se stránkou v Divi. Jakmile bude přepínač s kódem vytvořen, budete jej moci uložit do knihovny Divi a přidat jej na jakékoli místo na svém webu.

Chcete-li začít, přidejte jeden řádek sloupce do výchozí sekce, když budujete od nuly s Divi na přední straně.

Sekce Divi

Přidat souhrnný modul

Abychom vytvořili vlastní přepínač, navrhneme modul Blurb s trochou vlastního CSS.

Přidejte nový řádek textového modulu prezentace.

Obsah

Odeberte výchozí fiktivní obsah pro nadpis a text. Poté přidejte čtvercovou ikonu namísto obrázku.

Vytvořte si snadno svůj web pomocí Elementoru

Elementor vám umožní snadno vytvořit jakýkoli design webových stránek s profesionálním vzhledem. Přestaňte platit drahé za to, co můžete udělat sami. [Zdarma]

Souhrnný modul Divi

Design

Přejděte na nastavení designu a aktualizujte následující:

  • Barva ikony: # 666666
  • Zarovnání obrázku / ikony: vlevo
  • Velikost písma ikony: 22 pixelů
Konfigurace ikony Divi
  • Šířka: 50px
  • Zarovnání modulu: střed
  • Výška: 25px
Konfigurace velikosti Divi
  • Marže: 0px nízká
  • Zaoblené rohy: 4px
  • Šířka okraje: 2px
  • Barva ohraničení: # 666666
Konfigurace hranice Divi

Vlastní CSS

Jakmile je design na místě, přepněte na kartu Upřesnit. V části Vlastní CSS přidejte následující vlastní CSS do hlavního prvku, abyste se ujistili, že přetečení není zakryto stylem zaoblených rohů.

přetečení: viditelné! důležité;

Potom přidejte následující vlastní CSS do elementu After:

obsah: "light"; poloha: absolutní; vlevo: -35px; top: 0px;

Tím se přidá modul Blurb k označení, které se po kliknutí změní ze „světlého“ na „tmavý“.

Přepínací tlačítko Divi

Návrh textu těla

Vzhledem k tomu, že text po pseudoelementu dědí styly základního textu, můžeme styly základního textu přidat pomocí možností Divi následujícím způsobem:

  • Tělo Font: Roboto
  • Barva textu těla: # 666666
  • Velikost textu těla: 13px
  • Rozteč písmen na těle: 1px
Přepínací tlačítko písma

Přidání vlastního kódu pomocí modulu kódu

K přidání potřebného kódu (CSS / JQuery) pro ovládání přepínače v tmavém režimu použijeme kódový modul.

Vytvořte nový modul kódu pod modulem Blurb ve stejném sloupci.

Přidat modul kódu

Poté vložte následující 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");}});

Přidání vlastních tříd CSS

Vlastní kód vyžaduje, abyste do modulu nebo přepínače Blurb přidali vlastní třídu CSS. To umožní, aby reklama aktivovala funkci přepnutí do tmavého režimu a funkci po kliknutí.

Třída Blurb modulu

Otevřete nastavení modulu Blurb a přidejte vlastní třídu CSS takto:

Hledáte ty nejlepší témata a pluginy aplikace WordPress?

Stáhněte si ty nejlepší pluginy a témata aplikace WordPress na Envato a snadno si vytvořte své webové stránky. Již více než stahování 49.720.000. [EXCLUSIVE]

  • Třída CSS: et-dark-toggle
Divi CSS kód

Třída schopná temného režimu

Musíme také přidat vlastní třídu CSS ke každému prvku Divi, který chceme mít schopnost tmavého režimu. Jakmile má prvek třídu CSS, zdědí tento prvek vlastní CSS „tmavého režimu“ v kódu, který jsme přidali po povolení tmavého režimu. Tato metoda nám dává větší kontrolu nad naším designem tmavého režimu, protože některé prvky nemusí vyžadovat styling v tmavém režimu.

Nejprve můžeme přidat temný režim do sekce obsahující přepínač tmavého režimu.

Otevřete parametry sekce a přidejte následující třídu CSS:

  • Třída CSS: schopná et-dark-mode
Sekce selektoru css divi

Část 2: Přidání funkcí temného režimu na stránku Divi

Nyní, když máme zaveden kód a třídy CSS, jsme připraveni aplikovat funkčnost a design Dark Mode na celou stránku v Divi. K tomu použijeme naše Premade rozložení vstupní stránky mobilní aplikace.

Chcete-li přidat rozložení, otevřete nabídku nastavení v dolní části vizuálního nástroje a klikněte na ikonu Přidat nové rozložení.

Poté vyberte rozložení vstupní stránky mobilní aplikace na kartě Předdefinovaná rozložení.

Zkontrolujte, zda NENÍ vybrána možnost „Nahradit stávající obsah“. Nechcete vyčistit sekci pomocí přepínače tmavého režimu.

Zvolte rozložení divi 1

Vzhledem k tomu, že styl tmavého režimu bude platit pouze pro prvky ve třídě CSS „schopný a tmavý režim“, můžeme zvolit přidání na stránku různými způsoby.

  1. Třídu CSS můžeme přidat do každého prvku stránky samostatně.
  2. Mohli bychom rozšířit třídu CSS na prvky po celé stránce (to by bylo rychlejší, než když to děláme ručně). Například bychom mohli otevřít nastavení sekce pro horní sekci a rozšířit třídu CSS pro tuto sekci na všechny sekce stránky.
  3. Můžeme přidat třídu CSS ke globálním výchozím hodnotám prvku. To použije třídu CSS na všechny prvky celého webu, čímž se na celém webu přidá funkce tmavého režimu. Mohli bychom například otevřít nastavení sekce a kliknutím na výchozí ikonu globální změnit výchozí nastavení globální sekce. Pak můžeme přidat třídu CSS a zaregistrovat ji jako třídu CSS pro všechny sekce webu.

Přidání třídy CSS do prvků stránky

V tomto příkladu aktualizujeme prvky stránky přidáním třídy CSS do globálních výchozích hodnot pro oddíly a textové moduly. Postupně také uděláme nějaké doplňky k dalším prvkům stránky.

Všechny sekce

Chcete-li přidat třídu CSS do všech sekcí, otevřete nastavení horní sekce, která obsahuje přepínač tmavého režimu. Poté změňte globální výchozí nastavení sekce a přidejte následující třídu CSS do globálních výchozích nastavení sekce:

  • Třída CSS: schopná et-dark-mode

Všechny specializované sekce

Třídu CSS také přidejte do globálních výchozích hodnot ve specializované sekci.

Přidat do všech specializovaných sekcí

Textové moduly

Poté otevřete nastavení jednoho z textových modulů na stránce a přidejte stejnou třídu CSS k výchozím globálním textům.

Přidat do textových modulů

Chcete-li vyzkoušet výsledek, přejděte na živou stránku a kliknutím na přepínač v tmavém režimu v horní části stránky.

Snadno vytvořte svůj online obchod

Stáhněte si zdarma WooCommerce, nejlepší e-commerce pluginy pro prodej vašich fyzických a digitálních produktů na WordPress. [Doporučeno]

Zde by měla stránka vypadat v jasném režimu.

Vymazat režim

A tady by měla vypadat stránka v tmavém režimu.

Tmavý režim

Další zdroje

Zde je několik dalších zdrojů, které by vás mohly zajímat.

Závěrečné myšlenky

Vybavení vašeho webu Divi přepínáním vlastního tmavého režimu může být skvělým způsobem, jak zvýšit uživatelský komfort a vytvořit zcela nový design, který potěší i ulehčí oku. Doufám, že to bude pro vás užitečné.

Tento článek obsahuje komentáře 0

Zanechat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *

Tato stránka používá společnost Akismet ke snížení nežádoucích účinků. Přečtěte si další informace o tom, jak se používají vaše komentáře.

Zpět na začátek
0 akcie
podíl
tweet
Zadat