Jak přidat název dynamického webu a slogan do globální záhlaví Divi

Jak přidat název dynamického webu a slogan do globální záhlaví Divi

[vc_row content_placement="middle" css=".vc_custom_1508940533685{background-color: #f8f6f6 !important;}" el_id="themeforestpro"][vc_column width="3/4" css=".vc_custom_1502759058885px0px !important;border-bottom-width: 0px !important;padding-bottom: 0px !important;}"][vc_column_text]

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

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] STÁHNOUT [/vcex_button][/ vc_column][/vc_row]

Znalost přidání dynamického názvu webu a sloganu do globální záhlaví Divi bude užitečná při vytváření webových stránek Divi. A je k tomu několik dobrých důvodů. Na jedné straně ne všechny weby mají logo. Název webu je dobrá náhrada loga. Dalším důvodem je posílení vaší značky zahrnutím důležitých informací na vaše stránky, kde je uvidí každý.

V tomto kurzu vám ukážeme, jak přidat název a slogan dynamického webu do globálního záhlaví Divi. Toto řešení dynamicky extrahuje název a slogan webu z backendu WordPress. Navíc budete mít všechny výkonné možnosti designu Divi, abyste si mohli upravit název a slogan, jakkoli chcete!

Možný výsledek

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

Šablona globální hlavičky dynamického názvu webu 6

Všimněte si nadpisu a sloganu stránky uprostřed střední části záhlaví, které se dynamicky zobrazuje.

Příklad úpravy názvu Divi

Stažení zdarma

Připojte se k Divi Newlsetter a my vám pošleme e-mailem kopii balíčku Ultimate Divi Landing Page Layout Pack spolu s mnoha dalšími bezplatnými a úžasnými zdroji, tipy a triky Divi. Postupujte podle něj a za chvíli budete mistrem Divi. Pokud jste již přihlášeni k odběru, jednoduše zadejte svou e-mailovou adresu a kliknutím na Stáhnout otevřete balíček rozvržení.DOWNLOAD

Chcete-li šablonu importovat, přejděte do části Divi> Generátor motivů.

Klikněte na ikonu přenositelnosti v pravém horním rohu stránky.

V rozevíracím okně přenositelnosti vyberte kartu importu a vyberte soubor ke stažení z počítače.

Poté klikněte na tlačítko import.

Vyberte divi šablonu

Po dokončení bude celková šablona záhlaví k dispozici v nástroji Divi Theme Builder.

Upravit globální záhlaví divi

V následujícím se přesuneme k designu.

Název webu a slogan na WordPress

Každý web WordPress má název webu a slogan. Název webu je v podstatě název webu a slogan je krátká fráze, která obvykle vysvětluje, o co se jedná.

Při instalaci WordPress není neobvyklé přidat název webu a zapomenout na něj.

Přizpůsobte si název divi

Někteří lidé si ani neuvědomují, že slogan existuje, natož aby si ho aktualizovali. Když navíc použijete motiv Divi, ve výchozím nastavení se na vašem webu nezobrazí název a slogan, takže je snadné je ignorovat. Název a slogan webu jsou však nezbytnou součástí webu a vyhledávače je rozpoznají.

Název a slogan webu můžete ve WordPressu kdykoli vyhledat a aktualizovat tak, že přejdete na řídicí panel WordPressu a přejdete na Nastavení> Obecné.

Nebo můžete použít jinou cestu pomocí přizpůsobovače motivu a aktualizovat název webu v obecném nastavení.

Přizpůsobte si identitu wordpressu

Nyní, když víme, kde je název webu a slogan na backendu WordPress, prozkoumejme, jak je můžeme přidat do záhlaví Divi!

Jak přidat dynamický název webu a slogan do globální záhlaví v Divi

Import předem navržené šablony globálního záhlaví

V tomto tutoriálu se zaměříme na to, jak přidat název a slogan dynamického webu do existujícího záhlaví namísto vytvoření úplného záhlaví od začátku. Ušetří vám čas a zlepší přehlednost. Takže pro spuštění tohoto návrhu záhlaví importujeme předdefinovanou globální šablonu záhlaví z našeho čtvrtá sada generátorů témat .

Jakmile máte stáhl balíček vytvoření téma , rozbalte soubor a vyhledejte výchozí soubor JSON šablony webové stránky.

Pak přejděte na Divi> Theme Builder.

Klikněte na ikonu přenositelnosti vpravo nahoře. V rozbalovacím okně přenositelnosti vyberte výchozí soubor JSON šablony webové stránky a klikněte na tlačítko Importovat.

Import modelu Divi

Jakmile je šablona přidána do nástroje pro tvorbu motivů, odstraňte šablonu zápatí a kliknutím upravte celkovou hlavičku.

Odebrat šablonu ze zápatí

Přidání názvu a sloganu dynamického webu do záhlaví

Uvnitř editoru rozložení šablony uvidíte předem připravenou záhlaví. Okamžitě můžeme začít provádět přizpůsobení.

Přesunout logo

Chcete-li začít, přetáhněte modul obrázku, který zobrazuje logo (dynamicky), ze středního sloupce horního řádku do levého sloupce horního řádku.

Přidejte modul výzvy k akci a zobrazte název a slogan webu

Poté přidejte nový modul Výzva k akci do prostředního sloupce horního řádku (kde bylo logo).

Přizpůsobte výzvu k akci

K zobrazení názvu a sloganu webu použijeme modul Výzva k akci.

Ale než začnete přidávat obsah, nejprve vyberte NE, chcete-li použít barvu pozadí.

Nakonfigurujte akce s výzvou k akci

Přidejte dynamický název webu

V nastavení obsahu umístěte kurzor na pole pro zadávání nadpisů a klikněte na ikonu „Použít dynamický obsah“. Poté v seznamu vyberte možnost „Název webu“.

Přidejte dynamický slogan webu

Poté najeďte myší nad oblast těla a vyberte ikonu „Použít dynamický obsah“. Poté v seznamu vyberte možnost „Slogan webu“.

Přidejte slogan webu divi

Přidejte dynamický odkaz na domovskou stránku

Je běžné, že název webu po kliknutí přesměruje na domovskou stránku, zvláště pokud nahrazujete logo. Chcete-li přesměrovat celý kurz na domovskou stránku, přidejte odkaz na domovskou stránku jako dynamický obsah do adresy URL odkazu na kurz.

Přidejte odkaz na domovskou stránku

Návrh textu názvu a sloganu webu

Nyní se na záhlaví dynamicky zobrazuje název a popisek webu. Nyní musíme jen přidat styl. Nezapomeňte, že musíme upravit text nadpisu tak, aby byl navržen nadpis webu, a text těla, aby navrhoval slogan.

Přejděte na kartu Návrh a aktualizujte následující:

  • Písmo názvu: Heebo
  • Titulek písma: tučné
  • Styl písma názvu: TT
  • Velikost textu nadpisu: 32 px (na ploše), 24 pixelů (na tabletu a telefonu)
  • Rozmístění nadpisu: 0.3em
  • Tělo Font: Roboto
  • Styl písma těla: kurzíva
  • Barva textu těla:
  • Velikost textu: 13px
  • Mezera mezi písmeny: 0.1em
  • Výška linie těla: 1m
Přizpůsobte si titulní písmo divi

Chcete-li pomoci s centrováním, odstraňte výchozí výplň pod textem těla přidáním následujícího vlastního CSS do popisu propagace:

odsazení dole: 0px
Přidejte vlastní kód divi css

Další úpravy designu

V této poslední části tutoriálu provedeme některé další úpravy návrhu záhlaví, aby se zajistilo, že položky zůstanou vertikálně vystředěny v každém sloupci, a dá tlačítku jedinečný design. K tagline přidáme také před a za šikmý řádek (jen pro kopy).

Svisle centrování sloupců / obsahu

