Cum să proiectați suprapuneri de imagini personalizate în Divi

Suprapunerile de imagini există de mult timp în designul web. Sunt minunate pentru atragerea vizitatorilor, dezvăluind conținut suplimentar și elemente de design atunci când treceți peste imagine. Deoarece aceasta este o caracteristică de design atât de populară, există multe pluginuri dedicate creării suprapunerilor de imagini. Cu toate acestea, în funcție de plugin, acestea pot fi destul de limitative sau pot fi puțin exagerate pentru ceea ce s-ar putea să aveți nevoie. De aceea, vă ajută să aveți cunoștințele necesare pentru a le construi singuri în Divi.

În acest tutorial, vă vom arăta cum să proiectați suprapuneri de imagini personalizate în Divi. Aceste suprapuneri se vor schimba și vor dezvălui elemente atunci când treceți peste imagine. Cea mai bună parte este că aveți un control complet asupra designului suprapunerilor de imagini utilizând opțiunile de proiectare încorporate ale Divi. Și, cu câteva fragmente de CSS personalizate, puteți avea câteva suprapuneri de imagini superbe pentru a vă duce site-ul la nivelul următor. Nu este necesar niciun plugin.

Să începem!

Trage cu ochiul

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

Descărcați GRATUIT aspectul Divi Image Overlays

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

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.

Crearea suprapunerilor de imagini personalizate în Divi

Construirea secțiunii, rândului și coloanelor

Pentru a începe, creați un rând cu trei coloane în secțiunea implicită.

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

• Culoare fundal: # 3a0ca3

Apoi, deschideți setările pentru coloana 1 și actualizați următoarele:

• Clasa CSS: et-overlay-container
• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Clasa CSS este necesară pentru a declanșa efectele de plutire ale articolelor suprapuse pe care urmează să le construim. Depășirea ascunsă este necesară pentru că vom avea un efect de plutire care scalează imaginea dincolo de containerul coloanei.

Adăugarea imaginii

Acum că secțiunea, rândul și coloana sunt gata, continuați și adăugați un nou modul de imagine în coloana 1. Aceasta va fi imaginea principală din spatele proiectelor noastre de suprapunere.

Încărcați o imagine care este mai mult un portret decât un peisaj. Folosesc unul care are aproximativ 800 px cu 1050 px. Asigurați-vă că este suficient de lată pentru a acoperi întreaga lățime a coloanei pe toate dimensiunile browserului.

(NOTĂ: Puteți utiliza imagini peisaj, dar poate fi necesar să reglați poziționarea elementelor suprapuse în consecință, astfel încât acestea să nu se suprapună.)

Sub fila Proiectare, actualizați următoarele:

• Marja: 0 px de jos

Sub fila avansată, adăugați următoarea clasă CSS:

• Clasa CSS: et-overlay-image

Adăugarea culorii suprapunerii imaginii utilizând un modul divizor

Pentru a crea culoarea suprapunerii imaginii, vom folosi un modul divizor. Ideea este să creați o copertă peste imagine făcând separatorul să se întindă pe întreaga înălțime și lățime a coloanei, astfel încât să stea perfect peste imagine. Odată ajuns în poziție, puteți regla culoarea de fundal a modulului divizor pentru a obține culoarea suprapusă dorită.

Mai întâi, adăugați un modul divizor sub imagine.

Apoi poziționați divizorul ca absolut, astfel încât să stea deasupra imaginii:

• Poziție: Absolută

Sub fila conținut, actualizați următoarele:

• Show Divider: NU
• Culoare fundal: rgba (247,37,133,0,8)

Apoi actualizați înălțimea și lățimea separatorului:

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

Odată ce designul este la locul său, adăugați următoarea clasă CSS la divizor:

• et-overlay-item

(NOTĂ: Această clasă ar trebui adăugată la toate elementele de proiectare a suprapunerii pe care doriți să le afișați numai în cursă. Dacă nu doriți ca elementul să fie ascuns inițial, lăsați-l afară.)

Pentru a ajuta la urmărirea elementelor / modulelor de proiectare, deschideți straturile modale și etichetați modulul divizor („culoare de suprapunere”).

Adăugarea textului antet suprapus

Sub modulul divizor, adăugați un nou modul de text. Acesta va servi drept text de antet suprapus, care va apărea în partea de sus a imaginii în cursa.

Actualizați conținutul cu un titlu H2:

<h2>Coaching</h2>

Apoi actualizați eticheta modulului text pentru a face referire ulterior.

Sub setările de proiectare a textului, actualizați următoarele:

• Aliniere text: centru
• Culoarea textului: deschis

• Rubrica 2 Font: Cormoran Garamond
• Titlul 2 Greutate font: îndrăzneț
• Rubrica 2 Dimensiune text: 40 px

• Lățime: 100%
• Lățime maximă: 85%

Sub fila avansată, actualizați poziția după cum urmează:

