A avea un îndemn la acțiune pe site-ul dvs. este una dintre cele mai puțin intruzive modalități de a atrage atenția dvs vizitatori. De cele mai multe ori vor ignora CTA sau îl vor închide pentru a continua să navigheze pe pagină, dar uneori îi vei câștiga. Un îndemn la acțiune sub formă de diapozitive va funcționa excelent pentru promova cam orice pe o pagină de destinație.

În acest tutorial, vom proiecta un îndemn la acțiune care poate fi adăugat în orice colț al unei pagini folosind Divi Theme Builder. Odată ce acest lucru este făcut, veți avea opțiunea promova produsele dvs. și ofertele speciale oriunde pe pagină, fără a fi nevoie să utilizați un plugin.

Să începem!

studiu

Iată o privire rapidă asupra celor patru CTA-uri inserate pe care le vom adăuga la cele patru colțuri ale șablonului de pagină. Desigur, nu va trebui să le implementați pe toate patru în același timp. Observați cum fiecare poate fi închis făcând clic pe pictograma „x”, apoi puteți alege să reactivați CTA făcând clic pe pictograma „plus”.

chemare la acțiune divi 1

Ce ai nevoie pentru a începe

Pentru a începe, va trebui pentru a instala și activa tema Divi . Asigurați-vă că aveți cea mai recentă versiune de Divi.

De asemenea, veți avea nevoie de cel puțin o pagină creată cu Divi Builder în scopul testării, pentru a atribui noul șablon acestei pagini pentru a afișa rezultatul.

Crearea unui apel glisant la acțiune, cu un șablon de pagină în Divi

Crearea unui nou model

Din tabloul de bord WordPress, accesați Divi> Generator de teme. Apoi faceți clic pe caseta „Adăugați un șablon nou” pentru a crea un șablon nou.

Creați un șablon de pagină

Alocați șablonul paginii sau paginilor pe care doriți să afișați bara promoțională.

Atribuiți un șablon de pagină paginilor

Pe noul model, faceți clic pe zona „Adăugați un corp personalizat”, apoi selectați „Creați un corp personalizat”.

Adăugați un corp personalizat

Apoi selectați opțiunea „Build From Scratch”.

Construind de la zero

Crearea secțiunii conținutului publicației

Sectiunea de cuprins postarea este o parte necesară a oricărui șablon de pagină pentru a afișa cuprins pagină reală sau postare încorporată în Divi sau WordPress. Vom adăuga acest lucru la șablonul nostru înainte de a crea primul nostru îndemn de inserat.

Adăugați un rând la o coloană

Pentru început, adăugați un rând al unei coloane la secțiunea obișnuită.

Secțiune cu o singură linie

Adăugați un modul de conținut de publicare

Apoi adăugați un modul cuprins publicare la linie.

Conținutul articolului

Setări de linie

După această actualizare, parametrii liniei, după cum urmează:

  • Lățime: 100%
  • Lățime maximă: 100%
  • Garnitură: 0px înaltă, 0px mică
Configurare linie Divi

Crearea apelului la acțiune în stânga sus

Acum că avem modulul nostru de conținut postat, suntem gata să începem să adăugăm primul nostru îndemn la acțiune pentru a-l insera în colțul din stânga sus al șablonului de pagină.

Adăugați o secțiune

Fiecare nou îndemn la acțiune va fi creat cu o secțiune nouă. Acest lucru vă va permite să adăugați orice aspect sau modul necesar pentru proiectarea apelului la acțiune.

Adăugați o nouă secțiune obișnuită la aspectul șablonului.

Selectarea unei noi secțiuni divi

Adăugați un rând la o coloană

Apoi dați secțiunii un rând dintr-o coloană.

Alegeți o coloană divi

Setări secțiune

