[Ad_1]

V dnešním tutoriálu Divi 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é rozložení nad čárou přeložení. Poté, jakmile se dostanete za sekci nad ohybem stránky, navigační lišta zůstane v horní části stránky a zůstane tam po zbytek stránky. 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 rozvržení ZDARMA

Abyste se dostali k návrhům v tomto tutoriálu, musíte si jej nejprve stáhnout pomocí tlačítka níže. Chcete-li získat přístup ke stažení, budete se muset přihlásit do našeho seznamu adresátů Divi Daily pomocí formulář níže. Jako nový předplatitel získáte ještě více výhod Divi a každé pondělí zdarma balíček Divi Layout! Pokud jste již na seznamu, zadejte níže svou e-mailovou adresu a klikněte na tlačítko Stáhnout. Nebudete „obnoveni“ ani nebudete dostávat další e-maily.

Chcete -li importovat rozložení sekce do vaší knihovny Divi, přejděte do knihovny Divi.

Klikněte na tlačítko Importovat.

V rozbalovacím okně přenositelnosti vyberte kartu importu a vyberte soubor, který chcete stáhnout z počítače.

Poté klikněte na tlačítko importu.

oznamovací schránka divi

Po dokončení bude rozložení sekcí k dispozici v Divi Builderu.

Přejdete na tutoriál, ano?

Co potřebujete, abyste mohli začít

rozšířit rohové záložky

Chcete -li začít, musíte provést následující:

  1. Pokud jste tak ještě neučinili, nainstalujte a aktivujte Divi téma.
  2. Vytvořte novou stránku ve WordPressu a pomocí Divi Builderu upravte stránku na front-endu (vizuální builder).
  3. Vyberte možnost „Stavět 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í oddílu a záhlaví nad čárou ponoru

V první části tohoto tutoriálu vytvoříme sekci a záhlaví nad čárou ponoru, která bude sloužit jako hlavní sekce záhlaví naší stránky. Sekce bude na ploše na celé obrazovce, aby bylo zajištěno, že sekce zabírá celé okno.

Přidejte řádek

Chcete -li začít, přidejte řádek do sloupce do výchozí sekce.

lepicí navigační lišta divi od zdola nahoru

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]

lepicí navigační lišta divi od zdola nahoru

Na kartě Návrh aktualizujte minimální výšku a polstrování.

  • Minimální výška: 100 vh (stolní počítač), automatická (tablet a telefon)
  • Polstrování: horní 20vh, spodní 20vh

lepicí navigační lišta divi od zdola nahoru

Text záhlaví

Chcete -li vytvořit text záhlaví, přidejte do řádku nový textový modul.

lepicí navigační lišta divi od zdola nahoru

Poté aktualizujte obsah pomocí následující hlavičky H1:

<h1>Above the Fold</h1>

lepicí navigační lišta divi od zdola nahoru

Nastavení textu

Na kartě Návrh v Nastavení textu aktualizujte styly písma nadpisu následujícím způsobem:

  • Název písma: Rubik
  • Váha písma záhlaví: Semi Bold
  • Styl písma záhlaví TT
  • Zarovnání textu záhlaví: střed
  • Barva textu názvu: # 302ea7
  • Velikost textu titulku: 130px (desktop), 70px (tablet), 40px (telefon)
  • Rozteč záhlaví: 2px
  • Výška linie nadpisu: 1,3 em

lepicí navigační lišta divi od zdola nahoru

Část 2: Vytvoření sekce pod záhybem

Abychom mohli demonstrovat funkčnost lepkavé navigační lišty, musíme pod záhyb přidat sekci, abychom měli prostor k posouvání.

Chcete -li vytvořit sekci, duplikujte sekci nad čárou ponoru, kterou jsme právě vytvořili.

lepicí navigační lišta divi od zdola nahoru

Aktualizujte pozadí duplicitní sekce.

  • Barva pozadí: # f4def1

lepicí navigační lišta divi od zdola nahoru

Poté dejte sekci velkou minimální výšku, abychom měli prostor pro rolování stránky. Toto je pouze část, kterou je třeba vyplnit místo skutečného obsahu na stránce.

lepicí navigační lišta divi od zdola nahoru

Poté aktualizujte obsah textového modulu nahrazením slova „Níže“ slovem „Nahoře“.

lepicí navigační lišta divi od zdola nahoru

Čá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řidejte novou sekci a nový řádek

Přidejte novou pravidelnou sekci přímo pod sekci nad čárou ponoru.

lepicí navigační lišta divi od zdola nahoru

Poté přidejte řádek do sloupce do sekce.

lepicí navigační lišta divi od zdola nahoru

Pozadí sekce a polstrování

Otevřete nastavení sekce a aktualizujte barvu pozadí.

  • Barva pozadí: # 302ea7

