Kako razkriti mrežo s sliko razdelka skrivnostnega junaka v Divi

Rifat Divi Tutorials Mar 3, 2022

Odseki junakov vedno veljajo za odlično orodje za pritegnitev pozornosti obiskovalcev. Prav tako je v njihovih mislih nezavedno postavil ton spletnemu mestu. Torej je oddelek za ustvarjalne junake blagoslov za podjetje. Divi je čudovit ustvarjalec tem in strani WordPress in ponuja veliko priložnosti, da naredite razdelek junakov vašega spletnega mesta lep. Prej smo videli , kako oblikovati lepljivi odsek junakov na pomiku , danes pa bomo videli, kako oblikovati odsek junakov, kjer bo skrita mreža slik, ki se bo razkrila s pomikanjem. Sliši se razburljivo, prav?

Skočimo naravnost v vadnico.

Sneak Peak

To bo dizajn, ki ga bomo ustvarili danes in bo popolnoma odziven.

Pogled namizja

Mobilni pogled

Oddelek za oblikovanje junakov

Odprite novo stran na nadzorni plošči WordPress. Poimenujte ga, kot želite, in ga odprite z Divi builderjem.

Ustvarite neverjetna spletna mesta

Z najboljšim brezplačnim graditeljem strani Elementor

Začni zdaj

Dodajanje: Nov razdelek

Barva ozadja

Našemu začetnemu razdelku bomo dodali barvo ozadja. Odprite nastavitve za razdelek in dodajte barvo ozadja.

  • Barva ozadja: #111111

Razmik

Zdaj se pomaknite na zavihek Oblikovanje v razdelku in naredite nekaj prilagoditev spodnjega oblazinjenja, ker nam bo to dalo več prostora za boljšo izkušnjo pomikanja.

  • Spodnje oblazinjenje: 120vh

Dodajanje: vrstica ena

Struktura stolpcev

Zdaj bomo v pripravljen razdelek dodali novo vrstico. Sledite prikazani strukturi stolpcev.

Dimenzioniranje

Preden dodamo več modulov, odprite nastavitev vrstice in spremenite naslednje vrednosti na zavihku načrtovanja.

  • Uporabite širino žleba po meri: Da
  • Širina žleba: 2
  • Širina: 100%
  • Največja širina: 2580 slikovnih pik

Razmik

Zdaj dodajte nekaj robov na vrh.

  • Zgornja marža: namizje: 10vh, tablica & Telefon: 5vh

Z indeks

Da ohranimo zaporedje oblikovanja, moramo to vrstico obdržati pod drugo vrstico. Zato bomo dodali nekaj vrednosti indeksa Z.

  • Z indeks: 10

Vse nastavitve stolpcev

Ker smo končali z nastavitvami prve vrstice, zdaj odprite nastavitve za vsak stolpec in naredite spremembe, opisane spodaj.

Glavni element CSS

Ta koda CSS je samo za mobilne naprave. Ne pozabite jih dodati v vsak stolpec posebej.

width: 50% !important;
margin: 0 !important;

Nastavitve stolpca 2

Z indeks

Nato odprite nastavitve stolpca 2 in mu dodajte vrednost indeksa Z. To bo preneslo stolpec čez naslednjega.

  • Z indeks: 12

Dodajanje: slikovni modul v stolpec 1

Naloži sliko

Zdaj bomo dodali slikovni modul v stolpec 1 in naložili sliko po naši izbiri.

Razmik

Na zavihku načrtovanja module’s spremenite nastavitve razmika.

  • Spodnji rob: Tablica & Telefon: 10px
  • Desni rob: tablica & Telefon: 2%

Kloniraj slikovni modul & Izpolni preostale stolpce

Ko smo pravkar zaključili z nastavitvami modula, trikrat podvojimo celoten modul in ga postavimo na preostale stolpce.

Zdaj spremenite slike iz preostalih stolpcev.

Spremenite nastavitve razmika za sliko 2 & 4

Nato odprite nastavitve slikovnih modulov v stolpcu 2 in 4 in jim uporabite naslednje vrednosti razmikov:

  • Spodnji rob: Tablica & Telefon: 10px
  • Levi rob: tablica & Telefon: 2%
  • Desni rob: /

Dodajanje: druga vrstica

Struktura stolpcev

Zdaj dodajte novo vrstico v naš glavni razdelek.

Gradientno ozadje

Zdaj bomo na novo ustvarjeno vrstico uporabili gradientno ozadje. Torej, odprite nastavitev in uporabite ozadje

  • Barva 1: #111111
  • Barva 2: rgba(255,255,255,0)

Dimenzioniranje

Nato spremenite nastavitve velikosti.

  • Širina: 100%
  • Največja širina: 2580 slikovnih pik

Razmik

Nato dodajte nekaj podloge na vrh in dno.

  • Zgornje oblazinjenje: 20vh
  • Spodnje oblazinjenje: 20vh

Položaj

Zdaj, ko želimo drugo vrstico postaviti nad prvo, moramo ustrezno nastaviti nastavitve položaja.

  • Položaj: Absolutno
  • Lokacija: Top Center
  • Z indeks: 12