Právě teď je horní řádek aktivní „Vyrovnat sloupcové výšky“, který používá vlastnost flex. Můžeme to vydělávat přidáním malého fragmentu CSS, abychom se ujistili, že všechny sloupce zůstávají vertikálně vystředěny uvnitř řádku. Chcete-li to provést, otevřete nastavení pro horní řádek a do hlavního prvku přidejte následující CSS:

Zarovnat položky: střed;

Aktualizace sloupce pomocí tlačítka

Dále otevřete nastavení pro sloupec 3 v horním řádku a odstraňte barvu pozadí a výplň.

Přizpůsobte tlačítko kontaktu divi

Aktualizace pozadí tlačítka

Poté otevřete nastavení modulu tlačítka a aktualizujte pozadí novým gradientem pozadí následujícím způsobem:

  • Pozadí přechodu Levá barva: #ffffff
  • Barva přechodu na pravé pozadí: # 1dbf73
  • Směr přechodu: 135deg
  • Počáteční pozice: 10%
  • Koncová pozice: 0%
Přizpůsobte pozadí tlačítka divi

Přidání před a za znaky do sloganu

Každý prvek dynamického obsahu lze změnit kliknutím na ikonu ozubeného kola. Chcete-li do sloganu přidat znaky před a za, otevřete nastavení modulu výzvy k akci obsahujícího slogan a klikněte na ikonu úprav v dynamickém obsahu sloganu webu. Poté přidejte znaky k položkám před a po.

Zobrazit slogan divi

Konečný výsledek

Chcete-li zobrazit výsledek, otevřete libovolnou stránku na vašem webu. Měli byste vidět nádherný název a slogan dynamického webu!

Konečný výsledek divi

Závěrečné myšlenky

Je opravdu hezké mít možnost přizpůsobit celkovou hlavičku pomocí dynamického názvu a sloganu. Zdá se to jako něco, co bude užitečné pro mnoho webů. Také se mi líbí myšlenka zahrnout kromě loga i název webu a slogan pro ještě silnější zastoupení značky.

Zdroj: Elegantní téma

Jak vytvořit plynulý přechod s efekty posunu na Divi

Jak vytvořit plynulý přechod s efekty posunu na Divi

[vc_row content_placement="middle" css=".vc_custom_1508940533685{background-color: #f8f6f6 !important;}" el_id="themeforestpro"][vc_column width="3/4" css=".vc_custom_1502759058885px0px !important;border-bottom-width: 0px !important;padding-bottom: 0px !important;}"][vc_column_text]

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

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] STÁHNOUT [/vcex_button][/ vc_column][/vc_row]

Při navrhování své stránky služeb se chcete ujistit, že si vaši návštěvníci všimnou všech různých služeb, které poskytujete. V mnoha případech to bude jen jedna konkrétní služba, kterou hledají, ale pokud ve své struktuře služeb poskytnete efektivní způsob, je pravděpodobnější, že vaši návštěvníci budou zacházet se všemi. 

V tomto tutoriálu vám ukážeme, jak být kreativní s efekty posouvání Divi a vytvořit bezproblémový přechod služby. Můžete si také stáhnout soubor JSON zdarma!

Pojďme.

Možný výsledek

Než se ponoříme do tutoriálu, pojďme se podívat na výsledek na různých velikostech obrazovky.

Přechod mezi oddíly divi

1, znovu vytvořte strukturu prvků

Přidat oddíl # 1

vzdálenost

Začněte přidáním nové sekce na stránku, na které pracujete. Otevřete nastavení sekce a změňte hodnoty výplně na různých velikostech obrazovky.

  • Horní výplň: 80px (stolní a tablet), 0px (telefon)
  • Spodní výplň: 80px
Sekce parametrů Divi

Přidat nový řádek

Struktura sloupců

Pokračujte v přidávání nového řádku pomocí následující struktury sloupců:

dimenzování

Bez přidání dalších modulů otevřete parametry linky a v parametrech kótování použijte následující změny:

  • Použít vlastní šířku okapu: Ano
  • Šířka okapu: 1
  • Šířka: 90%
  • Maximální šířka: 1580 pixelů
Konfigurace divi mezer

vzdálenost

Poté přidejte vlastní horní a dolní okraj.

  • Horní okraj: 200px
  • Dolní okraj: 200px
Konfigurace řádkování Divi

Přidejte textový sloupec do sloupce 1

Přidat obsah H2

Je čas přidat moduly, počínaje textovým modulem ve sloupci 1. Zadejte libovolný obsah H2, který chcete.

Naše služby nabízené momentálními odborníky

Nastavení textu H2

Přejděte na kartu Návrh modulu a změňte nastavení textu H2 následujícím způsobem:

  • Hlava 2 Policie: čtvrtletní
  • Záhlaví 2 Velikost textu: 80px (na ploše), 50px (tablet), 40px (telefon)
  • Výška řádku 2 hlavy: 1.2em
Vedoucí divi policie

vzdálenost

Poté přidejte spodní okraj tabletu a telefonu.

  • Dolní okraj: 50 pixelů (pouze tablet a telefon)
Konfigurace řádkování textu Divi

Přidejte textový sloupec do sloupce 2

Přidat obsah

Pojďme k druhému sloupci. První modul, který potřebujeme, je textový modul s nějakým obsahem popisu.

Textové pole divi obsahu

Nastavení textu

Přepněte na kartu návrhu modulu a odpovídajícím způsobem změňte nastavení textu:

  • Písmo textu: kabina
  • Styl písma textu: velká písmena
  • Barva textu: # 000000
  • Velikost textu: 18 px (stolní počítač), 15 pixelů (tablet), 13 pixelů (telefon)
  • Mezery mezi písmeny: 3px (na ploše), 1px (na tabletu a telefonu)
  • Výška řádku textu: 3em
Parametr textu Divi

Do sloupce 2 přidejte separační modul

viditelnost

Další a poslední modul, který v tomto sloupci potřebujeme, je separační modul. Zkontrolujte, zda je povolena možnost „Zobrazit oddělovač“.

  • Zobrazit oddělovač: Ano
Viditelný rozdělovač

Linka

Poté změňte barvu čáry modulu.

  • Barva čáry: # 000000
Dělicí barva pozadí

dimenzování

Poté proveďte některé změny parametrů velikosti.

  • Hmotnost děliče: 3px
  • Šířka: 28%
Dimenzování oddělovače Divi

vzdálenost

Přidáme také horní okraj.

  • Horní okraj: 10px
Rozteč modulů oddělovače Divi

Přidat oddíl # 2

vzdálenost

Pojďme k další pravidelné části. Odstraňte výchozí horní polstrování ze sekce.

  • Horní výplň: 0px
Oddíl 2 rozteč divi

přetečení

Také skrýt přepady.

  • Horizontální přetečení: skryté
  • Vertikální přetečení: skryté
Skrýt přetečení modulu divi

Přidat nový řádek

Struktura sloupců

Pokračujte v přidávání prvního řádku pomocí následující struktury sloupců:

Vyberte rozložení divi

dimenzování

Bez přidání dalších modulů otevřete parametry linky, otevřete parametry kótování a proveďte následující úpravy:

  • Použít vlastní šířku okapu: Ano
  • Šířka okapu: 1
  • Vyrovnání výšek sloupců: Ano
  • Šířka: 90%
  • Maximální šířka: 1580 pixelů
Konfigurační oddíl žlabu

vzdálenost

Poté odeberte všechny výchozí horní a dolní výplně.

  • Horní výplň: 0px
  • Spodní výplň: 0px
Nastavení rozestupu řádkových modulů Divi 1

Nastavení sloupce 1

Barva pozadí

Poté otevřete nastavení pro sloupec 1 a změňte barvu pozadí.

  • Barva pozadí: # f7f7f7
Konfigurace pozadí modulu Divi line

vzdálenost

Dokončete nastavení sloupce přidáním vlastních hodnot výplně na různé velikosti obrazovky.

  • Horní výplň: 200px (stůl), 100px (tablet a telefon)
  • Spodní výplň: 200px (stůl), 100px (tablet a telefon)
  • Výplň vlevo: 8%
  • Pravá výplň: 8%
