Cum se utilizează opțiunile de poziție ale Divi pentru a crea pachete de imagini

Indiferent dacă sunteți sau căutați un aspect nou pentru o galerie de imagini sau doriți doar un afișaj frumos pentru imaginile produselor, acest tutorial ar trebui să vă ajute. În mod normal, atunci când adăugăm imagini pe un site web Divi, putem limita designul la o imagine pe coloană. În timp ce acesta este în mod tradițional un design sigur și curat, este posibil să găsiți că gruparea imaginilor în aceeași coloană poate crea modele frumoase de pachete de imagini care arată excelent în aspectele coloanei singulare sau multiple.

În acest tutorial, vă vom arăta cum să utilizați opțiunile de poziție încorporate ale Divi pentru a proiecta 3 pachete de imagini creative pe care le puteți utiliza pentru site-ul dvs. web în tot felul de moduri.

Să începem.

Trage cu ochiul

Iată o privire rapidă asupra proiectelor pe care le vom construi în acest tutorial.

Design pachet de imagini # 1

Începeți proiectarea clădirii # 1

Design pachet de imagini # 2

Începeți proiectarea clădirii # 2

Design pachet de imagini # 3

Începeți proiectarea clădirii # 3

Descărcați aspectul GRATUIT

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.

Proiectarea pachetului de imagini nr. 1

Pentru acest prim proiect de pachet de imagini, vom poziționa două imagini (ușor rotite) pe fiecare parte a unei imagini centrale.

Începeți prin adăugarea unui rând cu o coloană la o secțiune obișnuită.

Adăugați o imagine de mijloc

În interiorul coloanei, adăugați un modul de imagine.

Apoi încărcați o imagine în modul.

Pentru aceste imagini, vom folosi capturi de ecran din pachetul de formare a antrenorilor de fitness. Fiecare dintre ele ar trebui să aibă 880 px pe 1200 px.

Deschideți setările de imagine și actualizați următoarele:

• Lățime: 50%
• Alinierea modulului: centru

Adăugați o umbră de casetă după cum urmează:

• casetă Shadow: vezi captura de ecran
• Box Shadow Vertical Position: 0px
• Puterea neclarității umbrei cutiei: 38 px
• Puterea răspândirii umbrei cutiei: 5 px
• Culoare umbră: rgba (0,0,0,0,2)

Apoi setați indexul Z la 1 astfel încât să rămână deasupra celorlalte imagini din pachet.

• Indicele Z: 1

Adăugați o imagine din stânga

Pentru a crea imaginea din stânga în pachet, adăugați o imagine nouă sub imaginea din mijloc.

Actualizați imaginea cu una nouă (asigurați-vă că toate au aceeași dimensiune pentru cele mai bune rezultate).

Sub fila de proiectare, actualizați lățimea după cum urmează:

• lățime: 30%

Apoi adăugați umbra casetei după cum urmează:

• Box Shadow: vezi captura de ecran
• Culoare umbră: rgba (0,0,0,0,2)

Apoi, acordați imaginii o poziție absolută în locația centrală stângă, astfel încât să stea adiacentă imaginii din mijloc pe partea stângă.

• poziție: absolută
• Locație: centru stânga

Pentru a oferi imaginii o mică rotație, actualizați opțiunea de rotire a transformării după cum urmează:

Transformă Rotire Axa Z: -10 grade

Adăugați imaginea potrivită

Pentru a crea imaginea potrivită, deschideți caseta Straturi și copiați imaginea din stânga.

Etichetați modulele de imagine (imaginea din stânga, imaginea din dreapta etc.), astfel încât să le puteți identifica cu ușurință ulterior. Apoi deschideți setările pentru imaginea duplicată și reglați locația după cum urmează:

• locație: centru dreapta

Apoi reglați opțiunea de rotire a transformării după cum urmează:

• Transformare Rotire index Z: 10 grade

Nu uitați să schimbați imaginea duplicată cu una nouă.

Acum verificați rezultatul de până acum.

Adăugarea pachetului de imagini în mai multe coloane

Deoarece imaginile sunt poziționate într-o singură coloană, puteți adăuga cu ușurință acest design de pachet de imagini la aspectele de coloane multiple.

Pentru a adăuga pachetul de imagini în mai multe coloane, copiați rândul care conține pachetul de imagini curent.

În rândul duplicat, copiați coloana pentru a crea o altă coloană cu pachetul de imagini inclus. Aceasta va crea pachetele de imagini într-un aspect cu două coloane.

Pentru a crea un rând de trei pachete de imagini, duplicați rândul din două coloane, apoi duplicați una dintre coloanele din rândul duplicat. Acest lucru vă va oferi un aspect cu trei coloane.

Rezultat final

Iată designul final pentru pachetul de imagini nr. 1.

Proiectarea pachetului de imagini nr. 2

Următorul design prezintă un pachet de imagini cu cinci imagini - o imagine în centru și patru în fiecare colț al coloanei.

Pentru a începe, creați o nouă secțiune obișnuită cu un sfert de jumătate, un sfert de rând de coloană.

Adăugați o imagine de centru

