Chcete vytvoriť navigačnú lištu medzi príspevkami, ktorá je v Divi lepkavá?
Lepkavý navigačný panel príspevkov je efektívnym spôsobom, ako vylepšiť používateľskú skúsenosť akéhokoľvek webové stránky z blogu. Okrem hlavnej navigácie na vašej lokalite umožňujú odkazy navigácie príspevkov používateľom jednoducho prejsť na predchádzajúci alebo nasledujúci príspevok váš blog. A ak pridáte tieto navigačné odkazy príspevkov na lepiacu lištu, tieto odkazy zostanú viditeľné a prístupnejšie.
V tomto návode vytvoríme navigačnú lištu medzi prilepenými príspevkami divi. Aby sme to dosiahli, použijeme vstavané možnosti Divi na transformáciu riadku na lepiacu lištu. Ďalej použijeme navigačný modul článku na vytvorenie odkazov „predchádzajúci článok“ a „nasledujúci článok“.
Okrem toho do stredu panela pridáme názov príspevku ako dynamický obsah, ktorý používateľom pripomína príspevok, ktorý si práve prezerajú, a navigačnému panelu tak poskytne pekný prvok „minulosť, súčasnosť a budúcnosť“.
Začnime!
prehľad
Tu je rýchly pohľad na dizajn, ktorý vytvoríme v tomto návode.
Čo potrebujete, aby ste začali
Aj keď môžete túto lepkavú navigačnú lištu príspevku pridať do ľubovoľného rozloženia blogového príspevku alebo šablóny v Divi, na urýchlenie procesu a rýchle spustenie návrhu použijeme predpripravenú šablónu blogového príspevku.
Importujte šablónu blogového príspevku „Meal Kit“ do Divi Theme Builder
Ak chcete začať, stiahnite si súbor bezplatná šablóna blogového príspevku pre Divi's Meal Kit Layout Pack . Ak to chcete urobiť, prejdite na stránku blogový príspevok .
Potom zadajte svoj e-mail na stiahnutie súboru zip.
Potom súbor rozbaľte, aby bol pripravený na import.
Ak chcete importovať súbor do editora tém, postupujte takto:
- Prejdite do Divi > Tvorca tém.
- Kliknite na ikonu prenosnosti.
- Vo vyskakovacom okne Prenosnosť vyberte kartu importu.
- Vyberte predtým stiahnutý rozbalený súbor, ktorý chcete importovať.
- Kliknite na « Importovať Divi Theme Builder šablóny ».
- Kliknutím na ikonu úprav upravíte importovaný model.
Vytvorte si lepiacu navigačnú lištu v Divi
Časť 1: Vytvorenie lepiacej čiary
Ak chcete vytvoriť pevnú navigačnú lištu, použijeme riadok s tromi stĺpcami ako pevnú nádobu pre naše navigačné prepojenia medzi príspevkom a názvom príspevku.
Čítajte tiež: Divi: Ako použiť možnosť "Gradient Repeat" na vytvorenie vlastných vzorov pozadia
V druhej časti rozloženia šablóny pridajte nový riadok pod riadok obsahujúci obsah príspevku.
Nastavenie linky
Otvorte nastavenia linky.
Najprv musíme pridať lepiacu pozíciu do riadku, aby sme mohli aktualizovať ďalšie možnosti dizajnu v lepkavom stave.
Pod záložkou pokročilý, aktualizujte nasledovné:
- Lepiaca pozícia: Prilepte na vrch a spodok
- Top Sticky Limit: Sekcia
- Spodný lepivý limit: Oblasť tela
Ak chcete zabezpečiť, aby sa stĺpce na mobiloch nehromadili, pridajte doň nasledujúci vlastný CSS Hlavný prvok :
display:flex;
flex-wrap:nowrap;
align-items:center;
Pod záložkou obsah, pridajte na čiaru v lepkavom stave bielu farbu pozadia takto:
- pozadie: žiadne
- Bakground: #ffffff (lepkavý)
V nastaveniach dizajn, aktualizujte nasledovné:
- Použiť vlastnú šírku odkvapu: ÁNO
- Šírka odkvapu: 1
- Šírka: 100 %
- Maximálna šírka: 100 %
- Výplň: 0px (horná a dolná časť)
Skryť stredný stĺpec na tablete a telefóne
Ak chcete skryť stĺpec v mobile, otvorte nastavenia pre stĺpec 2 (stredný stĺpec) a aktualizujte možnosti viditeľnosti takto:
- Zakázať na: telefóne, tablete
Časť 2: Vytvorenie odkazov na navigáciu v článku
Na otvorenie väčšej flexibility dizajnu pre post navigáciu použijeme dva samostatné moduly Post Navigation. Do ľavého stĺpca pridáme modul Post Navigation, ktorý zobrazuje iba odkaz na predchádzajúci článok. Do pravého stĺpca pridáme modul Navigácia príspevku, ktorý zobrazuje iba odkaz na nasledujúci príspevok.
Odkaz na predchádzajúci príspevok
V stĺpci 1 pridajte nový modul Post Navigation.
Otvorte nastavenia modulu, aktualizujte kartu možností obsah ako nasledujúce :
- Predchádzajúci odkaz (text): Predchádzajúci príspevok
- Zobraziť odkaz na predchádzajúci príspevok: ÁNO
- Zobraziť nasledujúci príspevok Odkaz: NIE
- Pozadie: #000000
Pod záložkou dizajn, aktualizujte nasledovné:
- Písmo odkazov: Kumbh Sans
- Odkazy Hmotnosť písma: Tučné
- Štýl písma: TT
- Farba textu odkazov: #ffffff
- Veľkosť textu odkazov: 26 pixelov (počítač), 16 pixelov (tablet a telefón)
- Výška riadku: 1,3 em
- Polstrovanie: 0,9 em (hore), 0,7 em (dole), 2 em (vľavo a vpravo)
Keďže v mobilnom zariadení skrývame stredný stĺpec, dva zostávajúce stĺpce, ktoré budú obsahovať navigačné odkazy, môžu teraz každý zaberať 50 % šírky prehliadača na tablete a telefóne.
Pozri tiež: Divi: Ako zmeniť štýl niekoľkých prvkov pri umiestnení kurzora myši alebo po kliknutí
Ak chcete zabezpečiť, aby navigačný odkaz presahoval 50 % zobrazovanej oblasti, pridajte do poľa CSS pre odkazy na zobrazenie na tablete nasledujúci vlastný CSS:
display:block;
width:50vw;
text-align:center;
float:none;
Vytvorenie odkazu na ďalší príspevok
Ak chcete vytvoriť odkaz na ďalší príspevok, skopírujte modul Navigácia príspevku (s odkazom na predchádzajúci príspevok), ktorý sme práve navrhli, a vložte ho do stĺpca 3 (pravý stĺpec).
Ďalej otvorte nastavenia navigácie príspevkov pre duplicitný modul v pravom stĺpci a aktualizujte nasledujúce možnosti karty obsahu:
- Ďalší odkaz: Ďalší príspevok
- Zobraziť odkaz na predchádzajúci príspevok: NIE
- Zobraziť odkaz na nasledujúci príspevok: ÁNO
- Pozadie: #ffb100
Pod záložkou dizajn, aktualizujte farbu textu odkazu:
- Farba textu odkazov: #000000
Časť 3: Vytvorenie názvu dynamického príspevku
Po umiestnení oboch navigačných odkazov sme pripravení pridať názov príspevku ako dynamický obsah do stredného stĺpca.
Cieľom je poskytnúť používateľovi peknú pripomienku správy, ktorú číta, s možnosťou prejsť na predchádzajúcu správu a nasledujúcu správu.
V strednom stĺpci pridajte nový modul Text.
Pod záložkou obsah, kliknite na ikonu „Použiť dynamický obsah“ v oblasti tela a potom vyberte Názov príspevku/archívu.
Po pridaní dynamického názvu príspevku otvorte nastavenia Názov príspevku/archívu a aktualizujte obsah pred:
- Pred čítaním
Potom uložte zmeny.
Pod záložkou dizajn, aktualizujte nasledovné:
- Písmo textu: Kumbh Sans
- Hmotnosť písma textu: tučné
- Štýl písma: TT
- Farba textu textu: priehľadná (počítač), #000000 (lepkavá)
- Veľkosť textu: 16px
- Medzera medzi písmenami: 1px
- Výška riadku: 1,3 em
- Zarovnanie textu: na stred
- Maximálna šírka: 96 %
- Modul zarovnania: stred
- Polstrovanie: 0,5 em (hore a dole)
Konečný výsledok
Stiahnite si DIVI teraz!!!
záver
V tomto návode sme si ukázali, aké ľahké je vytvoriť pevnú navigačnú lištu príspevku pre šablónu blogového príspevku v Divi.
Funkciu nalepenia čiary/čiary možno tiež ľahko upraviť pomocou vstavaných možností Divi. Napríklad môžete obmedziť stav nalepenia na sekciu alebo zvoliť, aby bola lepkavá iba v hornej alebo dolnej časti výrezu prehliadača.
Dúfam, že to bude užitočné pre váš ďalší blog. 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.
...
