Kako skriti glavo med pomikanjem navzdol na Divi

Rifat Divi Tutorials Mar 1, 2022

Glava zajame bistvo spletnega mesta, ker lahko uporabniki razumejo, kaj bodo s tega spletnega mesta dobili iz glave. Ne bi bilo narobe, če bi temu rekli nekakšno vabilo, ki pomaga pritegniti obiskovalce. Če želimo na našem spletnem mestu izpostaviti razdelek junakov, kjer zgornja navigacijska vrstica odvrača pozornost, naj izpustimo navigacijsko vrstico? Nikoli!

Z Divijevo možnostjo Sticky lahko oblikujemo, kje bo razdelek Hero našega spletnega mesta prikazan brez navigacijske vrstice po nalaganju spletnega mesta, pomikanje pa bo sprostilo naslovno vrstico. To je win-win situacija. Toda kako oblikovati such? To bomo videli danes.

Sneak Peak

Preden skočimo v glavni razdelek, si bomo ogledali naš rezultat oblikovanja.

Zgradba: struktura glave

Ustvarite globalno glavo na nadzorni plošči

Pojdite na možnost »Ustvarjalnik tem« pod Divi na nadzorni plošči in izberite »Zgradi globalno glavo« iz možnosti, prikazane na sliki.

Ustvarite neverjetna spletna mesta

Z najboljšim brezplačnim graditeljem strani Elementor

Začni zdaj

Nastavitve: Global Header Section

Barva ozadja

Ko izberete predlogo glave, pojdite na "gradnjo iz nič". Nato odprite možnost plasti in videli boste vnaprej ustvarjen razdelek. Odprite nastavitve za razdelek in spremenite ozadje.

  • Barva ozadja: #002854

Razmik

Pod zavihkom načrta spremenite nekaj vrednosti razmikov.

  • Zgornje oblazinjenje: 0px
  • Spodnje odmikanje: 0px

Dodajanje nove vrstice

Struktura stolpcev

V razdelek dodajte naslednjo vrstico, ki je označena s strukturo stolpcev.

Barva ozadja

Preden v to vrstico dodamo kateri koli modul, naredimo nekaj prilagoditev. Začnite z barvo ozadja.

  • Barva ozadja: #002854

Dimenzioniranje

Pod zavihkom načrt spremenite vrednosti velikosti vrstice.

  • Uporabite širino žleba po meri: Da
  • Širina žleba: 1
  • Izenači višino stolpcev: Da
  • Širina: 100%
  • Največja širina: 1000 x 025

Razmik

Zdaj spremenite tudi vrednosti polnila.

  • Zgornje oblazinjenje: 0px
  • Spodnje odmikanje: 0px
  • Levo oblazinjenje: tablica & Telefon: 5%
  • Desno oblazinjenje: tablica & Telefon: 5%

Nastavitve: stolpec 1

Barva ozadja

Po oblikovanju celotne vrstice se lotimo oblikovanja stolpca 1. Najprej bomo dodali barvo ozadja.

  • Barva ozadja: #85A8B2

Dodaj: menijski modul v stolpec 1

Izbira menija

Zdaj bomo dodali menijski modul v stolpec 1. Izberite meni po svoji izbiri.

Logotip

Zdaj dodajte logotip v glavo.

Barva ozadja

Zdaj dodajte barvo ozadja.

  • Barva ozadja: #063765

Slika ozadja

Zdaj dodajte sliko po vaši izbiri in naredite naslednje prilagoditve.

  • Velikost slike ozadja: Fit
  • Položaj slike ozadja: Center

Nastavitve: Besedilo menija

Pomaknite se na zavihek design module’s in spremenite velikost besedila menija.

  • Barva besedila: #ffffff
  • Velikost besedila menija: 18px

Nastavitve: spustni meni

Zdaj spremenite nastavitve spustnega menija, kot sledi:

  • Barva vrstice spustnega menija: rgba(0,0,0,0)
  • Barva ozadja menija za mobilne naprave: #ddc1a7
  • Barva besedila menija za mobilne naprave: #063765

Nastavitve: ikona

Zdaj obrnite vse ikone bele.

  • Barva ikone nakupovalnega vozička: #ffffff
  • Barva ikone za iskanje: #ffffff
  • Barva ikone menija za hamburgerje: #ffffff

Dimenzioniranje

Nato spremenite nastavitve velikosti logotipa.

  • Največja širina logotipa: 70 slikovnih pik

Razmik