În coloana din mijloc, adăugați un modul de imagine.

Apoi încărcați o imagine în modul. Folosim imagini din pachetul de amenajare a magazinului de mobilă (fiecare 800 px până la 1200).

Sub fila Proiectare, actualizați următoarele:

• Culoare fundal: # f7f3ec

• Lățime: 55%
• Alinierea modulului: centru

• Marja: 0 px
• Căptușeală: 5% sus, 5% jos, 5% stânga, 5% dreapta

Sub fila avansată, creșteți indexul Z cu 1 pentru a vă asigura că imaginea rămâne deasupra celorlalte imagini din spațiul Z.

• Indicele Z: 1

Adăugați o imagine din stânga sus

Pentru a adăuga imaginea din stânga sus, adăugați un nou modul de imagine sub imaginea centrală din coloana din mijloc.

Încărcați o nouă imagine în modul.

Apoi actualizați setările de proiectare după cum urmează:

• Lățime: 40%
• Marja: 0 px de jos

Spațiere coloană

Înălțimea coloanei este determinată de înălțimea imaginii centrale și de cantitatea de umplutură de sus și de jos pe care o adăugăm. Deci, pentru a oferi imaginilor noastre absolut poziționate spațiul adecvat, trebuie să mărim înălțimea coloanei prin creșterea căptușelii superioare și inferioare.

• Căptușeală (desktop): 12% sus, 12% jos
• Căptușeală (tabletă): 24% sus, 24% jos

Apoi, acordați imaginii din stânga sus un pozitiv absolut după cum urmează:

• Poziție: Absolută
• Locație: stânga sus

Adăugați o imagine din dreapta sus

Acum că imaginea din stânga sus este la locul său, copiați imaginea pentru a crea imaginea din dreapta sus.

(În acest moment, este o idee bună să adăugați etichete la fiecare dintre imagini pentru o identificare ușoară ulterior.)

Deschideți imaginea duplicat (dreapta sus) și actualizați locația poziției absolute:

• Locație: dreapta sus

Adăugați imaginea din stânga jos

Pentru a crea imaginea din stânga jos, copiați imaginea din dreapta sus și actualizați etichetele după cum este necesar.

Deschideți setările pentru imaginea duplicată (stânga jos) și actualizați locația poziției absolute:

• Locație: stânga jos

Adăugați imaginea din dreapta jos

Pentru a crea imaginea din dreapta jos, copiați imaginea din stânga jos și actualizați eticheta după cum este necesar. Apoi actualizați imaginea și dați-i o nouă locație:

• Locație: dreapta jos

Adaugă Box Shadow Design Accent

Pentru a adăuga un accent de design frumos, putem adăuga o umbră de casetă în imaginea din stânga sus, după cum urmează:

• Box Shadow: vezi captura de ecran
• Poziție orizontală a umbrei cutiei: -170px
• Box Shadow Vertical Position: 170px
• Culoare umbră: rgba (36,57,74,0.07)

Adăugați un accent de design cutie-umbră gratuit în imaginea din dreapta sus, după cum urmează:

• Box Shadow: vezi captura de ecran
• Poziție orizontală a umbrei cutiei: 170 px
• Box Shadow Vertical Position: 170px
• Culoare umbră: rgba (36,57,74,0.07)

Adăugați text în coloana din stânga

Pentru a adăuga text la design, adăugați un nou modul de text în coloana din stânga.

Conţinut

Apoi actualizați conținutul cu următoarele:

<h2>Image Bundle</h2>

Proiectare text

Sub fila Proiectare, actualizați următoarele:

• Rubrica 2 Font: Montserrat
• Rubrica 2 Stil font: TT
• Titlul 2 Alinierea textului: dreapta
• Rubrica 2 Culoare text: # 24394a
• Rubrica 2 Dimensiune text: 34 px
• Rubrica 2 Spațierea literelor: 4 px
• Titlul 2 Înălțimea liniei: 1.3em

Căptușirea coloanei din stânga

Pentru a reda puțin textul, deschideți setările pentru coloana din stânga și actualizați următoarea padding:

• Căptușeală: 20% rămas

Adăugați text în coloana din dreapta

Pentru a crea textul coloanei din dreapta, copiați modulul de text din coloana din stânga și lipiți-l în coloana din dreapta. Apoi deschideți setările de text și actualizați următoarele:

• Titlul 2 Aliniere text: stânga

Căptușirea coloanei din dreapta

La fel cum am făcut pentru coloana din stânga, adăugați următoarea umplere în coloana din dreapta (coloana 3) pentru a reduce modulul text.

• Căptușeală: 33% top

Fundalul secțiunii

Pentru a termina proiectarea, deschideți setările secțiunii și adăugați următoarea culoare de fundal:

• Culoare fundal: # f7f3ec

Iată rezultatul de până acum.

Adăugarea pachetului de imagini în mai multe coloane

Pentru a adăuga acest pachet de imagini în mai multe coloane, copiați rândul și apoi ștergeți coloanele din stânga și din dreapta din rândul duplicat, lăsând doar coloana cu pachetul de imagini.

