Cum să adăugați săgeți cu butoane de colț animate cu mouse-ul la designul dvs. cu Divi

Modul în care vă prezentați CTA într-o pagină pe care o proiectați poate avea un impact mare asupra modului în care acționează vizitatorii dvs. Puteți face acest lucru în modul cel mai frecvent utilizat, utilizând formatul butonului cu copiere în mijloc, dar puteți deveni creativ și cu acesta. În tutorialul de astăzi, vă vom arăta o modalitate creativă de a include un îndemn la designul Divi. Vom include săgeți cu butoane de colț animate cu mouse-ul pentru a fi exact. Odată ce o săgeată este planată, direcția săgeții se va schimba alături de stil. Veți putea descărca gratuit fișierul JSON al acestui design!

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 aspectul GRATUIT

Pentru a pune mâna pe aspectul liber, 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!

Adăugați o nouă secțiune de specialitate

Adăugați o nouă secțiune de specialitate la pagina la care lucrați. Selectați următoarea structură de coloane pentru aceasta:

Fundal de gradient

Deschideți setările secțiunii și aplicați următorul fundal de gradient:

• Culoare 1: # fff8f5
• Culoare 2: # f9f3ef
• Tipul gradientului: radial
• Direcție radială: jos stânga
• Poziția inițială: 40%
• Poziție finală: 40%

Dimensionare

Treceți la fila de proiectare a secțiunii și modificați setările de dimensionare după cum urmează:

• Egalizați înălțimile coloanei: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime interioară: 90%
• Lățime maximă interioară: 1580 px

Spațiere

Apoi, accesați setările de spațiere și adăugați o umplutură dreaptă în coloana 1.

• Coloana 1 Căptușeala dreaptă: 6%

Adăugați modulul de text nr. 1 în coloana 1

Adăugați conținut H2

Este timpul să adăugați module, începând cu un modul de text în coloana 1. Adăugați un conținut H2 la alegere.

Setări text H2

Stilizați setările de text H2 ale modulului după cum urmează:

• Rubrica 2 Font: Kumbh Sans
• Titlul 2 Greutate font: îndrăzneț
• Rubrica 2 Culoarea textului: # 08665c
• Rubrica 2 Dimensiune text:
  • Desktop: 75 px
  • Tabletă: 60 px
  • Telefon: 45 px

Spațiere

Adăugați câteva margini de sus și de jos în continuare.

• Marja superioară: 50 px
• Marja inferioară: 50 px

Adăugați modulul de text nr. 2 în coloana 1

Adăugați conținut de descriere

Adăugați un alt modul de text sub cel anterior cu un conținut de descriere la alegere.

Setări text

Modificați setările de text ale modulului după cum urmează:

• Font text: Kumbh Sans
• Culoarea textului: # 08665c
• Dimensiune text: 16 px
• Înălțimea liniei textului: 1,8em

Spațiere

Adăugați o margine inferioară și la dimensiuni mai mici ale ecranului.

• Marja inferioară:
  • Desktop: /
  • Tabletă și telefon: 50 px

Adăugați rândul # 1 la coloana 2

Structura coloanei

Accesați a doua coloană a secțiunii. Acolo, adăugați un prim rând folosind următoarea structură de coloane

Dimensionare

Fără a adăuga încă module, deschideți setările de rând și modificați setările de dimensionare după cum urmează:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 2

Spațiere

Eliminați toate umpluturile implicite de sus și de jos în continuare.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Setări coloana 1

Culoare de fundal

Apoi, deschideți setările coloanei 1 și aplicați o culoare de fundal la alegere.

• Culoare fundal: #cccccc

Spațiere

Treceți la setările de spațiere a coloanei și utilizați următoarele valori de reacție:

• Căptușeală superioară:
  • Desktop: 100 px
  • Tabletă și telefon: 70 px
• Căptușeală stângă:
  • Desktop și tabletă: 8%
  • Telefon: 10%
• Garnitura dreapta:
  • Desktop și tabletă: 8%
  • Telefon: 10%

Frontieră

Adăugați și câteva colțuri rotunjite la setările de margine.

• Toate colțurile: 10 px

Vizibilitate

Completați setările coloanei prin setările revărsărilor pentru a fi vizibile în fila avansată.

• Overflow orizontal: vizibil
• Overflow vertical: vizibil

Adăugați modulul de text nr. 1 în coloana 1

Adauga continut

Este timpul să adăugați module, începând cu un prim modul de text în coloana 1. Adăugați un conținut la alegere.

Setări text

Modificați setările de text ale modulului:

• Font text: Kumbh Sans
• Greutatea fontului textului: ușoară
• Culoarea textului: # 08665c
• Dimensiune text: 30 px
• Înălțimea liniei de text: 1em

Spațiere

Aplicați și o margine inferioară.

• Marja inferioară: 15 px

Adăugați un modul divizor în coloana 1

Vizibilitate

Apoi, adăugați un modul divizor. Asigurați-vă că este activată opțiunea „Show Divider”.

• Show Divider: Da

Linia

Treceți la fila de proiectare a modulului și schimbați culoarea liniei.

• Culoare linie: # fff8f5

Dimensionare

Modificați și setările de dimensionare.

• Greutatea divizorului: 2 px
• Înălțime: 2 px

Spațiere

Adăugați și o margine inferioară.

• Marja inferioară: 50 px

Adăugați modulul de text nr. 2 în coloana 1