lepicí navigační lišta divi od zdola nahoru

Poté odstraňte horní a spodní polstrování, aby měla navigační lišta menší výšku.

  • Výplň: 0px nahoře, 0px dole

lepicí navigační lišta divi od zdola nahoru

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é
  • Svislé přetečení: viditelné

lepicí navigační lišta divi od zdola nahoru

Dejte sekci absolutní pozici na mobilních zařízeních

Rozbalovací nabídka pro mobilní zařízení se ve výchozím nastavení otevře pod ikonou hamburgeru. Pokud ponecháme navigační lištu ve spodní části, skryla by rozevírací nabídku, pokud na ni uživatel klikne v dolní poloze. Pro lepší uživatelský komfort chceme, aby navigační panel začínal úplně nahoře na obrazovce tabletu a telefonu.

Chcete -li to provést, přiřaďte sekci absolutní pozici na tabletu a telefonu.

  • Pozice: Relativní (stolní počítač), Absolutní (tablet a telefon)

lepicí navigační lišta divi od zdola nahoru

Přidejte stabilní pozici pro stolní počítače a mobilní zařízení

Chcete -li přidat lepivou pozici do sekce navigačního panelu, aktualizujte následující:

  • Přilepená pozice: Přilepte nahoře a dole (stolní počítač), Přilepte nahoře (tablet a telefon)

lepicí navigační lišta divi od zdola nahoru

Aktualizujte odsazení řádků

Jakmile je lepkavá část dokončena, otevřete nastavení řádků uvnitř sekce a aktualizujte výplň následujícím způsobem:

  • Polstrování: 10 pixelů nahoře, 10 pixelů dole

lepicí navigační lišta divi od zdola nahoru

Vytvořte navigační nabídku

Když je sekce a řádek na místě, jsme připraveni vytvořit navigační nabídku.

Začněte přidáním modulu nabídky do řádku do sloupce.

lepicí navigační lišta divi od zdola nahoru

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 (používám obrázek 122 x 52 pixelů)
  • odstranit výchozí barvu pozadí

lepicí navigační lišta divi od zdola nahoru

Na kartě Návrh aktualizujte následující text a nastavení nabídky:

  • Aktivní barva odkazu: #fff
  • Písmo nabídky: Rubik
  • Styl písma nabídky: TT
  • Barva textu nabídky: #fff
  • Velikost textu nabídky: 16px
  • Zarovnání textu: vpravo
  • Barva řádku rozevírací nabídky: # e19dff
  • Barva textu mobilní nabídky: # 302ea7
  • Barva ikony nákupního košíku: #fff
  • Barva ikony hledání: #fff
  • Barva ikony nabídky hamburgeru: #fff

lepicí navigační lišta divi od zdola nahoru

Použití ohraničení k vyrovnání absolutní polohy navigační lišty v mobilu

Protože sekce navigační lišty má v mobilních zařízeních absolutní polohu, bude lišta sedět nad (a oříznut) horní částí stránky. Abychom tento problém vyřešili, musíme odsadit horní část pomocí horního okraje stejné výšky jako navigační lišta / sekce.

Zkontrolujte výšku části navigační lišty na mobilu

Chcete -li určit výšku navigačního panelu v 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ů a zobrazit nabídku pro mobily. Klikněte pravým tlačítkem na sekci obsahující nabídku a v místní nabídce prohlížeče vyberte možnost Zkontrolovat položku. Pod sekcí byste měli vidět panel nástrojů zobrazující rozměry (včetně výšky) sekce. V tomto případě je výška části navigační lišty 72 pixelů.

lepicí navigační lišta divi od zdola nahoru

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ě Návrh přidejte na tablet i telefon následující horní okraj:

  • Šířka horního okraje: 72 pixelů (tablet a telefon)
  • Barva horního okraje: # 302ea7

Protože ohraničení má stejnou výšku jako řez s absolutní polohou, neuvidíte ohraničení, protože slouží pouze k zatlačení oddílu dolů, aby nedošlo k jeho proříznutí.

lepicí navigační lišta divi od zdola nahoru

Konečný výsledek

Objevte konečný výsledek!

Závěrečné myšlenky

Vytvoření nalepovací navigační lišty zdola nahoru lze snadno dosáhnout pomocí vestavěné polohy a možností uchycení Divi. Klíčem je přidělit části nad přehybem výšku 100vh a poté přidat část navigační lišty níže, která se drží ve spodní a horní části navigátoru. Doufejme, že vám to pomůže přidat k vaší lince jedinečnější a poutavější nad čárou ponoru 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í tvůrce. Divi téma.

Nemůžu se dočkat, až se ozvu v komentářích.

K vašemu zdraví!



[Ad_2]

Zdrojový odkaz