Dodajanje: besedilni modul v stolpec

Dodajte vsebino H1

Zdaj dodajte besedilni modul in nekaj vsebine po vaši izbiri v stolpec.

Nastavitve besedila H1

Pomaknite se na zavihek oblikovanja module’s in ustrezno spremenite nastavitve besedila H1:

  • Pisava naslova: Kumbh Sans
  • Teža pisave naslova: krepko
  • Slog pisave naslova: velike črke
  • Poravnava besedila naslova: na sredino
  • Barva besedila naslova: #ffdbaa
  • Velikost besedila naslova: namizje: 120px, tablica: 60px & Telefon: 40px
  • Razmik med črkami naslovov: namizje: -3px, tablica & Telefon: 0px
  • Senca besedila naslova: izberite: tretja možnost & Barva sence besedila naslova: rgba(0,0,0,0.4)

Dimenzioniranje

Zdaj prilagodite poravnavo modula in največjo širino iz nastavitev velikosti.

  • Največja širina: 1070 slikovnih pik
  • Poravnava modula: središče

Dodajanje:; Modul gumbov

Dodaj kopijo

Zadnji modul, ki ga bomo dodali v tej vrstici, je modul utton. Napišite nekaj po svojih potrebah.

Poravnava gumbov

Na zavihku načrtovanja in spremenite poravnavo gumbov.

  • Poravnava gumbov: na sredini

Nastavitve gumba

Nato oblikujte gumb.

  • Uporabite sloge po meri za gumb: Da
  • Velikost besedila gumba: namizje: 20px, tablica: 16px & Telefon: 14px
  • Velikost besedila gumba: #111111
  • Barva ozadja gumba: #ffffff
  • Širina obrobe gumba: 0px
  • Polmer obrobe gumba: 100 slikovnih pik
  • Pisava gumba: Kumbh Sans
  • Teža pisave gumba: krepko

Razmik

Dodajte vrednosti odmikov iz nastavitev razmika.

  • Zgornje oblazinjenje: namizje & Tablica: 20px, Telefon: 15px.
  • Spodnje oblazinjenje: namizje & Tablica: 20 slikovnih pik, telefon: 15 slikovnih pik.
  • Levo oblazinjenje: namizje & Tablica: 50px, Telefon: 40px.
  • Desno oblazinjenje: namizje & Tablica: 50 slikovnih pik, telefon: 40 slikovnih pik.

Lepljive nastavitve v razdelku Hero

Ena vrstica, lepljive nastavitve

Zdaj je naša zasnova končana in čas je, da se osredotočimo na lepljive nastavitve. Naslednje lepljive nastavitve bodo uporabljene v prvi vrstici, zato odprite nastavitve prve vrstice.

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

Lepljiva neprozornost

Nato spremenite motnost v nastavitvah filtrov.

  • Privzeto: 200 x 025
  • Lepljivo: 100%

Ena lepljiva nastavitev slikovnega modula

Razmik

V nastavitvah slikovnega modula pojdite na zavihek design in dodajte nekaj lepljivega razmika.

  • Lepljivi zgornji rob: -20%
  • Lepljiv desni rob: -20%

Prehod

Povečajte tudi trajanje prehoda.

  • Trajanje prehoda: 700 ms

Slikovni modul Two Sticky Setting

Razmik

Iz nastavitev slikovnega modula 2 naredite tudi nekaj prilagoditev razmika.

  • Lepljivi zgornji rob: 20%
  • Lepljiv levi rob: -30%

Prehod

Tudi tukaj povečajte trajanje prehoda.

  • Trajanje prehoda: 1000 ms

Slikovni modul Tri lepljivi razmik

Razmik

Zdaj za tretji slikovni modul uporabite naslednje vrednosti lepljivega razmika:

  • Lepljivi zgornji rob: -10%
  • Lepljiv levi rob: -25%
  • Lepljiv desni rob: -25%

Prehod

Ustrezno prilagodite trajanje prehoda:

  • Trajanje prehoda: 700 ms

Slikovni modul Four Sticky Spacing

Razmik

Zdaj odprite zadnji slikovni modul in naredite spremembe.

  • Lepljivi zgornji rob: -20%
  • Lepljiv levi rob: -30%

Prehod

Zdaj dokončajte današnjo nalogo s podaljšanjem trajanja prehoda za četrti slikovni modul.

  • Trajanje prehoda: 1000 ms

In končali smo! Shranite in zaprite stran, da si ogledate naš današnji rezultat oblikovanja.

Končni videz

Torej, tukaj je naš današnji dizajn. Gradientno ozadje druge vrstice se premika navzgor s pomikanjem in slike iz prve vrstice se pojavljajo, ko nastavimo vrednosti. Tako je videti bolj interaktivno.

Pogled namizja

Mobilni pogled

Zaključek

V današnji vadnici smo vam poskušali pokazati, kako kreativno lahko inovirate v razdelku junakov na spletnem mestu z uporabo lepljivih možnosti Divi . Upamo, da se vam bo vadnica zdela koristna. Objavo lahko delite tako, da bodo imeli od nje koristi tudi drugi. Hvala, ker ste prebrali to objavo.