Nastavení sloupce modulu řádku

Nastavení sloupce 2

vzdálenost

Pokračujte otevřením nastavení ve sloupci 2. Přejděte na kartu Upřesnit a přidejte vlastní hodnoty výplně pro různé velikosti obrazovky.

  • Horní výplň: 100 px (stolní počítač), 50 pixelů (tablet a telefon)
  • Spodní výplň: 200px
  • Levé čalounění: 150 px (stůl), 0 px (tablet a telefon)
Nastavení mezer mezi moduly Divi

Do sloupce 1 přidejte separační modul

viditelnost

V prvním sloupci je prvním modulem, který potřebujeme, separační modul. Zkontrolujte, zda je povolena možnost „Zobrazit oddělovač“.

  • Zobrazit oddělovač: Ano
Zobrazit oddělovač divi 1

Linka

Poté změňte barvu čáry modulu.

  • Barva čáry: # 000000
Nastavení oddělovače Divi

dimenzování

Proveďte také změny parametrů velikosti.

  • Hmotnost děliče: 3px
  • Šířka: 50%
Dimenzování oddělovače Divi

Přidejte textový sloupec do sloupce 1

Přidat obsah H3

Další modul, který potřebujeme ve sloupci 1, je textový modul s obsahem H3.

Nastavení sekce obsahu Divi

Nastavení textu H3

Přepněte na kartu návrhu modulu a změňte nastavení textu H3:

  • Hlava 3 Policie: čtvrtletní
  • Barva textu položky 3: # 000000
  • Položka 3 Velikost textu: 50 pixelů (stolní), 40 pixelů (tablet), 35 pixelů (telefon)
  • Výška řádku 3 hlavy: 1.1em

Přidejte textový sloupec do sloupce 2

Přidat obsah

Ve druhém sloupci je prvním modulem, který potřebujeme, textový modul s určitým obsahem popisu.

Nastavení textového modulu Divi

Nastavení textu

Změňte nastavení textu modulu následujícím způsobem:

  • Písmo textu: kabina
  • Styl písma textu: velká písmena
  • Velikost textu: 18 px (stolní počítač), 15 pixelů (tablet), 13 pixelů (telefon)
  • Mezery mezi písmeny: 3px (na ploše), 1px (na tabletu a telefonu)
  • Výška řádku textu: 3em
Úprava písma formy Divi textu

Přidejte sloupcový modul do sloupce 2

Přidat kopii

Další a poslední modul, který potřebujeme, je tlačítkový modul. Zadejte kopii podle vašeho výběru.

Nastavení obsahu textového modulu

Nastavení tlačítek

Pak styl tlačítko.

  • Pro tlačítko použijte vlastní styly: Ano
  • Velikost textu tlačítka: 20 pixelů
  • Barva textu tlačítka: #ffffff
  • Barva pozadí tlačítka: # 000000
  • Šířka ohraničení tlačítka: 0px
Nastavení stylu tlačítka Divi
  • Tlačítko Písmo: Čtvrtletně
  • Hmotnost písma tlačítka: tučně
Nastavení barev tlačítka Divi

vzdálenost

Přidejte také vlastní polstrování.

  • Horní výplň: 50px
  • Spodní výplň: 50px
  • Levá výplň: 100px
  • Pravá výplň: 100px
Nastavení rozteče tlačítek modulu Divi

Pozice

A podle toho umístěte tlačítko:

  • Pozice: Absolutní
  • Umístění: vlevo dole
Nastavení polohy modulu Divi

Klonujte řádek tolikrát, kolikrát je třeba

Jakmile dokončíte celou řadu a všechny její moduly, můžete celou řadu naklonovat třikrát.

Klonujte divi modul

Změňte veškerý obsah

Ujistěte se, že veškerý obsah upravujete v duplikovaných řádcích.

Upravit obsah sekce divi

2. Použijte efekty posouvání

Efekty posouvání v prvním řádku

Horizontální pohyb

Jakmile dokončíte všechny řádky ve vaší sekci, je čas přidat rolovací efekty. Otevřete první řádek sekce a přidejte vodorovný pohyb.

  • Aktivujte horizontální pohyb: Ano
  • Počáteční posun: -5
  • Průměrný ofset: 0 (při 26%)
  • Koncový offset: 0
  • Efekt spouštěcího pohybu: střed prvku
Aplikujte efekty rolování divi

Zmizet a odejít

Použijte také efekt příchozí a odchozí fade.

  • Aktivace a vyblednutí: Ano
  • Počáteční krytí: 100%
  • Průměrná neprůhlednost: 100% (při 50%)
  • Konečná krytí: 0% (až 53%)
  • Efekt spouštěcího pohybu: střed prvku
Nakonfigurujte divi sekci sekce Fade Animation

Efekty rolování ve středních řadách

Vertikální pohyb

Dále přidáme efekty posouvání na všechny řádky mezi prvním a posledním řádkem sekce. Nejprve použijte svislý pohyb:

  • Aktivujte svislý pohyb: Ano
  • Počáteční posun: -4
  • Průměrný ofset: 0 (při 26%)
  • Koncový offset: 0
  • Efekt spouštění pohybu: uprostřed prvku
Konfigurace divičního rolování

Zmizet a odejít

Také aktivujte efekt zesílení a vysunutí.

  • Aktivace a vyblednutí: Ano
  • Počáteční krytí: 0%
  • Průměrná neprůhlednost: 100% (od 27% do 50%)
  • Koncový offset: 0 (při 53%)
  • Efekt spouštěcího pohybu: střed prvku
Animace prolínání divi linky

Efekty posunu na poslední řádek

Vertikální pohyb

Poté otevřete poslední řádek sekce a přidejte následující vertikální pohyb:

  • Aktivujte svislý pohyb: Ano
  • Počáteční posun: -4
  • Průměrný ofset: 0 (při 26%)
  • Koncový offset: 0
  • Efekt spouštěcího pohybu: střed prvku
Animace posouvání modulu Divi line

Zmizet a odejít

S příchozím a odchozím efektem fade a jste hotovi!

  • Aktivace a vyblednutí: Ano
  • Počáteční krytí: 0%
  • Průměrná neprůhlednost: 100% (od 27% do 50%)
  • Konečná krytí: 100% (až 53%)
  • Efekt spouštěcího pohybu: střed prvku
Nastavení animace vzhledu modulu Divi line

Konečný výsledek

Nyní, když jsme prošli všemi kroky, pojďme se konečně podívat, jak to vypadá na různých velikostech obrazovky.

Závěrečné demo

Závěrečné myšlenky

V tomto článku jsme vám ukázali, jak vytvořit krásný přechod služby s rolovacími efekty Divi. Ještě předtím, než jedno podání zmizí, začne se objevovat druhé, což dává příjemný přechod příjemný pro oko. Tento přístup vám pomůže zvýraznit každou službu na individuální úrovni. Můžete si také stáhnout soubor JSON zdarma! Máte-li jakékoli dotazy nebo návrhy, neváhejte zanechat komentář v sekci komentáře níže.

Jak vytvořit rolovací kolotoč člena týmu s Divi

Jak vytvořit rolovací kolotoč člena týmu s Divi

[vc_row content_placement="middle" css=".vc_custom_1508940533685{background-color: #f8f6f6 !important;}" el_id="themeforestpro"][vc_column width="3/4" css=".vc_custom_1502759058885px0px !important;border-bottom-width: 0px !important;padding-bottom: 0px !important;}"][vc_column_text]

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

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] STÁHNOUT [/vcex_button][/ vc_column][/vc_row]

Při vytváření stránky About budete pravděpodobně chtít představit také členy svého týmu. Přitom umožníte návštěvníkům komunikovat s lidmi, kteří stojí za vaším podnikáním. Pokud hledáte způsob, jak oživit sekci členů týmu ve svitku, může být tento návod pro vás. Vytvoříme karusel člena týmu s automatickým posouváním, který se bude pohybovat při procházení stránky návštěvníky. 

