Cum să creați un colaj de imagine interactiv utilizând opțiunile de poziție ale lui Divi

Noile opțiuni de poziție ale lui Divi deschid ușa pentru crearea de machete unice de colaj de imagini folosind proprietatea poziției absolute. Acest lucru vă permite să realizați destinații de plasare mai precise pentru fiecare element al designului dvs. Și odată ce combinați asta cu nenumăratele combinații de setări de design din cadrul Divi, puteți proiecta câteva colaje de imagini destul de uimitoare.

În acest tutorial, vă voi arăta cum să utilizați opțiunile de poziție încorporate ale Divi pentru a crea în câteva minute un colaj de imagine interactiv frumos pentru site-ul dvs. Divi.

Să începem!

Trage cu ochiul

Iată o privire rapidă asupra aspectului interactiv al colajului de imagine pe care îl vom construi în acest tutorial.

Descărcați aspectul GRATUIT

Pentru a pune mâna pe aspectul colajului de imagini 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 în pagina dvs., pur și simplu extrageți fișierul zip și trageți fișierul JSON î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 colajului de imagine interactiv cu opțiunile de poziție ale lui Divi

Optimizarea rândului și a coloanei

Pentru a începe, creați un rând cu o coloană.

Setări rând

Apoi, trebuie să actualizăm rândul astfel încât să nu avem spațiu suplimentar între module (prin lățimea jgheabului), așa că vom seta lățimea jgheabului la 1. De asemenea, trebuie să ne asigurăm că rândul se întinde pe toată lățimea ferestrei browserului deci putem profita de unitățile de lungime vw pentru a ne poziționa imaginile (unitatea de lungime vw (viewport width) este legată de lățimea ferestrei browserului). Cu lățimea setată la 100%, putem folosi unități de lungime vw pentru a ne poziționa imaginile în rândul / coloana, astfel încât poziția să rămână intactă pe toate lățimile browserului pentru un design receptiv fără probleme. Și pentru a ascunde orice depășire de imagine în afara rândului, trebuie să setăm depășirea la ascuns.

Pentru a face acest lucru, optimizați setările rândului după cum urmează:

Setarea înălțimii coloanei

În mod implicit, înălțimea coloanei este determinată de înălțimea conținutului (sau modulelor Divi) pe care le conține. Modulele Divi (ca toate divs-urile din HTML) vor avea o poziție statică în mod implicit, ceea ce înseamnă că vor adăuga spațiu / înălțime reală la coloana părinte, deoarece este poziționat în fluxul normal al paginii. Cu toate acestea, modulele Divi care au o poziție absolută, ies din fluxul normal și nu vor crea spațiu / înălțime reală pentru coloană. Din acest motiv, trebuie să adăugăm o înălțime specificată pentru coloană, astfel încât să putem poziționa imaginile într-un spațiu prestabilit.

Pentru a face acest lucru, deschideți setările rândului și actualizați setările coloanei adăugând următorul CSS personalizat la elementul principal.

height: 40vw;

Sub fila telefon, restaurați înălțimea la starea implicită, deoarece schimbăm și imaginile înapoi într-o poziție statică pe telefon. Adăugați următorul CSS personalizat în fila telefon:

height: auto !important;

Adăugarea textului titlului

Odată cu înălțimea coloanei setată, putem începe să adăugăm elementele noastre poziționate absolute la coloană. Să începem prin adăugarea unui modul de text pentru titlul aspectului colajului nostru de imagini.

Conținutul modulului text

Apoi actualizați textul cu următorul conținut:

<h2>Recent Work</h2>

Setări modul modul text

Apoi actualizați setările modulului text după cum urmează:

• Titlul 2 Font: Limelight
• Titlul 2 Aliniere text: centru
• Rubrica 2 Culoare text: # 24005b
• Rubrica 2 Dimensiune text: 5vw (desktop și tabletă), 50 px (telefon)
• Lățime: 100%
• Lățime maximă: 35vw (desktop și tabletă), 100% (telefon)
• Poziție: Absolută (desktop), implicită (telefon)
• Offset orizontal (desktop): 35vw

Crearea și poziționarea imaginilor

Acum că titlul este la locul său, să creăm prima imagine pentru colajul nostru interactiv de imagini. Ideea este să creăm prima cu toate optimizările, astfel încât să o putem duplica pentru a facilita crearea și poziționarea restului imaginilor pentru colaj.

Optimizarea primei imagini cu Hover Effects, Lightbox și poziționare absolută.

Mai întâi, adăugați un modul de imagine sub modulul text.

Apoi încărcați o imagine în modul și alegeți opțiunea pentru a deschide imaginea într-o casetă lightbox. Acum imaginea se va afișa într-o casetă lightbox pe clic.

Scalați imaginea pe Hover

În plus față de interacțiunea lightbox, adăugați un efect de plutire care face ca imaginea să crească puțin mai mult. Pentru aceasta, actualizați următoarea opțiune de transformare:

• Scala de transformare (plimbare): 115%

Poziționare absolută cu prioritate index Z pe Hover