• Poziție: Absolută
• Locație: centru de sus
• Decalaj vertical: 10%

(NOTĂ: Decalajul vertical poate fi necesar să fie ajustat în funcție de dimensiunea raportului de aspect al imaginii. De exemplu, o imagine de tip peisaj poate avea nevoie de un decalaj mai mic)

Apoi, adăugați următoarele clase CSS la modulul text:

• Clasa CSS: et-overlay-item move-down

În plus față de clasa „et-overlay-item”, adăugăm o clasă suplimentară de „deplasare în jos” pentru a utiliza CSS personalizat pentru a muta ușor titlul în jos la trecere.

Crearea textului corpului suprapus

Pentru a crea textul corpului suprapunerii, putem duplica modulul text utilizat pentru antetul suprapunerii. Înainte de a actualiza setările pentru duplicat, schimbați eticheta în „overlay body”.

Deschideți setările de text pentru noul modul de text și actualizați conținutul corpului cu câteva propoziții de text de paragraf.

Sub fila avansată, schimbați locația absolută a modulului în centru.

Deoarece nu vrem ca acesta să se deplaseze pe hover (să apară numai), actualizați clasa CSS pentru a include doar următoarele:

• Clasa CSS: et-overlay-item

Crearea butonului Suprapunere

Ultimul element suprapus de pe această imagine va fi butonul. Pentru a crea butonul, adăugați un nou modul de buton sub modulul de text „body text”.

Înainte de a schimba designul, actualizați poziția butonului după cum urmează:

• Poziție: absolută
• Decalaj vertical: 10%

Acum butonul ar trebui să fie centrat în partea de jos a imaginii.

În fila avansată, actualizați clasa CSS și adăugați un fragment de CSS personalizat la elementul principal, după cum urmează:

• Clasa CSS: mutare et-overlay-item
• Element principal CSS:

  min-width: 15em

Observați că există o clasă suplimentară adăugată butonului pentru a-l muta ușor în sus în cursă. Aceasta este pentru a completa mișcarea descendentă a textului titlului în timpul deplasării.

Apoi actualizați următoarele setări de proiectare:

• Aliniere buton: centru
• Dimensiune text buton: 14 px
• buton Culoare fundal: # 4361ee
• buton Lățime margine: 0 px
• Distanța dintre litere și butoane: 0,1em
• Buton Font Greutate: Bold
• Stil Font Buton: TT
• Căptușeală: 0,8 em sus, 0,8 em jos, 0 px stânga, 0 px dreapta

Adăugarea CSS personalizat cu modulul de cod

Înainte de a crea alte câteva versiuni ale acestui design de suprapunere, să adăugăm CSS personalizate necesare pentru efectele de plecare a suprapunerii. Pentru a face acest lucru, adăugați un modul de cod sub buton.

Apoi lipiți următorul CSS în conținutul codului. Nu uitați să înfășurați codul în etichetele de script necesare.

<style>
 @media all and (min-width: 981px) {
  
  .et-fb-root-ancestor .et-overlay-item {
    opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/
  }
  .et-overlay-item {
    opacity: 0; /*hides overlay items by default*/
    margin-bottom: 0px;
  }
  .et-overlay-item, .et-overlay-image {
    transition: all 400ms !important; /*sets transition speed of all overlay items*/
  }
  .et-overlay-container:hover .et-overlay-item {
    opacity: 1; /*reveals hidden overlay items on hover*/
  }
  .et-overlay-container:hover .et-overlay-image {
    /*add new styles here to change image on hover*/
  }
  .et-overlay-container:hover .et-overlay-image.et-scale {
    transform: scale(1.2); /*adjust scale of image here*/
  }
  .et-overlay-container:hover .et-overlay-image.et-rotate {
    transform: scale(1.4)
    rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/
  }  
  .et-overlay-container:hover .et-overlay-item.move-up {
    margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/
  }
  .et-overlay-container:hover .et-overlay-item.move-down {
    margin-top: 10%; /*adjust how far you want the overlay item to move down*/
  }

}
</style>

Codul este comentat astfel încât să puteți înțelege unde puteți ajusta CSS după cum este necesar.

Duplicarea coloanei pentru mai multe modele

Deși avem deja două coloane goale suplimentare cu care să lucrăm, este mai ușor să transferați toate modulele și să proiectați în prima coloană într-o nouă coloană duplicând întreaga coloană. Pentru a face acest lucru, deschideți straturile modale, ștergeți cele două coloane goale, apoi copiați de două ori coloana care conține designul suprapunerii imaginii. Ar trebui să aveți în total trei coloane cu modele identice.

Crearea proiectului de suprapunere a imaginii # 2

Acum, că avem toate elementele de design în loc în fiecare dintre coloane, putem modifica designul pentru a crea suprapuneri suplimentare de imagine. Pentru următorul design, vom plasa butonul în centrul imaginii (întotdeauna vizibil). Apoi vom muta antetul și textul corpului în vizualizare din partea de sus și de jos a imaginii.