Izvedite nekaj sprememb v oblazinjenju.

  • Zgornje oblazinjenje: 1%
  • Spodnje oblazinjenje: 1%
  • Levo oblazinjenje: 5%
  • Desno oblazinjenje: 5%

Škatla senca

Dodajte nekaj sprememb v senco polja po meri.

  • Moč zamegljenosti sence škatle: 50 slikovnih pik
  • Barva sence: rgba(0,0,0,0,3)

Transform Translate

Zdaj zaključite nastavitve modula tako, da spremenite nastavitve prevajanja transformacije, kot sledi:

  • Desno: namizje: 20px, tablica & Telefon: 0px

Dodaj: modul gumbov v stolpec 2

Nastavitev gumbnega modula

Dodajte modul gumbov v stolpec 2 in dodajte nekaj besedila po vaši izbiri.

Poravnava gumbov

Na zavihku načrta spremenite poravnavo gumbov.

  • Poravnava gumbov: desno

Nastavitve gumba

Nato ustrezno spremenite slog gumba.

  • Uporabite sloge po meri za gumb: Da
  • Velikost besedila gumba: 16px
  • Barva besedila gumba: #2a2a2a
  • Barva ozadja gumba: #ffffff
  • Širina obrobe gumba: 0px
  • Barva obrobe gumba: rgba(0,0,0,0)
  • Teža pisave gumba: krepko
  • Slog pisave gumba: velike črke

Razmik

Dodajte nekaj oblazinjenja po meri, da ustvarite obliko gumbu.

  • Zgornje oblazinjenje: 20px
  • Spodnje odmikanje: 20 slikovnih pik
  • Levo odmikanje: 40 slikovnih pik
  • Desni odmik: 40 slikovnih pik

Škatla senca

Zdaj bomo dodali senco polja (označeno).

  • Moč zamegljenosti sence škatle: 30 slikovnih pik
  • Barva sence: rgba(0,0,0,0,18)

Transform Translate

Z modulom smo skoraj končali. Dokončajte ga z nekaj prilagoditvami na razdelku za preoblikovanje.

  • Desno: namizje: 50px, tablica & Telefon: 0px

Dodaj: lepljivi učinki v glavo

Nastavitve vrstic

Končali smo gradnjo strukture našega glavnega odseka. Zdaj mu bomo dodali lepljiv učinek. Za to moramo spremeniti nekaj vrednosti iz nastavitev vrstice.

Položaj

Najprej prilagodite položaj.

  • Položaj: Absolutno
  • Lokacija: zgoraj levo

Lepljive nastavitve - Učinki pomikanja

Nato we’ odpremo nastavitve razdelka in pustimo, da se drži na vrhu.

  • Lepljiv položaj: drži se na vrhu
  • Spodnja lepljiva meja: Brez
  • Odmik od okoliških lepljivih elementov: Da
  • Privzeti in lepljivi slogi prehoda: Da

Animacija

Zdaj bomo dodali animacijo, da obiskovalci med nalaganjem strani ne bodo videli glave.

  • Slog animacije: Fade

Trajanje prehoda

S spreminjanjem vrednosti prehodnega razpona bomo izbrali, kako hitro ali počasi bo glava vidna med pomikanjem.

  • Trajanje prehoda: 800 ms

Transform Translate

Ker na začetku ne želimo prikazati naših glav, bomo osi Y dodali negativno vrednost iz nastavitev Transform.

  • Desno: -300 slikovnih pik

Zdaj iz lepljivih nastavitev znova nastavite vrednost 0. Pomeni, da nam bo prikazal meni takoj, ko se začnemo pomikati.

  • Lepljivo desno: 0px

Lastnost CSS za vidnost

V tem razdelku bomo dodali lastnost CSS, da skrijemo elemente, ki se ne uporabljajo. Upoštevati je treba, da to ni obvezna naloga, vendar je to dobro narediti.

visibility: hidden;

Zdaj bomo spet naredili naš meni viden v lepljivem stanju.

visibility: visible;

Končni rezultat

Ker smo vse korake uspešno opravili, je tukaj naš končni rezultat.

Zadnje besede

V današnji vadnici smo videli, kako obiskovalce osredotočiti na razdelek junakov in delati na navigacijski vrstici glede vidnosti. Divi je odlična tema z vgrajenimi funkcijami, ki nam omogočajo, da oblikujemo nekaj edinstvenega in zabavnega. Upamo, da vam bo današnja objava všeč in če imate kakršna koli vprašanja in vprašanja, vas prosimo, da jih vprašate v razdelku za komentarje.