Chceli by ste vytvoriť navigačnú lištu v Divi, ktorá bude lepkavá zospodu do hornej časti stránky?
V návode divi Dnes vám krok za krokom ukážeme, ako v Divi vytvoriť priľnavý navigačný panel zdola nahor.
To umožní, aby navigačná lišta spočiatku zostala v spodnej časti stránky a vytvorila tak jedinečné rozloženie nad záhybom stránky. Keď potom posuniete sekciu nad záhybom stránky, navigačná lišta zostane v hornej časti stránky a zostane tam na celej stránke.
Dalo by sa povedať, že stránka „prevezme“ ponuku v spodnej časti obrazovky a prinesie pekný interakčný efekt do vašej hlavnej ponuky a webové stránky.
Začnime!
prehľad
Aby sme vám pomohli predstaviť si výsledok, ktorý sa snažíme dosiahnuť, pozrime sa na konečný výsledok:
Stiahnite si DIVI teraz!!!
Začnime vytvorením novej stránky pomocou Divi Builder
Ak chcete začať, budete musieť urobiť nasledovné:
Na hlavnom paneli WordPress prejdite na Stránky> Pridať nové vytvoriť novú stránku.
Dajte tomu názov, ktorý vám dáva zmysel, a kliknite Použite Divi Builder
potom kliknite na tlačidlo Začnite stavať (Stavať od nuly)
Potom budete mať prázdne plátno, aby ste mohli začať navrhovať v Divi.
V Divi vytvorte lepkavú navigačnú lištu zdola nahor
Časť 1: Vytvorenie sekcie a hlavičky nad vodoryskou
Pre prvú časť tohto tutoriálu vytvoríme sekciu a hlavičku nad záhybom stránky, ktorá bude slúžiť ako hlavná sekcia hlavičky našej stránky. Časť bude na celej obrazovke na pracovnej ploche, aby sa zabezpečilo, že časť zaberie celé okno zobrazenia.
Čítajte tiež: Divi: Vyberte si medzi mriežkou a rozložením na celú šírku modulu Filtrovateľné portfólio
Pridajte riadok
Ak chcete začať, pridajte riadok do stĺpca do predvolenej sekcie.
Nastavenia sekcií
Pred pridaním modulu otvorte nastavenia sekcie a pridajte pozadie nasledovne:
- Farba pozadia: #e9f9ff
- Obrázok na pozadí: [pridať obrázok]
Pod záložkou dizajn, aktualizujte minimálnu výšku a výplň.
- Minimálna výška: 100vh (stolný počítač), automaticky (tablet a telefón)
- Výplň: 20Vh (horná a spodná časť)
Text hlavičky
Ak chcete vytvoriť text hlavičky, pridajte do riadku nový modul Text.
Potom aktualizujte obsah s nasledujúcou hlavičkou H1:
<h1>Above the Fold</h1>
Nastavenia textu
Pod záložkou dizajn v nastaveniach modulu Text aktualizujte štýly písma hlavičky takto:
- nadpis:
- Písmo: Ruby
- Hmotnosť písma: polotučné
- Štýl: TT
- Zarovnanie textu: na stred
- Farba textu: #302ea7
- Veľkosť: 130px (stolný počítač), 70px (tablet), 40px (telefón)
- Medzera medzi písmenami: 2px
- Výška riadku: 1,3 em
Časť 2: Vytvorenie časti pod čiarou ponoru
Aby sme demonštrovali funkčnosť lepivej navigačnej lišty, musíme pridať sekciu pod záhyb, aby sme mali priestor na posúvanie.
Ak chcete vytvoriť sekciu, duplikujte sekciu nad záhybom, ktorý sme práve vytvorili.
Aktualizujte pozadie duplicitnej sekcie.
- Farba pozadia: #f4def1
Potom dajte sekcii veľkú minimálnu výšku, aby sme mali priestor na posúvanie stránky nadol. Toto je jednoducho časť, ktorá sa má vyplniť namiesto obsah skutočná jedna stránka.
- Minimálna výška: 200vh
Potom aktualizujte obsah modulu Text nahradením slova "dole" odsek "Vyššie".
Časť 3: Vytvorte lepkavý navigačný panel
Na vytvorenie lepkavej navigačnej lišty zdola nahor je naším prvým krokom vytvorenie novej sekcie s jedným riadkom a jedným stĺpcom.
Pridaná nová sekcia a riadok
Najprv pridajte novú pravidelnú sekciu priamo pod sekciu nad záhybom stránky.
Ďalej do sekcie pridáme riadok s jedným stĺpcom.
Pozadie sekcie a vypchávky
Otvorte nastavenia sekcie a aktualizujte farbu pozadia.
- Farba pozadia: #302ea7
Potom odstráňte hornú a spodnú výplň, aby mala navigačná lišta menšiu výšku.
- Výplň: 0px (hore a dole)
Pridajte viditeľné pretečenie
Ak chcete zaistiť, aby rozbaľovacie ponuky zostali viditeľné, aktualizujte možnosti viditeľnosti nasledovne:
- Horizontálne pretečenie: Viditeľné
- Vertikálne pretečenie: Viditeľné
Dajte sekcii absolútnu pozíciu v mobile
Rozbaľovacia ponuka mobilu sa predvolene otvorí pod ikonou hamburgeru. Ak ponecháme navigačnú lištu v spodnej časti, skryje rozbaľovaciu ponuku, ak na ňu používateľ klikne.
Pre lepšiu používateľskú skúsenosť chceme, aby navigačný panel začínal úplne navrchu stránky na obrazovke tabletu a telefónu.
Na tento účel dajte sekcii absolútnu pozíciu na tablete a telefóne.
- Pozícia: relatívna (počítač), absolútna (tablet a telefón)
Pridajte pevnú pozíciu pre počítače a mobilné zariadenia
Ak chcete pridať pevnú pozíciu do sekcie navigačného panela, aktualizujte nasledovné:
- Lepiaca pozícia: Prilepte hore a dole (stolný počítač), prilepte navrch (tablet a telefón)
Aktualizujte vypchávky riadkov
Po dokončení lepiacej sekcie otvorte nastavenia riadkov v sekcii a aktualizujte výplň nasledovne:
- Výplň: 10px (hore a dole)
Vytvorte navigačnú ponuku
Po umiestnení sekcie a riadku sme pripravení vytvoriť navigačnú ponuku.
Začnite pridaním modulu ponuky do riadku s jedným stĺpcom.
Obsah menu
Aktualizujte obsah ponuky nasledovne:
- vyberte ponuku z rozbaľovacieho zoznamu
- pridať obrázok loga
- odstrániť predvolenú farbu pozadia
Pod záložkou dizajn, aktualizujte nasledujúce nastavenia textu a ikon ponuky:
- Farba aktívneho odkazu: #fff
- Písmo ponuky: Ruby
- Štýl písma ponuky: TT
- Farba textu: #fff
- Veľkosť textu ponuky: 16px
- Zarovnanie textu: vpravo
- Farba riadku rozbaľovacej ponuky: #e19dff
- Farba textu ponuky pre mobil: #302ea7
- Farba ikony nákupného košíka: #fff
- Farba ikony vyhľadávania: #fff
- Farba ikony ponuky Hamburger: #fff
Použitie okraja na vyrovnanie absolútnej polohy navigačnej lišty v mobile
Keďže sekcia navigačného panela má absolútnu polohu na mobilnom zariadení, panel bude sedieť nad hornou časťou stránky (a orezať ju). Aby sme to vyriešili, musíme odsadiť hornú časť pomocou horného okraja v rovnakej výške ako navigačná lišta/sekcia.
V mobile skontrolujte výšku sekcie navigačnej lišty
Ak chcete určiť výšku navigačného panela na mobile, otvorte živú verziu stránky v novom okne prehliadača. Potom môžete zmenšiť šírku prehliadača pod 980 pixelov, aby ste videli mobilnú ponuku.
Môžete sa tiež poradiť: Divi: Ako vytvoriť lepiacu navigačnú lištu
Kliknite pravým tlačidlom myši na sekciu obsahujúcu ponuku a vyberte možnosť skontrolovať prvok v kontextovej ponuke prehliadača. Mali by ste vidieť krabicu outils pod sekciou označujúcou rozmery (vrátane výšky) sekcie.
V tomto príklade je výška sekcie navigačnej lišty 72 pixelov.
Do sekcie nad záhybom pridajte odsadenie horného okraja
Teraz, keď sme určili výšku sekcie, otvorte nastavenia pre hornú časť (nad záhybom).
Pod záložkou dizajn, pridajte na tablet a telefón nasledujúci horný okraj:
- Šírka horného okraja: 72 pixelov (tablet a telefón)
- Farba horného okraja: #302ea7
Keďže hranica má rovnakú výšku ako sekcia s absolútnou polohou, hranicu neuvidíte, pretože slúži len na zatlačenie sekcie nadol, aby sa neprerezala.
Konečný výsledok
Zistite konečný výsledok!
Stiahnite si DIVI teraz!!!
záver
Vytvorenie lepiacej navigačnej lišty zdola nahor sa dá ľahko vykonať pomocou vstavanej pozície Divi a lepivé možnosti.
Kľúčom je dať sekcii nad záhybom výšku 100vh, potom pridať sekciu navigačného panela nižšie, ktorá sa drží v spodnej a hornej časti prehliadača. Dúfame, že vám to pomôže pridať jedinečnejší a pútavejší obsah nad záhybom stránky webové stránky.
Tento lepivý navigačný panel funguje najlepšie pre návrh jednej stránky, a nie pre celkovú šablónu. To znamená, že sa môžete jednoducho rozhodnúť použiť to ako svoj dizajn domovskej stránky a použiť globálnu hlavičku pre zvyšok stránok pomocou Generátor tém Divi .
Dúfame, že vás tento návod inšpiruje pre vaše ďalšie Divi projekty. Ak máte nejaké obavy alebo návrhy, nájdite nás v časť s komentármi diskutovať o tom.
Môžete sa tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok.
Neváhajte si pozrieť aj nášho sprievodcu na Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