Pentru a ne poziționa imaginea, vom folosi o poziție absolută cu unități de lungime vw. Actualizați opțiunile de poziție după cum urmează:

Pe desktop (și tabletă)

• Poziție: absolută
• Locație: stânga sus
• Decalaj vertical: 5vw
• Decalaj orizontal: -2vw

La telefon

• Poziție: implicit

Pe Hover

• Indicele Z: 2

Proiectare imagine și setări responsive

Apoi actualizați următoarele:

• Aliniere imagine: stânga (desktop), centru (telefon)
• Lățime: 75% (telefon)
• Lățime maximă: 20vw (desktop și tabletă), 100% (telefon)
• Marja (telefon): 30 px jos
• Box Shadow: vezi captura de ecran
• Saturație: 0% (desktop), 100% (trecere)

Utilizarea primei imagini ca șablon pentru crearea și poziționarea rapidă a celorlalte imagini

Odată ce prima imagine este completă, este foarte ușor să creați imagini noi pentru a construi colajul interactiv al imaginii. Este și un instrument puternic de proiectare, deoarece veți putea să glisați imaginile la locul lor și să ajustați dimensiunea în timp ce vizualizați designul în timp real.

Iată procesul ...

1. Duplicați imaginea făcând clic pe pictograma duplicat. Imaginea duplicat va fi poziționată absolut în același loc direct deasupra imaginii pe care o copiați.
2. Trageți imaginea în loc. Deoarece imaginea duplicat moștenește unitatea de lungime vw a imaginii anterioare, puteți utiliza pictograma de glisare pentru a poziționa imaginea exact unde doriți în rând.
3. Actualizați imaginea cu una nouă.
4. Reglați dimensiunea imaginii utilizând opțiunile de dimensiune încorporate.

Iată o ilustrare a ceea ce ar arăta atunci când creați a doua imagine.

Partea interesantă a acestui proces este că poziția (decalaje verticale și orizontale) va fi determinată ori de câte ori trageți imaginea în poziție. Nu este nevoie să actualizați manual pozițiile de offset în setări.

Dar, astfel încât să puteți vedea compensările pe care le-am folosit pentru acest exemplu, le voi include pentru fiecare imagine de mai jos, împreună cu ajustările de dimensiune.

Imagine # 2 Actualizări

• Decalaj vertical: 10,06 vw
• Decalaj orizontal: 16,51 vw
• Lățime maximă: 18 vw

Imagine # 3 Actualizări

• Decalaj vertical: 24,25vw
• Decalaj orizontal: 7.13vw
• Lățime maximă: 20vw

Imaginea # 4 Actualizări

• Decalaj vertical: 17,69vw
• Decalaj orizontal: 31,91vw
• Lățime maximă: 18vw

Imagine # 5 Actualizări

• Decalaj vertical: 12vw
• Decalaj orizontal: 46,82vw
• Lățime maximă: 15vw

Actualizări ale imaginii # 6

• Decalaj vertical: 19.13vw
• Decalaj orizontal: 58,84vw
• Lățime maximă: 12vw

Actualizări ale imaginii # 7

• Decalaj vertical: 28,24vw
• Decalaj orizontal: 54,2vw
• Lățime maximă: 10vw

Actualizări ale imaginii # 8

• Decalaj vertical: 32,5vw
• Decalaj orizontal: 74,04vw
• Lățime maximă: 8vw

Imagine # 9 Actualizări

• Decalaj vertical: 1,01vw
• Decalaj orizontal: 75,5vw
• Lățime: 27vw
• Lățime maximă: 27vw

Adăugați o imagine de fundal

Pentru o ultimă atingere, adăugați o imagine de fundal la secțiune și ați terminat!

Rezultat final

Așa va arăta galeria de imagini interactive pe desktop și tabletă. Observați efectele de plutire care aduc imaginea în față, afișează versiunea în culori a imaginii și redă imaginea la scară mai mare. Apoi puteți face clic pe imagine pentru a afișa efectul lightbox.

Iată designul de pe ecranul telefonului.

Schimbarea punctului de locație pentru imagini pentru diferite modele de aspect

Deoarece compensările pentru fiecare dintre imagini sunt relative la punctul de locație, putem schimba punctul de locație original pentru ca imaginile să vadă designul nostru provenind din direcții diferite în câteva secunde.

Pentru a face acest lucru, utilizați funcția de selectare multiplă a Divi pentru a selecta toate modulele de imagine. Apoi deschideți una dintre setările modulului de imagine pentru a afișa setările modale ale elementului.

Apoi, puteți schimba locația în fiecare dintre cele patru colțuri pentru structuri diferite ale aspectului.

Locația din colțul din dreapta sus

Locația din colțul din stânga jos

Locația din colțul din dreapta jos

Gânduri finale

Noile opțiuni de poziționare ale Divi sunt atât puternice, cât și convenabile. Și, așa cum am experimentat în acest tutorial, acestea ne oferă câteva instrumente minunate de proiectare pentru a proiecta machete unice pentru imaginile noastre. Sperăm că acest colaj interactiv de imagini vă va servi ca o mică inspirație pentru următorul dvs. proiect.

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

Noroc!