Demonstrace

Než se ponoříme do tutoriálu, pojďme se podívat na výsledek na různých velikostech obrazovky.

Posuňte člena týmu divi

Začátek početí

Přidejte novou sekci

vzdálenost

Začněte přidáním nové běžné sekce na stránku, na které pracujete. Otevřete nastavení sekce a přidejte vlastní výplň pro různé velikosti obrazovky.

  • Horní výplň: 200px (stůl), 100px (tablet a telefon)
  • Spodní výplň: 200px (stůl), 100px (tablet a telefon)
Konfigurace parametrů

přetečení

Abychom se ujistili, že se v našem designu neobjeví žádný vodorovný posuvník, skryjeme přetečení sekcí na kartě Upřesnit.

  • Horizontální přetečení: skryté
  • Vertikální přetečení: skryté
Konfigurace přetečení

Přidat řádek # 1

Struktura sloupců

Pokračujte v přidávání nového řádku do sekce pomocí následující struktury sloupců:

Zvolte rozložení divi

dimenzování

Bez přidání jakýchkoli modulů ještě otevřete nastavení řádků, přepněte na kartu Návrh a změňte šířku a maximální šířku v nastavení velikosti.

  • Šířka: 90%
  • Maximální šířka: 1580 pixelů
Parametr Divi Line

vzdálenost

Přidáme také vlastní horní a dolní výplň.

  • Horní výplň: 100px
  • Spodní výplň: 100px
Konfigurace divi řádkování

Do sloupce přidejte textový modul

Přidat obsah H2

Je čas přidat moduly, počínaje prvním textovým modulem. Zadejte obsah H2 podle vašeho výběru.

Seznamte se s týmem

Nastavení textu H2

Přejděte na kartu Návrh modulu a změňte nastavení textu H2 následujícím způsobem:

  • Název písma 2: Quicksand
  • Název písma 2: polotučné
  • Barva textu položky 2: # 000000
  • Záhlaví 2 Velikost textu: 70px (na ploše), 50px (tablet), 40px (telefon)
Rozteč textu Divi

Přidejte do sloupce separační modul

viditelnost

Poté přidejte separační modul. Zkontrolujte, zda je povolena možnost „Zobrazit oddělovač“.

  • Zobrazit oddělovač: Ano
Zobrazit oddělovač divi

Linka

Poté proveďte některé změny v nastavení linky.

  • Barva čáry: # edf000
  • Styl čáry: pevná
  • Pozice řádku: Horní
Styl rozteče Divi

dimenzování

A dokončete parametry modulu příslušnou úpravou parametrů kótování:

  • Hmotnost děliče: 20px
  • Šířka: 11%
  • Zarovnání modulu: vlevo
  • Výška: 20px
Dimenzování modulu divi line

Přidejte řádek # 2

Struktura sloupců

Do dalšího řádku! Použijte následující strukturu sloupců:

Konfigurace sloupce Divi

dimenzování

Bez přidání dalších modulů otevřete parametry linky a upravte parametry velikosti takto:

  • Použít vlastní šířku okapu: Ano
  • Šířka okapu: 2
  • Šířka: 100%
  • Maximální šířka: 100%
Konfigurace šířky žlabu

vzdálenost

Poté přidejte výplň vlevo a vpravo pouze na menších obrazovkách.

  • Výplň vlevo: 5% (pouze tablet a telefon)
  • Pravá výplň: 5% (pouze tablet a telefon)
Konfigurace stylu řádkování

Parametry sloupce (5x)

Nyní v příštích třech krocích tohoto kurzu provedeme některé změny ve sloupcích. Použijte tři kroky na každý ze sloupců v řádku.

Konfigurace řady parametrů Divi

Přechodové pozadí

Nejprve do každého sloupce přidejte pozadí s přechodem.

  • Barva 1: rgba (255,255,255,0)
  • Barva 2: rgba (0,0,0,0,84)
  • Typ přechodu: lineární
  • Počáteční pozice: 25%
  • Koncová pozice: 86%
  • Umístěte přechod na obrázek pozadí: Ano
Konfigurace zadního sloupku Divi

Obrázek na pozadí

Poté nahrajte obrázek na pozadí podle vašeho výběru. Tento obrázek na pozadí představuje každého člena týmu, takže pro každý sloupec použijte jiný obrázek.

  • Velikost obrázku na pozadí: Obálka
  • Pozice obrázku na pozadí: Střed
Přidejte obrázek pozadí sloupce divi

Hlavní prvek

Dokončete nastavení sloupce přidáním vlastního CSS do hlavního prvku tabletu každého sloupce. Tyto řádky kódu CSS nám pomohou umístit sloupce jeden pod druhý na tabletu, místo aby byly dva vedle sebe.

šířka: 100%! důležité; okraj: 50px 0px 50px 0px! důležité;
Kód css divi sloupec

Do sloupce přidejte modul osoby

Přidat obsah

Ke sdílení informací o členech týmu použijeme modul Osoba. Přidejte první modul Person do sloupce 1 a použijte jakýkoli obsah, který chcete.

Jméno osoby divi

Odstranit obrázek

Poté obrázek smažte. Místo toho použijeme obrázek na pozadí sloupce.

Odebrat divi obrázek

Obrázek na pozadí

Poté přidáme překryvný obrázek jako obrázek na pozadí modulu. Ten, který používáme, najdete stažením složky na začátku tohoto tutoriálu.

  • Velikost obrázku na pozadí: Obálka
  • Pozice obrázku na pozadí: Střed
Konfigurace pozadí modulu osoby

Nastavení textu nadpisu

Přejděte na kartu Návrh modulu a změňte nastavení textu nadpisu následujícím způsobem:

  • Úroveň titulu: H3
  • Písmo názvu: Quicksand
  • Hmotnost písma nadpisu: tučně
  • Barva textu nadpisu: #ffffff
  • Velikost textu nadpisu: 230%
Přizpůsobení názvu modulu Divi

Nastavení textu těla

Změňte také nastavení textu těla.

  • Body písmo: Open Sans
  • Barva textu těla: #ffffff
  • Výška linie těla: 2,2 em
Přizpůsobení těla Divi

Nastavení textu polohy

Poté proveďte některé změny nastavení textu polohy.

  • Pozice písma: Otevřít Bezpatky
  • Barva textu pozice: # edf000
Divi pozice

vzdálenost

A dokončete nastavení modulu přidáním vlastních hodnot výplně do nastavení mezer.

  • Horní výplň: 70%
  • Dolní výplň: 10%
  • Výplň vlevo: 10%
  • Pravá výplň: 10%
Rozteč modulů Divi person

Duplikujte modul Osoba 4krát

Jakmile dokončíte modul Osoba, můžete celý modul klonovat čtyřikrát.

Umístěte duplikáty do zbývajících sloupců

Umístěte duplicitní moduly do zbývajících čtyř sloupců řádku. Nezapomeňte také upravit obsah.

Proměňte řádek v kolotoč s automatickým posuvem

Změňte velikost řádku 2

Nyní, abychom tento řádek změnili na karusel členů týmu s automatickým posouváním, musíme znovu otevřít nastavení řádku a změnit šířku a maximální šířku v nastavení velikosti.

  • Šířka: 180%
  • Maximální šířka: 220% (stůl), 100% (tablet a telefon)
Řádkování divi modifikace řádkování

Přidat vodorovný pohyb linky # 2

Dokončete nastavení čáry přidáním vodorovného pohybu k nastavení efektu posouvání na kartě Upřesnit a jste hotovi!

  • Aktivujte horizontální pohyb: Ano
  • Počáteční posun:
    • Kancelář: 2,5
    • Tablet a telefon: 0
  • Průměrný ofset: 0 (při 40%)
  • Koncový offset:
    • Kancelář: -25 (na 62%)
    • Tablet a telefon: 0
  • Efekt spouštěcího pohybu: střed prvku
Konfigurace animace posouvání Divi

přehled