Adăugați conținut H3

Adăugați un alt modul de text în coloana 1. Utilizați un conținut H3 la alegere.

Setări text H3

Treceți la fila de proiectare a modulului și modificați setările de text H3 după cum urmează:

• Rubrica 3 Font: Kumbh Sans
• Titlul 3 Greutate font: îndrăzneț
• Rubrica 3 Culoarea textului: # 08665c
• Rubrica 3 Dimensiune text:
  • Desktop: 48 px
  • Tabletă: 38 px
  • Telefon: 32 px

Spațiere

Folosiți și o marjă inferioară.

• Marja inferioară: 15 px

Adăugați modulul de text nr. 3 în coloana 1

Adauga continut

Adăugați ultimul modul de text în coloana 1 cu un conținut de descriere la alegere.

Setări text

Modificați setările de text în consecință:

• Font text: Kumbh Sans
• Culoarea textului: # 08665c
• Dimensiune text: 16 px
• Înălțimea liniei textului: 1,8em

Spațiere

Includeți și o marjă inferioară.

• Marja inferioară:
  • Desktop: 200 px
  • Tabletă și telefon: 150 px

Adăugați Blurb Module la coloana 1

Lăsați casetele de conținut goale

Până la ultimul modul de care avem nevoie în această coloană, care este un modul Blurb. Lăsați casetele de conținut goale.

Pictogramă implicită

Selectați pictograma săgeată următoare.

Pictograma Plasați cursorul

Schimbați pictograma la cursor.

Adăugați un link

Folosiți și un link pentru acest modul.

Plasați cursorul pe culoarea de fundal

Apoi, adăugați o culoare de fundal cu mouse-ul.

• Plasați cursorul pe fundal Culoare: # 08665c

Setări implicite pentru pictograme

Navigați la fila de proiectare și modificați setările pictogramei după cum urmează:

• Culoare pictogramă: #ffffff
• Plasare imagine / pictogramă: sus
• Aliniere imagine / pictogramă: dreapta
• Utilizați pictograma Dimensiune font: Da
• Pictogramă Dimensiune font: 80 px

Plasați cursorul pe setările pictogramei

Modificați dimensiunea fontului pictogramei la cursor.

• Pictograma Hover Dimensiune font: 40 px

Dimensionare

Apoi, adăugați o lățime la setările de dimensionare.

• Lățime: 80 px

Distanța cu mouse-ul

Modificați căptușeala superioară și dreaptă la cursor.

• Acoperiți partea superioară a hover-ului: 25 px
• Plasați cursorul la dreapta: 10 px

Frontieră

Includeți și câteva colțuri rotunjite în setările de margine.

• Toate colțurile: 5 px

Scală cu mouse-ul

Apoi, utilizați opțiunea de transformare a scalei pe hover.

• Plasați cursorul pe ambele: 130%

Element principal și imagine CSS Blurb

Apoi, navigați la fila avansată și utilizați următoarea linie de cod CSS pentru elementul principal:

cursor: pointer;

Utilizați această linie pentru caseta css Blurb Image:

margin-bottom: 0px;

Poziţie

Completați setările modulului repoziționându-l în setările de poziție:

• Poziție: Absolută
• Locație: Partea din dreapta

Reutilizați coloana 1

Eliminați coloana 2

După ce ați completat prima coloană, o puteți refolosi pentru a doua. Pentru aceasta, eliminați mai întâi a doua coloană.

Clonați coloana 1

Apoi, clonați prima.

Schimbați culoarea de fundal a coloanei 2

Desigur, va trebui să faceți câteva modificări la coloana duplicat, începând cu culoarea de fundal.

• Coloana 2 Culoare fundal: # f0c7b1

Adăugați Transform Traduceți în coloana 2

Adăugăm o valoare de traducere de transformare și pe dimensiuni mai mici de ecran.

• Dreapta:
  • Desktop: /
  • Tabletă și telefon: 50 px

Schimbați conținutul duplicat

Asigurați-vă că modificați tot conținutul duplicat.

Schimbați linkul modulului Blurb

Completați coloana duplicat schimbând linkul din interiorul modulului Blurb.

Reutilizați Row

După ce ați finalizat primul rând și coloanele acestuia, puteți clona întregul rând.

Eliminați coloana 2

Ștergeți a doua coloană din setările rândului.

Schimbați culoarea de fundal a coloanei

Apoi, modificați culoarea de fundal a coloanei rămase.

• Culoarea fundalului coloanei: # dfe7f2

Adăugați marja superioară la rând

Reveniți la setările generale de rând și adăugați o marjă de sus receptivă.

• Marja superioară:
  • Desktop: 50 px
  • Tabletă și telefon: 100 px

Schimbați conținutul duplicat

Apoi, modificați tot conținutul duplicat din coloană.

Schimbați linkul modulului Blurb

Completați tutorialul schimbând linkul din interiorul modulului Blurb. Asta e!

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ă deveniți creativi cu CTA-urile dvs. Mai precis, v-am arătat cum să adăugați săgeți de butoane de colț animate cu mouse-ul. Această abordare vă ajută să păstrați un aspect curat atunci când proiectați o secțiune cu mai multe CTA-uri. Se adaugă și un nivel suplimentar de interacțiune. Ați putut descărca gratuit fișierul JSON. Dacă aveți întrebări sau sugestii, nu ezitați să 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.