Cum să adăugați o fereastră pop-up declanșată la postările de pe blogul dvs. din Divi

Adăugarea unei ferestre pop-up declanșate la postările de pe blog pare a fi un lucru foarte inteligent de făcut. Poate că le-ați mai văzut când citiți alte bloguri. Pe măsură ce utilizatorul derulează până la un anumit punct al postării (de obicei la sfârșit), apare brusc o casetă care conține unele îndemnuri. Întregul scop al unei ferestre pop-up declanșate este să prezinte un îndemn la acțiune vizitatorilor în momentul exact în care doriți ca aceștia să îl vadă pe pagină. Pe scurt, este un instrument excelent pentru a spori conversiile sau pentru a obține clienți potențiali calificați. Din această cauză, multe pluginuri de creștere a conversiei (cum ar fi Bloom sau Optin Monster) vă permit să faceți același lucru.

În acest tutorial, vă vom arăta cum să adăugați o fereastră pop-up declanșată la postările de pe blogul dvs. din Divi de la zero, fără un plugin. Pentru a face acest lucru, vom folosi Divi Theme Builder pentru a proiecta un popup care conține o postare asociată pe categorii și, de asemenea, un popup care include o opțiune de e-mail. Declanșarea derulării se va realiza utilizând un mic fragment de jQuery.

Să începem!

Trage cu ochiul

Iată o privire rapidă asupra ferestrelor pop-up declanșate pe care le vom crea.

Vom crea în fereastra pop-up pentru a dezvălui o postare asociată (pe categorii) așa cum se vede mai jos.

Și vă vom arăta, de asemenea, cum să adăugați o opțiune de e-mail la fereastra pop-up, așa cum am văzut aici.

Descărcați GRATUIT șablonul Scroll Triggered Popup Divi Post

Pentru a pune mâna pe Șablonul de postare 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.

Va trebui să descărcați pachetul Fourth Theme Builder, deoarece vom folosi șablonul de postare premade din acel pachet pentru acest tutorial.

De asemenea, veți avea nevoie de cel puțin câteva postări de blog create în scopuri de testare pentru ca șablonul de postare să afișeze rezultatele.

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

Crearea unei ferestre de tip pop-up declanșate la sfârșitul postărilor dvs. de blog Divi

Importul șablonului de postare pe blog din al patrulea pachet Generator de teme

Din tabloul de bord WordPress, navigați la Divi> Theme Builder. În cadrul constructorului de teme, selectați pictograma de portabilitate din partea dreaptă sus a paginii. În fereastra popup de portabilitate, selectați fila de import, alegeți fișierul theme-builder-pack-4-post-template.json și faceți clic pe butonul de import. (Acest fișier de import va fi în folderul Fourth Theme Builder Pack)

De asemenea, puteți selecta opțiunea de a importa antetul și subsolul global ca machete statice.

După importarea șablonului, faceți clic pe pictogramă pentru a edita zona personalizată a corpului.

Aceasta vă va duce la editorul de aspect al șablonului corpului, unde vom adăuga ferestrele pop-up declanșate.

Proiectarea ferestrei pop-up declanșate cu o postare asociată pe categorii

Pop-up-ul va fi conținut de un rând Divi. Prin urmare, odată ce am instalat funcționalitatea popup, puteți completa rândul respectiv cu orice modul pentru a crea orice conținut doriți. Pentru acest prim exemplu, vom crea un popup cu o postare asociată pe categorii. În acest fel, atunci când un vizitator derulează până în partea de jos a postării, va primi o postare asociată într-un popup.

Iată cum să o faci.

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

Mai întâi adăugați un rând cu o coloană chiar sub rândul care conține modulul de conținut al postării în aspectul șablonului de postare.

Setări rând

Înainte de a adăuga un modul, actualizați setările rândului după cum urmează:

• Culoare fundal: #ffffff
• Lățimea jgheabului: 1
• Lățime: 300 px (desktop), 200 px (telefon)
• Căptușeală: 20 px sus, 0 px jos
• Box Shadow: vezi captura de ecran

Adăugați un modul de text

După ce setările rândului sunt personalizate, adăugați un modul text la rând. Aceasta va fi zona de titlu a popup-ului nostru de postare aferent.

Conţinut

Actualizați conținutul corpului cu textul „Postare asociată”.

Proiecta

Apoi actualizați setările de proiectare după cum urmează:

• Font text: Heebo
• Stil de text text: TT
• Culoarea textului textului: # f94857
• Alinierea textului: centru

Adăugați un modul Blog

Sub modulul text, adăugați un modul blog.

Conţinut

Deoarece vrem să afișăm doar o postare asociată, vom limita numărul de postări la una și vom include „categoria curentă”, astfel încât postarea care apare în fereastra pop-up să împărtășească aceeași categorie a postării reale afișate pe șablon.

Actualizați următoarele:

• Numărul de postări: 1
• Categorii incluse: Categorie curentă

Elemente

Sub grupul de opțiuni elemente, asigurați-vă că selectați să afișați doar imaginea prezentată. Ascundeți orice altceva.

Proiecta

Sub fila Proiectare, actualizați următoarele:

• Titlu Font: Heebo
• Titlu Greutate font: Ultra Bold
• Dimensiune text titlu: 16 px
• Înălțimea liniei de titlu: 1.4em
• Căptușeală: 5% sus, 5% stânga, 5% dreapta

Setări avansate de rând

Clasa CSS, CSS personalizat și indexul Z

