Cum să adăugați un apel la acțiune care poate fi închis în orice colț al șablonului de pagină din Divi

A avea un apel la acțiune slide-in pe site-ul dvs. este una dintre cele mai puțin obscure modalități de a atrage atenția vizitatorilor. De cele mai multe ori vor ignora pur și simplu CTA sau îl vor închide pentru a continua să răsfoiți pagina, dar uneori îi veți câștiga. Un apel la acțiune slide-in 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 avea posibilitatea de a vă promova produsele și ofertele speciale oriunde pe pagină, fără a fi nevoie să utilizați un plugin.

Să începem!

Trage cu ochiul

Iată o privire rapidă asupra celor patru CTA-uri cu diapozitive pe care le vom adăuga în toate cele patru colțuri ale șablonului de pagină. Desigur, nu va trebui să aveți pe toți patru desfășurați simultan. Observați cum fiecare poate fi închis făcând clic pe pictograma „x” și apoi puteți alege să comutați CTA deschis înapoi făcând clic pe pictograma „plus”.

Descărcați GRATUIT modelul de pagină Divi Slide-In Call to Action

Pentru a pune mâna pe șablonul de pagină din acest 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 adăugați unul dintre fișierele json în Divi Theme Builder folosind opțiunea Theme Builder Portability.

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să instalați și să activați 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 acelei pagini pentru a afișa rezultatul.

După aceea, sunteți gata să plecați.

Crearea unui îndemn care poate fi închis pentru fiecare colț al șablonului de pagină din Divi

Crearea unui șablon nou

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

Atribuiți șablonul paginilor pentru care doriți să fie afișată bara promoțională.

În noul șablon, faceți clic pe zona „Adăugați corp personalizat”, apoi selectați „Construiți corp personalizat”.

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

Crearea secțiunii Post Content

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 postării încorporate în Divi sau WordPress. Vom adăuga acest lucru la șablonul nostru înainte de a crea primul nostru apel-la-acțiune slide-in.

Adăugați rândul cu o coloană

Pentru a începe, adăugați un rând cu o coloană la secțiunea obișnuită.

Adăugați un modul de conținut pentru postare

Apoi adăugați un modul de conținut de postare pe rând.

Setări rând

După aceea, 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

Crearea îndemnului glisant în partea stângă sus

Acum, când modulul nostru de conținut de postare este în poziție, suntem gata să începem să adăugăm primul nostru apel la acțiune în colțul din stânga sus al șablonului de pagină.

Adăugați secțiune

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

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

Adăugați rândul cu o coloană

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

Setări secțiune

Trageți (sau mutați) secțiunea de deasupra secțiunii de conținut a postării și actualizați setările secțiunii după cum urmează:

• Culoarea din stânga a gradientului de fundal:
• Culoarea dreaptă a gradientului de fundal:
• Afișați gradientul de deasupra imaginii: DA
• Imagine de fundal: [inserați imaginea]
• Lățime: 320 px
• Marja: 320px stânga
• Căptușeală: 0 px sus, 0 px jos
• Stil de animație: Slide
• Direcția animației: Corect
• Întârziere animație: 2000 ms

Apoi săriți peste fila avansată și adăugați următorul index CSS Class și Z:

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

Și adăugați următorul fragment CSS personalizat 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 în partea stângă sus a șablonului de pagină într-o poziție fixă ​​(sau lipicioasă). Poziția „stânga: -320px” ar trebui să mute întreaga secțiune (care are o lățime de 320 px) în afara ferestrei browserului. Dar avem marja stângă de 320 px pentru ao readuce în vizualizare. Motivul pentru care este construit în acest fel este astfel încât să putem activa sau dezactiva valoarea marjei atunci când facem clic pe pictograma „x”. Acest lucru va determina CTA să alunece în și din vizualizare.

Setări rând

Acum să actualizăm setările de rând după cum urmează:

• Utilizați lățimea personalizată a jgheabului: DA
• Lățimea jgheabului: 1
• Lățime: 100%
• Căptușeală: 0 px sus, 0 px jos

Adăugați modulul Call to Action

În interiorul rândului, adăugați un modul Call to Action.

Setări pentru apel la acțiune

Apoi actualizați setările apelului la acțiune.

Conţinut

• Titlu: [introduceți textul la alegere]
• Buton: [introduceți textul la alegere]
• Corp: [introduceți textul la alegere]
• Adresă URL a 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.

Setări de proiectare (text, buton și căptușeală)

Sub fila Proiectare, actualizați următoarele:

