Cum să creați fundaluri frumoase neclare cu Divi

Fundalurile de gradient fac în prezent parte din aproape fiecare site web modern pe care îl întâlniți. Dar, de îndată ce doriți să creați un gradient mai complex, probabil că aveți tendința să apelați la software de editare a imaginilor. Cu Divi, există o alternativă. Datorită numeroaselor opțiuni încorporate pe care le are Divi, puteți transforma modulele de imagine în fundaluri neclare. Vom estompa fundalurile până într-un punct în care doar culorile vor fi afișate și astfel vom forma un gradient. Vom recrea un exemplu frumos de la zero și vom împărtăși gratuit exemplul de proiectare JSON!

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.

Desktop

Mobil

Descărcați aspectul de fundaluri neclare GRATUIT

Pentru a vă pune mâna pe aspectul gratuit al fundalului neclar, va trebui mai întâi să îl 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 multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail 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

• Adăugăm trei module diferite la o coloană; două module de imagine și un modul CTA
• Prima imagine își păstrează aspectul inițial
• A doua imagine va fi neclară și va crește în dimensiune
• De asemenea, vom îmbunătăți culorile jucându-ne cu celelalte setări de filtre incluse în modulul de imagine
• Modulul CTA va suprapune modulul de imagine neclar și îl va folosi ca fundal
• Pentru a ne asigura că neclaritatea și creșterea dimensiunii Modulului de imagine nr. 2 nu depășesc containerul coloanei, vom ascunde depășirea coloanei

Să începem să recreăm

Abonați-vă la canalul nostru Youtube

Adăugați o secțiune nouă

Începeți prin adăugarea unei noi secțiuni obișnuite la pagina la care lucrați.

Adăugați un rând nou

Structura coloanei

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

Dimensionare

Fără a adăuga încă module, deschideți setările de rând și modificați setările de dimensionare în fila Design.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 2
• Lățime maximă: 100%

Coloana 2 Overflow

Treceți la fila avansată și ascundeți depășirea coloanei 2 folosind o singură linie de cod CSS. Acest lucru ne va ajuta să ne asigurăm că nimic nu depășește containerul coloanei. Acest lucru va deveni deosebit de important odată ce începem să transformăm un modul de imagine într-un fundal neclar și îi mărim dimensiunea.

overflow: hidden;

Coloana 3 Overflow

Faceți același lucru pentru a treia coloană.

overflow: hidden;

Adăugați modulul de text nr. 1 în coloana 1

Adăugați o copie H2

Este timpul să începeți să adăugați module, începând cu un modul de text în prima coloană. Introduceți un conținut H2 la alegere.

Setări text H2

Treceți la fila de proiectare și modificați setările de text H2.

• Rubrica 2 Font: Poppins
• Rubrica 2 Culoare text: # 232323
• Rubrica 2 Dimensiune text: 40 px

Spațiere

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

• Marja superioară: 9vw

Adăugați un modul divizor în coloana 1

Vizibilitate

Al doilea modul de care avem nevoie în coloana 2 este un modul divizor. Asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Linia

Treceți la fila de proiectare și schimbați culoarea liniei.

• Culoare linie: # 000000

Adăugați modulul de text nr. 2 în coloana 1

Adauga continut

Continuați adăugând un alt modul de text cu un conținut de paragraf la alegere.

Setări text

Schimbați apoi setările de text.

• Font text: Poppins
• Greutatea fontului textului: ușoară
• Dimensiune text: 17 px
• Înălțimea liniei textului: 2.1em

Adăugați modulul buton la coloana 1

Adăugați o copie

Următorul și ultimul modul de care avem nevoie în coloana 1 este un modul buton. Introduceți o copie la alegere.

Setări buton

Treceți la fila de proiectare și stilizați butonul în setările butonului.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 20 px
• Culoarea textului butonului: # 000000
• Culoarea fundalului butonului: # f4f4f4
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 0 px
• Buton Font: Poppins
• Buton Font Greutate: Bold
• Stilul fontului butonului: majuscule

Spațiere

Adăugați și câteva valori de spațiere personalizate.

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

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

Încărcați imaginea 1: 1

