Spodné zásuvky sú užitočným doplnkom každého webové stránky, pretože ukladajú ďalší obsah ľahko dostupný používateľom. Zásuvky päty sú kontajnery webového obsahu (ako sekcia Divi), ktoré možno otvárať a zatvárať kliknutím na tlačidlo alebo umiestnením kurzora myši na ne. Je to ako mať malú skrýšu prémiového obsahu.
V tomto návode navrhneme plávajúcu zásuvku päty v Divi. Zásuvku päty pridáme do globálnej oblasti päty šablóna webovej stránky takže zásuvka päty je prístupná na celom webe s normálnym obsahom päty.
V rámci procesu, ktorý použijeme, je možné ktorúkoľvek sekciu Divi (a jej obsah) previesť do zásuvky päty v priebehu niekoľkých minút.
Ako pridať šablónu zásuvky päty na vaše stránky Divi
Pridanie tohto modelu nahradí šablóna webovej stránky predvolene (ak ho máte) na svojej stránke Divi. Odporúčame vám ho pridať na testovaciu stránku, aby ste na živej stránke nič nepokazili.
Ak chcete sami importovať šablónu zásuvky s pevnou pätou webové stránky, rozbaľte stiahnutý súbor zip, aby ste získali prístup k súboru JSON.
Potom choďte na dashboard WordPress a choďte na Divi> Theme Builder.
Potom kliknite na ikonu prenosnosti v pravom hornom rohu stránky.
V okne prenosnosti vyberte súbor JSON, ktorý ste práve rozbalili, a vyberte možnosť „Prevziať zálohu pred importom“ pre prípad, že by ste predtým mali niečo v šablóna webovej stránky predvolenú hodnotu, ktorú ste nechceli prepísať.
Potom kliknite na tlačidlo Importovať.
Nakoniec uložte zmeny do generátora motívov a zobrazte živú stránku, aby ste videli pevný pätu.
Teraz k tutoriálu, dobre?
Časť 1: Pridanie globálnej päty
Generátor témy Divi vám umožňuje nahradiť predvolenú pätu novou a to aktualizáciou predvolenej šablóny webovej stránky.
Ak chcete vytvoriť globálnu pätu, prejdite na hlavný panel WordPress a prejdite na ikonu Divi> Tvorca tém. Potom kliknite na priestor „Pridať globálnu pätu“ v rámci predvolenej šablóny webovej stránky.
Potom z rozbaľovacieho zoznamu vyberte možnosť „Vytvoriť globálnu pätu“.
Pridajte preddefinované rozloženie do globálneho rozloženia päty
Týmto sa nasadí editor rozloženia modelu, kde budete okamžite vyzvaní k trom možnostiam, ako chcete začať stavať. Vyberte možnosť „Vybrať preddefinované rozloženie“.
V rozbaľovacom okne Načítať z knižnice nájdite rozloženie vstupnej stránky pre písacie potreby. Potom kliknite na „Použiť toto rozloženie“.
Odstráňte nežiadúci obsah z predpripraveného rozloženia
Po načítaní rozloženia v editore rozbaľte rozbaľovacie okno Vrstvy kliknutím na ikonu vrstiev v ponuke nastavení. Potom odstráňte všetky časti rozloženia okrem posledných dvoch.
Presuňte a označte dve sekcie
Po odstránení sekcií by ste mali mať dve sekcie, jedna s názvom „Päta“ a druhá s názvom „Ako to funguje“. Posuňte sekciu Päta do hornej časti rozloženia.
Zmeňte znenie v dolnej časti na „Zásuvka päty“. Toto bude sekcia, ktorú použijeme ako obsah nášho päty zásuvky.
Časť 2: Vytvorenie pevnej zásuvky päty
Teraz, keď sme určili jednu z častí ako pätu a druhú ako zásuvku päty, sme pripravení začať stavať našu pevnú zásuvku päty. Začnime vytvorením ikonky, ktorú použijeme na prepnutie zásuvky päty.
Vytvorenie tlačidla zásuvky päty
Pridať nový riadok
V dolnej časti päty pridajte do stĺpca nový riadok.
Nový riadok označte štítkom „Tlačidlo zásuvky“, pretože to je riadok, ktorý bude obsahovať tlačidlo, ktorým sa prepína otvorenie a zatvorenie zásuvky. Potom posuňte čiaru do hornej časti časti.
Riadkové vypchávky
Pred pridaním modulu otvorte nastavenia riadkov a aktualizujte výplň nasledovne:
- Výplň: vysoká 0px, nízka 0px
Čalúnenie sekcie
Potom otvorte nastavenia v časti Zásuvka päty a aktualizujte výplň nasledujúcim spôsobom:
Aby sme vytvorili klikateľné tlačidlo, ktoré prepína zásuvku päty, použijeme modul reklamy s ikonou. A my mu dáme jedinečný tvar kvapky vody kombináciou štvorcového tvaru nádoby Blurb pod s ikonou kruhu.
Tu je návod.
Pridajte modul Blurb
Pridajte riadok s textom prezentácie do riadku „Tlačidlo zásuvky“ v hornej časti sekcie.
Blurb content / icon
Ďalej odstráňte predvolený nadpis a obsah tela a vyberte ikonu šípky, ktorá smeruje do ľavého horného rohu (pozri snímku obrazovky). Používame ikonu čiastočne otočenej, pretože ju budeme otáčať neskôr.
Blurb dizajn
Potom uveďte text prezentácie takto:
- Farba pozadia: # 081540
Potom aktualizujte parametre návrhu nasledovne:
- Farba ikony: #eeeeee
- Ikona kruhu: ÁNO
- Farba kruhu: # 081540
- Použiť veľkosť písma ikony: ÁNO
- Veľkosť písma ikony: 17 pixelov
Veľkosť prezentačného textu
Teraz dajte modulu výšku a šírku nasledovne:
- Šírka: 30px
- Výška: 30px
To spôsobí, že ikona kruhu pretečie do textového kontajnera a vytvorí tvar kvapky vody.
Blur Position
Potom poskytnite prezentačnému textu absolútnu polohu v hornej časti sekcie.
- Pozícia: Absolútna
- Umiestnenie: Horné centrum
Nastavenia transformácie poruchy
Teraz môžeme pomocou možností transformácie otočiť ikonu / reklamu hore a umiestniť ju tesne nad kontajner sekcie. Keď teraz skryjeme sekciu pod oknom prehliadača, ikona zostane viditeľná / dá sa na ňu kliknúť.
Aktualizujte nasledujúce položky:
- Os Transform Translate X: -50%
- Transformácia osi Y preklad: -250%
- Transformácia rotácie osi Z: -45 stupňov
Potom odstráňte predvolenú animáciu ikony:
- Animácia obrázka / ikony: žiadna animácia
Budeme používať JQuery na prepínanie zásuvky, takže musíme zamerať text / ikonu ako klikateľný prvok s triedou CSS, ktorú použijeme neskôr v kóde. Pridajte nasledujúcu triedu CSS:
- Trieda CSS: cieľová zásuvka
Nastavenia sekcie zásuvky päty
Teraz pomocou možnosti preložiť transformáciu skryjeme sekciu „Zásuvka päty“. Otvorte nastavenia sekcie a aktualizujte nasledujúce položky:
- Os transformácie a prekladu Y: 100%
Krása použitia transformácie tu je, že percentuálne hodnoty sú založené na skutočnej veľkosti položky. 100% na osi Y bude teda priamo relatívnych k výške úseku (bez ohľadu na to, aký je v danom okamihu). Inými slovami, prvok sa presunie nadol o presnú vzdialenosť ako jeho vlastná výška.
Ak chcete znova zobraziť zásuvku päty, budeme musieť zvrátiť transformačný preklad, ktorý sme práve pridali do sekcie. Aby sme to dosiahli, budeme musieť na element zamerať triedu CSS a zakázať transformáciu prekladu kliknutím na ikonu (vrátiť celú sekciu do pôvodnej polohy).
Pridajte do sekcie zásuvky päty triedu CSS
Na kartu rozšírené pridajte nasledujúcu triedu CSS:
- Trieda CSS: has-transform
Sekcia zásuvky päty Pevná poloha
V poslednom kroku musíme upraviť zásuvku päty tak, aby (s ikonou) plávala v dolnej časti okna prehliadača.
Pozíciu sekcie Zásuvka päty aktualizujte nasledovne:
- Poloha: pevná
- Umiestnenie: vľavo dole
- Z Index: 13
Vypnite mobilný obsah
Pretože budete mať obmedzené množstvo obsahu päty v zásuvke, do ktorého sa zmestí tablet aj telefón (z dôvodu obmedzenej výšky obrazovky), budete musieť vypnúť / skryť nepodstatné položky na displeji. V tomto príklade skryjeme stredný riadok rozloženia sekcie.
Otvorte nastavenia od druhého po posledný riadok v sekcii Zásuvka päty. Na karte rozšírené aktualizujte možnosť viditeľnosti a vypnite tak linku v telefóne a tablete.
Pridáva sa vlastný kód
Ak chcete do zásuvky päty pridať funkčnosť klikania a prepínania, musíme na stránku pridať vlastné CSS a JQuery. Za týmto účelom vytvorte nový modul kódu pod modulom Blurb použitým pre tlačidlo.
Potom vložte nasledujúci 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žte zmeny
Pred opustením editora nezabudnite rozloženie uložiť.
Uložte tiež zmeny v generátore tém.
Konečný výsledok
Teraz môžeme prejsť na akúkoľvek vašu stránku webové stránky aby ste videli konečný výsledok.
záverečné myšlienky
Dúfame, že vám pomôže plávajúca zásuvka podporovať obsah zábavným a prístupným spôsobom. Ako každú zásuvku, aj tú môžete naplniť takmer čímkoľvek, na čo si spomeniete.
Ďalšie zdroje
Tu je zoznam návodov, ktoré vám môžu pomôcť dosiahnuť viac s vnútornými funkciami Divi.
- Ako vytvoriť súbor nástrojov témy na Divi
- Ako vytvoriť animovanú reklamnú sekciu na Divi
- Ako prispôsobiť mriežky na Divi
Preložené z: elegantný témy