Sub fila avansată, trebuie să oferim rândului nostru o clasă CSS, un pic CSS personalizat și să actualizăm indexul z astfel încât fereastra pop-up să rămână deasupra celuilalt conținut de pe pagină.

Acest pas va ascunde rândul de vizualizare atunci când utilizați generatorul vizual de pe partea frontală. Deci, poate fi mai bine să implementați vizualizarea wireframe înainte de a actualiza aceste opțiuni.

Odată ajuns în modul de vizualizare wireframe, deschideți setările rândului înapoi și adăugați următoarea clasă CSS:

• Clasa CSS: post-rând

Apoi adăugați următorul css personalizat la Elementul principal:

position: fixed;
bottom: 0%;
right: -300px;

Și actualizați indexul Z:

• Indicele Z: 999

Adăugați divizoare ca puncte de declanșare defilare

În acest moment, fereastra noastră de tip pop-up este pregătită. Acum trebuie să decidem unde să adăugăm punctele de declanșare a defilării pe șablonul de postare, astfel încât, odată ce utilizatorul se deplasează la aceste puncte, fereastra pop-up va fi afișată sau ascunsă. Punctele de declanșare ale derulării vor fi determinate de un element cu o clasă CSS. Întrucât dorim ca punctul de declanșare a derulării să fie în partea de jos a postării, putem folosi un divizor cu o clasă CSS ca element al punctului de declanșare a derulării.

Adăugați Scroll Trigger Point # 1

Pentru a adăuga primul nostru punct de declanșare defilare, să adăugăm un modul divizor direct sub modulul conținut post.

Apoi adăugați următoarea clasă CSS:

• Clasa CSS: post-waypoint

A fost ușor.

Adăugați Scroll Trigger Point # 2

Acum, pentru a adăuga al doilea punct de declanșare (cel care va ascunde fereastra pop-up mai departe în josul paginii), copiați modulul divizor care tocmai a fost creat.

Apoi lipiți-l într-un loc situat mai jos în șablonul de postare în care doriți ca fereastra popup să fie închisă (sau ascunsă). Pentru acest exemplu, îl adaug chiar sub modulul blogului de postări aferente și chiar deasupra secțiunii de comentarii a șablonului de postare.

Adăugați cod personalizat cu modulul de cod

Tot ce mai rămâne de făcut pentru ca acest popup declanșat să deruleze să funcționeze este un mic cod.

Continuați și adăugați un modul de cod la șablonul de postare.

Apoi lipiți următorul cod în caseta de cod:

<style>
  .post-row {
    transition: all .4s;
  }
  .post-row.show-post {
    right: 0px;
  }
</style>
<script>
  jQuery(document).ready(function($) {
    $('.post-waypoint').waypoint(function() {
        $('.post-row').toggleClass('show-post');
    }, {offset: '97%'});
  });
</script>

Rezultat

Pentru a vedea rezultatul, vizitați una dintre postările de pe blog și derulați pagina în jos. Ar trebui să vedeți pop-up-ul aferent postării când ajungeți în partea de jos a conținutului postării. Continuați să derulați pentru a-l ascunde imediat după secțiunea de postări aferente a postării.

Adăugarea unei opțiuni de e-mail la fereastra pop-up declanșată

Fereastra pop-up aferentă postării este interesantă, dar poate doriți ca în schimb să apară o opțiune de e-mail. Acest lucru este ușor de făcut. De fapt, putem folosi chiar opțiunea de e-mail deja proiectată în aspectul subsolului premade pe acest șablon.

Salvați subsolul e-mail Optin în biblioteca Divi

Salvați aspectul și ieșiți în generatorul de teme. Apoi faceți clic pentru a edita aspectul șablonului de subsol personalizat.

Găsiți modulul optin de e-mail și salvați-l în biblioteca divi.

Adăugați opțiunea de e-mail salvată în rândul pop-up

Acum reveniți la aspectul șablonului personalizat al corpului și adăugați e-mailul salvat în același rând pe care îl utilizați ca fereastră pop-up. Nu uitați, orice din interiorul acelui rând se va afișa ca conținut pop-up.

Deoarece nu utilizați modulul de text și blog, le puteți dezactiva pentru a nu fi văzute în partea din față.

Setări Optin pentru e-mail

Odată ce opțiunea de e-mail este instalată și celelalte module sunt dezactivate, actualizați setările de opțiune de e-mail după cum urmează:

• Titlu: „Ți-a plăcut acest articol?”
• Corp: „Alăturați-vă buletinului informativ!”

Apoi adăugați următoarea căptușeală:

• Căptușeală: 5% jos, 20 px dreapta

Rezultat

Acum verificați rezultatul pe o postare live.

Gânduri finale

Ferestrele pop-up declanșate ar putea fi cu siguranță un atu valoros pentru blogul dvs. Acestea oferă un mod discret de a valorifica clienții potențiali calificați. Utilizați o fereastră pop-up de postare similară pentru a-i menține implicați pe site-ul dvs. sau utilizați o opțiune de e-mail pentru a vă ajuta să vă dezvoltați lista. Și cu Divi, puteți adăuga aproape orice alt conținut la care vă puteți gândi. Și puteți decide exact când doriți ca vizitatorul să vadă acele ferestre popup care sunt destul de puternice. Sper să vă fie util pentru propriul blog sau pentru următorul proiect.

Aștept cu nerăbdare să aud de la dvs. în comentariile de mai jos.

Noroc!