Folosind selecția multiplă, selectați imaginea din stânga sus și imaginea din dreapta sus. Deschideți setările și scoateți umbra cutiei.

Apoi copiați coloana o dată sau de două ori pentru a crea coloanele multiple cu pachetele de imagini incluse.

Dacă creați un aspect cu trei coloane pentru pachetul dvs. de imagini, deschideți setările coloanei pentru fiecare coloană și actualizați umplutura după cum urmează:

• căptușeală: 8% sus, 8% jos

Rezultat final

Iată rezultatul final.

Și iată-l pe mobil.

Design pachet de imagini # 3

Pentru acest ultim design de pachet de imagini, vom poziționa 5 imagini una lângă alta, cu o rotație subtilă 3D, pentru a crea un afișaj frumos pentru lucruri precum teme pentru copii sau pachete de aspect.

Adăugați rând

Pentru a începe, adăugați un rând cu o coloană la o secțiune obișnuită.

Adăugați o imagine de mijloc

În interiorul rândului, adăugați un modul de imagine.

Apoi încărcați o imagine în modulul imagine. Folosim aceleași capturi de ecran de 880px la 1200px din pachetul de formare a antrenorului de fitness pe care l-am folosit pentru proiectarea nr. 1.

Sub fila Proiectare, actualizați opțiunile de dimensionare după cum urmează:

• Lățime: 30%
• Alinierea modulului: centru

Apoi dați imaginii o umbră subtilă de cutie:

• Box Shadow: vezi captura de ecran
• Box Shadow Vertical Position: -12px
• Puterea neclarității umbrei cutiei: 28 px
• Culoare umbră: rgba (0,0,0,0.11)

Apoi, scoateți marja de jos implicită setând-o la 0 px.

• Marja: 0 px de jos

Pentru a vă asigura că imaginea rămâne deasupra celorlalte imagini atunci când se suprapun, reglați indexul Z.

• Indicele Z: 2

Adăugați perspectiva coloanei

Înainte de a adăuga restul imaginilor la pachetul de imagini, trebuie să adăugăm CSS personalizat la coloană, care va adăuga perspectivă imaginilor atunci când le rotim folosind opțiunile de transformare. Acest lucru creează un efect 3D realist.

Adăugați o imagine din stânga mijlocie

Acum, că avem perspectiva noastră, putem începe să adăugăm celelalte imagini.

Pentru a crea imaginea din stânga mijlocie, copiați imaginea din mijloc.

Actualizați etichetele imaginii din caseta Straturi după cum este necesar, apoi actualizați modulul de imagine duplicat cu o imagine nouă.

Deschideți setările pentru imagine și actualizați poziția poziției absolute și indexul Z după cum urmează:

• Locație: stânga jos
• Indicele Z: 1

Apoi adăugați următoarele opțiuni de transformare pentru a poziționa și roti imaginea.

• Transformă axa X tradusă: 75%
• Transformare Rotire axă X: 30 grade

Adăugați o imagine din stânga

Pentru a crea imaginea din stânga, copiați imaginea din stânga din mijloc pe care tocmai am creat-o.

Deschideți setările pentru noua imagine și actualizați lățimea:

• Lățime: 20%

Apoi reglați opțiunea de traducere transformată după cum urmează:

• Transformă axa X X: 0 px

Apoi reglați indexul Z astfel încât imaginea să rămână în spatele imaginii din stânga-mijloc.

• Indicele Z: 0

Adăugați o imagine din dreapta mijlocie

Apoi, vom adăuga o imagine din dreapta mijlocie la pachetul de imagini.

Pentru a crea imaginea, deschideți fereastra popup Straturi. Apoi copiați imaginea din stânga mijlocie, trageți imaginea duplicată sub imaginea din stânga, apoi etichetați-o corespunzător (adică „imaginea din mijlocul dreapta”).

Deschideți setările pentru imaginea din dreapta-mijloc și modificați locația poziției absolute după cum urmează:

• Locație: dreapta jos

Apoi reglați opțiunile de transformare după cum urmează:

• Transformă axa X tradusă: -75%
• Transformare Rotire axă X: -30 grade

Adăugați o imagine corectă

Pentru a crea imaginea potrivită (ultima), putem copia imaginea din stânga. Apoi trageți imaginea duplicat sub imaginea din dreapta-mijloc și etichetați-o „imagine dreaptă”.

Deschideți setările de imagine potrivite și actualizați locația poziției absolute după cum urmează:

• Locație: dreapta jos

Apoi, reglați rotația transformării.

• Transformare Rotire axă X: -30 grade

Verificați rezultatul de până acum.

Și aici este același pachet de imagini adăugat mai multor coloane.

Gânduri finale

Odată ce înțelegem cum funcționează opțiunea de poziție absolută a lui Divi, o putem folosi pentru a crea câteva modele de pachete de imagini destul de minunate. Cea mai bună parte a acestor pachete de imagini este că acestea există într-o singură coloană, astfel încât să arate grozav pe mai multe coloane și să se potrivească perfect și pe mobil.

Sper că acest lucru vă oferă o inspirație pentru a crea afișaje uimitoare de imagini pentru următorul dvs. proiect.

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

Noroc!