Přejít k hlavnímu obsahu

Jak vytvořit animované zásuvky na Divi

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

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

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

Zásuvky zápatí jsou užitečným doplňkem jakékoli webové stránky, protože ukládají další obsah, který je snadno přístupný uživatelům. Zásuvky zápatí jsou kontejnery webového obsahu (jako sekce Divi), které lze otevřít a zavřít kliknutím na tlačítko nebo umístěním kurzoru nad něj. Je to jako mít malou zásobu prémiového obsahu.

V tomto tutoriálu navrhneme plovoucí zásuvku zápatí v Divi. Zásuvku zápatí přidáme do celkové oblasti zápatí šablony webové stránky, aby byla zásuvka zápatí přístupná po 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ím této šablony nahradíte výchozí webovou šablonu (pokud ji máte) na vašem webu Divi. Doporučujeme přidat jej na testovací web, abyste na živém webu nic nepokazili.

Chcete-li importovat model zásuvky s pevným zápatím na svůj vlastní web, rozbalte stažený zip soubor pro 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, a to pro případ, že jste dříve měli něco ve výchozí šabloně webu, které jste neměli. nechtěl nahradit.

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.

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

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

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
Blurb Design

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:

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

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

  • Šíř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
Blurb Position

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:

Snadno vytvořte svůj online obchod

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

.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 na jakékoli stránce vašeho webu zobrazit konečný výsledek.

Závěrečné myšlenky

Doufám, že plovoucí zásuvka zápatí vám pomůže propagovat obsah zábavným a přístupným způsobem. Jako každou zásuvku jej můžete vyplnit téměř čímkoli, na co si vzpomenete.

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

Tento článek obsahuje komentáře 0

Zanechat komentář

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

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

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