Treci la conținutul principal

Cum să adăugați un apel glisabil recidivabil la acțiune pe Divi

Divi: cea mai ușoară temă WordPress de utilizat

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62. [Recomandat]

Apelarea la acțiune pe site-ul dvs. este una dintre cele mai puțin intruzive modalități de a atrage atenția vizitatorilor. De cele mai multe ori, vor ignora CTA sau îl vor închide pentru a continua cu crawlere în pagină, dar uneori le veți câștiga. Un apel la acțiune diapozitiv va funcționa excelent pentru a promova aproape orice pe o pagină de destinație.

În acest tutorial, vom proiecta un apel la acțiune care poate fi închis, care poate fi adăugat în orice colț al unei pagini folosind Divi Theme Builder. După ce ați terminat, veți putea să vă promovați produsele ș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.

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”.

Crearea secțiunii conținutului publicației

Secțiunea conținutul postării este o parte necesară a oricărui șablon de pagină pentru a afișa conținutul real al paginii sau postarea încorporată în Divi sau WordPress. Îl vom adăuga la modelul nostru înainte de a crea primul nostru îndemn la inserare.

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 de conținut de 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.

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați cu ușurință orice design de site web cu un aspect profesionist. Nu mai plătiți scump pentru ceea ce puteți face singur. [Gratuit]

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;

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

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.

Căutați cele mai bune teme și pluginuri WordPress?

Descărcați cele mai bune pluginuri și teme WordPress pe Envato și creați cu ușurință site-ul dvs. Web. Deja mai mult de descărcări 49.720.000. [EXCLUSIV]

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.

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ă.

Creați ușor magazinul dvs. online

Descărcați gratuit WooCommerce, cele mai bune pluginuri de e-commerce pentru a vă vinde produsele fizice și digitale pe WordPress. [Recomandat]

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. 

Acest articol conține 1 comentariu

  1. 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!

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Acest site folosește Akismet pentru a reduce nedorite. Aflați mai multe despre modul în care sunt utilizate datele dvs. de comentarii.

Inapoi in top
4 acțiuni
acțiune4
tweet
Registru