Nyní, když jsme prošli všemi kroky, pojďme se konečně podívat, jak to vypadá na různých velikostech obrazovky.

Kancelář

Posuňte člena týmu divi

Závěrečné myšlenky

V tomto tutoriálu jsme vám ukázali, jak být kreativní s integrovanými efekty posouvání Divi. Konkrétně jsme znovu vytvořili krásný karusel členů týmu s automatickým posouváním. Jak se návštěvníci posouvají dolů po stránce, zobrazí se další část karuselu.

Jak přidat více ikon sociálních médií do Divi

Jak přidat více ikon sociálních médií do Divi

[vc_row content_placement="middle" css=".vc_custom_1508940533685{background-color: #f8f6f6 !important;}" el_id="themeforestpro"][vc_column width="3/4" css=".vc_custom_1502759058885px0px !important;border-bottom-width: 0px !important;padding-bottom: 0px !important;}"][vc_column_text]

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

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] STÁHNOUT [/vcex_button][/ vc_column][/vc_row]

Divi vám umožňuje ovládat a navrhovat každý detail vašeho webu, od záhlaví po zápatí. Jedním z nejvíce klikaných prvků jakéhokoli webu jsou ikony sociálních médií. Angažované publikum vás chce najít jinde a poznat vás. Je zřejmé, že to budete chtít udělat co nejjednodušší. 

Ukážeme vám tedy, jak aktivovat další ikony sociálních médií v možnostech motivů Divi, jak pomocí nástroje Divi Builder vkládat ikony sociálních médií kamkoli na stránku nebo příspěvek a jak využít této síly. motivu Divi Builder pro přidání ikon sociálních médií do každého koutu vašeho webu.

Jak snadno aktivovat další ikony sociálních médií v zápatí Divi

Nejjednodušší způsob, jak na svůj web Divi přidat další ikony sociálních médií, je přejít na panel Možnosti motivu , aktivace možností pro Facebook, Twitter, Instagram a RSS. Pak vše, co musíte udělat, je zadat adresy URL vašeho profilu do polí. Když to uděláte, uvidíte je v zápatí vašeho webu jako odkazy na ikony:

Sociální ikony divi

V nabídce panelu WordPress přejděte na Divi - Možnosti motivu a klikněte na kartu obecný . Posunutím dolů zobrazíte síťový přepínač. Rovněž pod těmito přepínači nezapomeňte zadat adresy URL každé ikony Divi social, kterou aktivujete. Jinak se ikona objeví, ale kliknutím na ni uživatel nebude nikde. Používat # místo adresy URL bude uživatele spíše udržovat na stránce, než aby jej potenciálně přesměrovával na a 404 stránky .

Možnosti divi motivu

Přejděte na konec možností motivu a klikněte Uložit změny . Nyní můžete přejít do zápatí svého webu a kliknutím na sociální ikony je vyzkoušet!

Pokud v zápatí nevidíte ikony, nezapomeňte zkontrolovat přizpůsobovač motivu pod Vzhled - Přizpůsobte a ujistěte se, že Zobrazit sociální ikony je zaškrtnuto v možnostech zápatí.

Divi wordpress

Pokud však chcete ještě více možností pro ikony zápatí na sociálních sítích, pokračujte v posouvání dolů do naší sekce v Tvůrci motivů Divi, kde diskutujeme jak o vlastních šablonách, tak o celkových výchozích hodnotách.

Jak používat Divi Builder pro přidání sledovačů sociálních médií na stránku nebo publikování obsahu

Někdy může mít smysl přidávat další ikony sociálních médií mezi bloky textu, obrázků nebo jiného obsahu v těle stránek nebo příspěvků. Například vaše vstupní stránka nebo stránka About by byla dobrým místem pro přidání dalších sociálních ikon, aby návštěvníci věděli, jak se s vámi spojit. Určitě vyniknou víc než jen odkazováním na vaše sociální profily pomocí běžného textu. Lidé navíc hledají rozpoznatelné ikony.

Pomocí nástroje Divi Builder můžete vkládat ikony sociálních médií přímo na své stránky nebo příspěvky pomocí sledování sociálních médií .

Pokaždé, když na ovládacím panelu WordPress vytvoříte nebo otevřete existující stránku nebo článek, uvidíte velké fialové tlačítko s dotazem, zda chcete použít Divi Builder nebo ne.

Tvorba článku Divi

A samozřejmě ano. Stačí kliknout Použijte nástroj Divi Builder začít budovat svou stránku nebo zveřejňovat příspěvky od nuly (nebo od jednoho z našich předdefinovaná rozvržení ). Navíc můžete zahrnout ikony sociálních médií Divi, pokud používáte výchozí editor WordPress. Vše, co musíte udělat, je vložit blok Rozložení divi a postupujte stejným způsobem jako níže.

Rozložení Divi Gutenberg

Pomocí nástroje můžete navrhnout svou stránku nebo zveřejnit příspěvek, jak chcete, pomocí dostupných modulů pro vytváření stránek. Pokud používáte Divi Builder poprvé, možná si budete chtít nejprve prohlédnout tento přehled, abyste získali jasnou představu o tom, jak to funguje.

Až budete na svou stránku připraveni přidat ikony sociálních médií, klikněte na černý kruh + v části, do které chcete umístit ikony sociálních médií, a posouvejte, dokud se nezobrazí pole sledování sociálních médií Objeví.

Vložení modulu následovat na sociálních médiích

Než budete moci začít přizpůsobovat, budete vyzváni k výběru požadovaných sociálních sítí. Klikněte na Přidejte novou sociální síť .

Přidat sociální síť sociální modul divi

Poté vyberte jednu z rozevíracího seznamu.

Přidejte novou sociální síť

Pokud je vybrána tato možnost, přidejte adresu URL svého profilu. Volitelně můžete vybrat barvu, přechod, pozadí atd. specifické pro jeho ikonu.

Tlačítko přizpůsobení sociální sítě

Jakmile přidáte svou první sociální síť, můžete pokračovat v přidávání dalších sítí podle stejných kroků. Všechny budou uvedeny na kartě Obsah z nastavení sledování sociálních médií . Můžete je upravit, kopírovat nebo přeskupit jejich přetažením na místo.

Přizpůsobte si sociální ikony

Jakmile přidáte své sociální sítě, přejděte na karty Obsah et Design hrát s dalšími možnostmi přizpůsobení. Můžete změnit vše od stínu rámečku, poloměru ohraničení, mezer, filtrů a dokonce i úvodní animace modulu ikon. Máte také možnost zahrnout tlačítko Sledovat pro všechny vaše ikony, aby na ně více upozorňovaly. Po dokončení klikněte na zelený klíště .

Následujte nás tlačítko divi

Poté můžete ikony přesouvat po stránce a pracovat s jejich roztečí a rozložením, jak uznáte za vhodné. (The Možnosti divi transformace mimochodem jsou úžasní.) Když jste se všemi svými rozhodnutími spokojeni, stiskněte zelené tlačítko Uložit (nebo Publikovat) v pravém dolním rohu zaregistrujte svůj nový modul ikony sociálních médií. Pokud tlačítko Publikovat / Uložit nevidíte, stiskněte fialová elipsa (tři tečky) ve spodní dolní části obrazovky rozbalte nabídku.

Tlačítko Divi nás následuje

Poté se na vašem webu zobrazí ikony sociálních médií.

Přidání ikon sociálních médií pomocí nástroje Divi Theme Builder

Jak jsme již zmínili výše, Divi Theme Builder je výkonný nástroj, který vám dává úplnou kontrolu nad téměř všemi aspekty vašeho webu. Pokud tedy chcete přidat ikony sociálních médií kamkoli, generátor témat vás pokryl.

Chcete-li začít s generátorem motivu, přejděte na Divi - generátor témat v panelu WordPress.

Divi stavitel

Jedná se především o přidávání ikon sociálních médií do stávajícího rozložení tvůrce motivů Divi. Nebo do nového! Nezáleží na tom, zda přidáte do záhlaví, zápatí nebo celkového textu svého webu - nebo dokonce určitých kategorií nebo jiných specializovaných typů stránek. Budete postupovat stejným způsobem.

