Cum se utilizează fundalele de gradient ca măști de imagine de fundal cu Divi

Dacă sunteți familiarizați cu software-ul de editare a imaginilor, cum ar fi Photoshop, probabil că sunteți familiarizați și cu măștile. Măștile vă ajută să aduceți două straturi împreună și să creați un rezultat unic. Cu Divi, puteți deveni creativi și vă puteți crea propriul tip de măști în paginile dvs. folosind fundaluri degradate în combinație cu imagini de fundal. În acest tutorial, vă vom arăta pas cu pas cum să creați 8 măști de fundal diferite pentru orice tip de design la care lucrați. Acest tutorial vă va ajuta să realizați modificări rapide ale designului paginilor dvs., fără a fi nevoie să atingeți deloc software-ul de editare a imaginilor.

Să ajungem la asta!

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Să începem să creăm!

Abonați-vă la canalul nostru Youtube

Adăugați o secțiune nouă

Spațiere

Adăugați o nouă secțiune la pagina dvs., deschideți setările secțiunii și adăugați câteva căptușeli personalizate de sus și de jos.

• Căptușeală superioară: 150 px
• Căptușeală inferioară: 150 px

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Adăugați Blurb Module la # 1

Adauga continut

E timpul să începeți să adăugați module! Vom avea nevoie de 8 module Blurb în total. Vom începe cu prima, vom face modificările generale și o vom clona de 7 ori după aceea, înainte de a face modificări unice pentru fiecare modul Blurb. Adăugați un nou modul Blurb în prima coloană și adăugați un conținut la alegere.

Setări text

Treceți la fila de proiectare și modificați setările de text în continuare.

• Orientare text: centru
• Culoarea textului: Întunecat

Setări text titlu

Deschideți și setările pentru textul titlului și schimbați lucrurile din jur.

• Titlu Font: Antic Didone
• Dimensiune text titlu: 23 px
• Înălțimea liniei de titlu: 1,5em

Box Shadow

În cele din urmă, adăugați o umbră de casetă subtilă și la modulul Blurb.

• Puterea neclarității umbrei cutiei: 80 px
• Puterea răspândirii umbrei cutiei: -10px
• Culoare umbră: rgba (0,0,0,0,3)

Clone Blurb Module de 7 ori și plasează 4 duplicate în a doua coloană

După ce ați făcut toate modificările generale, puteți continua și clona modulul Blurb de 7 ori. Plasați patru dintre duplicate în a doua coloană a rândului și lăsați trei în prima.

Modificați modulul Blurb # 1

Fundal de gradient

Acum putem începe să adăugăm setări unice pentru fiecare dintre modulele Blurb. Deschideți primul modul Blurb din coloana 1 și adăugați un fundal de gradient la acesta.

• Culoare 1: rgba (255,255,255,0)
• Culoare 2: #ffffff
• Tipul gradientului: radial
• Direcție radială: jos
• Poziția inițială: 45%
• Poziție finală: 45%
• Plasați gradientul deasupra imaginii de fundal: Da

Imagine de fundal

După ce ați adăugat fundalul de gradient, puteți adăuga și imaginea de fundal și o puteți combina cu următoarele setări de fundal:

• Poziția imaginii de fundal: Centrul de sus
• Repetarea imaginii de fundal: fără repetare

Spațiere

Nu în ultimul rând, adăugați niște căptușeli personalizate pentru ca totul să cadă la locul său.

• Căptușeală superioară: 100 px
• Căptușeală inferioară: 350 px
• Căptușeală stângă: 50 px
• Căptușeală dreaptă: 50 px

Modificați modulul Blurb # 2

Fundal de gradient

Să trecem la următorul modul Blurb (primul modul din a doua coloană) și să adăugăm un fundal de gradient.

• Culoare 1: rgba (255,255,255,0)
• Culoare 2: #ffffff
• Tipul gradientului: radial
• Direcție radială: dreapta sus
• Poziția inițială: 45%
• Poziție finală: 45%
• Plasați gradientul deasupra imaginii de fundal: Da

Imagine de fundal

Continuați adăugând o imagine de fundal combinată cu setările de fundal de mai jos.

• Poziția imaginii de fundal: dreapta sus
• Repetarea imaginii de fundal: fără repetare

Spațiere

Și finalizați designul adăugând valori de umplere personalizate în setările de spațiere.

• Căptușeală superioară: 350 px
• Căptușeală inferioară: 100 px
• Căptușeală stângă: 50 px
• Căptușeală dreaptă: 200 px (desktop și tabletă), 50 px (telefon)

Modificați modulul Blurb # 3

Fundal de gradient

Accesați al treilea modul Blurb (al doilea modul Blurb din prima coloană). Deschideți setările și adăugați un fundal de gradient.

• Culoare 1: rgba (255,255,255,0)
• Culoare 2: #ffffff
• Tipul gradientului: radial
• Direcție radială: stânga sus
• Poziția inițială: 45%
• Poziție finală: 45%
• Plasați gradientul deasupra imaginii de fundal: Da

Imagine de fundal

Continuați adăugând o imagine de fundal în continuare.

• Poziția imaginii de fundal: stânga sus
• Repetarea imaginii de fundal: fără repetare

Spațiere

Și adăugați niște umpluturi personalizate la modul pentru ca acesta să-și ia forma.

