[Ad_1]
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.
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
Chcete -li začít, musíte provést následující:
- Pokud jste tak ještě neučinili, nainstalujte a aktivujte Divi téma.
- Vytvořte novou stránku ve WordPressu a pomocí Divi Builderu upravte stránku na front-endu (vizuální builder).
- 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.
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ě 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
Text záhlaví
Chcete -li vytvořit text záhlaví, přidejte do řádku nový textový modul.
Poté aktualizujte obsah pomocí následující hlavičky H1:
<h1>Above the Fold</h1>
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
Čá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.
Aktualizujte pozadí duplicitní sekce.
- Barva pozadí: # f4def1
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.
Poté aktualizujte obsah textového modulu nahrazením slova „Níže“ slovem „Nahoř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řidejte novou sekci a nový řádek
Přidejte novou pravidelnou sekci přímo pod sekci nad čárou ponoru.
Poté přidejte řádek do sloupce do sekce.
Pozadí sekce a polstrování
Otevřete nastavení sekce a aktualizujte barvu pozadí.
- Barva pozadí: # 302ea7
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
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é
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)
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)
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
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.
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í
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
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ů.
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í.
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]