Nejprve najdeme sekci, kterou chceme přidat. Opět může být globální nebo přizpůsobený. Pokud jste ještě nikdy nepoužívali nástroj pro tvorbu motivů, je to snadné. K jednotlivým příspěvkům přidáme ikony sociálních médií. Můžete tedy začít kliknutím na Přidejte nový model a výběr Všechny zprávy ou Zprávy ve specifických kategoriích . Poté zaškrtněte kategorie, které chcete zahrnout. Poté klikněte na Vytvořte šablonu .

Přidejte divi model

Pokud jste již šablony nastavili, stačí kliknout na Upravit tužku nebo poklepejte na část, kterou chcete upravit.

Rozložení Divi

Proces přidávání ikon sociálních médií je stejný, jak je popsáno výše v generátoru. Jelikož však místo úpravy jediné stránky používáte nástroj pro tvorbu motivů, nebudou se ikony zobrazovat přesně tam, kde si vyberete. Šablony lze přidat do záhlaví, zápatí a globálních šablon. Můžete si vybrat, jak a kdy se zobrazí, aniž byste je museli jednou konfigurovat. Ne stránku po stránce, jako byste to udělali výše.

Například pokud chceme zahrnout ikony sociálních médií pod název příspěvku, ale nad obsah příspěvku u každého blogového příspěvku, který zveřejníme, přidáme pouze modul do následovat sociální sítě. Klikněte na kruh Noir + a vyberte jej v dialogovém okně Vložte modul .

Vyberte sociální modul

Poté modul jednoduše přetáhněte na místo, kde chcete, aby se zobrazovaly ikony sociálních médií. (Pro toto umístění používáme režim drátového modelu). Pak stačí přidat sociální sítě, které chcete zobrazit. Poté přizpůsobíte velikost a zbarvení jako výše.

Sociální ikona mediální modul divi

A právě tak jste do generátoru motivů Divi přidali některé ikony sociálních médií. Zobrazí se u každého příspěvku na blogu, který vytvoříte (v tomto příkladu).

Vzhled na divi s tlačítkem sdílení

A pokud se vám nelíbí, jak vypadají, lze snadno přizpůsobit generátor motivů. Stačí je přetáhnout na jiné místo, například do horní části postranního panelu.

Přesunout modul sociálního sdílení Divi

Nezapomeňte kliknout na zelené tlačítko Zadat v rohu. Nyní se každý blogový příspěvek s touto šablonou na webu nahraje s vašimi ikonami sociálních médií v horní části postranního panelu.

ikony postranního panelu

Přidávání ikon sociálních médií do záhlaví a zápatí pomocí nástroje Divi Theme Builder

Možná, že výchozí ikony sociálních médií v nastavení Divi pro vás nefungují nebo nenabízejí dostatečné přizpůsobení. V takovém případě můžete vždy použít nástroj pro tvorbu motivů k úplnějšímu přizpůsobení. 

V jakékoli šabloně můžete přidat vlastní zápatí. Tím nahradíte výchozí soubor Divi. Jakákoli šablona bez vlastní šablony zobrazí výchozí prvek motivu. Ikony sociálních médií se mohou od archivu po stránce lišit v závislosti na potřebách vašich uživatelů.

Personalizace motivu divi rozložení

Můžete také přidat globální zápatí, které nahradí všechno další zápatí, která jste vytvořili. (To platí také pro globální těla a záhlaví). 

Pokud jste navrhli 4 vlastní zápatí pro příspěvky, stránky, projekty a kategorie, ale pak vytvoříte globální zápatí, zobrazí se pouze globální zápatí. 

Globální šablony jsou skvělé pro ikony sociálních médií na celém webu, například pro noviny nebo značku. Zatímco individuální šablony se sociálními ikonami mohou být nejlepší pro jednotlivé autory, kteří jsou součástí sítě.

Přidejte globální zápatí divi

Pomocí nástroje Divi Builder pro vlastní šablony záhlaví, zápatí a těla můžete přidat ikony sociálních médií téměř do jakékoli části Divi, kterou chcete. Nejste omezeni na výchozí návrhy nebo musíte kopat do systému souborů WordPress. S generátorem motivů můžete navíc použít jakoukoli z návrhových možností Divi, abyste vytvořili ikony sociálních médií a nechali je vyniknout správným způsobem pro každé konkrétní publikum.

závěr

Pokud máte výchozí možnosti zápatí Divi, nástroj Divi Builder pro příspěvky a stránky, sílu nástroje Divi Theme Builder, není důvod, proč je třeba instalovat plugin pro přidání ikon sociálních médií na váš web. Divi vám dává plnou kontrolu nad tím, jak vaše sociální ikony vypadají a kde jsou. 

Ať už potřebujete propagovat značku, hostujícího autora, stabilní tvůrce obsahu, nebo jen místa, kde vás najdete online, Divi má způsob, jak to udělat. Jsme jednostranní, ale myslíme si, že je to nejjednodušší, nejjednodušší a nejstylovější způsob přidání ikon sociálních médií na váš web.

Vytvoření dynamické tabulky výhod pro produkty WooCommerce

Vytvoření dynamické tabulky výhod pro produkty WooCommerce

[vc_row content_placement="middle" css=".vc_custom_1508940533685{background-color: #f8f6f6 !important;}" el_id="themeforestpro"][vc_column width="3/4" css=".vc_custom_1502759058885px0px !important;border-bottom-width: 0px !important;padding-bottom: 0px !important;}"][vc_column_text]

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

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] STÁHNOUT [/vcex_button][/ vc_column][/vc_row]

Způsob, jakým navrhujete svou produktovou stránku, má okamžitý dopad na chování vašich návštěvníků. Dobře zpracovaný a přizpůsobený design stránky produktu může návštěvníkům usnadnit rozhodování, zda si chtějí produkt koupit. Pokud hledáte způsob, jak zvýšit produktivitu vaší produktové stránky, pravděpodobně se vám bude líbit tento návod. 

Ukážeme vám, jak do svého designu zahrnout dynamickou mřížku výhod produktu pomocí Divi a pluginu Advanced Custom Fields. Začneme vytvořením skupiny polí pro výhody. Poté vyplníme vlastní pole na naší stránce produktu a zahrneme dynamický obsah do naší šablony stránky produktu. 

Možný výsledek

Než se ponoříme do tutoriálu, pojďme se rychle podívat na výsledek na různých velikostech obrazovky.

Možný výsledek divi

1. Nainstalujte zásuvný modul ACF Plugin A Product Benefit Field Group

Nainstalujte si plugin Advanced Custom Fields

Abychom zobrazili různé výhody produktů v backendu našich produktů, použijeme bezplatný plugin Advanced Custom Fields. Přístup k vašemu Backend WordPressu> Pluginy> Přidat nové> Najít plugin ACF> Instalovat> Aktivovat .

Nainstalujte si rozšířený modul pro vlastní pole

Přejděte na vlastní pole a přidejte novou skupinu polí

Po instalaci a aktivaci pluginu ACF budete mít přístup ke svým vlastním polím a přidáte novou skupinu polí.

Vytvořte pole ACF

Nastavení skupiny polí

Přiřaďte své nové skupině polí název a povolte, aby se zobrazovala pouze na stránkách produktů.

  • „Typ zprávy“ se rovná „Produkt“
Přidat pravidla

Přidejte první pole

Pokračujte přidáním nového pole pro název první výhody produktu.

  • Štítek pole: Název výhody 1
  • Typ pole: text
Přidejte AC pole
Přizpůsobení pole Divi

Opakujte krok pro zbývající pole

Totéž proveďte pro další výhody produktu a jejich popisy. Všechna tato pole vyžadují přiřazený typ pole „Text“.

  • Název služby 1
  • Popis výhod 1
  • Název služby 2
  • Popis výhod 2
  • Název služby 3
  • Popis výhod 3
  • Název služby 4
  • Popis výhod 4
