Cum se creează module flotante care se ciocnesc în spațiul 3D în Divi

Este întotdeauna distractiv să explorezi noi modele care sunt posibile folosind Divi. Și astăzi, vom folosi Divi pentru a explora spațiul 3D! Din punct de vedere tehnic, vom explora cum să proiectăm module plutitoare care par să se ciocnească în spațiul 3D. Acest design va funcționa bine ca un mod creativ de a surprinde vizitatorii, arătând că aveți o „întindere” de servicii, produse sau resurse pe site-ul dvs. web.

Evident, acest tutorial nu se va compara cu ceea ce îmi imaginez că ar fi explorarea spațiului din viața reală. Dar, sperăm că voi, exploratorii Divi, puteți afla câteva lucruri pe parcurs.

Trage cu ochiul

Iată o scurtă privire asupra designului pe care îl vom construi împreună.

Descărcați GRATUIT modulele plutitoare care se ciocnesc în aspectul spațiului 3D

Pentru a pune mâna pe designul încorporat în 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?

Abonați-vă la canalul nostru Youtube

Noțiuni introductive cu un aspect premade

Pentru a începe, asigurați-vă că aveți instalată și activă tema Divi. Apoi creați o pagină nouă, dați titlul paginii și implementați Divi Builder (în partea frontală). Selectați opțiunea „Alegeți un aspect prefabricat”. Apoi selectați aspectul paginii de destinație a jocului video și importați-l pe noua dvs. pagină.

Pentru a obține un început în ceea ce privește proiectarea noastră, vom folosi secțiunea intitulată „Caracteristici de joc” care conține blurbs pe care vom folosi pentru proiectarea noastră. Deoarece aceasta este singura secțiune de care avem nevoie, continuați și ștergeți fiecare secțiune și rând, cu excepția celor două rânduri de blurbs.

Implementarea Blurbs plutitoare în 3D Space Design în Divi

Crearea primului rând de Blurbs

În secțiunea aspectului premade care conține cele două rânduri de blurbs, creați un nou rând cu o singură coloană și trageți-l în partea de sus a secțiunii.

Acum, folosind funcția multiselectare a lui Divi (țineți apăsat ctrl / cmd în timp ce selectați fiecare blurb), selectați 5 dintre blurbs din cele două coloane de mai jos și trageți-le în noul rând de coloană din partea de sus a secțiunii.

Acum puteți șterge cele două rânduri care au venit cu aspectul premade de mai jos. După aceea, ar trebui să aveți doar un singur rând dintr-o coloană care conține 5 blurbs.

Adăugarea perspectivei la secțiunea noastră

Pentru a obține efectul 3D pe care îl căutăm în acest design, trebuie să adăugăm proprietatea css de perspectivă la secțiunea noastră. Aceasta va adăuga perspectiva 3D rândului nostru ori de câte ori rotim rândul folosind opțiunile de transformare.

Deschideți setările secțiunii și adăugați următorul CSS personalizat la elementul principal:

perspective: 1000px;

Mai târziu, poate doriți să măriți sau să micșorați valoarea perspectivei pentru a aduce elementele 3D (în acest caz, rândurile) mai aproape sau mai departe de perspectiva utilizatorului atunci când priviți ecranul.

Pentru mai multe informații, consultați cum funcționează perspectiva cu opțiunile de transformare din Divi.

Personalizarea rândului

Înainte de a începe să ne desenăm blur-urile, să configurăm mai întâi setările rândurilor noastre. Există trei lucruri principale pe care trebuie să le schimbăm la nivelul rândurilor pentru acest design:

1. Trebuie să ne aliniem blurbs-urile pe orizontală folosind „display: flex”. Acest lucru va păstra designul nostru consecvent și receptiv pe toate dispozitivele (spre deosebire de utilizarea unui aspect cu 5 coloane care se va rupe pe tabletă și telefon).
2. Trebuie să scăpăm de marginile implicite ale coloanei setând lățimea jgheabului la 1.
3. Trebuie să folosim transform rotate pentru a roti rândul cu 45 de grade pe axa X. Cu proprietatea perspectivă adăugată părintelui (secțiunea), rândul și toate elementele sale au efectul 3D pe care îl căutăm.

Deschideți setările rândului și actualizați următoarele:

Lățimea jgheabului: 1
Lățime: 80% (desktop), 100% (tabletă), 100% (telefon)
Transformare Rotire axa X: 45 grade

CSS Element principal al coloanei:

display: flex;
justify-content: center;

Reglarea stilului și spațiului Blurb

Acum este timpul să ajustăm puțin conținutul și stilul blurbs-urilor noastre.

Din moment ce dorim să aplicăm aceleași personalizări pentru toate blur-urile noastre, utilizați din nou multiselect pentru a selecta toate blur-urile și pentru a implementa setările elementale modale.

Mai întâi, ștergeți conținutul corpului.

Apoi adăugați o culoare de fundal:

Culoare fundal: rgba (20.241.217,0.16)

