Chcete vytvořit navigační panel v Divi, který bude lepivý od spodu k horní části stránky?
V tutoriálu divi Dnes vám krok za krokem ukážeme, jak v Divi vytvořit lepivý navigační panel zdola nahoru.
To umožní, aby navigační lišta zpočátku zůstala ve spodní části stránky pro jedinečné rozvržení nad okrajem. Poté, jakmile posouváte sekci nad ohybem stránky, navigační lišta zůstane v horní části stránky a zůstane tam po celou stránku.
Dalo by se říci, že stránka „převezme“ nabídku ve spodní části obrazovky a přinese pěkný interakční efekt do vaší hlavní nabídky a vašeho Webové stránky.
Začněme!
přehled
Abychom vám pomohli představit si výsledek, kterého se snažíme dosáhnout, podívejme se na konečný výsledek:
Stáhněte si DIVI hned teď!!!
Začněme vytvořením nové stránky pomocí Divi Builder
Chcete-li začít, budete muset provést následující:
Z řídicího panelu WordPress přejděte na Stránky> Přidat nové vytvořit novou stránku.
Dejte tomu název, který vám dává smysl, a klikněte Použijte Divi Builder
poté klikněte na tlačítko Začněte stavět (Sestavte od nuly)
Poté budete mít prázdné plátno, abyste mohli začít navrhovat v Divi.
V Divi vytvořte lepivou navigační lištu zdola nahoru
Část 1: Vytvoření sekce a záhlaví nad čarou ponoru
Pro první část tohoto tutoriálu vytvoříme sekci a záhlaví nad přehybem, které budou sloužit jako hlavní sekce záhlaví naší stránky. Sekce bude na ploše přes celou obrazovku, aby bylo zajištěno, že sekce zabere celé okno zobrazení.
Čtěte také: Divi: Vyberte si mezi mřížkou a rozložením v plné šířce modulu Filtrovatelné portfolio
Přidejte řádek
Chcete -li začít, přidejte řádek do sloupce do výchozí sekce.
Nastavení sekce
Před přidáním modulu otevřete nastavení sekce a přidejte pozadí takto:
- Barva pozadí: #e9f9ff
- Obrázek na pozadí: [přidat obrázek]
Na kartě Design, aktualizujte minimální výšku a výplň.
- Minimální výška: 100vh (stolní počítač), auto (tablet a telefon)
- Polstrování: 20Vh (horní a spodní)
Text záhlaví
Chcete-li vytvořit text záhlaví, přidejte na řádek nový modul Text.
Poté aktualizujte obsah s následujícím záhlavím H1:
<h1>Above the Fold</h1>
Nastavení textu
Na kartě Design v nastavení modulu Text aktualizujte styly písem záhlaví následovně:
- Nadpis:
- Písmo: Ruby
- Tloušťka písma: Polotučné
- Styl: TT
- Zarovnání textu: na střed
- Barva textu: #302ea7
- Velikost: 130 pixelů (počítač), 70 pixelů (tablet), 40 pixelů (telefon)
- Mezera mezi písmeny: 2px
- Výška řádku: 1,3 em
Část 2: Vytvoření části pod čarou ponoru
Abychom demonstrovali funkčnost lepivého navigačního panelu, musíme přidat sekci pod záhyb, abychom měli prostor pro posouvání.
Chcete-li vytvořit sekci, duplikujte sekci nad ohybem, který jsme právě vytvořili.
Aktualizujte pozadí duplicitní sekce.
- Barva pozadí: #f4def1
Poté dejte sekci velkou minimální výšku, abychom měli prostor pro posouvání stránky dolů. Toto je pouze část, která má být vyplněna namísto obsah skutečná jedna stránka.
- Minimální výška: 200vh
Poté aktualizujte obsah modulu Text nahrazením slova "Níže" , vyrábí jej "Výše".
Část 3: Vytvořte přilnavou navigační lištu
Chcete -li vytvořit přilnavou navigační lištu zdola nahoru, naším prvním krokem je vytvoření nové sekce s jedním řádkem do jednoho sloupce.
Přidána nová sekce a řádek
Nejprve přidejte novou běžnou sekci přímo pod sekci nad okrajem.
Dále do sekce přidáme řádek s jedním sloupcem.
Pozadí sekce a polstrování
Otevřete nastavení sekce a aktualizujte barvu pozadí.
- Barva pozadí: #302ea7
Poté odstraňte horní a spodní vycpávku, aby měla navigační lišta menší výšku.
- Odsazení: 0px (nahoře a dole)
Přidejte viditelné přetečení
Chcete-li zajistit, aby rozevírací nabídky zůstaly viditelné, aktualizujte možnosti viditelnosti následujícím způsobem:
- Horizontální přetečení: Viditelné
- Vertikální přetečení: Viditelné
Dejte sekci absolutní pozici na mobilních zařízeních
Rozbalovací nabídka mobilu se ve výchozím nastavení otevře pod ikonou hamburgeru. Pokud bychom nechali navigační lištu dole, skryla by rozbalovací nabídku, pokud na ni uživatel klikne.
Pro lepší uživatelský zážitek chceme, aby navigační panel začínal úplně nahoře na stránce na obrazovce tabletu a telefonu.
Za tímto účelem dejte sekci absolutní pozici na tabletu a telefonu.
- Pozice: relativní (počítač), absolutní (tablet a telefon)
Přidejte pevnou pozici pro stolní počítače a mobilní zařízení
Chcete-li přidat lepivou pozici do sekce navigační lišty, aktualizujte následující:
- Pozice přilepení: Přilepení nahoře a dole (počítač), přilepení nahoře (tablet a telefon)
Aktualizujte odsazení řádků
Jakmile je lepící sekce hotová, otevřete nastavení řádku uvnitř sekce a aktualizujte výplň následovně:
- Odsazení: 10px (nahoře a dole)
Vytvořte navigační nabídku
Po umístění sekce a řádku jsme připraveni vytvořit navigační nabídku.
Začněte přidáním modulu nabídky do řádku s jedním sloupcem.
Obsah nabídky
Aktualizujte obsah nabídky následujícím způsobem:
- vyberte nabídku z rozevíracího seznamu
- přidat obrázek loga
- odstranit výchozí barvu pozadí
Na kartě Design, aktualizujte následující text nabídky a nastavení ikon:
- Barva aktivního odkazu: #fff
- Písmo nabídky: Ruby
- Styl písma nabídky: TT
- Barva textu: #fff
- Velikost textu nabídky: 16px
- Zarovnání textu: vpravo
- Barva řádku rozbalovací nabídky: #e19dff
- Barva textu mobilní nabídky: #302ea7
- Barva ikony nákupního košíku: #fff
- Barva ikony vyhledávání: #fff
- Barva ikony menu hamburger: #fff
Použití ohraničení k vyrovnání absolutní polohy navigační lišty v mobilu
Vzhledem k tomu, že sekce navigační lišty má na mobilu absolutní polohu, bude lišta sedět nad horní částí stránky (a oříznout ji). Abychom to napravili, musíme odsadit horní část pomocí horního okraje ve stejné výšce jako navigační panel/sekce.
Zkontrolujte výšku části navigační lišty na mobilu
Chcete-li určit výšku navigačního panelu na mobilu, otevřete živou verzi stránky v novém okně prohlížeče. Poté můžete zmenšit šířku prohlížeče pod 980 pixelů, abyste viděli mobilní nabídku.
Můžete se také poradit: Divi: Jak vytvořit lepivý navigační panel
Klepněte pravým tlačítkem myši na sekci obsahující nabídku a vyberte možnost prohlédněte si prvek v kontextové nabídce prohlížeče. Měli byste vidět krabici nářadí pod sekcí s uvedením rozměrů (včetně výšky) sekce.
V tomto příkladu je výška sekce navbar 72 pixelů.
Přidejte odsazení horního okraje do sekce nad záhybem
Nyní, když jsme určili výšku sekce, otevřete nastavení pro horní sekci (nad záhybem).
Na kartě Design, přidejte na tablet a telefon následující horní okraj:
- Šířka horního okraje: 72 pixelů (tablet a telefon)
- Barva horního okraje: #302ea7
Vzhledem k tomu, že hranice má stejnou výšku jako sekce s absolutní polohou, neuvidíte hranici, protože slouží pouze k zatlačení sekce dolů, aby se neprořízla.
Konečný výsledek
Objevte konečný výsledek!
Stáhněte si DIVI hned teď!!!
Proč investovat do čističky vzduchu?
Vytvoření nalepovací navigační lišty zdola nahoru lze snadno provést pomocí vestavěné pozice Divi a lepivé možnosti.
Klíčem je dát sekci nad přehybem výšku 100vh a poté přidat sekci navbar níže, která se drží ve spodní a horní části prohlížeče. Doufám, že vám to pomůže přidat do vašeho obsahu více jedinečných a poutavých prvků nad okrajem Webové stránky.
Tento lepivý navigační panel funguje nejlépe pro návrh jedné stránky spíše než pro celkovou šablonu. To znamená, že se můžete snadno rozhodnout použít jako návrh domovské stránky a použít globální záhlaví pro zbytek stránek pomocí Divi generátor motivů .
Doufáme, že vás tento tutoriál inspiruje pro vaše další Divi projekty. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.
Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci projektů vytváření internetových stránek.
Neváhejte se také podívat na našeho průvodce na Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