• Căptușeală superioară: 350 px
• Căptușeală inferioară: 100 px
• Căptușire stângă: 200 px (desktop și tabletă), 50 px (telefon)
• Căptușeală dreaptă: 50 px

Modificați modulul Blurb # 4

Fundal de gradient

Trecem la al doilea modul din a doua coloană! Deschideți setările modulului Blurb și adăugați un fundal de gradient.

• Culoare 1: rgba (255,255,255,0)
• Culoare 2: #ffffff
• Tipul gradientului: radial
• Direcție radială: sus
• Poziția inițială: 45%
• Poziție finală: 45%
• Plasați gradientul deasupra imaginii de fundal: Da

Imagine de fundal

Continuați adăugând o imagine de fundal în continuare.

• Poziția imaginii de fundal: Centrul de sus
• Repetarea imaginii de fundal: fără repetare

Spațiere

Și finalizați designul adăugând valori de umplere personalizate în setările de spațiere.

• Căptușeală superioară: 350 px
• Căptușeală inferioară: 100 px
• Căptușeală stângă: 50 px
• Căptușeală dreaptă: 50 px

Modificați modulul Blurb # 5

Fundal de gradient

Treceți la modulul următor, care este al treilea modul din prima coloană. Deschideți modulul și adăugați un fundal de gradient.

• Culoare 1: rgba (255,255,255,0)
• Culoare 2: #ffffff
• Tipul gradientului: radial
• Direcție radială: stânga
• Poziția inițială: 35%
• Poziție finală: 35%
• Plasați gradientul deasupra imaginii de fundal: Da

Imagine de fundal

Continuați adăugând o imagine de fundal în combinație cu următoarele setări de fundal:

• Poziția imaginii de fundal: stânga sus
• Repetarea imaginii de fundal: fără repetare

Spațiere

Și adăugați câteva valori de umplere personalizate și în setările de spațiere.

• Căptușeală superioară: 100 px
• Căptușeală inferioară: 100 px
• Căptușire stângă: 240 px (desktop și tabletă), 150 px (telefon)
• Căptușeală dreaptă: 50 px (desktop și tabletă), 20 px (telefon)

Modificați modulul Blurb # 6

Fundal de gradient

Trecem la al treilea modul din a doua coloană! Deschideți setările și adăugați un fundal de gradient.

• Culoare 1: rgba (255,255,255,0)
• Culoare 2: #ffffff
• Tipul gradientului: liniar
• Direcția gradientului: 140 grade
• Poziția inițială: 60%
• Poziție finală: 60%
• Plasați gradientul deasupra imaginii de fundal: Da

Imagine de fundal

Adăugați o imagine de fundal cu setările de fundal potrivite în continuare.

• Poziția imaginii de fundal: Centrul de sus
• Repetarea imaginii de fundal: fără repetare

Spațiere

Și finalizați designul folosind câteva valori de umplere personalizate în setările de spațiere.

• Căptușeală superioară: 100 px
• Căptușeală inferioară: 350 px
• Căptușeală stângă: 50 px
• Căptușeală dreaptă: 200 px (desktop și tabletă), 50 px (tabletă)

Modificați modulul Blurb # 7

Fundal de gradient

Următorul modul Blurb din coloana 1 folosește următorul fundal de gradient:

• Culoare 1: rgba (255,255,255,0)
• Culoare 2: #ffffff
• Tipul gradientului: liniar
• Direcția gradientului: 220deg
• Poziția inițială: 60%
• Poziție finală: 60%
• Plasați gradientul deasupra imaginii de fundal: Da

Imagine de fundal

Adăugați și o imagine de fundal.

• Poziția imaginii de fundal: Centrul de sus
• Repetarea imaginii de fundal: fără repetare

Spațiere

Și adăugați valorile de umplere personalizate necesare în setările de spațiere.

• Căptușeală superioară: 100 px
• Căptușeală inferioară: 350 px
• Căptușire stângă: 200 px (desktop și tabletă), 50 px (telefon)
• Căptușeală dreaptă: 50 px

Modificați modulul Blurb # 8

Fundal de gradient

La ultimul modul Blurb! Deschideți setările și adăugați un fundal de gradient.

• Culoare 1: rgba (255,255,255,0)
• Culoare 2: #ffffff
• Tipul gradientului: radial
• Direcție radială: dreapta
• Poziția inițială: 35%
• Poziție finală: 35%
• Plasați gradientul deasupra imaginii de fundal: Da

Imagine de fundal

Încărcați imaginea de fundal în continuare.

• Poziția imaginii de fundal: stânga sus
• Repetarea imaginii de fundal: fără repetare

Spațiere

Și finalizați designul și tutorialul prin adăugarea unor umpluturi personalizate la setările de spațiere ale modulului.

• Căptușeală superioară: 100 px
• Căptușeală inferioară: 100 px
• Căptușeală stângă: 50 px (desktop și tabletă), 20 px (telefon)
• Căptușeală dreaptă: 240 px (desktop și tabletă), 170 px (telefon)

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Gânduri finale

În acest tutorial, ți-am arătat cum să devii creativ cu opțiunile încorporate ale Divi. Mai exact, am folosit fundaluri radiale și imagini de fundal pentru a crea măști de fundal. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!