Cum să creați un mesaj în 3 pași pe Hover cu Divi

Multe site-uri web ale companiei împărtășesc la un moment dat o previzualizare a abordării lor. Când creați o secțiune de abordare, o puteți gestiona în mod tradițional sau puteți încerca să adăugați mai multă interacțiune la aceasta. Dacă căutați o modalitate de a face ca a doua opțiune să se întâmple, veți iubi această postare.

În acest tutorial, vă vom arăta cum să creați o dezvăluire în 3 pași folosind noile opțiuni de dimensionare ale Divi. Vom începe prin a arăta titlul, vom continua afișând trei săgeți care duc la pași și vom completa efectul prin dezvăluirea blurbs-urilor animate. Veți putea descărca gratuit fișierul JSON!

Să ajungem la asta.

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați GRATUIT aspectul Blurb Reveal în 3 pași

Pentru a vă pune mâna pe aspectul de afișare în 3 pași, 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!

Să începem să recreăm!

Abonați-vă la canalul nostru Youtube

Adăugați o secțiune nouă

Fundal de gradient implicit

Primul lucru pe care va trebui să-l faceți este să adăugați o nouă secțiune la pagina la care lucrați. Deschideți setările secțiunii și adăugați următorul fundal de gradient:

• Culoare 1: # ffa3ad
• Culoare 2: # ffcea3
• Direcția gradientului: 122deg

Plasați cursorul pe fundalul gradientului

Modificați fundalul de gradient la trecerea cu mouse-ul:

• Culoare 1: # 000000
• Culoare 2: #ffffff
• Tipul gradientului: radial
• Direcție radială: sus
• Poziția inițială: 36%
• Poziție finală: 26%

Spațiere

Treceți la fila Design și adăugați câteva umpluturi personalizate în partea de sus și de jos.

• Căptușeală superioară: 1vw
• Căptușeală inferioară: 1vw

Revărsare

Mai târziu în acest post, ne vom juca cu înălțimea secțiunii. Pentru a ne asigura că nimic nu depășește containerul secțiunii, vom ascunde revărsările în setările de vizibilitate.

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Adăugați rândul # 1

Structura coloanei

După ce ați completat setările secțiunii, puteți continua adăugând primul rând la secțiune folosind următoarea structură de coloane:

Adăugați un modul de text la rând

Adăugați conținut H2

Adăugați un nou modul de text în coloana rândului și introduceți un conținut H2 la alegere.

Setări text H2

Treceți la fila de proiectare și modificați setările de text H2 în consecință:

• Rubrica 2 Font: Montserrat
• Titlul 2 Greutate font: Semi Bold
• Titlul 2 Aliniere text: centru
• Rubrica 2 Culoarea textului: #ffffff
• Titlul 2 Dimensiune text: 2vw (desktop), 5vw (tabletă), 6vw (telefon)
• Rubrica 2 Spațierea literelor: -2 px

Adăugați rândul # 2

Structura coloanei

Continuați adăugând al doilea rând folosind următoarea structură de coloane:

Spațiere

Fără a adăuga încă module, deschideți setările rândurilor și adăugați câteva umpluturi personalizate în partea de sus și de jos pe diferite dimensiuni ale ecranului.

• Căptușeală superioară: 2vw (desktop), 4vw (tabletă), 5vw (telefon)
• Căptușeală inferioară: 2vw (desktop), 4vw (tabletă), 5vw (telefon)

Afişa

Pentru a ne asigura că toate coloanele apar una lângă cealaltă pe dimensiuni de ecran mai mici, vom adăuga o singură linie de cod CSS la elementul principal al rândului.

display: flex;

Adăugați modulul de text săgeată în coloana 1

Adăugați un simbol

Vom folosi acest rând pentru a adăuga săgețile animate. Adăugați un nou modul de text în prima coloană a rândului și adăugați simbolul „↓” în caseta de conținut.

Setări text

Treceți la fila de proiectare și modificați setările de text.

• Alinierea textului: dreapta
• Culoarea textului: # ffa3ad
• Dimensiune text: 4vw (desktop), 6vw (tabletă), 8vw (telefon)

