Cum să creați o înregistrare 3D cu efecte Hover în Divi

Știm cu toții că un site web bun le permite vizitatorilor să găsească cu ușurință ceea ce caută rapid și eficient. Și, întotdeauna vă ajută dacă vă puteți face conținutul mai atrăgător. În acest tutorial, vă voi arăta cum să proiectați un mesaj 3D care să atragă utilizatorii și să le faciliteze găsirea a ceea ce caută într-un mod unic. Pentru a face acest lucru, vom folosi opțiunile de transformare ale Divi și proprietatea css de perspectivă pe mai multe module de blurb pentru a crea efectul 3D al semnelor rotite pe un post.

Să începem!

Trage cu ochiul

Descărcați GRATUIT aspectul pentru afișarea semnelor 3D

Pentru a pune mâna pe designul 3D Sign Post 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?

Abonați-vă la canalul nostru Youtube

Ce trebuie să începeți

Pentru a începe, veți avea nevoie de următoarele:

1. Asigurați-vă că aveți Tema Divi instalată și activă pe site-ul dvs. WordPress.
2. Dacă doriți să creați propria imagine de postare, veți avea nevoie de un editor foto precum Photoshop, Gimp sau Sketch. Sau puteți utiliza imaginea furnizată în descărcarea gratuită a aspectului pentru acest design de mai sus.
3. În afară de asta, vom construi totul de la zero pe capătul frontal al Divi Builder.

Crearea imaginii pentru semnarea

Cel mai simplu mod de a crea o afișare pentru acest design este de a crea un mic bloc de imagine repetabil pe care îl putem adăuga ca imagine de fundal care se repetă vertical în secțiunea sau rândul paginii. Dacă doriți să omiteți acest pas, puteți importa aspectul json inclus în descărcarea gratuită de mai sus pentru a începe. Dar dacă doriți să vă creați propria cu o culoare personalizată la alegere, iată cum să o faceți.

Pentru acest exemplu, voi folosi Photoshop, dar procesul este foarte similar și pentru alți editori de fotografii populari.

În Photoshop, faceți clic pentru a crea un document nou cu o înălțime și o lățime personalizate de 25 px.

