Szeretne létrehozni egy navigációs sávot a Divi-ban, amely az oldal aljától a tetejéig ragadós?
Az oktatóanyagban Divi Ma lépésről lépésre megmutatjuk, hogyan hozhat létre ragadós, alulról felfelé haladó navigációs sávot a Divi-ban.
Ez lehetővé teszi, hogy a navigációs sáv kezdetben az oldal alján maradjon az egyedi hajtás feletti elrendezés érdekében. Ezután, miután görgeti az oldal hajtása feletti részt, a navigációs sáv az oldal tetején marad, és ott marad az egész oldalon.
Mondhatnánk, hogy az oldal „átveszi” a képernyő alján lévő menüt, és kellemes interakciós hatást hoz a főmenübe és weboldal.
Kezdjük!
felmérés
Hogy segítsünk elképzelni az elérni kívánt eredményt, nézzük meg a végeredményt:
Töltse le a DIVI-t most!!!
Kezdjük egy új oldal létrehozásával a Divi Builder segítségével
A kezdéshez a következőket kell tennie:
A WordPress irányítópultjáról lépjen a következőre: Oldalak> Új hozzáadása új oldal létrehozásához.
Adj egy számodra értelmes címet, és kattints Használja a Divi Builder alkalmazást
Akkor kattintson Kezdje el az építést (Építsd a semmiből)
Ezután egy üres vászon lesz a tervezés megkezdéséhez a Divi-ben.
Hozzon létre egy ragadós alulról felfelé navigációs sávot a Divi-ben
1. rész: A vízvonal feletti szakasz és fejléc létrehozása
Az oktatóanyag első részében létrehozzuk a hajtás feletti szakaszt és fejlécet, amely oldalunk fő fejlécrészeként fog szolgálni. A szakasz teljes képernyős lesz az asztalon, így biztosítva, hogy a szakasz a teljes képernyőt elfoglalja.
Olvassa el: Divi: Válasszon a Szűrhető portfólió modul rácsos és teljes szélességű elrendezése között
Adjon hozzá egy sort
A kezdéshez adjon hozzá egy sort az oszlophoz az alapértelmezett szakaszhoz.
Szakasz beállítások
Modul hozzáadása előtt nyissa meg a szakasz beállításait, és adjon hozzá hátteret az alábbiak szerint:
- Háttérszín: #e9f9ff
- Háttérkép: [kép hozzáadása]
A fül alatt Design, frissítse a minimális magasságot és a párnázást.
- Minimális magasság: 100 Vh (asztali), automatikus (táblagép és telefon)
- Bélés: 20 Vh (felül és alul)
Fejléc
A fejlécszöveg létrehozásához adjon hozzá egy új Szöveg modult a sorhoz.
Ezután frissítse a tartalom a következő H1 fejléccel:
<h1>Above the Fold</h1>
Szöveg beállítások
A fül alatt Design a Szöveg modul beállításaiban frissítse a fejléc betűstílusait az alábbiak szerint:
- Cím:
- Betűtípus: Ruby
- Betűsúly: félkövér
- Stílus: TT
- Szöveg igazítása: középre
- Szöveg színe: #302ea7
- Méret: 130px (asztali), 70px (táblagép), 40px (telefon)
- Betűtávolság: 2 képpont
- Vonalmagasság: 1,3 em
2. rész: A vízvonal alatti szakasz létrehozása
A ragadós navigációs sáv funkcionalitásának bemutatásához hozzá kell adnunk egy részt a hajtás alá, hogy legyen helyünk görgetni.
A szakasz létrehozásához duplikálja meg az imént létrehozott ránc feletti részt.
Frissítse az ismétlődő szakasz hátterét.
- Háttérszín: #f4def1
Ezután adjon meg a szakasznak egy nagy minimális magasságot, hogy legyen helyünk lefelé görgetni az oldalon. Ez egyszerűen egy rész, amelyet a helyett kell kitölteni tartalom igazi egy oldal.
- Minimális magasság: 200vh
Ezután frissítse a tartalom a Szöveg modulban a szó lecserélésével "Lent" még "Felett".
3. rész: Hozza létre a ragadós navigációs sávot
A ragadós navigációs sáv alulról felfelé történő létrehozásához az első lépés egy új szakasz létrehozása egy sorral egy oszlopig.
Új szakasz és sor hozzáadva
Először is adjunk hozzá egy új normál részt közvetlenül a hajtás feletti rész alá.
Ezután adjunk hozzá egy oszlopos sort a szakaszhoz.
A szakasz háttere és párnázása
Nyissa meg a szakasz beállításait, és frissítse a háttérszínt.
- Háttérszín: #302ea7
Ezután távolítsa el a felső és alsó párnázást, hogy a navigációs sáv alacsonyabb legyen.
- Kitöltés: 0 képpont (felül és alul)
Adjon hozzá látható túlcsordulást
Annak érdekében, hogy a legördülő menük továbbra is láthatóak maradjanak, frissítse a láthatósági beállításokat az alábbiak szerint:
- Vízszintes túlcsordulás: Látható
- Függőleges túlcsordulás: Látható
Adja meg a szakasz abszolút pozícióját mobilon
A mobil legördülő menü alapértelmezés szerint a hamburger ikon alatt nyílik meg. Ha a navigációs sávot alul tartjuk, az elrejti a legördülő menüt, ha a felhasználó rákattint.
A jobb felhasználói élmény érdekében azt szeretnénk, ha a navigációs sáv az oldal legtetején kezdődne a táblagép és a telefon képernyőjén.
Ehhez adjon abszolút pozíciót a szakasznak táblagépen és telefonon.
- Pozíció: relatív (asztali), abszolút (táblagép és telefon)
Ragadós pozíció hozzáadása asztali számítógéphez és mobilhoz
Ha hozzá szeretné adni a ragadós pozíciót a navigációs sávhoz, frissítse a következőket:
- Ragadó pozíció: ragaszkodjon felül és alul (asztali), ragaszkodjon felül (táblagép és telefon)
Frissítse a sorbetöltést
Ha elkészült a ragadós rész, nyissa meg a sorbeállításokat a szakaszon belül, és frissítse a kitöltést az alábbiak szerint:
- Kitöltés: 10 képpont (felül és alul)
Navigációs menü létrehozása
Ha a szakasz és a vonal a helyén van, készen állunk a navigációs menü létrehozására.
Kezdje azzal, hogy adjon hozzá egy Menü modult az egyoszlopos sorhoz.
A menü tartalma
Frissítse a menü tartalmát az alábbiak szerint:
- válassza ki a menüt a legördülő listából
- logókép hozzáadása
- távolítsa el az alapértelmezett háttérszínt
A fül alatt Design, frissítse a következő menüszöveg- és ikonbeállításokat:
- Aktív hivatkozás színe: #fff
- A menü betűtípusa: Ruby
- Menü Betűstílus: TT
- Szöveg színe: #fff
- Menü szöveg mérete: 16 képpont
- Szöveg igazítása: jobbra
- Legördülő menüsor színe: #e19dff
- Mobil menü szövegének színe: #302ea7
- Bevásárlókosár ikon színe: #fff
- Keresésikon színe: #fff
- Hamburger menü Ikon színe: #fff
Szegély használata a navigációs sáv abszolút pozíciójának eltolásához mobilon
Mivel a navigációs sáv résznek abszolút pozíciója van mobileszközön, a sáv az oldal felső része felett helyezkedik el (és levágja). Ennek kijavításához el kell tolnunk a felső részt a navigációs sávval/szakasszal azonos magasságú felső szegéllyel.
Ellenőrizze a mobilon a navigációs sáv rész magasságát
Mobilon a navigációs sáv magasságának meghatározásához nyissa meg az oldal élő változatát egy új böngészőablakban. Ezután csökkentheti a böngésző szélességét 980 képpont alá a mobil menü megjelenítéséhez.
Ezenkívül konzultálhat: Divi: Hogyan készítsünk ragadós navigációs sávot
Kattintson a jobb gombbal a menüt tartalmazó szakaszra, és válassza ki a lehetőséget ellenőrizze az elemet a böngésző helyi menüjében. Látnod kell egy dobozt outils a szakasz méreteit (magasságot is beleértve) feltüntető szakasz alatt.
Ebben a példában a navigációs sáv magassága 72 képpont.
Adjon hozzá felső szegélyeltolást a hajtás feletti szakaszhoz
Most, hogy meghatároztuk a szakasz magasságát, nyissuk meg a felső szakasz beállításait (a hajtás felett).
A fül alatt Design, adja hozzá a következő felső szegélyt táblagépen és telefonon:
- Felső szegély szélessége: 72 pixel (táblagépen és telefonon)
- Felső szegély színe: #302ea7
Mivel a szegély egy magasságban van az abszolút pozíciót mutató résszel, ezért nem fogja látni a szegélyt, mert csak arra szolgál, hogy a szakaszt lenyomja, nehogy elvágódjon.
Végső eredmény
Fedezze fel a végeredményt!
Töltse le a DIVI-t most!!!
Következtetés
Alulról felfelé ragadós navigációs sáv létrehozása könnyen elvégezhető a Divi beépített pozíciójával és ragadós lehetőségek.
A kulcs az, hogy a hajtás feletti résznek 100 Vh magasságot adjon, majd adja hozzá a navigációs sáv alatti részt, amely a böngésző aljához és tetejéhez tapad. Remélhetőleg ez segít egyedibb és vonzóbb megjelenést adni a hajtás felett weboldal.
Ez a ragadós navigációs sáv egyetlen oldal kialakításához működik a legjobban, nem pedig általános sablonként. Ennek ellenére könnyen kiválaszthatja, hogy ezt használja kezdőlapjaként, és globális fejlécet használjon a többi oldalhoz a Divi téma generátor .
Reméljük, hogy ez az oktatóanyag inspirációt ad a következő Divi projektjeihez. Ha bármilyen aggálya vagy javaslata van, keressen minket a megjegyzések szakasz hogy megbeszéljük.
Konzultálhat is forrásaink, ha további elemekre van szüksége az internetes oldalak létrehozására irányuló projektek végrehajtásához.
Ne habozzon, tekintse meg útmutatónkat is a WordPress blog létrehozása vagy az egyiket Divi: minden idők legjobb WordPress témája.
De időközben ossza meg ezt a cikket a különböző közösségi hálózatokon.
...
