Kako ustvariti celozaslonsko nogo v Diviju

Rifat Divi Tutorials Jan 26, 2022

Celozaslonske noge so vizualno privlačne komponente. Celozaslonski vidik oblikovanja pritegne vso pozornost na nogo. Najtežji del je narediti nogo celozaslonsko na različnih velikostih zaslona. Še bolj zapleteno postane, če menite, da si bodo številni uporabniki ogledali vaše spletno mesto z različnimi stopnjami povečave. Na srečo lahko preprosto ustvarite celozaslonsko nogo Divi z možnostmi Divi. V tej vadnici si bomo ogledali preoblikovanje skromne noge v celozaslonsko nogo Divi ne glede na velikost zaslona ali stopnjo povečave.

Predogled oblikovanja

Tako bo videti naša celozaslonska noga Divi, ko bomo dokončali.

Naložite predlogo

Za današnjo vadnico bomo uporabili glavo in nogo paketa postavitve Divi's Marina . Najprej pojdite na nadzorno ploščo in se pomaknite do Divi

Ker je ta predloga noge večja od zaslona, bomo odstranili prvo vrstico, da naredimo spremenjeno različico. Edini cilj je ustvariti nogo, ki je manjša od širine zaslona. Nato premaknite miško nad vrstico, ki jo želite izbrisati, in izberite ikono smetnjaka.

Zdaj ponujamo kratko predlogo noge, ki ne pokriva celotnega zaslona. Za ustvarjanje noge v tem primeru bomo uporabili Divi Theme Builder. Kot lahko vidite, je spodnji del zaslona prazen. Torej, naredimo to za celozaslonsko nogo Divi.

Celozaslonska nastavitev za nogo

Zdaj, ko imamo razdelek, na katerem bomo delali, naredimo nekaj prilagoditev razdelka. Naš cilj je narediti nogo celotne strani. Torej, odprite nastavitve za odsek in spremenite najmanjšo višino na zavihku načrtovanja.

  • Najmanjša višina: 100vh

Kot lahko vidite, je ozadje že prevzelo celoten zaslon. Elementi noge pa po drugi strani niso centrirani. To je celozaslonska 100-odstotna ločljivost.

Če pomanjšamo, je vsebina še bolj zamaknjena od središča. To je pri 75 % velikosti zaslona. Ozadje zapolni zaslon po želji, vendar informacije niso osredotočene.

Pomaknite se navzdol do Razmika in dodajte vrednosti zgornjemu oblazinjenju, medtem ko ostanete na zavihku Oblika v razdelku. To daje zgornje oblazinjenje dovolj za centriranje informacij na kateri koli velikosti zaslona ali ravni povečave. Količina oblazinjenja, ki jo boste uporabili, bo odvisna od nekaj dejavnikov, ki jih bomo obravnavali v nadaljevanju.

  • Oblazinjenje na vrhu: 15vh

Zdaj imamo celozaslonsko nogo Divi, ki se osredotoča na elemente noge, tudi pri 75%.

Prilagoditve noge Divi

To so vse spremembe, ki jih boste potrebovali: dodajte 100vh na minimalno višino in nato enote vh / vw na zgornje oblazinjenje razdelka. Glede na višino vsebine noge boste morda morali prilagoditi oblazinjenje, da bo vaša celozaslonska vsebina noge Divi na sredini. Najbolje bi bilo, če bi razmislili tudi o tem, ali uporabljate lepljiv meni ali ne. Po potrebi lahko zagotovite tudi oblazinjenje med komponentami.

Zakaj potrebujemo te prilagoditve?

Zakaj se uporablja 100vh? Meritev vh predstavlja enoto vidnega polja. Črka V pomeni vidno polje. Črka H pomeni višino. Vrednost 100vh naroči prikazu v polni višini. Ogledno območje obsega celoten zaslon. Če uporabimo lepljiv meni, to vključuje prostor pod zgornjim menijem. Če želite narediti prostor za meni, dodajte oblazinjenje na vrh strani, dokler vsebina ni na sredini.

Ogledno območje vključuje tudi naslovno vrstico v brskalnikih, kot sta Chrome in Safari na mobilni napravi. Te je treba pomakniti stran, vendar ne pozabite, da so lahko še vedno vidne.

Končni pogled

To je zelo preprosta zasnova, a neverjetna za opazovanje. Spremenili smo tudi barvo ozadja. Evo, kako je zdaj videti.

Končne misli

S tem zaključujemo naš pogled na ustvarjanje celozaslonske noge Divi . Vsako nogo, ki je krajša od širine zaslona, ne glede na velikost zaslona ali stopnjo povečave, lahko obrnete na celozaslonski način. Nastavitve najmanjše višine in oblazinjenja v razdelku bi morale biti vse, kar potrebujete. Odvisno od vsebine vaše noge in velikosti glave boste morda morali spremeniti oblazinjenje, da bo vsebina pravilno centrirana.

Divi WordPress Theme