Kako dodati maske in vzorce ozadja v razdelek junakov v Diviju

Rifat Divi Tutorials Apr 18, 2022

Divijeve nove maske in vzorci ozadja so eden najbolj vznemirljivih novih oblikovnih elementov, ki so jih dodali temi. Vsako masko in vzorec je mogoče mešati z različnimi elementi ozadja (kot so barve, fotografije in prelivi), da ustvarite neskončno število edinstvenih kombinacij v nekaj klikih.

Danes bomo pokazali, kako ustvariti odsek junakov z uporabo novih mask in vzorcev ozadja Divi . V tej lekciji bomo obravnavali kritične faze, potrebne za izdelavo mask in vzorcev ozadja. Poleg tega bomo pokazali, kako urediti slike ozadja, da dopolnijo zasnovo maske. To bi vam moralo zagotoviti potrebna orodja za hitro oblikovanje idealnega razdelka junakov za vaše spletno mesto.

Oblikovalska postavitev

To je kratek pregled zasnove, ki jo bomo zgradili v tej lekciji.

Naslednja ilustracija razdelka heroja z belo masko in vzorcem.

Ustvarite neverjetna spletna mesta

Z najboljšim brezplačnim graditeljem strani Elementor

Začni zdaj

S tem dizajnom je spreminjanje mask in položajev maske tako preprosto kot nekaj klikov!

Postopek oblikovanja

Ustvarite novo stran in izberite urejanje z Divi builderjem. Nato izberite gradnjo iz nič.

Ustvarite strukturo postavitve

Za ta odsek junakov bomo uporabili klasično strukturo postavitve, z naslovom in pozivom k dejanju na levi in ​​sliko (ali vizualnim dizajnom) na desni. Za ta dizajn bomo uporabili možnosti ozadja Divi. Toda preden to storimo, moramo vzpostaviti vrstico z dvema stolpcem, da zagotovimo prostor na desni strani strani za naše maske ozadja in oblikovanje vzorcev.

Dodaj vsebino

Besedilni moduli za vaš glavni naslov, besedilni moduli za vaše podnaslove in modul gumbov za vaš gumb morajo biti vsi postavljeni v levi stolpec (stolpec 1).

Vsem modulom dodajte vsebino.

Postavitev lahko prenesete in si jo ogledate pozneje, če želite izvedeti več o posameznih parametrih oblikovanja. Zaenkrat se bomo osredotočili na oblikovanje ozadja.

Navpični razmik

Razdelku je potrebno dodati navpično višino, da bo naš dizajn ozadja videti večji in privlačnejši. Če želite to doseči, preprosto dodajte oblazinjenje na zgornji in spodnji del območja. Da bi prilagodili našo zasnovo ozadja, ko se stolpci zložijo navpično, bomo morali spremeniti oblazinjenje za zaslone tablic in telefonov.

Pojdite na stran z nastavitvami razdelka. Oblazinjenje v zavihku načrtovanja je treba spremeniti na naslednji način:

  • Oblazinjenje: 20vw zgoraj, 20vw spodaj
  • Oblazinjenje (tableta): 8vw zgoraj, 48vw spodaj
  • Oblazinjenje (telefon): 8vw zgoraj, 70vw spodaj

Slika ozadja in gradient

Nato bomo območje okrasili s sliko ozadja in prelivom. Ne pozabite, da bo na desni strani razdelka prikazana glavna osrednja točka slike v ozadju, zato izberite sliko, pri kateri bo na desni strani prikazano, kaj si želite ogledati. Za ta primer bomo uporabili sliko mestnega obzorja. Na desni strani fotografije je veliko vizualno privlačnih struktur, zato se dobro prilega.

Naložite sliko v razdelek ozadja pod zavihkom slike.

Dodajanje barvnega preliva sliki v ozadju je z Divijem prava stvar. Dodajte naslednji preliv v ozadje razdelka na zavihku preliva:

  • Barva levega gradienta: #3e22ff
  • Barva desnega gradienta: prozorna
  • Postavite gradient nad sliko ozadja: DA

Vzorec ozadja za razdelek

Čas je, da zasnovo dokončamo z dodajanjem vzorca ozadja, ki bo ujel z gradientom, ki smo ga ustvarili za našo sliko ozadja. Z uporabo manjšega vzorca, ki le doda pridih teksture, bomo v tem primeru ustvarili bolj edinstven videz.

