Cum se creează un design de fundal din sticlă mată în Divi

Adăugarea unui fundal de sticlă mată pentru site-ul dvs. web poate fi un element de design proaspăt care face ca fundalurile și textul să iasă în evidență într-un mod unic. Trucul pentru crearea unui efect de fundal din sticlă mată este estomparea fundalului din spatele elementului țintă. Cu alte cuvinte, vrem să amestecăm două elemente în așa fel încât fundalul țintă să arate ca o sticlă mată care dezvăluie o versiune neclară a fundalului din spatele elementului.

În acest tutorial, vă vom arăta trei metode pentru crearea unui design de fundal din sticlă mată în Divi. Mai întâi, vom introduce puternica proprietate CSS cu filtru de fundal, care va crea fundaluri înghețate cu o singură linie de CSS. Apoi vă vom arăta alte două metode care implică stratificarea elementelor Divi (cu stiluri de fundal și filtre) pentru a crea modele frumoase de fundal mat.

Să începem!

Trage cu ochiul

Iată o privire rapidă asupra designului pe care îl vom construi în acest tutorial.

Descărcați aspectul GRATUIT

Pentru a pune mâna pe desenele din acest tutorial, 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 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!

Abonați-vă la canalul nostru Youtube

Pentru a importa aspectul secțiunii în biblioteca Divi, navigați la biblioteca Divi.

Faceți clic pe butonul Import.

În fereastra pop-up de portabilitate, selectați fila de import și alegeți fișierul de descărcare de pe computer.

Apoi faceți clic pe butonul de import.

După ce ați terminat, aspectul secțiunii va fi disponibil în Divi Builder.

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi.
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Alegeți opțiunea „Build From Scratch”.

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

Cum să creați modele de fundal din sticlă mată în Divi

