Kako ustvariti ozadje s prelivno mešano sliko paralakse v Divi

Rifat Divi Tutorials Aug 31, 2022

Prejšnje različice programa Divi niso vključevale vgrajene funkcije za dodajanje gradientnega prekrivanja sliki paralaksnega ozadja. Vendar pa lahko preprosto ustvarite neverjetna paralaksna ozadja z neštetimi vzorci prekrivnih gradientov z novimi možnostmi ozadja Divi (vključno z graditeljem gradientov).

V tem članku vas bomo naučili, kako uporabiti izbire ozadja Divi za ustvarjanje svetlega gradientnega prekrivanja, ki se meša s sliko ozadja z metodama True in CSS Parallax.

Predogled oblikovanja

Tukaj je kratek predogled dizajnov ozadja, ki jih bomo ustvarili v tej vadnici.

Ta uporablja pristop True Parallax z gradientnim prekrivanjem in načinom mešanja barv na sliki ozadja.

Ustvarite neverjetna spletna mesta

Z najboljšim brezplačnim graditeljem strani Elementor

Začni zdaj

Ustvarite gradientno mešano sliko paralakse v ozadju v Divi

Ustvarite vrstico za polnjenje in besedilo naslova

Čeprav se bomo v tej lekciji osredotočili na zasnovo ozadja razdelka, je koristno vključiti vrstico za izpolnjevanje in glavo, da boste bolje razumeli, kako bi zasnova izgledala v tipičnem primeru uporabe.

Za začetek dodajte vrstico z enim stolpcem obstoječemu razdelku graditelja.

Nato temu dodajte besedilni modul.

Nastavitve besedila

Odprite nastavitve besedilnega modula. Dodajte glavo H2 vsebini telesa pod zavihkom Vsebina.

<h2>Say Hello to Divi</h2>

Posodobite nastavitve naslova in največjo širino pod zavihkom za načrtovanje, kot sledi:

  • Pisava naslova 2: Inter
  • Teža pisave naslova 2: krepko
  • Barva besedila naslova 2: #fff
  • Velikost besedila naslova 2: 8vw
  • Višina vrstice naslova 2: 1,2 em
  • Senca besedila naslova 2: glejte posnetek zaslona
  • Moč zameglitve sence besedila v naslovu 2: 0,28 em
  • Barva sence besedila naslova 2: #10076d
  • Največja širina: 50%

Nastavitve vrstic

Spremenimo velikost vrstice in razmik zdaj, ko je naslov na svojem mestu, da bo bolj odziven.

Pomaknite se do nastavitev vrstice. Na zavihku Oblikovanje posodobite naslednje:

  • Širina: 100%
  • Največja širina: 80vw

V vrstico dodajte tudi nekaj oblazinjenja.

  • Oblazinjenje: 15vw zgoraj, 15vw spodaj

Oblikujte gradientno ozadje za odsek

Sedaj, ko je vnos vsebine končan, lahko začnemo sestavljati gradientno ozadje našega razdelka. Odprite nastavitve razdelka. Izberite zavihek preliva pod možnostmi ozadja pod zavihkom Vsebina in uredite možnosti preliva na naslednji način:

  • Gradient Stop 1: #0094ff (pri 0%)
  • Gradient Stop 2: #ff00c7 (pri 25%)
  • Gradient Stop 3: #0094ff (pri 50%)
  • Gradient Stop 4: #ff00c7 (pri 75%)
  • Gradient Stop 5: #0094ff (pri 100%)
  • Vrsta gradienta: Krožna
  • Položaj preliva: spodaj levo
  • Postavite preliv nad sliko ozadja: DA

Slika paralakse v ozadju z načinom mešanja barv

Ko je oblikovanje gradienta končano, lahko dodamo našo sliko ozadja paralakse. Gradientna zasnova bo nato zmešana s sliko ozadja z uporabo možnosti mešanja barv, da se ustvari čudovito zasnovo ozadja s paralakso.

Izberite zavihek Slika ozadja in naložite sliko ozadja v nastavitvah ozadja razdelka. Posodobljeno je bilo naslednje:

  • Uporabite učinek paralakse: DA
  • Metoda paralakse: prava paralaksa
  • Mešanje slike ozadja: barva

Način mešanja barv združuje različico slike v sivinah z barvami preliva (odtenek in nasičenost). To ohranja vizualno kakovost slike, hkrati pa uvaja popolnoma novo barvno shemo.

Nastavitve maske ozadja

V nastavitvah ozadja razdelka izberite zavihek Maska ozadja in spremenite naslednje:

  • Maska: rezila
  • Preoblikovanje maske: vodoravno obračanje, obrnjeno
  • Velikost maske: Velikost po meri
  • Širina maske: 72vw
  • Položaj maske: zgoraj desno

Dodajte nekaj začasnega drsnega prostora

Preden pogledamo končne rezultate, moramo postaviti nekaj prostora nad in pod naše območje, da bomo lahko videli učinek paralakse v akciji. Preprosto dodajte naslednji rob razdelku, da to dosežete:

  • Rob: 80vh zgoraj, 80vh spodaj

Končni rezultati

Poglejte, tako je videti na strani v živo.

Končne besede

Z uporabo vgrajenih izbir ozadja Divi lahko preprosto ustvarite paralaksno zasnovo ozadja z mešanim gradientnim prekrivanjem. Resnično sprosti moč Photoshopa v Divi kot še nikoli prej. Prosto eksperimentirajte z različnimi barvnimi kombinacijami ter gradientnimi barvnimi postanki in postavitvami. Lahko tudi eksperimentirate z različnimi načini mešanja.