Descărcați 9 suprapuneri de imagini în formă GRATUITĂ pentru Divi

Modul în care afișați imagini pe site-ul dvs. web poate face cu adevărat o diferență în designul general pe care îl creați. Cu opțiunile integrate Divi, puteți aplica deja diverse setări de design care vă vor ajuta să afișați imaginile într-un mod uimitor, gândiți-vă la margini și la umbre de casetă, de exemplu. Dar dacă doriți să oferiți imaginilor dvs. o formă mai unică, această postare vă va ajuta. Vom împărtăși 9 suprapuneri de imagini în formă GRATUITĂ pe care le puteți descărca și utiliza pe orice site web pe care îl creați. După partajarea acestor suprapuneri de imagini în formă, vă vom arăta, de asemenea, cum să profitați de ele în timp ce construiți un site web cu Divi. Sperăm că acest tutorial vă va inspira să creați și propriul dvs. tip de suprapuneri de imagine.

Să ajungem la asta!

previzualizare

Înainte de a intra în tutorial și de a descărca, să aruncăm o privire rapidă asupra rezultatului pe care îl puteți aștepta pe diferite dimensiuni de ecran.

Desktop

Telefon

Descărcați suprapunerile de imagini în formă GRATUIT

Pentru a vă pune mâinile pe suprapunerile imaginii în formă, va trebui mai întâi să le descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai mult bunătate Divi și un pachet Divi Layout gratuit în fiecare luni și vineri! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Abordare

• Suprapunerile de imagine în formă pe care le puteți găsi în folderul de descărcare sunt gata de utilizare dacă le combinați cu un rând alb și / sau o culoare de fundal a secțiunii
• Dacă doriți să reglați suprapunerile imaginii formate în funcție de o altă culoare de fundal, va trebui să exportați suprapunerile imaginii formate într-o altă culoare utilizând fișierul ilustrator inclus în descărcarea de mai sus.
• Vă vom arăta cum să schimbați culoarea suprapusă a imaginii în formă în prima parte a tutorialului (utilizând Adobe Illustrator)
• Apoi, vom trece la Divi și vom încărca una dintre suprapunerile imaginii formate într-un modul de imagine
• Vom adăuga, de asemenea, o imagine de fundal și un fundal de gradient la modulul de imagine, care vor fi afișate prin suprapunerea imaginii în formă

Modificarea suprapunerilor de imagini în formă în secțiunea Culoare fundal cu Adobe Illustrator

Deschideți fișierul Illustrator în folderul de descărcare

După cum sa menționat în secțiunea de abordare a acestui post, dacă doriți să utilizați suprapunerile în formă de imagine pe un fundal alb, sunteți gata să folosiți doar fișierele PNG pe care le puteți găsi în folderul de descărcare. Cu toate acestea, dacă doriți să utilizați suprapunerile de imagine formate pe un rând diferit și / sau o culoare de fundal a unei secțiuni, va trebui să schimbați manual culoarea utilizând fișierul Adobe Illustrator care este inclus și în folderul de descărcare. Schimbarea culorii durează puțin sau deloc și vă permite să utilizați suprapunerile imaginii formate pe literalmente pe orice site web pe care îl creați, așa că haideți să parcurgem pașii. În primul rând, va trebui să deschideți fișierul Adobe Illustrator.

Selectați Suprapunerea formei imaginii la alegere

Odată ce ați deschis fișierul, veți găsi 9 planșe de artă diferite cu suprapuneri de imagine în formă pe care le puteți utiliza în orice scop. Selectați-l pe cel pe care doriți să îl editați.

Schimbați culoarea pentru a se potrivi cu culoarea de fundal a secțiunii

Continuați schimbând culoarea formei în aceeași culoare de fundal pe care intenționați să o utilizați pentru rândul și / sau secțiunea dvs.

Selectați Artboard

Odată ce culoarea este modificată, puteți selecta întreaga planșă care conține suprapunerea imaginii în formă.

Salvați suprapunerea imaginilor în formă de PNG pentru web