Trageți (sau mutați) secțiunea de deasupra secțiunii postare și actualizați setările secțiunii după cum urmează:

  • Gradientul fundalului de culoare stânga:
  • Gradientul de fundal drept:
  • Afișați gradientul deasupra imaginii: DA
  • Imagine de fundal: [inserați imaginea]
  • Lățime: 320px
  • Marja: 320px stânga
  • Garnitură: 0px înaltă, 0px mică
  • Stil de animație: Slide
  • Direcția animației: dreapta
  • Întârziere animație: 2000 ms

Apoi treceți la fila avansată și adăugați următoarea clasă CSS și index Z:

  • Clasa CSS: slide-in-cta
  • Indicele Z: 999

Și adăugați fragmentul CSS personalizat urmând elementul principal:

position: fixed;top: 80px;left: -320px;

Personalizați secțiunea

Clasa CSS este necesară, astfel încât să putem viza secțiunea cu cod mai târziu. CSS personalizat va poziționa secțiunea din stânga sus a șablonului de pagină într-o poziție fixă ​​(sau lipicioasă). Poziția „stânga: -320 pixeli” ar trebui să mute întreaga secțiune (care are o lățime de 320 pixeli) în afara ferestrei browserului (deci în afara vederii noastre). Dar avem marja stângă de 320 pixeli pentru ao readuce în vizualizare. Motivul pentru care este construit în acest fel este că putem activa sau dezactiva valoarea marjei atunci când faceți clic pe pictograma „x”. Acest lucru va face ca CTA să alunece în interior și în afara vederii.

Setări de linie

Acum, actualizați parametrii liniei după cum urmează:

  • Utilizați o lățime personalizată a jgheabului: DA
  • Lățimea jgheabului: 1
  • Lățime: 100%
  • Garnitură: 0px înaltă, 0px mică
Parametru linie Divi

Adăugați un modul de apel la acțiune

În interiorul rândului, adăugați un modul Apel la acțiune.

Adăugați modulul call to action

Setări de apel la acțiune

Apoi actualizați setările îndemnului.