Metoda 1: Crearea unui fundal de sticlă mată folosind proprietatea CSS-Filter-Filter`

În acest prim exemplu, vom demonstra cea mai ușoară metodă pentru crearea unui design de fundal de sticlă mat, folosind proprietatea CSS-filtru de fundal. Este ușor, deoarece avem nevoie doar de o linie de CSS pentru a obține rezultatul dorit. Dezavantajul este că în prezent există câteva browsere care nu acceptă filtrul de fundal (IE și Firefox).

Scopul proiectării fundalului mat nu este pur și simplu să estompeze fundalul elementului țintă, ci să estompeze fundalul din spatele elementului. Proprietatea filtru de fundal poate face acest lucru aplicând un efect de filtru de estompare elementului de sub (sau din spatele) elementului țintă.

Iată cum să o faci.

Adăugarea imaginii de fundal a secțiunii

Mai întâi, adăugați un rând cu o coloană la secțiune.

Deschideți setările secțiunii și dați-i o imagine de fundal.

Adăugarea culorii de fundal rând și a filtrului de fundal

Apoi, deschideți setările rândului și adăugați o culoare de fundal alb semitransparentă, după cum urmează:

• Culoare fundal: rgba (255.255.255,0.3)

Sub fila de proiectare, actualizați dimensiunea și spațiul rândului după cum urmează:

• Lățime: 90%
• Lățime maximă: 900 px
• Căptușeală: 5% sus, 5% jos, 5% stânga, 5% dreapta

Sub fila avansată, adăugați următorul CSS la elementul principal:

-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);

Aceasta va adăuga un filtru de estompare de 10 px pe fundalul elementului. Observați cum imaginea de fundal a secțiunii este estompată de efect, chiar dacă CSS este aplicat rândului. Puteți crește sau micșora cantitatea de neclaritate modificând valoarea pixelilor din CSS.

Adăugarea de conținut cu un modul de text

Pentru a oferi un conținut pentru fundalul nostru mat, adăugați un modul de text în coloana rândului.

Apoi lipiți următorul HTML în corp sub fila text:

<h2>Frosted Glass Background</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Pentru a lustrui designul, să actualizăm stilurile de text după cum urmează:

• Greutatea fontului textului: Semi Bold
• Culoarea textului textului: # 33345b
• Dimensiune text text: 16 px
• Înălțimea liniei de text: 2em
• Rubrica 2 Font: Poppins
• Titlul 2 Greutate font: îndrăzneț
• Rubrica 2 Stil font: TT
• Titlul 2 Alinierea textului: stânga
• Rubrica 2 Culoarea textului: # 33345b
• Titlul 2 Dimensiune text: 70 px (desktop), 40 px (tabletă), 25 px (telefon)
• Rubrica 2 Spațierea literelor: 2 px
• Titlul 2 Înălțimea liniei: 1.3em

Rezultat

Iată rezultatul final. Ți-am spus că ar fi ușor!

Metoda 2: Crearea unui fundal de sticlă mată utilizând Parallax și module stratificate

Pentru următoarea metodă, vom deveni puțin creativi cu modul în care creăm efectul de fundal din sticlă mată în Divi. Deși acest lucru nu este la fel de ușor de creat, partea pozitivă este că designul este acceptat pe toate browserele. Deci, dacă sunteți în căutarea unei soluții de încredere pentru filtrul de fundal, acest lucru ar trebui să funcționeze.

Iată cum să o faci.

Adăugarea secțiunii cu imaginea de fundal Parallax

Mai întâi, creați o nouă secțiune obișnuită sub cea pe care tocmai am creat-o.

Apoi adăugați un rând cu o coloană la secțiune.

Oferiți secțiunii o imagine de fundal cu efect Parallax folosind metoda CSS:

• Utilizați Efect Parallax: DA
• Metoda Parallax: CSS

Adăugarea aceluiași conținut ca modulul text anterior

Apoi, copiați modulul text din prima secțiune / exemplu de mai sus și lipiți-l în rândul noii secțiuni.

Setări coloană

Apoi, deschideți setările pentru coloana care conține modulul nostru de text duplicat și actualizați umplutura după cum urmează:

• Căptușeală: 10% sus, 10% jos, 10% stânga, 10% dreapta

Sub fila Avansat, actualizați vizibilitatea la depășire după cum urmează:

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Adăugați un strat de imagine de fundal neclar cu un modul de text

Acum că avem conținutul și imaginea de paralaxă a fundalului secțiunii, trebuie să adăugăm primul dintre cele două module de text (sau straturi) care vor alcătuie fundalul mat din spatele conținutului nostru.

Mai întâi, vom adăuga un modul de text care va servi ca strat de imagine neclară.

Continuați și adăugați un nou modul de text sub modulul de text existent.

Mutați modulul text deasupra modulului text care conține conținutul textului.

Apoi scoateți conținutul corpului, astfel încât să rămână gol. Vom avea nevoie doar de acest modul pentru o imagine de fundal.

Apoi, adăugați aceeași imagine de fundal la modulul text folosind același efect de paralaxă CSS:

• Utilizați Efect Parallax: DA
• Metoda Parallax: CSS

Deoarece folosim același efect de paralaxă CSS pe imaginea de fundal, nu veți observa fundalul imaginii, deoarece arată aceeași imagine în aceeași poziție fixă ​​a fundalului secțiunii.

Sub fila de proiectare, adăugați următorul filtru la modulul text:

• Estompare: 10 px

Acum avem o versiune neclară a imaginii de fundal de paralaxă.

Apoi, acordați modulului text o poziție absolută:

• Poziție: Absolută

Acum că modulul este într-o poziție absolută, putem actualiza stilul de dimensiuni astfel încât modulul să se întindă pe toată lățimea și înălțimea coloanei.

• Lățime: 100%
• Înălțime: 100%

Acum imaginea încețoșată este la locul său și putem vedea efectul de sticlă mată care intră în vigoare.

Adăugarea suprapunerii de imagine neclară cu un alt modul de text

Următorul pas este să adăugați un alt modul de text deasupra modulului de imagine cu imagine neclară pentru a servi ca o suprapunere ușoară pentru a finaliza proiectarea.

Pentru a crea suprapunerea, copiați modulul de text pentru imagine neclară.

Deschideți setările pentru modulul de text duplicat și ștergeți imaginea de fundal.

Apoi adăugați următoarea culoare de fundal:

• Culoare fundal: rgba (255,255,255,0,5)

Sub fila de proiectare, aduceți filtrul de estompare înapoi la 0 px.

Acum verificați rezultatul final.

Metoda 3: Crearea unui fundal de sticlă mată utilizând dimensiunile reale ale imaginilor și modulele stratificate

Efectul de paralaxă cu fundalul mat este răcoros, dar este posibil să nu doriți să vă limitați la efectul de paralaxă la fundalurile maturi create. Același efect se poate face folosind imagini de fundal în dimensiunea lor reală.

Pentru această metodă finală, vom crea modele de fundal mat la nivel de coloană folosind imagini în dimensiunea lor reală. Procesul este similar cu metoda 2 de mai sus. Avantajul este că puteți utiliza această metodă pentru a crea fundaluri înghețate pe mai multe coloane ale unui rând Divi.

Duplicați secțiunea anterioară

Pentru a începe proiectul, copiați a doua secțiune care conține al doilea exemplu.

Actualizați fundalul secțiunii

Deschideți setările secțiunii, ștergeți imaginea de fundal și adăugați următoarea culoare de fundal:

• Culoare fundal: # 33345b

Actualizați fundalul și capitonarea coloanei

Apoi, deschideți setările coloanei și adăugați aceeași imagine de fundal folosită pentru exemplul anterior. Doar de această dată asigurați-vă că dimensiunea imaginii de fundal este setată la Dimensiune reală:

• Imagine de fundal: dimensiune reală

Apoi, actualizați setările coloanei cu noua căptușire, după cum urmează:

• Căptușeală: 10% sus, 10% jos, 15% stânga, 15% dreapta

Actualizați imaginea modulului textului imagine neclară

Apoi, deschideți setările pentru modulul text de imagine neclară și adăugați aceeași imagine utilizată pentru fundalul coloanei, asigurându-vă că setați dimensiunea imaginii de fundal la dimensiunea reală:

• Utilizați Efect Parallax: NU
• Dimensiunea imaginii de fundal: dimensiunea reală

Schimbați dimensiunea și locația poziției modulelor de imagine neclară și suprapuse

Pentru a crea spațiul necesar în jurul modulului text de imagine neclară și al modulului text suprapus, utilizați multiselect pentru a selecta ambele module și actualizați opțiunile de dimensionare după cum urmează:

• Lățime: 80%
• Înălțime: 80%

Apoi actualizați locația poziției absolute în centru:

• Localizare: centrat

Iată rezultatul final.

Creați mai multe planuri de coloane cu ajustări minore

Puteți chiar duplica coloana pentru un aspect cu două coloane. Va trebui să ajustați dimensiunea textului antetului și umplutura coloanei pentru a vă asigura că fundalul mat este așezat în spatele conținutului. Și puteți schimba imaginile de fundal utilizate pentru coloană și modulul de text pentru imagine neclară, după cum este necesar.

Iată un exemplu de aspect cu două coloane.

Rezultat final

Iată rezultatul final al tuturor exemplelor.

Gânduri finale

În acest tutorial, v-am arătat trei metode pentru a crea modele de fundal mat în Divi. Este posibil ca unora dintre voi să vă fie mai ușor să personalizați mai întâi imaginile în Photoshop pentru acest gen de lucruri. Dar cu Divi, nu este necesar. Prima metodă profită de proprietatea CSS-backdrop-filter și este de departe cea mai ușoară și mai puternică soluție. Dar până când această proprietate nu este adoptată de toate browserele, puteți utiliza celelalte două metode din acest tutorial care utilizează generatorul Divi. Una peste alta, efectul de fundal mat poate arăta cu adevărat uimitor.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!