Chcete vytvořit navigační panel mezi příspěvky, který je v Divi lepivý?
Navigační lišta s lepicím příspěvkem je efektivním způsobem, jak zlepšit uživatelský zážitek jakéhokoli Webové stránky blogu. Kromě hlavní navigace vašeho webu umožňují odkazy pro navigaci příspěvků uživatelům snadno přejít na předchozí nebo další příspěvek váš blog. A pokud tyto odkazy pro navigaci příspěvků přidáte na lepicí lištu, zůstanou tyto odkazy viditelné a přístupnější.
V tomto tutoriálu vytvoříme navbar mezi post stick in divi. K tomu použijeme vestavěné možnosti Divi k přeměně řádku na lepivý pruh. Dále použijeme modul navigace v článku k návrhu odkazů „předchozí článek“ a „další článek“.
Kromě toho přidáme název příspěvku jako dynamický obsah doprostřed lišty, který uživatelům připomíná příspěvek, který si právě prohlížejí, což dává navigační liště pěkný prvek „minulost, přítomnost a budoucnost“.
Začněme!
přehled
Zde je rychlý pohled na design, který vytvoříme v tomto tutoriálu.
Co potřebujete, abyste mohli začít
I když můžete tuto lepkavou navigační lištu příspěvku přidat do libovolného rozložení nebo šablony blogového příspěvku v Divi, my použijeme předpřipravenou šablonu blogového příspěvku, abychom proces urychlili a rychle zahájili návrh.
Importujte šablonu blogového příspěvku "Meal Kit" do Divi Theme Builder
Chcete-li začít, stáhněte si soubor bezplatná šablona blogového příspěvku pro Divi's Meal Kit Layout Pack . Chcete-li to provést, přejděte na stránku blogový příspěvek .
Poté zadejte svůj e-mail a stáhněte si soubor zip.
Poté soubor rozbalte, aby byl připraven k importu.
Chcete-li importovat soubor do editoru motivu, postupujte takto:
- Přejděte na Divi > Theme Builder.
- Klikněte na ikonu přenositelnosti.
- Ve vyskakovacím okně Přenositelnost vyberte kartu importu.
- Vyberte dříve stažený rozbalený soubor, který chcete importovat.
- Klepněte na tlačítko « Import Divi Theme Builder Šablony ».
- Kliknutím na ikonu úprav importovanou šablonu upravíte.
Vytvořte Sticky Navigation Bar v Divi
Část 1: Vytvoření lepící linky
K vytvoření rychlého navigačního panelu použijeme řádek se třemi sloupci jako pevný kontejner pro naše navigační odkazy mezi příspěvkem a názvem příspěvku.
Čtěte také: Divi: Jak používat volbu "Gradient Repeat" k vytvoření vlastních vzorů pozadí
Ve druhé části rozvržení šablony přidejte nový řádek pod řádek obsahující obsah příspěvku.
Nastavení linky
Otevřete nastavení linky.
Nejprve musíme přidat lepivou pozici na čáru, abychom mohli aktualizovat další možnosti návrhu v lepkavém stavu.
Na kartě pokročilý, aktualizujte následující:
- Sticky Position: Držte se nahoře a dole
- Top Sticky Limit: Sekce
- Dolní lepkavý limit: Oblast těla
Chcete-li zajistit, aby se sloupce nehromadily na mobilních zařízeních, přidejte následující vlastní CSS Hlavní prvek :
display:flex;
flex-wrap:nowrap;
align-items:center;
Na kartě Obsah, přidejte bílou barvu pozadí na čáru v lepkavém stavu následovně:
- pozadí: žádné
- Bakground: #ffffff (lepkavý)
Pod nastavením Design, aktualizujte následující:
- Použít vlastní šířku okapu: ANO
- Šířka žlabu: 1
- Šířka: 100 %
- Max. šířka: 100 %
- Odsazení: 0px (nahoře a dole)
Skrýt střední sloupec na tabletu a telefonu
Chcete-li sloupec na mobilu skrýt, otevřete nastavení pro sloupec 2 (prostřední sloupec) a aktualizujte možnosti viditelnosti následovně:
- Zakázat na: telefonu, tabletu
Část 2: Vytváření odkazů pro navigaci v článku
Abychom otevřeli větší flexibilitu designu pro post navigaci, použijeme dva samostatné moduly Post Navigation. Do levého sloupce přidáme modul Post Navigation, který zobrazuje pouze odkaz na předchozí článek. Do pravého sloupce přidáme modul Navigace příspěvku, který zobrazí pouze odkaz na další příspěvek.
Odkaz na předchozí příspěvek
Ve sloupci 1 přidejte nový modul Post Navigation.
Otevřete nastavení modulu, aktualizujte kartu možností Obsah následovně :
- Předchozí odkaz (text): Předchozí příspěvek
- Zobrazit odkaz na předchozí příspěvek: ANO
- Zobrazit další příspěvek Odkaz: NE
- Pozadí: #000000
Na kartě Design, aktualizujte následující:
- Odkazy Písmo: Kumbh Sans
- Odkazy Tloušťka písma: Tučné
- Styl písma: TT
- Barva textu odkazů: #ffffff
- Velikost textu odkazů: 26 pixelů (počítač), 16 pixelů (tablet a telefon)
- Výška řádku: 1,3 em
- Polstrování: 0,9 em (nahoře), 0,7 em (dole), 2 em (levý a pravý)
Vzhledem k tomu, že na mobilu skrýváme prostřední sloupec, mohou nyní dva zbývající sloupce, které budou obsahovat navigační odkazy, zabírat 50 % šířky prohlížeče na tabletu a telefonu.
Viz také: Divi: Jak změnit styl několika prvků při najetí myší nebo po kliknutí
Chcete-li zajistit, aby navigační odkaz zabíral 50 % zobrazované oblasti, přidejte do pole CSS Odkazy pro prohlížení na tabletu následující vlastní CSS:
display:block;
width:50vw;
text-align:center;
float:none;
Vytvoření odkazu na další příspěvek
Chcete-li vytvořit odkaz na další příspěvek, zkopírujte modul Navigace příspěvku (s odkazem na předchozí příspěvek), který jsme právě navrhli, a vložte jej do sloupce 3 (pravý sloupec).
Dále otevřete nastavení navigace příspěvků pro duplicitní modul v pravém sloupci a aktualizujte následující možnosti karty obsahu:
- Další odkaz: Další příspěvek
- Zobrazit odkaz na předchozí příspěvek: NE
- Zobrazit další příspěvek Odkaz: ANO
- Pozadí: #ffb100
Na kartě Design, aktualizujte barvu textu odkazu:
- Barva textu odkazů: #000000
Část 3: Vytvoření názvu dynamického příspěvku
Po umístění obou navigačních odkazů jsme připraveni přidat název příspěvku jako dynamický obsah do prostředního sloupce.
Cílem je poskytnout uživateli hezkou připomínku zprávy, kterou čte, s možností přejít na předchozí zprávu a další zprávu.
Do prostředního sloupce přidejte nový modul Text.
Na kartě Obsah, klikněte na ikonu „Použít dynamický obsah“ v oblasti těla a poté vyberte Název příspěvku/archivu.
Po přidání dynamického názvu příspěvku otevřete nastavení Název příspěvku/archivu a aktualizujte obsah před:
- Před čtením
Poté změny uložte.
Na kartě Design, aktualizujte následující:
- Písmo textu: Kumbh Sans
- Tloušťka písma textu: Tučné
- Styl písma: TT
- Barva textu textu: průhledná (počítač), #000000 (lepící)
- Velikost textu: 16px
- Mezera mezi písmeny: 1px
- Výška řádku: 1,3 em
- Zarovnání textu: na střed
- Max. šířka: 96 %
- Modul zarovnání: střed
- Polstrování: 0,5 em (nahoře a dole)
Konečný výsledek
Stáhněte si DIVI hned teď!!!
Proč investovat do čističky vzduchu?
V tomto tutoriálu jsme si ukázali, jak snadné je vytvořit nalepovací navigační panel příspěvku pro šablonu blogového příspěvku v Divi.
Funkce přilepení pruhu/čáry lze také snadno upravit pomocí vestavěných možností Divi. Můžete například omezit lepivý stav na sekci nebo zvolit, aby byl lepkavý pouze v horní nebo dolní části výřezu prohlížeče.
Doufám, že to bude užitečné pro váš další blogový web. 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.
...