Conținut
  • Titlu: [introduceți textul la alegere]
  • Buton: [introduceți textul la alegere]
  • Corp: [introduceți textul la alegere]
  • Adresa URL a linkului butonului: [introduceți adresa URL reală sau #]
Personalizați oferta modulului divi

Apoi eliminați culoarea de fundal implicită pentru a dezvălui fundalul secțiunii pe care am adăugat-o mai devreme.

Eliminați culoarea de fundal
Parametri de proiectare (text, buton și completare)

În fila Proiectare, actualizați următoarele:

  • Titlul fontului: Lato
  • Titlu Greutate font: grele
  • Înălțimea liniei de titlu: 1,3 em
  • Corpul poliției: Lato
  • Greutate corporală: bold
  • Utilizați stiluri personalizate pentru buton: DA
  • Dimensiunea textului butonului: 15px
  • Lățimea marginii butonului: 0px
  • Spațiu de litere pentru butoane: 1px
  • Button font: Lato
  • Greutatea fontului pentru buton: grea
  • Stilul fontului pentru butoane: TT
  • Completarea butoanelor: 12 pixeli în partea de sus, 12 pixeli în partea de jos, 32 pixeli în stânga, 32 pixeli în dreapta
  • căptușire: 40 de pixeli în partea de sus, 40 de pixeli în partea de jos, 40 de pixeli în stânga, 40 de pixeli în dreapta
Personalizați modulul de font chemare la acțiune divi

Adăugați o pictogramă de deschidere și închidere cu un modul Blurb

După ce ați făcut apelul la acțiune, trebuie să creăm butonul pictogramă folosit pentru a deschide și închide apelul glisant la acțiune. Pentru a crea acest lucru, adăugați un modul blurb sub modulul call to action.

Modulul tooltip Divi

Setări text prezentare

Actualizați următorii parametri de proiectare.

Conținut
  • eliminați titlul implicit și textul corpului
  • Utilizați pictograma: DA
  • Pictogramă: mai multe (vezi captura de ecran)
Adăugați o pictogramă divi
Concepție
  • Culoare pictogramă: # 000000
  • Utilizați dimensiunea fontului pictogramei: DA
  • Dimensiunea fontului pictogramei: 40 pixeli
  • Lățime: 40px
  • Înălțime: 40px
  • Colțuri rotunjite: 50%
  • Transformă rotația axei Z: 135 de grade
Personalizați o pictogramă divi
Setări avansate

Sub fila avansată, adăugați următoarea clasă CSS:

  • Clasa CSS: slide-in_target

Apoi adăugați acest CSS personalizat la elementul principal.

position: absolute;bottom: 0px;right: -40px;

Adăugați următorul CSS personalizat la imaginea Blurb.

margin-bottom: 0px;

Personalizați modulul css al stilului divi

rezultat

Iată rezultatul de până acum.

Rezultatul atins acum

Rețineți că trebuie să adăugăm încă un cod pentru a adăuga funcționalitatea de închidere și deschidere atunci când faceți clic pe pictograma „x”. Vom adăuga codul după crearea unui îndemn la acțiune în fiecare dintre cele patru colțuri ale modelului.

Crearea apelului la acțiune în partea dreaptă sus

Cu primul apel la acțiune încorporat, putem accelera procesul de creare a restului CTA-urilor prin duplicarea secțiunii deja create. Apoi, vom crea un apel îndemn către colțul din dreapta sus.

Secțiune duplicată

Implementați modul de afișare wireframe, apoi copiați secțiunea CTA din partea stângă sus.

Creați secțiuni duble divi

Actualizați setările secțiunii

Apoi actualizați noii parametri ai secțiunii după cum urmează:

  • marja: 320px dreapta
  • direcția animației: stânga

Apoi actualizați CSS personalizat în elementul principal prin înlocuirea „stânga” cu „dreapta”. Iată extrasul complet:

position: fixed;top: 80px;right: -320px;

Modificați alinierea secțiunii divi

Actualizați parametrii modulului Blurb

Apoi, deschideți setările modulului Blurb și actualizați fragmentul CSS personalizat din elementul principal, înlocuind „dreapta” cu „stânga”. Iată extrasul complet:

position: absolute;bottom: 0px;left: -40px;

Adăugați un cod divi

rezultat

Acum veți vedea un îndemn ca un diapozitiv în partea dreaptă sus a șablonului de pagină.

Glisor în partea dreaptă sus

Efectuați aceleași operații pentru restul secțiunilor „Dreapta inferioară”, „Stânga inferioară”. De asemenea, va trebui să ajustați codul CSS pentru fiecare dintre module pentru a avea un rezultat similar cu următorul.

Rezultatul final divi

Adăugarea de fragmente personalizate jQuery și CSS utilizând un modul de cod

Pentru ultimul pas, trebuie să adăugăm câteva jQuery și CSS personalizate, astfel încât să putem obține funcționalitatea de deschidere și închidere a fiecărui diapozitiv CTA.

Adăugați un modul de cod

Adăugați un modul de cod la una dintre secțiunile prezentării.

Adăugați un cod js divi

Lipiți codul

Apoi deschideți setările codului și lipiți următorul cod în zona codului.

<style>.slide-in-cta, .slide-in_target, .slide-in-toggle-active {transition: all 400ms ease-in-out;} .slide-in-toggle-active {margin: 0px 0px 0px 0px !important;}.slide-in-toggle-active .slide-in_target  {transform: none !important;background: rgba(0,0,0,0.2);}  .slide-in_target {cursor: pointer;}</style><script>(function($) {$(document).ready(function(){$('.slide-in_target').click(function(){$(event.target).closest('.slide-in-cta').toggleClass('slide-in-toggle-active'); });    });})( jQuery );   </script>

Adăugați cod jquery

Ultimele gânduri

Cu Divi, nu este deloc dificil să creezi un îndemn la acțiune. Și, deoarece puteți utiliza generatorul de teme pentru a adăuga un îndemn la un șablon de pagină, veți avea mai mult control asupra paginilor care afișează acele CTA-uri.