Crearea unui CTA „Începeți” care dezvăluie mai multe opțiuni pe Hover

Multe companii vor include un CTA „de început” pe pagina principală de acolo. Este, de obicei, principalul apel la acțiune de pe pagină, deoarece va conduce utilizatorul printr-un fel de proces intenționat. Ar putea fi un simplu buton „începeți acum” care leagă o altă pagină. Sau ar putea fi o secțiune a unei pagini care include instrucțiuni de „început” și / sau diferite opțiuni pe care utilizatorul le poate lua pentru a începe procesul intenționat de companie.

În acest tutorial, vă vom arăta cum să creați un CTA „Începeți”, care va dezvălui mai multe opțiuni „Noțiuni introductive” pe hover. Folosind Divi, vom proiecta o secțiune care să apară ca buton mare. Apoi, când treceți cu mouse-ul peste buton, opțiunile vor apărea la fel ca un glisor vertical care ar dezvălui următoarea diapozitivă.

Designul este elegant și funcționalitatea ar putea fi utilă în multe feluri.

Să începem.

Trage cu ochiul

Iată o privire rapidă la CTA „Începeți” pe care o vom construi în acest tutorial.

Descărcați GRATUIT aspectul CTA Divi „Începeți”

Pentru a pune mâna pe designul acestui 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ă aveți următoarele:

1. Tema Divi instalată și activă
2. O nouă pagină creată pentru a construi de la zero pe partea frontală (constructor vizual)
3. Imagini care urmează să fie utilizate pentru conținut fals

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

Implementarea proiectului CTA „Începeți aici” în Divi

Ideea de bază din spatele acestui design este de a muta conținutul unei secțiuni în sus atunci când treceți peste secțiune. Pentru a face acest lucru, trebuie să ne asigurăm că secțiunea noastră are o înălțime fixă, cu preaplin ascuns. Aceasta va ascunde opțiunile CTA înainte de starea de deplasare. Apoi, putem folosi marginea pentru a ne poziționa modulele și umplutura de sus pentru a muta conținutul în vizualizare pe hover.

Să începem cu secțiunea.

Crearea secțiunii

Pentru a începe lucrurile, creați o secțiune obișnuită cu un rând cu o coloană. Apoi, înainte de a adăuga module, să actualizăm setările secțiunii.

Deschideți setările secțiunii și actualizați următoarele:

Culoare fundal: # 2b87da
Lățime: 90%
Lățime maximă: 1100 px
Alinierea secțiunii: centru
Marja: 6vw sus, 6vw jos (doar pentru a-i oferi puțin spațiu de respirație)
Umplutură (desktop): 300 px în partea de sus, 0 px în partea de jos
Căptușeală (tabletă): 0 px de sus, 15% de jos

Apoi adăugați câteva colțuri rotunjite. Aceasta va crea designul nostru de tip buton ori de câte ori acordăm secțiunii o înălțime maximă.

Colțuri rotunjite: 140 px (desktop), 20 px (plutitor), 10 px (tabletă)

Apoi dă-i o umbră de cutie (vezi captura de ecran).

Nu vom adăuga în acest moment toate setările necesare pentru proiectarea finală. Va trebui să ne întoarcem și să-i dăm o înălțime fixă ​​și un efect de plutire. Dar deocamdată să adăugăm conținutul.

Crearea primului rând de conținut

Deschideți setările pentru rândul pe o coloană pe care l-ați creat și actualizați următoarele:

Lățime: 100%
Căptușeală: 0 px sus, 0 px jos, 5% stânga, 5% dreapta

În interiorul rândului cu o coloană, adăugați un modul text.

Apoi adăugați următoarea rubrică h2 la conținutul corpului.

<h2>Get Started Here...</h2>

Actualizați setările de proiectare după cum urmează:

Rubrica 2 Font: Nunito
Titlul 2 Greutate font: îndrăzneț
Rubrica 2 Culoarea textului: #ffffff
Titlul 2 Dimensiune text: 78 px (desktop și tabletă), 46 px (telefon)
Lățime maximă: 500 px
Înălțime: 300 px (desktop), automată (tabletă și telefon)
Marjă: -300px top (desktop), 0px top (tabletă și telefon)
Căptușeală: 7% top

Înălțimea de 300 px și marja superioară de -300 px ridică modulul text în sus pentru a umple umplutura de 300 px de sus a secțiunii. Mai târziu, ori de câte ori eliminăm umplerea secțiunii superioare pe hover, modulul text va derula în sus deasupra secțiunii.

Crearea celui de-al doilea rând de conținut

Al doilea rând de conținut este locul în care vom adăuga opțiunile noastre de CTA. Continuați și adăugați un rând nou cu un aspect cu trei coloane.

Apoi actualizați setările rândului după cum urmează:

