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”.
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.
Alocați șablonul paginii sau paginilor pe care doriți să afișați bara promoțională.
Pe noul model, faceți clic pe zona „Adăugați un corp personalizat”, apoi selectați „Creați un corp personalizat”.
Apoi selectați opțiunea „Build From Scratch”.
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ă.
Adăugați un modul de conținut de publicare
Apoi adăugați un modul cuprins publicare la linie.
Setări de linie
După această actualizare, parametrii liniei, după cum urmează:
- Lățime: 100%
- Lățime maximă: 100%
- Garnitură: 0px înaltă, 0px mică
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.
Adăugați un rând la o coloană
Apoi dați secțiunii un rând dintr-o coloană.
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;
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ă
Adăugați un modul de apel la acțiune
În interiorul rândului, adăugați un modul Apel la acțiune.
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 #]
Apoi eliminați culoarea de fundal implicită pentru a dezvălui fundalul secțiunii pe care am adăugat-o mai devreme.
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
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.
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)
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
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;
rezultat
Iată rezultatul de până 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.
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;
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;
rezultat
Acum veți vedea un îndemn ca un diapozitiv în partea dreaptă sus a șablonului de pagină.
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.
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.
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>
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.
Super, acest articol! Exact asta caut!
Multumesc frumos.
Mică întrebare subsidiară, este posibil ca acest CTA să se deschidă automat într-un anumit loc atunci când derulați pe pagină?
Bună ziua!