Egyéni ragadós fejléc hozzáadása mobilhoz a Divi használatával
Közzétéve: 2021. december 10. Jason Champagne itt: Divi Resources | 0 hozzászólás
Általában egy ragadós (vagy rögzített) fejléc hozzáadása a webhelyhez biztonságos játék a nagyobb képernyők (asztali számítógépek) számára, mivel több hely áll rendelkezésre. Kisebb nézetablakkal rendelkező mobileszközökön (főleg telefonokon) ragadós fejléc hozzáadása némi finomságot igényel. Nem szeretné, hogy a ragadós fejléc túl sok helyet foglaljon el a nézetablakból. Úgy értem, nincs értelme ragadós fejlécekkel fokozni a navigációs élményt, ha nem látja a felkeresett oldalakat. Emiatt néha könnyebb egy kifejezetten mobilra tervezett ragadós fejlécet hozzáadni.
Ebben az oktatóanyagban megmutatjuk, hogyan adhat hozzá egyéni ragadós fejlécet mobilhoz a Divi használatával. A Divi beépített opcióinak használatával (beleértve a ragadós pozíció opciókat is) megmutatjuk, hogyan jeleníthet meg egy teljesen egyedi ragadós fejlécet, amely tartalmazza a kulcsfontosságú elemeket (például egy logót, egy gombot és egy menüikont) anélkül, hogy túl sokat foglalna. tér.
Lássunk neki!
Bepillantás
Íme egy gyors áttekintés a mobilokhoz készült ragadós fejlécről, amelyet ebben az oktatóanyagban készítünk.
Ragadós fejléc az asztalon
Ragadós fejléc a táblagépen
Ragadós fejléc a telefonon
Töltse le INGYEN a Sticky Header for Mobile sablont
Az oktatóanyag terveinek megismeréséhez először le kell töltenie azt az alábbi gomb segítségével. A letöltéshez való hozzáféréshez fel kell iratkoznia Divi Daily e-mail listánkra az alábbi űrlap segítségével. Új előfizetőként minden hétfőn még több Divi jóságot és ingyenes Divi Layout csomagot kapsz! Ha már szerepel a listán, egyszerűen írja be alább az e-mail címét, és kattintson a letöltés gombra. Nem lesz „újra feliratkozva”, és nem kap további e-maileket.TÖLTSE LE A FÁJLOKAT
Importálja a sablont a Divi Theme Builderbe
A fejléc sablon importálásához navigáljon a Divi > Theme Builder elemre.
Ezután használja az oldal jobb felső sarkában található hordozhatóság ikont a JSON-fájl importálásához.
Térjünk rá a bemutatóra, jó?
Egyéni ragadós fejléc hozzáadása mobilhoz a Divi használatával
1. rész: Előre elkészített fejléc sablon hozzáadása a Divi Theme Builderben
Ebben az oktatóanyagban a Divi Theme Builder segítségével egy egyéni ragadós fejlécet fogunk hozzáadni az egyik ingyenes fejlécesablonunkhoz. Először töltse le az importfájlt a blogbejegyzésből, amely tartalmazza a Landscape Maintenance fejléc- és láblécsablont.
A letöltés után kövesse az alábbi lépéseket:
- Keresse meg a Divi Theme Buildert a WordPress webhely hátterében.
- Ezután a jobb felső sarokban megjelenik egy ikon két nyíllal. Kattintson az ikonra.
- A hordozhatóság előugró ablakában lépjen az importálás lapra.
- Válassza ki azt a JSON-fájlt, amelyet le tudott tölteni.
- A meglévő sablonok felülbírálásához törölje a jelölést a Beállítások jelölőnégyzetből.
- Ezután kattintson a „Divi témakészítő sablonok importálása” lehetőségre.
- Miután feltöltötte a fájlt, új fejléc- és lábléc-sablont fog látni. A fejléssablon elemeinek módosításához először nyissa meg a sablon egyéni fejlécét.
A Fejléc-elrendezés-készítőben nyissa meg a rétegnézetet az elemek könnyebb eléréséhez.
2. rész: A felső fejléc elem optimalizálása mobilon
Ez az adott fejléc-elrendezés két részből áll. A felső rész egy logót, egy CTA-t és egy gombot tartalmaz. Az alsó rész már ragadós pozícióval rendelkezik, és tartalmazza a menüt.
Mivel a mobil új ragadós menüjéhez logót adunk, el kell rejtenünk a logót a táblagépen és a telefonon a felső részben. Ehhez nyissa meg az 1. oszlop beállításait a felső rész sorában, és a Speciális lapon válassza a Letiltás Telefonon és Táblagépen lehetőséget. Ezzel elrejti a teljes oszlopot és a benne lévő logót mobileszközön.
Ezután nyissa meg a 2. oszlop beállításait ugyanabban a sorban, és győződjön meg arról, hogy egyik eszköz sincs letiltva. Mivel az emblémánkat mobileszközökön letiltjuk, mobilon van helyünk a cselekvésre való felhívásnak.
Esztétikai okokból frissítse a szöveg igazítását a 2. oszlopban szereplő cselekvésre ösztönző két szövegmodulnál az alábbiak szerint:
- Szövegigazítás (táblagép és telefon): balra
3. rész: Új ragadós fejléc szakasz készítése mobileszközökhöz
Mobileszközöknél fontos a ragadós fejléc magasságát a lehető legnagyobb mértékben csökkenteni, hogy görgetés közben ne foglalja el a nézetablak nagy részét. Emiatt nem fogjuk ragadóssá tenni a fejléc felső részét. Ehelyett egy új ragadós részt fogunk létrehozni, amely csak mobilon fog megjelenni. Így olyan elemeket tudunk beépíteni, amelyek kifejezetten mobilra vonatkoznak, és ragadós állapotban nem foglalnak el túl sok függőleges helyet.
Az új ragadós fejlécszakasz létrehozásához duplikálja meg a menüt tartalmazó meglévő alsó részt. Az új szakaszt „Sticky Mobile Section” címkével is elláthatja későbbi hivatkozás céljából.
A meglévő ragadós szakasz elrejtése mobileszközön
Mivel a mobil ragadós részünkben menüt fogunk felvenni, nyissa meg a meglévő ragadós rész beállításait, és válassza a Letiltás telefonon és táblagépen lehetőséget.
Ezután nyissa meg az új mobil ragadós szakasz beállításait, és válassza a Letiltás az asztalon lehetőséget.
Ügyeljen arra, hogy az új mobil ragadós résznek ragadós pozíciót adjon meg az alábbiak szerint:
- Ragadó pozíció: Ragaszkodjon a tetejéhez
Frissítse a sorméretet
Ezen a ponton érdemes elkezdeni a szerkesztést táblagépes nézetben, hogy jobban átláthassuk, hogyan fog kinézni a design mobilon. Ehhez kattintson a táblagép ikonjára a beállítási menüben az építő alján.
Ezután nyissa meg a sorbeállításokat, és frissítse a következő méretezési beállításokat:
- Ereszcsatorna szélessége: 1
- Szélesség: 94%
Így több helyünk lesz a mobilon.
Frissítse a menü logóját és elrendezését
Ezután nyissa meg a menü beállításait, és adjon hozzá egy logót a menühöz.
A Tervezés lapon frissítse az elrendezés stílusát:
- Stílus: Balra igazítva
4. rész: Ragadós állapotú stílus hozzáadása a ragadós elemekhez
Most, hogy az elemek a helyükön vannak a mobil ragadós fejléchez, elkezdhetjük a ragadós állapotú elemek stílusának optimalizálását.
Mivel a szakasz ragadós pozícióval rendelkezik, a szakasz vagy a szakaszon belüli bármely alárendelt elem stílusakor váltogathatja a ragadó pozíció beállításait. A ragadós pozíció stílusát úgy válthatja át, hogy rákattint a rajzos ikonra, amikor az egérmutatót egy stílusbeállítás fölé viszi.
Ez lehetővé teszi számunkra, hogy a ragadós fejlécnek más megjelenést adjunk, miután a felhasználó görget, és aktiválja a szakasz ragadós állapotát.
Ragadós szakasz háttérszíne
Kezdésként frissítsük a mobil tapadó rész háttérszínét az alábbiak szerint:
- Háttérszín (asztali): #244435
- Háttérszín (ragadós): #fff
Ragadós metszetdoboz árnyéka
A Tervezés lapon adjon a szakasznak egy keretes árnyékot ragadós állapotban az alábbiak szerint:
- Box Shadow: lásd a képernyőképet
- Shadow Color (asztali): átlátszó
- Árnyékszín (ragadós): rgba(0,0,0,0,1)
Ragadós menü logó és ikonok
Ezután frissítse az embléma képét egy szűrővel, amely a sötét logót alapértelmezés szerint világos emblémává változtatja, majd visszafordítja ragadós állapotú sötét logóvá. A Logó beállításai alatt frissítse a következőket:
- Kép megfordítása (asztali): 0%
- Kép megfordítása (ragadó): 100%
Az ikonok színét is módosítanunk kell az alábbiak szerint:
- Bevásárlókosár ikon színe (asztali): #fff
- Bevásárlókosár ikon színe (ragadó): #244435
- Keresésikon színe (asztalon): #fff
- Keresésikon színe (ragadó): #244435
- Hamburger menü Ikon színe (asztalon): #fff
- Hamburger menü ikon színe (ragadó): #244435
Ragadós fejléc gomb
Jelenleg a fejléc felső részén található gomb nem jelenik meg a ragadós fejlécben mobilon. Ugyanezt a gombot hozzáadhatjuk az új mobil ragadós részhez, majd csak ragadós állapotban jeleníthetjük meg.
A gomb hozzáadásához másolja ki a meglévő gombot a felső részben lévő sor 3. oszlopába. Ezután illessze be a gombmodult a menü alá, a mobil ragadós részébe.
Ha azt szeretné, hogy a gomb a menü tetejére kerüljön, nyissa meg a gombbeállításokat, és a Speciális lapon frissítse a pozícióbeállításokat az alábbiak szerint:
- Pozíció: Abszolút
- Helyszín: Központ
A Tervezés lapon frissítse a szűrőbeállítást, hogy a gomb átlátszatlanságát 0%-ról 100%-ra módosítsa ragadós állapotban.
- Átlátszatlanság (asztali): 0%
- Átlátszatlanság (ragadó): 100%
Ez elrejti a gombot, amíg a felhasználó le nem görgeti az oldalt.
Végeredmény
Az eredmény megtekintéséhez mentse az elrendezést, rendelje hozzá a sablont a webhely egy oldalához, majd mentse el a változtatásokat a témakészítőben. Ezután nyissa meg azt az oldalt, amelyhez a sablon hozzá van rendelve.
Íme az eredmény.
Ragadós fejléc az asztalon
Ragadós fejléc a táblagépen
Ragadós fejléc a telefonon
Végső gondolatok
A Divi-val megvan az a luxus, hogy a mobilra gondoljon, amikor a ragadós fejlécekről van szó. Most mutattuk meg, milyen egyszerű ragadós fejlécet hozzáadni a mobilokhoz a Divi beépített opcióival. Miután felszabadította a Divi ragadós opcióinak erejét, elég kreatív lehet a ragadós fejléc elemeinek átmenetével. A logót világosról sötétre fordíthatja egy szűrővel, megjeleníthet egy gombot, vagy megváltoztathatja a fejléc teljes háttérszínét. És ez még csak a kezdet. Nyugodtan kísérletezzen további testreszabással, amely megfelel a következő projektje igényeinek!
Várom válaszaitokat a megjegyzésekben.
Egészségére!
0 hozzászólás