Și salvați-l ca fișier imagine PNG pentru web accesând Fișier> Export> Salvare pentru web .

Să începem să creăm!

Abonați-vă la canalul nostru Youtube

Adăugați o secțiune nouă

E timpul să treceți la Divi și să creați rezultatul! Creați o pagină nouă sau deschideți una existentă și adăugați o nouă secțiune obișnuită.

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

Adăugați modulul de imagine în coloana 1

Încărcați suprapunerea imaginilor în formă

Singurul modul de care vom avea nevoie în coloana 1 este un modul de imagine. Aici se va întâmpla toată magia. Vom începe prin încărcarea imaginii suprapuse. Veți observa că o parte a imaginii este complet transparentă. Aceasta va permite ca imaginea de fundal și fundalul de gradient să se afișeze în pașii următori.

Fundal de gradient

Continuați și adăugați un fundal de gradient la alegere.

• Culoare 1: # aa2bff
• Culoare 2: # 09f7eb

Imagine de fundal

Și încărcați o imagine de fundal PNG sau doar una obișnuită, dacă nu doriți ca fundalul de gradient să se afișeze. Puteți, de asemenea, să descărcați ilustrațiile pe care le folosim accesând următoarea postare pe care am creat-o despre cum să schimbați un fundal de gradient la plecare.

• Dimensiunea imaginii de fundal: copertă
• Poziția imaginii de fundal: Centrul de jos
• Repetarea imaginii de fundal: fără repetare

Dimensionare

Un alt pas important pentru ca acest tutorial să funcționeze este activarea opțiunii „Forțează lățimea completă” în setările de dimensionare ale modulului de imagine. Acest lucru se va asigura că fundalul de gradient și imaginea de fundal vor fi afișate numai prin zona transparentă a suprapunerii imaginii formate.

• Forțează lățimea completă: Da

Adăugați modulul de text al titlului în coloana 2

Adauga continut

Să trecem la a doua coloană. Aici, primul modul de care avem nevoie este un titlu Modul text. Adăugați un conținut la alegere.

Setări text

Apoi, accesați setările pentru textul antetului și efectuați câteva modificări.

• Rubrica 2 Font: Antic Didone
• Titlul 2 Greutate font: îndrăzneț
• Rubrica 2 Dimensiune text: 45 px
• Rubrica 2 Spațierea literelor: -2 px

Spațiere

Adăugați și o marjă de sus personalizată.

• Marja superioară: 100 px

Adăugați modulul de descriere a textului în coloana 2

Adauga continut

Al doilea modul de care avem nevoie este o descriere Modul text. Introduceți un conținut la alegere.

Setări text

Apoi, accesați setările de text și modificați orientarea textului modulului.

• Orientare text: justificați

Dimensionare

Modificați lățimea și în setările de dimensionare.

• Lățime: 63%

Adăugați un modul buton la coloana 2

Adăugați o copie

Următorul și ultimul modul de care avem nevoie este un modul buton. Introduceți un conținut la alegere.

Setări buton

Continuați accesând setările butonului și schimbând aspectul butonului.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 17 px
• Culoarea textului butonului: #ffffff
• Culoare gradient 1: # aa2bff
• Culoare gradient 2: # 09f7eb
• Direcția gradientului: 111 grade

• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 100 px
• Distanța dintre litere și butoane: -2 px
• Greutatea fontului: Ultra Bold
• Stilul fontului: majuscule

Spațiere

Adăugați și câteva butoane suplimentare personalizate.

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

Box Shadow

Nu în ultimul rând, finalizați designul adăugând o umbră subtilă de arc la buton.

• Puterea neclarității umbrei cutiei: 50 px
• Puterea răspândirii umbrei cutiei: -5 px

previzualizare

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

Desktop

Telefon

Gânduri finale

În această postare, am împărtășit 9 suprapuneri de imagini în formă GRATUITĂ pentru Divi pe care le puteți folosi pentru orice tip de site web pe care îl creați. Sperăm că acest tutorial v-a inspirat să vă creați propriile suprapuneri de imagine unice pe care să le puteți refolosi în mod constant. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!