Kako združiti gradient ozadja z maskami in vzorci v Divi

Rifat Divi Tutorials Apr 20, 2022

Uporaba novih možnosti ozadja Divi je svojim uporabnikom odprla popolnoma nov svet možnosti. Zahvaljujoč novemu gradientu gradientov lahko zdaj oblikujemo poljuben gradient s toliko barvami, kot želimo. Ni vse, kar je treba biti ustvarjalen. Zasnovo Gradient Builder je mogoče uporabiti v povezavi z maskami in vzorci ozadja za ustvarjanje množice osupljivih in edinstvenih modelov ozadja spletnega mesta.

Za ustvarjanje osupljivega ozadja bomo uporabili Divi 's Background Gradient Builder v povezavi z maskami in vzorci ozadja. Vsak element oblikovanja ozadja (preliv ozadja, maske in vzorci) bo dodan v razdelek in pokazali vam bomo, kako to storiti. Z le nekaj preprostimi kliki lahko spreminjate oblikovalske kombinacije in se zelo zabavate.

Pridi, imejmo se lepo!

Predogled oblikovanja

Tukaj je, kako neverjetno lahko oblikujemo različne dele našega spletnega mesta.

Ustvarite neverjetna spletna mesta

Z najboljšim brezplačnim graditeljem strani Elementor

Začni zdaj

Menjava vzorcev in mask je s tem dizajnom na mestu!

Oblikovalska struktura

Na levi strani bomo postavili naslov in puščico, ki vodita do določenega dejanja. Divijeve možnosti ozadja bodo uporabljene za izdelavo našega vizualnega dizajna. Najprej je potrebno ustvariti vrstico z dvema stolpcem.

Dodajte vsebino in kopije

Vaš glavni naslov, podnaslov in gumb je treba postaviti v levi stolpec (stolpec 1) te tabele.

Te nastavitve oblikovanja lahko najdete tako, da prenesete postavitev in jo pozneje preverite, če je to tisto, kar želite. Zaenkrat se bomo osredotočili na oblikovanje ozadja.

Navpični razmik razdelkov

Povečati moramo navpično višino razdelka, da bo naša zasnova ozadja v celoti zapolnila brskalnik. Oblazinjenje zgornjega in spodnjega dela odseka je preprost način za dosego tega.

Nastavitve razdelka so dostopne tukaj. Posodobite oblazinjenje, kot sledi v zavihku načrtovanja:

  • Oblazinjenje: 10vw zgoraj, 30vw spodaj

Če želite spremeniti zasnovo ozadja, potem ko se stolpci zložijo navpično, boste morda morali spremeniti oblazinjenje na zaslonih tabličnih računalnikov in telefonov.

Dodajte barvo preliva na ozadje

Naslednji korak je uporaba preliva po meri na ozadje razdelka. Za namen tega gradienta je dodanih skupno pet postankov naklona. Barva prvega in zadnjega preliva bosta enaka. Modra barva drugega in četrtega preliva se bo ujemala. Tretja (in zadnja) postaja naklona bo zelena. Naš dizajn ozadja bo imel osupljiv večbarvni preliv, ustvarjen s temi petimi barvami.

Izbira gradienta 1

Prepričajte se, da so nastavitve razdelka pod zavihkom z vsebino odprte, preden dodate prvi preliv. Če želite ustvariti nov preliv, pojdite na zavihek Prelivi in ​​kliknite znak +. Privzete barve preliva se bodo povečale za dva. Če želite spremeniti barvo in položaj prvega preliva na levi, ga kliknite in povlecite na naslednji način:

  • Gradient Stop Barva: #fa8bff
  • Gradient stop položaj: 10%

Izbira gradienta 2

Če želite dodati drugi preliv, preprosto kliknite barvno črto preliva. Če ga želite premakniti v položaj, morate najprej spremeniti barvo.

  • Gradient Stop Barva: #2bd2ff
  • Gradient Stop položaj: 30%

Izbira gradienta 3

