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

, vyrábí jej Blair Jersyer | Juin 10, 2020 | divi

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.

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

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.

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

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.

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

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.

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

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

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

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

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

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

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

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

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!

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

, vyrábí jej Blair Jersyer | Juin 9, 2020 | divi

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.

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

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ů

vzdálenost

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

• Horní okraj: 200px
• Dolní okraj: 200px

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.

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

vzdálenost

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

• Dolní okraj: 50 pixelů (pouze tablet a telefon)

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.

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

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

Linka

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

• Barva čáry: # 000000

dimenzování

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

• Hmotnost děliče: 3px
• Šířka: 28%

vzdálenost

Přidáme také horní okraj.

• Horní okraj: 10px

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

přetečení

Také skrýt přepady.

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

Přidat nový řádek

Struktura sloupců

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

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ů

vzdálenost

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

• Horní výplň: 0px
• Spodní výplň: 0px

Nastavení sloupce 1

Barva pozadí

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

• Barva pozadí: # f7f7f7

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 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)

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

Linka

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

• Barva čáry: # 000000

dimenzování

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

• Hmotnost děliče: 3px
• Šířka: 50%

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í 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í 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

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í 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

• Tlačítko Písmo: Čtvrtletně
• Hmotnost písma tlačítka: tučně

vzdálenost

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

• Horní výplň: 50px
• Spodní výplň: 50px
• Levá výplň: 100px
• Pravá výplň: 100px

Pozice

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

• Pozice: Absolutní
• Umístění: vlevo dole

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.

Změňte veškerý obsah

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

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

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

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

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

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

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

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

, vyrábí jej Blair Jersyer | Juin 9, 2020 | divi

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.

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)

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é

Přidat řádek # 1

Struktura sloupců

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

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ů

vzdálenost

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

• Horní výplň: 100px
• Spodní výplň: 100px

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.

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)

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

Linka

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

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

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

Přidejte řádek # 2

Struktura sloupců

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

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%

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)

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.

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

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

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

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.

Odstranit obrázek

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

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

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%

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

Nastavení textu polohy

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

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

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%

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)

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

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ář

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

, vyrábí jej Blair Jersyer | Juin 8, 2020 | divi

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:

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 .

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

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.

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.

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

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íť .

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

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.

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.

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

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.

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.

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 .

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

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 .

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.

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

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.

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.

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

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

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

, vyrábí jej Blair Jersyer | Juin 8, 2020 | divi

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.

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 .

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

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ř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

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

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

Vyplňte pole Výhody produktu

A plní výhody produktu.

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

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.

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

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

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

Přidejte nový řádek

Struktura sloupce

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

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%

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

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

Barva pozadí

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

• Barva pozadí: rgba (0,0,0,0)

Nastavení textu

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

• Textové písmo: Karla

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

• Tlačítko písmo: Oswald
• Styl písma tlačítka: Shift

• 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

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%

vzdálenost

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

• Horní výplň: 150px

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:

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

Vzdálenost

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

• Horní výplň: 0px

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;

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

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

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

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ů

vzdálenost

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

• Levý okraj: 5%
• Pravý okraj: 5%

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í 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

dimenzování

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

• Šířka: 59% (stolní), 82% (tablet a telefon)

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%

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

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.

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

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ů

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

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%

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)

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;

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.

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.

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)

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

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

• Šířka dolního okraje: 1px
• Barva dolního okraje: # 000000

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

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

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

Nastavení pole

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

• Barva pozadí polí: #ffffff
• Barva textu pole: # 000000

• Zaoblená pole: 0px (všechny rohy)
• Šířka dolního okraje polí: 1px
• Barva dolního okraje polí: # 000000

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

• Tlačítko písmo: Oswald
• Styl písma tlačítka: velká písmena

• Horní výplň: 20px
• Spodní výplň: 20px
• Levá výplň: 50px
• Pravá výplň: 50px

vzdálenost

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

• Horní okraj: 100px
• Levý okraj: 5%

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ů!

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.

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

, vyrábí jej Blair Jersyer | Juin 1, 2020 | divi

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.

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

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.

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ů

• Šířka: 50px
• Zarovnání modulu: střed
• Výška: 25px

• Marže: 0px nízká
• Zaoblené rohy: 4px
• Šířka okraje: 2px
• Barva ohraničení: # 666666

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ý“.

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

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

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

Čá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.

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.

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.

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.

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

Další zdroje

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

• Jak přizpůsobit typografii a rozvržení na Divi
• Jak přidat opakovatelné posuvné volání k akci na Divi
• Jak zarovnat prvky na stejném řádku v programu Divi
• Jak vytvořit animované sekce kliknutím na Divi Builder

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