Nakonfigurujte pole ACF

2. Přidejte výhody do produktů

Otevřete nebo přidejte nový produkt

Jakmile vytvoříte skupinu polí a pole, můžete přidat výhody svých produktů na jednotlivé úrovni. Otevřete produkt podle svého výběru nebo vytvořte nový.

Vytváření produktů Divi

Vyplňte pole Výhody produktu

A plní výhody produktu.

Vyplňte pole výhod divi

3. Vytvořte šablonu stránky produktu v Divi Theme Builder

Přejděte do Divi Theme Builder a přidejte novou šablonu

Je čas začít s Divi! Chcete-li vytvořit novou šablonu, přejděte do Tvůrce motivů Divi a klikněte na „Přidat novou šablonu“.

Tvůrce motivů Divi

Použijte šablonu na všechny produkty

Tuto šablonu používáme u všech produktů, ale můžete místo toho vybrat produkty s konkrétní kategorií nebo štítkem.

Přidejte všechny produkty woocommerce

Vstupte do editoru šablon těla modelu

Poté zadejte tělo modelu kliknutím na „Přidat vlastní tělo“ a výběrem „Vytvořit vlastní tělo“.

Budování divi těla

Upravit sekci # 1

Barva pozadí

Jakmile se dostanete do editoru šablon, všimnete si sekci. Otevřete tuto sekci a změňte barvu pozadí na černou.

  • Barva pozadí: # 000000
Konfigurace pozadí sekce Divi

vzdálenost

Přejděte na záložku návrhu sekce a přidejte vlastní polstrování nahoře a dole.

  • Horní výplň: 10px
  • Spodní výplň: 10px
Konfigurace rozestupu oddílů Divi

Přidejte nový řádek

Struktura sloupce

Pokračujme přidáním nového řádku do sekce, která má následující strukturu:

Konfigurace rozvržení modulu linky

vzdálenost

Bez přidání jakýchkoli modů otevřete nastavení řádků a proveďte několik úprav mezer.

  • Použít přizpůsobený žlab: Ano
  • Šířka okapu: 1
  • Šířka: 90%
  • Maximální šířka: 100%
Nastavení řádkových modulů

vzdálenost

Odstraňte všechny horní a spodní vnitřní mezery.

  • Vysoká vnitřní marže: 0px
  • Nízká vnitřní marže: 0px
Nastavení rozteče modulu Divi line

Do sloupce přidejte modul oznámení vozíku Woo

Dynamický obsah

Jediným modulem, který na tomto řádku a v této sekci potřebujeme, je modul Woo Cart Notice. Ujistěte se, že je v dynamické sekci vybrán „Tento produkt“.

  • Produkt: Tento produkt
Nastavení modulu upozornění woo košíku divi

Barva pozadí

Poté otevřete nastavení modulu a použijte průhledné pozadí.

  • Barva pozadí: rgba (0,0,0,0)
Nastavení divi modulu Woo cart

Nastavení textu

Přepněte na kartu „Návrh“ a změňte písmo textu.

  • Textové písmo: Karla
Nastavení písma modulu Divi

Nastavení tlačítka

Dokončete nastavení pluginu definováním nastavení stylu:

  • Použít vlastní styly pro tlačítko: Ano
  • Velikost textu tlačítka: 20 px
  • Barva textu tlačítka: # 000000
  • Pozadí tlačítka: # ffd623
  • Šířka ohraničení tlačítka: 0px
  • Tlačítko zaoblené ohraničení: 0px
Nastavení barev modulu upozornění Woo cart
  • Tlačítko písmo: Oswald
  • Styl písma tlačítka: Shift
Úprava barevného designu modulu Woo cart module
  • Vysoká vnitřní marže: 20px
  • Nízká vnitřní marže: 20px
  • Levá vnitřní marže: 50px
  • Vnitřní pravá marže: 50px
Konfigurační návrhový modul woo cart upozornění

Přidat oddíl # 2

Přechodové pozadí

Přidejte další pravidelnou sekci pod předchozí. Poté otevřete nastavení a použijte gradient pozadí takto:

  • Barva 1: # 000000
  • Barva 2: #ffffff
  • Počáteční pozice:
    • Stolní počítač: 30%
    • Tablet: 57 %
    • Telefon: 54%
  • Koncová pozice:
    • Stolní počítač: 30%
    • Tablet: 57 %
    • Telefon: 54%
Zadní nastavení modulu Divi line

vzdálenost

Pojďme na kartu Návrh a přidejme vysokou vnitřní marži.

  • Horní výplň: 150px
Konfigurace mezer mezi moduly Divi line

Přidat nový řádek

Struktura sloupce

Pokračujte přidáním nového řádku se stejnou strukturou, jak je znázorněno níže:

Konfigurace stylu čáry Divi

dimenzování

Aniž bychom přidali nějaké mody, otevřeme nastavení a změníme mezery následujícím způsobem:

  • Použít vlastní žlaby: Ano
  • Okapový prostor: 1
  • Šířka: 95%
  • Maximální šířka: 2560 px
  • Zarovnání čáry: Střed
Divi modul konfigurace okapu

Vzdálenost

Také odstraníme horní vnitřní okraj.

  • Horní výplň: 0px
Konfigurace rozteče modulů Divi

Hlavní prvek

A k vycentrování obsahu sloupce na ploše použijeme dva řádky kódu CSS v hlavním prvku modulu řádků.

Desktop:

displej: flex; zarovnání-položky: střed;

Tablet a telefon:

zobrazení: blok;
Nastavení stylu modulu Divi line

Přidejte modul Woo Image do sloupce 1

Dynamický obsah

Je čas přidat moduly, začneme s modulem Woo Images ve sloupci 1. Zkontrolujte, zda je vybrán „Tento produkt“.

  • Produkt: Tento produkt
Nastavení modulu obrazu produktu Woocommerce

Efekt vertikální rolování animace

Přidáme jemný pohyb do obrazu pomocí efektu posouvání vodorovného pohybu na kartě Upřesnit.

  • Aktivujte svislý pohyb: Ano
  • Počáteční posun:
    • Kancelář: -4
    • Tablet a telefon: 0
  • Průměrný offset: 0
  • Koncový offset: 0
  • Efekt spouštěcího pohybu: střed prvku
Nastavení obrazového modulu Divi

Do sloupce 2 přidejte titulní modul Woo

Dynamický obsah

Ve sloupci 2 je prvním modem, který potřebujeme, modifikace názvu Woo. Zkontrolujte, zda je v oblasti dynamického obsahu vybrán „Tento produkt“.

  • Produkt: Tento produkt
mřížka výhod produktu

Nastavení textu nadpisu

Poté přejděte na kartu Návrh a stylujte název textu takto:

  • Písmo názvu: Oswald
  • Styl písma nadpisu: velká písmena
  • Barva textu nadpisu: # ffd623
  • Velikost textu nadpisu: 80 pixelů
Úprava designu titulního modulu Divi

vzdálenost

Dokončete titulní modul Woo přidáním levého a pravého okraje.

  • Levý okraj: 5%
  • Pravý okraj: 5%
Nastavení modulu názvu Divi

Do sloupce 2 přidejte modul popisu Woo

Dynamický obsah

Pojďme k dalšímu modulu, kterým je modul popisu Woo. K tomu používáme následující dynamický obsah:

  • Produkt: Tento produkt
  • Typ popisu: Krátký popis
Nastavení modulu popisu produktu

Nastavení textu

Přepněte na kartu návrhu modulu a odpovídajícím způsobem změňte nastavení textu:

  • Textové písmo: Karla
  • Barva textu: #dbdbdb
  • Velikost textu: 17 px (stolní počítač a tablet), 15 px (telefon)
  • Výška textového řádku: 1,9 em
Popis modulu úpravy barev divi

dimenzování

Poté změňte šířku na různých velikostech obrazovky.

  • Šířka: 59% (stolní), 82% (tablet a telefon)
Nastavení šířky modulu Divi Summary