Dodate lahko tretji preliv s preprostim klikom na barvno črto gradienta (približno na sredini črte). Če ga želite premakniti v položaj, morate najprej spremeniti barvo.

  • Gradient Stop Barva: #2bff88
  • Gradient Stop položaj: 55%

Izbira gradienta 4

Če želite dodati drugi preliv, preprosto kliknite barvno črto preliva. Če ga želite premakniti v položaj, morate najprej spremeniti barvo.

  • Gradient Stop Barva: #2bd2ff
  • Gradient Stop položaj: 80%

Na skrajni desni strani bi morali imeti prvotni naklon na levi, ki je skrajno levo. Končno zaustavitev gradienta lahko naredite tako, da kliknete na preliv barve in spremenite barvo, kot sledi (lahko jo pustite na privzetem položaju 100%).

  • Gradient Stop Barva: #fa8bff
  • Gradient Stop položaj: 100%

Ohranite privzeto možnost linearnega gradienta za ta dizajn. Naslednjo kodo je treba posodobiti, da obrnete linearni barvni vzorec:

  • Smer preliva: 90 stopinj

Vzorec ozadja

Zdaj lahko našemu dizajnu dodamo vzorec ozadja, ko je naš gradient končan. Uporabite diamantni vzorec na nov način, da ustvarite ta subtilni, a učinkovit vzorec.

Na kartici z vzorci naredite naslednje spremembe:

  • Vzorec ozadja: Diamanti
  • Barva vzorca: rgba (255,255,255,0,52)
  • Velikost vzorca: velikost po meri
  • Širina vzorca: 8px
  • Višina vzorca: 15vw

Kot lahko vidite, je pri že obstoječem dizajnu veliko prostora za interpretacijo. V tem primeru je bil izbran vzorec diamantov. Kot rezultat, smo ustvarili edinstven vzorec, ki je zaradi navpičnega raztezanja diamantov videti kot zvočni valovi.

Če želite nekaj drugega, je na voljo veliko možnosti in vse so oddaljene le en klik.

Maska za ozadje

Naš vzorec ozadja je zdaj na mestu, tako da lahko končno dodamo masko, da dokončamo našo kombinacijo ozadja. Na voljo je množica alternativ in različic. Za ta primer bomo uporabili masko Paint (vsaj za začetek).

Na kartici maske boste morali narediti naslednje spremembe:

  • Maska: barva
  • Barva maske: #ffffff
  • Transformacija maske: Zavrtite
  • Velikost maske: pokrov

In rezultat je nekaj takega.

Podobno kot vzorci, obstajajo številne maske, ki bi dopolnjevale ta dizajn in jih lahko najdete s klikom na zavihek "Maske".

Temna različica

Preprosto spremenite barvo maske ozadja v temen odtenek, če želite temno različico tega dizajna (kot je črna). Za motiv uporabite temnejši odtenek. Nato naredite naslov in besedilo podnaslova belo. Morda boste želeli spremeniti tudi barvo gumbov.

To so rezultati uporabe različnih mask za ustvarjanje temne različice slike.

Takole izgleda tudi temna različica z obrnjeno masko.

Več možnosti preliva

Da bi te večplastne zasnove ozadja izstopali, uporabite Gradient Builder za ustvarjanje številnih dodatnih barv in vrst prelivov.

Končni rezultat

Tukaj so vse možnosti oblikovanja, ki jih lahko raziščete.

Zadnje misli

Zelo zabavno je eksperimentirati z Divijevimi kompleksnimi izbirami ozadja. Poleg tega je presenetljivo, kako preprosto je narediti tako čudovite zasnove ozadja brez potrebe po Photoshopu ali Illustratorju. Z nekaj kliki lahko prilagodite ozadje, da bo dizajn točno takšen, kot želite. Na voljo vam je še več možnosti (kot so načini mešanja), da ustvarite resnično edinstvene zasnove ozadja. Poleg tega imajo lahko ne samo razdelki, ampak tudi kateri koli element Divi maske in vzorce. Torej nadaljujte in se igrajte z njim!