Lățime: 100%
Lățime maximă: 100%
Căptușeală: 0 px sus, 0 px jos

Apoi adăugați un modul de blurb în coloana 1.

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

Scoateți textul implicit al corpului și lăsați titlul.

Apoi Adăugați o pictogramă imagine (90 X 90). Sau puteți utiliza o pictogramă obișnuită Divi, dacă doriți.

Adăugați un fundal și actualizați designul textului titlului.

Culoare fundal: #ffffff
Titlu Font: Nunito
Titlu Greutate font: Ultra Bold
Titlu Stil Font: TT
Alinierea textului titlului: centru
Culoare text titlu: # 2b87da
Dimensiune text titlu: 14 px

Înainte de a putea face blurbs circulare, mai întâi trebuie să acordăm blurbului o înălțime și o lățime egale. Apoi putem folosi spațiere pentru a alinia blurb și conținutul blurb în centru.

Lățimea conținutului: 200 px (desktop), 250 px (tabletă)
Lățime: 250 px (desktop), 300 px (tabletă)
Alinierea modulului: centru
Înălțime: 250 px (desktop), 300 px (tabletă)
Marja: 25 px sus, 0 px jos
Căptușeală: partea superioară de 50 px (desktop), partea superioară de 75 px (tabletă și telefon)

Pentru a finaliza designul cercului, dă blurbului un colț rotunjit și o umbră de cutie.

Colțuri rotunjite: 50%
Box Shadow: vezi captura de ecran

Asta are grijă de primul nostru discurs. Pentru a crea următoarele două. Copiați textul și lipiți-l în coloana 2 și coloana 3. Apoi actualizați pictograma imaginii pentru fiecare. Ar trebui să arate după cum urmează:

Atingeri finale către secțiune

Pentru a finaliza designul CTA „Începeți”, trebuie să actualizăm secțiunea un pic mai mult. Actualizați următoarele setări ale secțiunii:

Înălțime: 300 px (desktop), automată (tabletă și telefon)
Overflow orizontal: ascuns
Vertical Overflow: ascuns

Acest lucru va păstra secțiunea la aceeași înălțime ca și conținutul din rândul 1 și rândul 2. Ascunderea revărsării va păstra conținutul din rândul 2 ascuns până când îl vom afișa în cursă.

Pentru a afișa conținutul rândului 2 în vizualizare, trebuie să scoatem umplutura de sus a secțiunii de pe hover.

Căptușeală (hover): 0px în partea de sus

Acum verificați rezultatul de până acum. Conținutul va derula în sus pentru a afișa conținutul din rândul 2, care prezintă cele trei opțiuni CTA.

Pentru a face ca secțiunea să pară mai mult ca un buton, putem folosi opțiunile de transformare pentru a o micșora și apoi pentru a o readuce la dimensiunea obișnuită de la cursor. Actualizați următoarele opțiuni de transformare pentru secțiune.

Scala de transformare (desktop): 70%
Scala de transformare (plimbare): 100%
Scala de transformare (tabletă): 100%

Acum adăugați o imagine de fundal (500 X 500) pentru a prelua dimensiunea corectă a secțiunii.

Imagine de fundal: inserați imaginea
Dimensiunea imaginii de fundal: dimensiunea reală
Poziția imaginii de fundal: centru dreapta (desktop), dreapta sus (tabletă), stânga sus (telefon)

Adăugarea URL-urilor linkurilor în Blurbs și scalarea acestora pe Hover

Întrucât blur-urile noastre servesc cu adevărat ca butoane de cerc, trebuie să adăugăm adrese URL de link-uri de module la fiecare dintre blurbs. Bineînțeles, va trebui să adăugați al dvs. pentru a se potrivi nevoilor dumneavoastră.

Deoarece blurbs sunt ascunse în generatorul vizual, comutați modul de vizualizare wireframe și actualizați fiecare dintre setările de blurb cu URL-ul linkului modulului.

Apoi rămâneți în modul de vizualizare wireframe și utilizați multiselect pentru a selecta toate cele trei blurbs. Și deschideți setările unuia dintre blurbs pentru a actualiza setările elementului pentru toate cele trei. Apoi actualizați opțiunea de transformare după cum urmează:

Scala de transformare (plimbare): 105%

Asta e!

Rezultatul final

Să verificăm designul final al CTA „Începeți”.

Și iată designul pe tabletă și telefon.

Gânduri finale

CTA „Începeți” este obișnuit pe web astăzi. Sperăm că acest tutorial vă va ajuta să îl duceți la nivelul următor. Și, nu vă fie teamă să vă gândiți la alte modalități de a utiliza această funcționalitate. Gandeste-te la asta. Puteți adăuga orice conținut doriți la secțiune!

Simțiți-vă liber să ne împărtășiți gândurile în comentariile de mai jos.

Aștept cu nerăbdare să ne auzim.

Noroc!