Spodní zásuvky jsou užitečným doplňkem každého Webové stránky, protože ukládají další obsah snadno dostupný uživatelům. Zásuvky v zápatí jsou kontejnery webového obsahu (jako sekce Divi), které lze otevřít a zavřít kliknutím na tlačítko nebo najetím na ně. Je to jako mít malou skrýš na prémiový obsah.
V tomto tutoriálu navrhneme plovoucí zásuvku v Divi. Přidáme zásuvku zápatí do globální oblasti zápatí šablona webových stránek takže zásuvka zápatí je přístupná na celém webu s normálním obsahem zápatí.
S procesem, který použijeme, lze libovolnou sekci Divi (a její obsah) převést na zásuvku zápatí během několika minut.
Jak přidat šablonu zásuvky zápatí na vaše stránky Divi
Přidání tohoto modelu nahradí šablona webových stránek ve výchozím nastavení (pokud jej máte) na svém webu Divi. Doporučujeme jej přidat na testovací web, abyste na živém webu nic nepokazili.
Vlastní import šablony zásuvky s pevným zápatím Webové stránky, rozbalte stažený soubor zip, abyste získali přístup k souboru JSON.
Poté přejděte na řídicí panel WordPress a přejděte na Divi> Tvůrce motivů.
Poté klikněte na ikonu přenositelnosti v pravém horním rohu stránky.
V okně přenositelnosti vyberte soubor JSON, který jste právě rozbalili, a vyberte možnost „Stáhnout zálohu před importem“ pro případ, že jste dříve měli něco v šablona webových stránek výchozí, které jste nechtěli přepsat.
Poté klikněte na tlačítko Importovat.
Nakonec uložte změny do generátoru motivu a zobrazte živou stránku, abyste viděli pevný zápatí.
Nyní k tutoriálu, dobře?
Část 1: Přidání globální zápatí
Generátor motivu Divi umožňuje nahradit výchozí zápatí novým zápatím aktualizací výchozí šablony webových stránek.
Chcete-li vytvořit globální zápatí, přejděte na řídicí panel WordPress a přejděte na Divi> Tvůrce motivů. Poté klikněte na místo „Přidat globální zápatí“ ve výchozí šabloně webu.
Poté z rozevíracího seznamu vyberte možnost „Vytvořit globální zápatí“.
Přidejte předdefinované rozložení do globálního rozložení zápatí
Tím se nasadí editor modelu rozložení, kde budete okamžitě vyzváni se třemi možnostmi, jak chcete začít stavět. Vyberte možnost „Vybrat předdefinované rozložení“.
V rozbalovacím okně Načíst z knihovny vyhledejte rozložení vstupní stránky šablony. Poté klikněte na „Použít toto rozložení“.
Odstraňte nežádoucí obsah z předběžného rozvržení
Po načtení rozvržení do editoru rozbalte rozbalovací okno Vrstvy kliknutím na ikonu vrstev v nabídce nastavení. Poté odstraňte všechny části rozvržení kromě posledních dvou.
Přesuňte a označte dvě sekce
Jakmile jsou sekce odstraněny, měli byste mít dvě sekce, jednu s názvem „Zápatí“ a druhou s názvem „Jak to funguje“. Přesuňte sekci „Zápatí“ do horní části rozvržení.
Změňte formulaci v dolní části na „Zápatí Zásuvka“. Toto bude část, kterou použijeme jako obsah naší zásuvky zápatí.
Část 2: Vytvoření pevné zásuvky zápatí
Nyní, když jsme označili jednu ze sekcí jako zápatí a druhou jako zásuvku zápatí, jsme připraveni začít stavět naši pevnou zásuvku zápatí. Začněme vytvořením ikony, kterou použijeme k přepínání zásuvky zápatí.
Vytvoření tlačítka zásuvky zápatí
Přidat nový řádek
V dolní části zápatí přidejte do sloupce nový řádek.
Označte nový řádek „Tlačítko zásuvky“, protože to je řádek, který bude obsahovat tlačítko sloužící k přepínání zásuvky otevřené a zavřené. Poté přesuňte čáru do horní části sekce.
Řádkové čalounění
Před přidáním modulu otevřete nastavení řádku a aktualizujte výplň následujícím způsobem:
- Výplň: 0px vysoká, 0px nízká
Výplň sekce
Poté otevřete nastavení v části Zásuvka zápatí a aktualizujte výplň následujícím způsobem:
Abychom vytvořili klikatelné tlačítko, které přepíná zásuvku zápatí, použijeme modul reklamy s ikonou. A my mu dáme jedinečný tvar kapky vody kombinací čtvercového tvaru kontejneru Blurb pod s ikonou kruhu.
Zde je návod.
Přidejte modul Blurb
Do řádku „Tlačítko zásuvky“ v horní části sekce přidejte textový prezentační modul.
Blurb obsah / ikona
Poté odeberte výchozí nadpis a obsah těla a vyberte ikonu šipky směřující do levého horního rohu (viz screenshot). Používáme ikonu částečně otočenou, protože ji budeme otáčet později.
BlurbDesign
Poté uveďte text prezentace takto:
- Barva pozadí: # 081540
Poté aktualizujte návrhové parametry následujícím způsobem:
- Barva ikony: #eeeeee
- Ikona kruhu: ANO
- Barva kruhu: # 081540
- Použijte velikost písma ikony: ANO
- Velikost písma ikony: 17 pixelů
Velikost textu prezentace
Nyní dejte modulu výšku a šířku následujícím způsobem:
- Šířka: 30px
- Výška: 30px
To způsobí, že ikona kruhu přetekne do textového kontejneru a vytvoří tvar kapky vody.
Poloha blurb
Poté zadejte text prezentace absolutní pozici v horní části sekce.
- Pozice: Absolutní
- Umístění: Horní centrum
Nastavení transformace poruchy
Nyní můžeme pomocí možností transformace otočit ikonu / ikonu nahoru a umístit ji těsně nad kontejner sekce. Když nyní skryjeme sekci pod oknem prohlížeče, ikona zůstane viditelná / klikatelná.
Aktualizujte následující položky:
- Osa Transform Translate X: -50%
- Transformace osy Y: -250%
- Otočení osy Z transformace: -45 stupňů
Poté odeberte výchozí animaci ikony:
- Animace obrazu / ikony: Žádná animace
Budeme používat JQuery k přepínání zásuvky, takže musíme cílit text / ikonu jako klikatelný prvek s třídou CSS, kterou použijeme později v kódu. Přidejte následující třídu CSS:
- Třída CSS: cílová zásuvka
Nastavení sekce zápatí zásuvky
Nyní pomocí možnosti translate transformace skryjeme sekci „Zápatí zásuvky“. Otevřete nastavení sekce a aktualizujte následující:
- Transformovat Translate osa Y: 100%
Krása použití transformace je v tom, že procentuální hodnoty jsou založeny na skutečné velikosti položky. Takže 100% na ose Y bude přímo relativní k výšce řezu (co to je v daném okamžiku). Jinými slovy, prvek bude přesunut dolů o přesnou vzdálenost jako jeho vlastní výška.
Abychom vrátili „Zápatí zásuvky“ zpět, budeme muset zvrátit transformační překlad, který jsme do sekce právě přidali. K tomu budeme muset zacílit prvek pomocí třídy CSS a deaktivovat transformaci překladu kliknutím na ikonu (přivést celou sekci zpět do původní polohy).
Do oddílu zásuvky zápatí přidejte třídu CSS
Na kartě Upřesnit přidejte následující třídu CSS:
- Třída CSS: has-transform
Sekce patky zásuvky Pevná poloha
V posledním kroku musíme upravit zásuvku zápatí tak, aby se (s ikonou) vznášela ve spodní části okna prohlížeče.
Aktualizujte pozici oddílu Zápatí takto:
- Pozice: pevná
- Umístění: vlevo dole
- Z Index: 13
Vypněte mobilní obsah
Protože budete mít omezené množství obsahu zápatí, který se vejde do tabletu a telefonu (kvůli omezené výšce obrazovek), budete muset vypnout / skrýt nepodstatné položky z displeje. V tomto příkladu skryjeme střední řádek rozložení sekce.
Otevřete nastavení od druhého do posledního řádku v části Zásuvka zápatí. Na kartě Upřesnit aktualizujte možnost viditelnosti a vypněte linku na telefonu a tabletu.
Přidání vlastního kódu
Chcete-li přidat funkci kliknutí a přepínání do zásuvky zápatí, musíme na stránku přidat vlastní CSS a JQuery. Chcete-li to provést, vytvořte nový modul kódu pod modulem Blurb použitým pro tlačítko.
Poté vložte následující kód do oblasti kódu:
.has-transform, .drawer-target {transition: all 400ms ease-in-out;} .toggle-drawer-animation {transform: none !important;}.toggle-icon-animation {transform: rotate(-135deg) !important;} .drawer-target {cursor: pointer;}(function($) {$(document).ready(function(){$('.drawer-target').click(function(){$(this).toggleClass('toggle-icon-animation'); $('.has-transform').toggleClass('toggle-drawer-animation'); }); });})( jQuery );
Uložit změny
Nezapomeňte uložit rozložení před ukončením editoru.
Uložte také změny v generátoru motivu.
Konečný výsledek
Nyní můžeme přejít na jakoukoli vaši stránku Webové stránky abyste viděli konečný výsledek.
Závěrečné myšlenky
Doufám, že vám plovoucí zásuvka v zápatí pomůže podporovat obsah zábavným a přístupným způsobem. Jako každou zásuvku ji můžete naplnit prakticky čímkoli, co vás napadne.
Další zdroje
Zde je seznam výukových programů, které vám mohou pomoci dosáhnout více s interními funkcemi Divi.
- Jak vytvořit soubor nástrojů motivu na Divi
- Jak vytvořit animovanou reklamní sekci na Divi
- Jak přizpůsobit sítě na Divi
Přeloženo z: elegantní témata