Apoi actualizați următoarea distanță:

Marja personalizată (desktop): 2vw dreapta
Marja personalizată (tabletă și telefon): 0vw dreapta

Căptușeală personalizată: 2% sus, 2% jos, 3% stânga, 3% dreapta

Apoi, adăugați un chenar după cum urmează:

Lățimea chenarului: 2 px
Culoare margine: rgba (20.241.217,0.66)

În acest moment, toate blurbs au stilul în loc. În continuare, trebuie să folosim opțiunile de transformare pentru a schimba individual scala și poziția fiecărei blurbs, ceea ce se va adăuga efectului flotant 3D al blurbs-urilor. Dar, înainte de a face asta, să duplicăm rândul pentru a crea al doilea rând de blurbs.

Crearea celui de-al doilea rând de blurbs

Pentru a crea al doilea rând de blurbs, pur și simplu copiați rândul de 5 blurbs pe care tocmai le-ați personalizat.

Pentru a crea un efect de coliziune, putem roti rândul duplicat în direcția opusă (-45 grade).

Deschideți rândul duplicat și actualizați următoarele:

Transformare Rotire axa X: -45 grade

Măriți capitonarea secțiunii superioare și inferioare

În acest moment, blurburile frontale se pot extinde în afara secțiunii. Pentru a remedia acest lucru, adăugați următoarea umplere în secțiunea dvs.:

Căptușeală personalizată: 15% sus, 15% jos

Utilizarea Opțiunilor de transformare pentru a dimensiona și poziționa fiecare blurb individual

În acest moment, sunteți configurat pentru a deveni creativi cu modul în care doriți ca fiecare dintre blurbs să „plutească” în spațiul 3D. Pentru a face acest lucru, puteți utiliza opțiunile de transformare pentru a dimensiona și poziționa fiecare blurb una câte una exact acolo unde doriți. Făcând acest lucru, blurbs dvs. vor părea să aibă adâncimi diferite în spațiul 3D.

Pentru a ușura lucrurile, voi număra blurburile de la 1 la 10 începând cu blurbul din stânga din rândul de sus (Blurb # 1) și terminând cu blurbul din dreapta din al doilea rând (Blurb # 10).

Blurb # 1

Să începem cu primul nostru blurb din rândul de sus. Deschideți setările de blurb și actualizați următoarele:

Scala de transformare (axele x și y): 90%

Blurb # 2

Deschideți setările pentru Blurb # 2 și actualizați următoarele:

Scala de transformare (axele x și y): 80%
Transformă axa X Traducere: -10%

Blurb # 3

Scala de transformare (axele x și y): 80%
Transformă axa X Traducere: 20%

Blurb # 4

Scala de transformare (axele x și y): 85%
Transformă axa X Traducere: -30%

Blurb # 5

Scala de transformare (axele x și y): 60%

După ce ați terminat, primul rând ar trebui să arate cam așa.

Continuați să personalizați opțiunile de transformare pentru blurbs 6-10, începând cu blurb # 6 din extrema stângă a celui de-al doilea rând.

Blurb # 6

Scala de transformare (axele x și y): 60%
Transformă axa X Traducere: -40%
Transformă axa Y tradusă: -20%

Blurb # 7

Scala de transformare (axele x și y): 90%
Transformă axa X Traducere: 20%

Blurb # 8

Scala de transformare (axele x și y): 70%
Transformă axa X tradusă: -50%

Blurb # 9

Scala de transformare (axele x și y): 80%
Transformă axa X Traducere: -20%

Blurb # 10

Scala de transformare (axele x și y): 70%
Transformă axa X Traducere: -60%

Acum, să verificăm cum arată al doilea rând când se ciocnește cu primul nostru rând în spațiul 3D.

Pentru a finaliza designul, putem adăuga o secțiune cu o imagine de fundal spațială 3D. Folosesc imaginea de fundal a secțiunii superioare care a venit cu aspectul paginii de destinație a jocurilor video pe care l-am folosit pentru acest tutorial.

Design final

Acum, să verificăm designul final al modulelor noastre plutitoare 3D.

Desktop

Comprimat

Telefon

Datorită celor 5 blurbs care se întind de-a lungul rândului, este puțin mai dificil să se potrivească toate cele 5 blurbs fără ca acesta să se extindă în afara ferestrei. Pentru a remedia acest lucru, puteți ascunde pur și simplu blurb-ul îndepărtat în fiecare rând de pe telefon. Sau puteți oferi fiecărei blurbs o dimensiune mai mică pe telefon.

Gânduri finale

Sper că acest tutorial vă va oferi o inspirație pentru a vă crea propriile module plutitoare în 3D Space. Tot ce este nevoie este doar câțiva pași pentru a vă roti întregul rând de module în 3D folosind opțiuni de perspectivă și transformare. După aceea, puteți poziționa fiecare dintre module pentru a le pluti oriunde doriți.

Distrează-te explorând.

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

Noroc!