Spațiere

Adăugați câteva valori de marjă personalizate la setările de spațiere următoare.

• Marja superioară: -3vw
• Marja inferioară: 8vw

Transformare Rotire

Rotiți modulul în setările de transformare.

• Stânga: 45 grade

Animaţie

Și adăugați o animație personalizată utilizând următoarele setări:

• Stil de animație: Slide
• Regia de animație: Centru
• Întârziere animație: 1000 ms

Adăugați modulul de text săgeată în coloana 2

Adăugați un simbol

Continuați adăugând un rând nou la a doua coloană și adăugați simbolul „↓” în caseta de conținut.

Setări text

Treceți la fila de proiectare și modificați setările de text în consecință:

• Aliniere text: centru
• Culoarea textului: # ffa3ad
• Dimensiune text: 4vw (desktop), 6vw (tabletă), 8vw (telefon)

Spațiere

Adăugați câteva margini superioare personalizate în continuare.

• Marja superioară: 1vw

Animaţie

Și aplicați următoarele setări de animație:

• Stil de animație: Slide
• Regia de animație: Centru

Adăugați modulul de text săgeată în coloana 3

Adăugați un simbol

Apăsați pe ultima săgeată Modul text din coloana 3. Adăugați săgeata „↓” în caseta de conținut.

Setări text

Treceți la fila de proiectare și modificați setările de text în consecință:

• Alinierea textului: stânga
• Culoarea textului: # ffa3ad
• Dimensiune text: 4vw (desktop), 6vw (tabletă), 8vw (telefon)

Spațiere

Adăugați câteva margini superioare negative în continuare.

• Marja superioară: -3vw

Transformare Rotire

Rotiți modulul în setările de transformare.

• Stânga: 315 grade

Animaţie

Și completați setările modulului adăugând următoarea animație:

• Stil de animație: Slide
• Regia de animație: Centru
• Întârziere animație: 1000 ms

Adăugați rândul # 3

Structura coloanei

După ce ați finalizat al doilea rând, puteți continua adăugând un rând nou folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândurilor și modificați valorile lățimii și lățimii maxime din setările de dimensionare.

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

Spațiere

Adăugați câteva valori de umplere personalizate pe diferite dimensiuni de ecran.

• Căptușeală superioară: 2vw (desktop), 8vw (tabletă), 6vw (telefon)
• Căptușeală inferioară: 2vw (desktop), 8vw (tabletă), 6vw (telefon)
• Căptușeală stângă: 10vw (desktop), 0vw (tabletă și telefon)
• Căptușeală dreaptă: 10vw (desktop), 0vw (tabletă și telefon)

Afişa

Adăugați o singură linie de cod CSS la elementul principal al rândului pentru a vă asigura că toate coloanele apar una lângă cealaltă pe dimensiuni de ecran mai mici.

display: flex;

Revărsare

În ultima parte a acestui tutorial, vom schimba înălțimea rândului. Pentru a ne pregăti pentru asta, va trebui să ne asigurăm că nimic nu depășește containerul rând ascunzând debordurile în setările de vizibilitate.

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Adăugați un modul text numeric în coloana 1

Adauga continut

E timpul să începeți să adăugați module! Adăugați un nou modul de text în prima coloană și introduceți un număr.

Fundal de gradient

Adăugați un fundal de gradient la modul folosind următoarele setări:

• Culoare 1: # ffa3ad
• Culoare 2: # ffcea3
• Direcția gradientului: 122deg

Setări text

Treceți la fila de proiectare și modificați setările de text în consecință:

• Font text: Montserrat
• Greutatea fontului textului: Ultra Bold
• Aliniere text: centru
• Culoarea textului: #ffffff
• Dimensiune text: 2vw (desktop), 4vw (tabletă), 8vw (telefon)
• Înălțimea liniei de text: 1em

Spațiere

Adăugați niște umplutură de sus și de jos pe diferite dimensiuni ale ecranului.

• Căptușeală superioară: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Căptușeală inferioară: 1vw (desktop), 2vw (tabletă), 3vw (telefon)