Ajustați locația textului corpului și clasa CSS

Deschideți setările pentru modulul de text al corpului suprapus în coloana 2 și actualizați poziția:

• Locație: Centrul de jos
• Decalaj vertical: 5%

Apoi actualizați clasa CSS cu următoarele:

• Clasa CSS: mutare et-overlay-item

Ajustați locația butonului și clasa CSS

Apoi, deschideți setările pentru butonul din coloana 2 și actualizați următoarea locație a poziției:

• Locație: Centru Centru

Apoi scoateți Clasa CSS pentru că vrem să menținem butonul vizibil întotdeauna.

Deschideți setările pentru modulul divizor (culoarea suprapunerii) și schimbați fundalul după cum urmează:

• Culoare fundal: rgba (67,97,238,0,8)

Apoi deschideți setările pentru buton și schimbați culoarea de fundal:

• Culoarea fundalului butonului: # f72585

Reglați imaginea și clasa CSS

Apoi, deschideți setările pentru imagine și încărcați o imagine nouă (dacă doriți).

Apoi adăugați următoarea clasă CSS la imagine:

• Clasa CSS: et-overlay-image et-scale

Observați că, în plus față de clasa „et-overlay-image”, există o clasă suplimentară numită „et-scale” care va face ca imaginea să se mărească în dimensiune, creând un efect de mărire la plecare.

Crearea proiectului de suprapunere a imaginii # 3

Acum este timpul să creați al treilea design de suprapunere a imaginii în coloana 3.

Ajustați conținutul textului corpului suprapus și clasa CSS

Începeți prin a deschide setările pentru modulul de text al corpului suprapus în coloana 3 și adăugați titlul H2 deasupra textului de paragraf. Acum cele două vor fi în interiorul unui modul în loc de două.

Apoi scoateți Clasa CSS astfel încât textul să rămână vizibil deasupra imaginii.

Ajustați butonul Offset și clasa CSS

Deschideți setările pentru modulul buton și actualizați decalajul vertical al poziției:

• Decalaj vertical: 5%

Ștergeți titlul suprapus

Apoi, ștergeți modulul text de antet suprapus.

Reglați culoarea suprapunerii și clasa CSS

Deschideți setările pentru modulul divizor (culoare de suprapunere) și actualizați fundalul cu următoarele:

• Culoare stânga gradient de fundal: rgba (67,97,238,0,8)
• Culoarea dreaptă a gradientului de fundal: rgba (247,37,133,0,8)
• Poziția inițială: 25%
• Poziție finală: 75%

Și din moment ce dorim să păstrăm vizibilă suprapunerea gradientului în orice moment, scoateți Clasa CSS.

Ajustați imaginea CSS Class

În cele din urmă, vom adăuga o clasă CSS suplimentară („et-rotate”) la imaginea principală, care va redimensiona și roti imaginea pe hover.

• Clasa CSS: et-overlay-image et-rotate

Atingeri finale

Înainte de a verifica rezultatele finale, trebuie să facem câteva ajustări.

Scoateți marja de jos implicită pentru toate modulele

În mod implicit, fiecare modul vine cu o marjă inferioară de 30 px datorită lățimii implicite a jgheabului (3) din setările de rând. Acest lucru poate elimina poziționarea modulelor în designul nostru de suprapunere. Pentru a le scoate, deschideți setările modulului de imagine pentru una dintre imaginile din design. Deoarece am actualizat deja marja cu o marjă inferioară de 0 px, putem extinde această marjă la toate modulele.

Faceți clic dreapta pe setarea marginii și alegeți „extindeți marja”.

Apoi alegeți să extindeți marginea la Toate modulele de pe pagină.

Ștergeți modulele de cod duplicat

Asigurați-vă că ștergeți module de cod suplimentare care au fost reportate atunci când copiați prima coloană. Ar trebui să aveți doar unul. Puteți face acest lucru cu ușurință din straturile modale.

Rezultate finale

Acum că cele trei modele noastre sunt complete, să verificăm rezultatele finale ale proiectelor noastre de suprapunere a imaginilor.

Și iată designul pe mobil. Efectele de deplasare prin suprapunere se aplică numai desktopului prin interogarea personalizată CSS media din modulul de cod. Prin urmare, suprapunerile vor fi vizibile întotdeauna pe mobil.

Gânduri finale

Construirea suprapunerilor de imagini personalizate este de fapt foarte distractiv. Există nenumărate modele pe care le puteți testa vizual cu constructorul Divi și este nevoie doar de o cantitate mică de CSS personalizate pentru a aplica efectele hover. Chiar și efectele de hover pentru elementele suprapuse necesită CSS personalizat, puteți profita în continuare de opțiunile de hover încorporate pentru a viza fiecare dintre elementele de suprapunere în mod individual.

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

Noroc!