Trecem la a doua coloană! Aici, primul modul de care avem nevoie este un modul de imagine. Încărcați o imagine cu un raport 1: 1. Aceasta înseamnă că imaginea dvs. trebuie să fie un pătrat perfect (lățimea trebuie să fie egală cu înălțimea).

Dimensionare

Treceți la fila de proiectare și activați opțiunea „Forțează lățimea completă”.

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

Adăugați modulul de imagine nr. 2 în coloana 2

Încărcați imaginea 1: 1

Al doilea modul de care avem nevoie în coloana 2 este un alt modul de imagine. Din nou, folosim o imagine cu un raport 1: 1.

Dimensionare

Treceți la fila de proiectare și modificați setările de dimensionare.

• Forțează lățimea completă: Da
• Înălțime: 320 px

Spațiere

Creați o suprapunere între acesta și modulul anterior adăugând o marjă superioară negativă.

• Marja superioară: -100px

Filtre

Apoi, vom schimba setările filtrelor. Aceasta este partea în care transformăm imaginea într-un fundal neclar.

• Saturație: 200%
• Luminozitate: 145%
• Contrast: 117%
• Estompare: 40 px

Scară de transformare

Pentru a ne asigura că imaginea acoperă întreaga lățime a coloanei, vom crește dimensiunea în setările de transformare. Datorită depășirii coloanei ascunse pe care am adăugat-o la setările rândurilor, nimic nu va depăși containerul coloanei.

• Dreapta: 180%
• Jos: 180%

Adăugați modulul CTA în coloana 2

Adauga continut

Următorul și ultimul modul de care avem nevoie în a doua coloană este un modul CTA. Introduceți o copie la alegere.

Adăugați un link

Treceți la setările linkului și adăugați o adresă URL de link pentru buton pentru a face butonul să apară în design.

Eliminați culoarea de fundal

Eliminați și culoarea de fundal.

• Utilizați culoarea de fundal: Nu

Setări text titlu

Continuați accesând fila Design și modificând setările pentru textul titlului.

• Titlu Nivel antet: H3
• Titlu Font: Poppins
• Dimensiune text titlu: 40 px
• Spațierea literelor de titlu: -1 px

Setări text corp

Modificați și setările pentru textul corpului.

• Font corp: Poppins
• Greutatea fontului corpului: ușoară
• Înălțimea liniei corpului: 2.2em

Setări buton

Împreună cu setările butonului.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 20 px
• Culoarea textului butonului: #ffffff
• Culoare gradient 1: rgba (244,244,244,0,4)
• Culoare gradient 2: rgba (255,255,255,0)
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 0 px
• Buton Font: Poppins
• Buton Font Greutate: Bold
• Stilul fontului butonului: majuscule

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

Spațiere

Nu în ultimul rând, creați o suprapunere între acest modul și fundalul neclar adăugând o marjă superioară negativă. De asemenea, lăsăm niște spații albe în partea stângă și dreaptă a modulului

• Marja superioară: -250 px
• Garnitura stânga: 2vw
• Garnitura dreapta: 2vw

Clonați toate modulele din coloana 2 și plasați duplicatele în coloana 3

După ce ați finalizat toate modulele din a doua coloană, le puteți clona și plasa duplicatele în a treia coloană.

Schimbați modulul de imagine duplicat # 1

Schimbați imaginea

Schimbați imaginea în modulul de imagine nr. 1.

Schimbați modulul de imagine duplicat # 2

Schimbați imaginea

Faceți același lucru pentru al doilea modul de imagine din coloană.

Schimbați setările filtrelor

Și modificați și setările filtrelor celui de-al doilea modul de imagine.

• Saturație: 180%
• Luminozitate: 102%
• Contrast: 117%
• Estompare: 35 px

Schimbați modulul CTA duplicat

Modificare copiere

Continuați schimbând conținutul modulului CTA.

Schimbați fundalul gradientului butonului

Împreună cu prima culoare a gradientului butonului și ați terminat!

• Culoare gradient 1: rgba (244.244.244,0.15)

previzualizare

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

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să creați fundaluri neclare folosind numai opțiunile încorporate ale Divi. Am recreat de la zero un exemplu frumos pe care îl puteți folosi pentru orice fel de site web pe care îl creați. Sperăm că acest tutorial vă va inspira să creați propriile modele personalizate folosind sfaturile care au fost partajate în acest tutorial. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.