Frontieră

Și completați setările modulului adăugând „20px” la fiecare colț din setările de margine.

Clonați numărul modulului de text de două ori și plasați duplicatele în coloanele rămase

Continuați clonând modulul de text în coloana 1 de două ori și plasați duplicatele în cele două coloane rămase ale rândului.

Schimbați numerele

Asigurați-vă că schimbați numărul din fiecare dintre duplicate.

Adăugați Blurb Module la coloana 1

Adauga continut

Al doilea modul de care avem nevoie în prima coloană este un modul Blurb. Introduceți un conținut la alegere.

Selectați pictograma

Continuați selectând o pictogramă.

Culoare de fundal

Și schimbați culoarea de fundal în alb.

• Culoare fundal: #ffffff

Setări pictograme

Treceți la fila de proiectare și modificați setările pictogramei în consecință:

• Culoare pictogramă: # ffcea3
• Plasarea pictogramelor: sus
• Utilizați pictograma Dimensiune font: Da
• Pictogramă Dimensiune font: 4vw (desktop), 5vw (tabletă), 6vw (telefon)

Setări text titlu

Modificați și setările pentru textul titlului.

• Titlu Font: Montserrat
• Greutatea fontului titlului: Bold
• Alinierea textului titlului: centru
• Culoare text titlu: # 000000
• Dimensiune text titlu: 1vw (desktop), 2vw (tabletă), 4vw (telefon)

Setări text corp

Împreună cu setările pentru textul corpului.

• Alinierea textului corpului: centru
• Dimensiunea textului corpului: 0,6vw (desktop), 1,3vw (tabletă), 2vw (telefon)
• Înălțimea liniei corpului: 2,5em

Spațiere

De asemenea, oferim modulului nostru forma dorită adăugând următoarele valori de umplere personalizate pe diferite dimensiuni de ecran:

• Căptușeală superioară: 3vw (desktop), 5vw (tabletă), 7vw (telefon)
• Căptușeală inferioară: 3vw (desktop), 5vw (tabletă), 7vw (telefon)
• Căptușeală stângă: 1vw
• Garnitura dreapta: 1vw

Frontieră

Adăugați „20px” la fiecare dintre colțurile din setările de margine următoare.

Box Shadow

Și creați un pic de adâncime adăugând o umbră de casetă subtilă.

• Culoare umbră: rgba (0,0,0,0.07)

Animaţie

Nu în ultimul rând, adăugați o animație la modul.

• Stil de animație: Slide
• Regia de animație: Centru
• Întârziere animație: 1000 ms

Clonați modulul Blurb de două ori și plasați duplicatele în coloanele rămase

După ce ați finalizat modulul Blurb din coloana 1, îl puteți clona de trei ori și plasa duplicatele în cele două coloane rămase ale rândului.

Schimbați conținutul ambelor duplicate

Asigurați-vă că modificați conținutul pentru fiecare dintre duplicate.

Modificați setările de dimensionare a rândului # 3

Înălțime implicită

Acum, pentru a face efectul hover să funcționeze, vom deschide setările ultimului rând și vom merge la setările de dimensionare. Odată ajuns acolo, vom modifica înălțimea pe diferite dimensiuni ale ecranului.

• Înălțime: 6vw (desktop), 18vw (tabletă), 24vw (telefon)

Plasați înălțimea

Vom readuce înălțimea la normal la plimbare.

• Înălțime: auto

Modificați setările de dimensionare a secțiunii

Înălțime implicită

Deschideți apoi setările secțiunii și modificați înălțimea în consecință:

• Înălțime: 7vw (desktop), 15vw (tabletă), 20vw (telefon)

Plasați înălțimea

Aduceți înapoi înălțimea pe hover și gata!

• Înălțime: auto

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să creați o dezvăluire în 3 pași folosind noile opțiuni de dimensionare ale Divi. Rezultatul exemplului este foarte receptiv și vă permite să adăugați interacțiuni suplimentare la pagina dvs. Sperăm că acest tutorial vă va inspira să creați și propriile modele alternative în 3 pași. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.