vzdálenost

Vyplňte modul popisu Woo přidáním vlastních hodnot okrajů v nastavení mezer.

  • Horní okraj: 50px
  • Dolní okraj: 100px
  • Levý okraj: 5%
  • Pravý okraj: 5%
Modul popisu produktu Divi

Přidejte modul Blurb do sloupce 2

Dynamický obsah

Pro zobrazení výhod produktu, které jsme přidali v první části tohoto tutoriálu, použijeme moduly Blurb. Přidejte první modul Blurb a použijte dynamický obsah první výhody vytvořené pro titul a tělo.

  • Název: Benefit Název 1
  • Tělo: Benefit Popis 1
Nastavení textu modulu Divi Summary

Nahrát obrázek

Nahrajte obrázek nebo použijte další ikonu. Ty, které jsme použili v tomto tutoriálu, najdete ve složce ke stažení, kterou jste si mohli stáhnout na začátku tohoto tutoriálu.

Souhrnný obrazový modul konfigurace divi

Nastavení obrázku / ikony

Přejděte na kartu návrhu modulu a změňte nastavení obrázku / ikony následujícím způsobem:

  • Umístění obrázku / ikony: nahoru
  • Zarovnání obrázku / ikony: Vlevo
Modul nastavení Divi

Nastavení textu nadpisu

Dále upravujeme nastavení textu nadpisu.

  • Písmo názvu: Oswald
  • Styl písma nadpisu: Velká písmena
  • Velikost textu nadpisu: 25 pixelů
Konfigurace písma modulu souhrnu divi

Nastavení textu těla

Spolu s nastavením základního textu.

  • Tělo Písmo: Karla
  • Velikost textu: 17 px (stolní počítač a tablet), 15 px (telefon)
  • Výška linie těla: 1,9 em
Nakonfigurujte souhrnný textový modul div

dimenzování

Poté přejděte na nastavení velikosti a změňte šířky. Je důležité použít hlavní šířku menší než 50%, což nám umožní v následujících krocích ukázat vedle sebe dva Blurb moduly.

  • Šířka obrázku: 25%
  • Šířka: 49%
Konfigurace dimenze modulu souhrnu divi

vzdálenost

Také přidáme mezery kolem modulu Blurb pomocí vlastních hodnot výplně na různých velikostech obrazovky.

  • Horní výplň: 8%
  • Dolní výplň: 8%
  • Výplň vlevo: 8% (stolní počítač a tablet), 2% (telefon)
  • Pravá výplň: 8% (stolní počítač a tablet) 2% (telefon)
Nakonfigurujte rozteč modulů souhrnu divi

Hlavní prvek

Nyní se ujistíme, že modul Souhrn zobrazuje text vedle sebe ve dvou krocích. Nejprve se ujistíme, že šířka modulu je menší než 50% (jako v předchozím kroku). Dále použijeme vlastnost na řádku. Tuto vlastnost CSS přidáme na hlavní prvek v pokročilé části.

zobrazení: inline-block;
Přidejte modul divi kódu CSS

Souhrnný modul klonujte třikrát

Jakmile dokončíte první Blurb mod, můžete jej klonovat třikrát. Automaticky si všimnete, že se moduly Blurb objevují v mřížce.

Sekce názvu produktu divi

Upravte obrázky modulu Blurb

Upravte obrázek v každém duplikátu Blurb pod. Najdete je ve složce pro stahování, kterou jste si možná stáhli na začátku tohoto článku.

Obrázek modulu shrnutí Divi

Upravte dynamický obsah modulu Blurb

Upravte také dynamický obsah každého duplikovaného modulu Blurb.

  • Název: Název služby (2,3 nebo 4)
  • Tělo: popis výhod (2,3 nebo 4)
Pravidla modulu Divi Summary

Přidejte hranice k Blurb modulům individuálně

Nastavení okrajů modulu 1

Nyní, abychom dokončili návrh naší mřížky, přidáme hranice modulům Blurb na individuální úrovni. Otevřete první Blurb mod a použijte přímý okraj.

  • Šířka pravého okraje: 1px
  • Barva pravého okraje: # ffd623
Zaokrouhlený ohraničovací modul divi souhrnný modul

Také přidejte spodní okraj k prvnímu modulu Blurb.

  • Šířka dolního okraje: 1px
  • Barva dolního okraje: # 000000
Nakonfigurujte dolní okraj divi
Nastavení okrajů modulu 2

Poté otevřete druhý modul Blurb a použijte spodní ohraničení.

  • Šířka dolního okraje: 1px
  • Barva dolního okraje: # 000000
Konfigurační hraniční modul shrnutí divi
Nastavení okrajů modulu 3

Dokončete návrh mřížky přidáním přímého okraje do třetího modulu Blurb.

  • Šířka pravého okraje: 1px
  • Barva pravého okraje: # ffd623
mřížka výhod produktu

Přidat Woo Přidat do košíku Modul ve sloupci 2

Dynamický obsah

Posledním modulem, který v našem designu potřebujeme, je modul Woo Add to Cart. Zkontrolujte, zda je v oblasti dynamického obsahu vybrán „Tento produkt“.

  • Produkt: Tento produkt
Přidejte na kartu nastavení modulu divi

Nastavení pole

Přejděte na další kartu návrhu a změňte nastavení pole.

  • Barva pozadí polí: #ffffff
  • Barva textu pole: # 000000
Konfigurovat modul barevného stylu přidat do košíku divi
  • Zaoblená pole: 0px (všechny rohy)
  • Šířka dolního okraje polí: 1px
  • Barva dolního okraje polí: # 000000
Nakonfigurujte rozteč divi sekcí

Nastavení tlačítek

Poté tlačítko odpovídajícím způsobem upravte:

  • Pro tlačítko použijte vlastní styly: Ano
  • Velikost textu tlačítka: 20 pixelů
  • Barva textu tlačítka: # 000000
  • Barva pozadí tlačítka: # ffd623
  • Šířka ohraničení tlačítka: 0px
  • Poloměr ohraničení tlačítka: 0px
Nakonfigurujte design tlačítka divi
  • Tlačítko písmo: Oswald
  • Styl písma tlačítka: velká písmena
Nakonfigurujte tlačítko divi
  • Horní výplň: 20px
  • Spodní výplň: 20px
  • Levá výplň: 50px
  • Pravá výplň: 50px
Nakonfigurujte velikost modulu divi

vzdálenost

A dokončete parametry modulu přidáním vlastních hodnot okrajů.

  • Horní okraj: 100px
  • Levý okraj: 5%
Nakonfigurujte divi mezery

3. Uložte změny generátoru motivu a zobrazte náhled výsledku

Po dokončení navrhování šablony stránky produktu můžete uložit všechny své změny Tvůrce motivů a zobrazit výsledky svých produktů!

Uložit design divi
Uložit divi úpravy

přehled

Nyní, když jsme prošli všemi kroky, pojďme se konečně podívat, jak to vypadá na různých velikostech obrazovky.

Výsledek ukázky

Závěrečné myšlenky

V tomto článku jsme vám ukázali, jak získat kreativitu s vaší další šablonou stránky produktu Divi. Konkrétně jsme vám ukázali, jak zahrnout dynamickou mřížku výhod produktu a přidat na stránku produktu další výhody. Tento tutoriál jsme vytvořili pomocí Divi v kombinaci s pluginem Advanced Custom Fields. Můžete si také stáhnout soubor JSON zdarma! Máte-li jakékoli dotazy nebo návrhy, neváhejte zanechat komentář v sekci komentáře níže.

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

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

[vc_row content_placement="middle" css=".vc_custom_1508940533685{background-color: #f8f6f6 !important;}" el_id="themeforestpro"][vc_column width="3/4" css=".vc_custom_1502759058885px0px !important;border-bottom-width: 0px !important;padding-bottom: 0px !important;}"][vc_column_text]

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

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] STÁHNOUT [/vcex_button][/ vc_column][/vc_row]

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.

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:

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

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