Pod zavihkom vzorci posodobite naslednje:

  • Vzorec ozadja: Čopast

Na splošno je priporočljivo, da vzorci ozadja ostanejo čim bolj skromni. Motnost barve je mogoče zmanjšati z uporabo velikosti po meri za manjše vzorce.

Maska ozadja za odsek

Končno smo pripravljeni preizkusiti novo masko ozadja za naš dizajn zdaj, ko imamo vzorec ozadja na mestu. Na voljo je veliko možnosti in različic. Tukaj bomo za primer uporabili masko iz satja.

Zavihek maske je treba posodobiti na naslednji način:

  • Maska: satja
  • Barva maske: #ffffff
  • Velikost maske: pokrov

Prilagodite sliko ozadja

Maske ozadja nam omogočajo, da skrijemo (ali "zamaskiramo") dele naše slike ozadja. V tem primeru je možno, da boste morali sliko ozadja premakniti, da bo maska ​​videla določeno njeno območje. Enostaven in učinkovit način za ponovno pozicioniranje slike ozadja je uporaba kontrolnikov položaja slike in odmika.

Če natančno pogledate to sliko, boste opazili, da smo jo premaknili nekoliko v desno, tako da je mogoče videti več struktur.

Zavihek pod sliko spreminja naslednje nastavitve.

  • Položaj slike ozadja: spodaj desno
  • Vodoravni odmik slike ozadja: -4vw

Uporabite način mešanja

Dodajanje načina mešanja vsem tem delom ozadja je eden od načinov za ustvarjalnost. Načine mešanja lahko uporabite za ustvarjalno mešanje številnih plasti ozadja (slike, prelivi, maske itd.) v katerem koli od razpoložljivih ozadij.

V tem primeru bo za združitev slike ozadja uporabljena barva preliva. To lahko storite tako, da greste na zavihek slike ozadja, izberete barvo preliva in nato dodate način mešanja, kot sledi:

  • Način mešanja: Pomnoži

Gradient ozadja se pomnoži s trenutnim načinom mešanja trenutne plasti (v tem primeru sliko ozadja). Za vizualizacijo učinka si omislite diaprojektor z dvema diapozitivoma, ki sta naložena drug na drugega. Če bi ju projicirali na zaslon, bi nastala temnejša mešanica obeh slik.

Odzivnost

Ključnega pomena je tudi oblikovanje maske za ozadje tako, da se na mobilnih napravah zdi odlična. Zaradi vgrajenih možnosti je ta postopek zelo preprost. Da bi naredili prostor za našo zasnovo ozadja, smo zaslone tablic in telefonov že oblazinjeni z dodatno plastjo oblazinjenja. Masko je zdaj mogoče optimizirati za mobilne naprave preprosto s prilagajanjem parametrov preoblikovanja ozadja in razmerja stranic.

Aktivirajte odzivne možnosti pod zavihkom maske in naredite naslednje spremembe:

Na tablici …

  • Transformacija maske: Obrni navpično, Obrni vodoravno, Zasukaj
  • Razmerje stranic maske: kvadrat

Na Mobile…

  • Transformacija maske: Obrni navpično, Obrni vodoravno, Zasukaj
  • Razmerje stranic maske: portret

Temna različica

Preprosto spremenite barvo maske ozadja v temen odtenek, če želite temno različico tega dizajna (kot je črna). Nato prilagodite barvo vzorca. Če želite besedilo naslova in podnaslova izstopati, uporabite belo. Morda boste želeli spremeniti tudi barvo gumbov. Tukaj je pogled na temno različico.

Končni predogled

Tukaj je torej naš končni dizajn. To je temna različica našega predogleda dizajna.

Sklepne besede

Z Divijevimi maskami in vzorci ozadja je lahko ustvarjanje razdelka junakov za vaše spletno mesto zelo zabavno. Izbira ozadja je enostavno prilagoditi, tako da je dizajn točno tisto, kar iščete. Če želite dodatno prilagoditi svoje ozadje, lahko uporabite številne druge možnosti (kot so načini mešanja). Poleg tega lahko z maskami in vzorci okrasite ne le odseke, temveč tudi kateri koli element Divi . Torej nadaljujte in se igrajte z njim!