• Titlu Font: Lato
• Titlu Greutate font: greu
• Înălțimea liniei de titlu: 1.3em
• Font corp: Lato
• Greutatea fontului corpului: îndrăzneț
• Utilizați stiluri personalizate pentru buton: DA
• Dimensiune text buton: 15 px
• Lățimea chenarului butonului: 0 px
• Distanța dintre litere și butoane: 1 px
• Buton Font: Lato
• Buton Font Greutate: greu
• Stil Font Buton: TT
• Garnitura de butoane: 12 px sus, 12 px jos, 32 px stânga, 32 px dreapta
• umplutură: 40 px sus, 40 px jos, 40 px stânga, 40 px dreapta

Adăugați pictograma Deschidere și închidere cu un modul Blurb

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

Setări Blurb

Actualizați următoarele setări de proiectare.

Conţinut

• ștergeți titlul implicit și textul corpului
• Utilizați pictograma: DA
• Pictogramă: plus (vezi captura de ecran)

Proiecta

• Culoare pictogramă: # 000000
• Utilizați dimensiunea fontului pictogramei: DA
• Pictogramă Dimensiune font: 40 px
• Lățime: 40 px
• Înălțime: 40 px
• Colțuri rotunjite: 50%
• Transformare Rotire axa Z: 135deg

Setari 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 închisă și deschisă atunci când faceți clic pe pictograma „x”. Vom adăuga codul după ce vom crea un îndemn la acțiune în fiecare dintre cele patru colțuri ale șablonului.

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

Cu primul apel la acțiune slide-in creat, putem accelera procesul de creare a restului CTA-urilor prin duplicarea secțiunii deja construite. Apoi, vom crea un apel la acțiune slide-in pentru colțul din dreapta sus.

Secțiune duplicat

Implementați modul de vizualizare wireframe și apoi copiați secțiunea CTA din stânga sus.

Actualizați setările secțiunii

Apoi actualizați setările noii secțiuni după cum urmează:

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

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

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

Actualizați setările modulului Blurb

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

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

Rezultat

Acum veți vedea un apel la acțiune în partea dreaptă sus a șablonului de pagină.

Crearea apelului la acțiune în partea de jos din stânga

Secțiune duplicat

Pentru a crea un apel la acțiune slide-in în colțul din stânga jos al șablonului de pagină, copiați secțiunea CTA din stânga sus din partea de sus a aspectului paginii. Etichetați secțiunea duplicat „CTA din stânga jos”, apoi mutați-o sub secțiunea de conținut a postării.

Actualizați setările secțiunii

Apoi deschideți setările secțiunii actualizați elementul principal CSS prin înlocuirea „top: 80px” cu „bottom: 0px”. Iată ultimul fragment:

position: fixed;
bottom: 0px;
left: -320px;

Actualizați setările modulului Blurb

Apoi actualizați elementul principal CSS al Blurb Module înlocuind „bottom: 0px” cu „top: 0px”. Iată ultimul fragment:

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

Rezultat

Acum, verificați apelul la acțiune slide-in din stânga jos pe pagina live.

Crearea îndemnului din partea dreaptă jos, la îndemn

Secțiune duplicat

Pentru a crea apelul glisant în dreapta jos, copiați secțiunea CTA din dreapta sus și mutați secțiunea duplicat sub secțiunea conținut post.

Actualizați setările secțiunii

Deschideți setările secțiunii și actualizați elementul principal CSS înlocuind „top: 80px;” cu „fund: 0px;”. Iată ultimul fragment:

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

Actualizați setările modulului Blurb

Apoi deschideți setările modulului blurb și actualizați elementul principal CSS înlocuind „bottom: 0px;” cu „top: 0px;”. Iată ultimul fragment:

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

Rezultat

Acum, verificați îndemnul glisant în dreapta jos, pe pagina live.

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

Pentru pasul final, trebuie să adăugăm jQuery și CSS personalizate, astfel încât să putem obține funcționalitatea deschisă și apropiată pentru fiecare dintre slide-in CTA-uri.

Adăugați un modul de cod

Adăugați un modul de cod la una dintre secțiunile din aspect.

Lipiți codul

Apoi deschideți setările de cod și lipiți următorul cod în caseta de cod.

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

Gânduri finale

Cu Divi, nu este deloc dificil să creezi un apel la acțiune. Și din moment ce 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 vor afișa acele CTA-uri. Simțiți-vă liber să măriți întârzierea animației pentru secțiunea CTA, astfel încât utilizatorul să vadă animația slide-in CTA puțin mai târziu (sau mai devreme) după încărcarea paginii. De asemenea, puteți utiliza clienți potențiali Divi și puteți activa testarea divizată pentru a îmbunătăți conversiile acelor CTA și pentru a afla care colț va avea cea mai bună conversie.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!