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.

Importujte model divi

Nakonec uložte změny do generátoru motivu a zobrazte živou stránku, abyste viděli pevný zápatí.

Uložte změny rozložení divi

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.

Výběr editoru Divi

Poté z rozevíracího seznamu vyberte možnost „Vytvořit globální zápatí“.

Přidejte zápatí modelu divi

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

Vyberte předkonstruovaný model divi

V rozbalovacím okně Načíst z knihovny vyhledejte rozložení vstupní stránky šablony. Poté klikněte na „Použít toto rozložení“.

Použijte divi model

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.

Smažte nepotřebnou část

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

Zápatí Divi

Změňte formulaci v dolní části na „Zápatí Zásuvka“. Toto bude část, kterou použijeme jako obsah naší zásuvky zápatí.

Upravit štítek divi 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.

pevná zásuvka na nohy

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.

Výběr rozložení divi

Řá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á
Konfigurační rozteč divi

Výplň sekce

Poté otevřete nastavení v části Zásuvka zápatí a aktualizujte výplň následujícím způsobem:

Konfigurace rozestupu oddílů Divi

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.

Zásuvka zápatí divi
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.

Vyberte ikonu zápatí zásuvky divi
BlurbDesign

Poté uveďte text prezentace takto:

  • Barva pozadí: # 081540
Upravit pozadí divi

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ů
Přizpůsobte si blur divi tlačítko
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.

Upravit design tlačítka divi
Poloha blurb

Poté zadejte text prezentace absolutní pozici v horní části sekce.

  • Pozice: Absolutní
  • Umístění: Horní centrum
Upravte pozici tlačítka divi
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
Tlačítko návratu divi

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
Definujte selektor divi

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.

Transformace sekce divi

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
Přidat třídu má transformační divi

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
Upravte pozici v rohu divi

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.

Skrýt sekci v mobilu

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.

Ovládejte divi sekci viditelnosti

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.

Přidejte kód modulu

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 );   
Přidejte modul kódu divi

Uložit změny

Nezapomeňte uložit rozložení před ukončením editoru.

Uložit divi úpravy

Uložte také změny v generátoru motivu.

Uložit změny

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.

Přeloženo z: elegantní témata