Kako ustvariti lepljivo nogo za mobilne naprave v Diviju

Rifat Divi Tutorials Jan 28, 2022

Lepljive vrstice nog so lahko neprecenljive za vsako spletno mesto, še posebej za mobilne naprave. Ko uporabnik potuje po strani navzdol, ostane lepljiva vrstica noge nespremenjena (ali zataknjena) na robu zaslona. Je tako blizu palca, da je bolj koristen za mobilne uporabnike (zlasti na telefonih). To je najverjetneje razlog, zakaj oblikovalci pogosto dodajajo navigacijske gumbe v lepljive vrstice noge. Lahko izboljša UX mobilne navigacije.

Ta članek vam bo pokazal, kako narediti mobilne lepljive palice za nogo v Diviju . Statični položaj je temelj vsake vrstice lepljive noge in ga enostavno nadzirate z vgrajenimi možnostmi lepljivega položaja Divi. Pokazali bomo, kako izkoristiti lepljivo pozicijo in orodja za oblikovanje Divi, da ustvarite tri različne, lepljive oblike vrstic noge s štirimi navigacijskimi gumbi. To je idealno za vsako podjetje, ki poskuša izboljšati mobilni UX svojega spletnega mesta.

Zdaj pa začnimo.

Predogled dizajna

Tukaj je hitra predstavitev dizajna, ki ga bomo ustvarili danes.

Ustvarite neverjetna spletna mesta

Z najboljšim brezplačnim graditeljem strani Elementor

Začni zdaj

Sticky Footer Bar za mobilne naprave

1. razdelek: Ustvarjanje nove predloge noge

Za začetek pojdite v Graditelj tem in kliknite, da ustvarite novo globalno nogo v privzeti predlogi spletnega mesta.Â

Aktivirajte mobilni pogled in plasti

Ko ste v urejevalniku postavitve noge, odprite meni z možnostmi na dnu strani.

Če želite odpreti pogled telefona graditelja, kliknite simbol telefona na levi strani. To nam bo pomagalo pri vizualizaciji, kako bi se lepljiva noga prikazala v mobilnih napravah, ko načrtujemo.

Nato kliknite simbol plasti, da odprete modalne plasti na desni. To bo pomagalo pri izbiri elementov, ko se bodo preveč zbližali.

2. razdelek: Ustvarjanje lepljivih razdelkov

Za izdelavo lepljivega odseka lahko uporabimo trenutni privzeti običajni odsek.

Odprite možnosti razdelka in pod zavihkom napredno izberite možnost Prilepi se na spodnji položaj.

Na zavihku z vsebino razdelku uporabite barvo ozadja.

  • Barva ozadja: #1a2545

Na zavihku načrta spremenite vrednosti polnila:

  • Odmik: 0px zgoraj, 0px spodaj

Ustvarjanje vrstice

Zdaj dodajte vrstico z enim stolpcem.

Spremenite nastavitev vrstice na naslednji način.

  • Širina žleba: 1
  • širina: 94 %
  • Oblazinjenje: 6px zgoraj, 6px spodaj

Da bi zagotovili, da bodo dodatni stolpci, ki jih bomo dodali, ostali v bližini (ne zlagani) v mobilnih napravah, bomo morali dodati hiter odrezek CSS, ki uporablja lastnost Flex, da bo stvari lepo poravnane.

V glavni element v naprednem zavihku vstavite CSS po meri:

display:flex;
align-items:center;
justify-content:center;
flex-wrap:nowrap;

3. razdelek: Gumbi v vrstici v nogi

Modul blurb bo uporabljen za izdelavo gumbov na spodnji vrstici. To nam omogoča, da oblikujemo gumb, ki je videti kot mobilna aplikacija (majhna ikona z naslovom pod njo); idealen je za mobilno navigacijo.

V stolpec vstavite nov blurb modul.

Posodobite vsebino blurba:

  • Naslov: Domov
  • Telo: Pustite prazno
  • Uporabi ikono: DA
  • Ikona: kot posnetek zaslona

Na zavihku načrtovanje spremenite nastavitve ikon.

  • Barva ikone: #fff
  • Širina ikone: 24px

Nato posodobite možnosti besedila naslova in velikosti na naslednji način:

  • Pisava naslova: Montserrat
  • Teža pisave naslova: polkrepko
  • Slog pisave naslova: TT
  • Poravnava besedila naslova: na sredino
  • Barva besedila naslova: #fff
  • Velikost besedila naslova: 10px
  • Največja širina: 60 slikovnih pik
  • Poravnava modula: središče

Dodajte naslednje oblazinjenje in naredite vogale okrogle.

  • Padding: 5px (zgoraj, spodaj, levo, desno)
  • Zaobljeni vogali: 5px (zgoraj, spodaj, levo, desno)

Uporabite sence škatle, da dodate obrobo okoli omarice. V našem dizajnu ne bo zavzel nobenega dodatnega mesta.

  • Box Shadow: glejte posnetek zaslona
  • Horizontalni položaj sence polja: 0px
  • Navpični položaj sence škatle: 0px
  • Moč širjenja sence škatle: 1px
  • Barva sence: rgba (255,255,255,0,12)

Če želite odstraniti presledek med ikono in besedilom v modulu blurb, uporabite naslednjo kodo CSS.

Blurb Image CSS

margin-bottom: 0px;

Blurb Naslov CSS

padding-bottom: 0px;

Prav tako spremenite vidne možnosti navpičnega in vodoravnega prelivanja, da bo možnost nastavitev za mobilne naprave na voljo v mobilnih napravah.

Podvojite stolpce za več gumbov

Stolpec (z modulom blurb) lahko trikrat ponovimo, da naredimo preostale tri gumbe. To bo povzročilo štiri stolpce, vsak z enakimi gumbi.

Ko so stolpci klonirani, spremenite ikono in besedilo.

4. razdelek: Shranite zasnovo

Shranite razdelek v knjižnico Divi zdaj, tako da lahko pozneje postavite lepljivo nogo kamor koli želite.

Če ga želite shraniti, se pomaknite nad razdelek in kliknite ikono Shrani v knjižnico v polju z nastavitvami razdelka. Po tem poimenujte postavitev in jo shranite v knjižnico.

To je to in končali smo.

Končni rezultat

Končni rezultat našega dizajna je videti zelo lep.

Zavijanje

V Diviju je enostavno narediti lepljivo nogo. Mislim, z nekaj kliki lahko naredite, da se odsek (ali vrstica) prilepi na dno strani. Ostalo je odvisno od vas, kako želite oblikovati vrstico noge in katere informacije želite vključiti. Oblike vrstic za nogo v tej lekciji so namenjene mobilni uporabi in so bolj dragocene in vsestranske, tako da imate občutek, kako jih ustvarite sami. Naj vas ne bo strah preizkusiti bolj inovativne modele!