Setați culoarea din prim-plan pe negru (# 000000) sau orice culoare doriți.

Apoi selectați instrumentul cupă de vopsea și faceți clic în interiorul stratului pătrat gol pentru a vopsi pătratul în negru.

Apoi salvați imaginea ca jpeg pe computer. Aceasta este imaginea pe care o vom folosi în proiectare pentru a crea postarea pentru proiectarea postării noastre cu semne 3D.

Implementarea proiectării 3D Sign Post în Divi

Odată ce sunteți gata, asigurați-vă că creați o pagină nouă, vă acordați un titlu paginii și implementați Divi Builder în partea frontală. Selectați opțiunea „Build From Scratch”.

Pânza ta goală așteaptă!

Acum creați o nouă secțiune obișnuită cu un rând cu o coloană.

Personalizarea rândului

Înainte de a adăuga un modul, deschideți setările rândului și actualizați următoarele:

Imagine de fundal: [inserați o imagine pătrată personalizată pentru postare]
Dimensiunea imaginii de fundal: dimensiunea reală
Repetarea imaginii de fundal: Repetați Y (vertical)

Apoi actualizați următoarele:

Lățimea jgheabului: 1
Lățime maximă: 980 px
Căptușeală personalizată: 2vw sus, 2vw jos

Apoi, trebuie să adăugăm următorul CSS personalizat la elementul principal al coloanei, după cum urmează:

perspective: 1000px;

Această proprietate CSS de perspectivă este necesară pentru a obține efectul 3D al semnului (sau blurb) ori de câte ori îl rotim cu opțiunile de transformare.

Pentru mai multe informații despre acest lucru, verificați cum funcționează perspectiva cu opțiunile de transformare ale lui Divi.

Crearea unui semn cu un modul Blurb

Pentru a crea primul nostru semn pe afișajul nostru 3D, vom folosi un modul blurb. Continuați și adăugați un modul de blurb pe rând.

Apoi deschideți setările pentru blurb și actualizați conținutul blurbului după cum urmează:

Reduceți conținutul simulat pentru a include doar câteva rânduri de text.

Utilizați pictograma: DA
Pictogramă: săgeată stânga (vezi captura de ecran)

Culoare fundal: # 1a233f

Culoare pictogramă: # 9eb3c2
Plasare imagine / pictogramă: stânga
Utilizați dimensiunea fontului pictogramei: DA
Pictogramă Dimensiune font: 80 px

Orientare text: centru
Titlu Font: Playfair Display
Culoare text titlu: # 9eb3c2
Dimensiune text titlu: 38 px (desktop), 26 px (telefon)
Lățime maximă: 600 px
Alinierea modulului: centru
Căptușeală personalizată: 5% sus, 5% jos, 5% stânga, 5% dreapta

Colțuri rotunjite: 20 px

Lățimea chenarului: 3 px
Culoare margine: # 21335e

Aceasta are grijă de stilul modulului nostru de blurb, dar pentru a obține efectul nostru 3D, trebuie să folosim opțiunile de transformare pentru a roti modulul nostru de blurb. Pentru a face această actualizare, urmați următoarele:

Transformare Rotire axă X: 20 grade

Duplicați rândul pentru mai multe semne

Acum că avem unul dintre proiectele noastre de semne finalizate, putem duplica rândul pentru a face mai multe. De fiecare dată când duplicăm rândul, va trebui pur și simplu să actualizăm rotația transformării astfel încât semnele să se rotească la diferite grade în jurul stâlpului.

Continuați și duplicați rândul și actualizați modulul blurb din noul rând după cum urmează:

Transformare Rotire axă X: -30 grade

Duplicați rândul pentru a crea un al treilea semn și actualizați modulul blurb din acel rând nou după cum urmează:

Transformare Rotire axă X: 40 grade

Schimbarea direcției celui de-al doilea semn

În acest moment, toate săgețile sunt îndreptate în aceeași direcție. Pentru a schimba direcția de la stânga la dreapta, trebuie să actualizăm puțin setările modulului blurb.

Deschideți setările modulului blurb din al doilea rând (cel din mijloc) și actualizați următoarele:

Pictogramă: săgeată dreapta (vezi captura de ecran)

Orientare text: stânga

Putem răsturna ordinea conținutului blurb, astfel încât textul să fie în stânga și pictograma să fie în dreapta. Pentru a face acest lucru, trebuie să adăugăm o singură linie de CSS personalizat la elementul principal, după cum urmează:

direction: rtl;

Acum conținutul blurb este inversat și aveți un semn care indică o nouă direcție!

Rotiți semnele înapoi la starea inițială pe Hover

Unul dintre lucrurile interesante despre această configurare este că puteți adăuga cu ușurință o stare de plutire pentru a readuce modulul rotit la rotația inițială (0deg). Acest lucru permite utilizatorului să interacționeze cu conținutul și să aibă o vedere clară a textului atunci când treceți peste modul.

De vreme ce dorim să adăugăm aceeași stare de deplasare la toate cele trei module de blurb, folosiți multiselect pentru a selecta toate cele trei module de blurb și deschideți setările unuia dintre module pentru a afișa setările elementale modale. Apoi actualizați următoarele:

Transformare Rotire axă X (deplasare): 0 grade

Salvați setările și gata!

Acum, verificați designul și funcționalitatea de până acum.

Personalizarea secțiunii noastre cu o imagine de fundal

Pentru ultimul nostru pas, putem adăuga o nouă imagine de fundal la secțiunea noastră. Acest lucru este opțional, desigur, dar imaginea potrivită poate arăta foarte bine, mai ales dacă utilizați efectul de paralaxă.

Deschideți secțiunea și adăugați o nouă imagine de fundal. (Folosesc o imagine din pachetul nostru de aspect pentru agenție)

Apoi actualizați următoarele:

Utilizați Efect Parallax: DA
Împletire personalizată: 0 px sus, 0 px jos

Rezultat final

Gânduri finale

Crearea unei postări de semn 3D adaugă într-adevăr un element de design creativ și captivant pe site-ul dvs., care poate face ca conținutul dvs. să apară (la propriu). Și efectul de hover permite utilizatorului să vizualizeze conținutul fără efectul 3D pentru o rezolvare plăcută. Nu uitați că puteți adăuga cu ușurință o adresă URL de link la modulul blurb, astfel încât să poată servi drept element de navigare clicabil, dacă doriți. Oricum, sper că acest lucru vă va oferi o inspirație pentru următorul dvs. proiect.

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

Noroc!