Primele ferestre pop-up au fost create din scenariul imaginat de Ethan Zukerman pentrucazare a paginii sale web pe Tripod la începutul anilor 90. Utilizatorii săi se plângeau de numărul de reclame pe care le plasa pe site, așa că a decis să plaseze bannerele pe o pagină separată care se deschidea când un utilizator accesa pagina.

Această mică bucată de cod încă nu a fost un pop-up real, așa cum vedeți pe fiecare site web chiar acum, dar de aici a început totul. Pe paginile web moderne, ferestrele pop-up sunt utilizate în scopuri diferite, nu doar pentru reclame. Formularele de contact, avertismentele privind politica de confidențialitate și sugestiile de abonament sunt, de asemenea, adesea prezentate ca ferestre pop-up.

Există două lucruri care îi enervează pe utilizatori atunci când vine vorba de ferestre de tip pop-up: când sar pe tine când nu îi vrei; iar când aspectul său diferă complet de stilul site-ului. Aceste două probleme apar atunci când utilizați pluginuri care nu par a fi de cea mai bună calitate.

Cea mai mare problemă a celor mai multe plugin-uri pe care le folosesc dezvoltatorii începători crearea de pop-up-uri este lipsa de control asupra mesajului rezultat. Cu toate acestea, puteți evita toate aceste probleme dacă utilizați Elementor creați un site web.

Două plugin-uri minunate, create special pentru Elementor Page Builder, vă ajută să creați ferestre pop-up de orice tip, formă și stil de care aveți nevoie – Elementor Popup Builder et JetPopup. Întrucât ambii sunt compuși din aceeași carne ca Elementor, singura întrebare de pus este ce dintre aceste pluginuri să aleagă. Pentru a vă ajuta să luați această decizie, voi face o analiză amănunțită a ambelor și le puteți compara avantajele și dezavantajele. Deci să mergem !

Descărcare și instalare

Acesta nu este cel mai important criteriu atunci când alegeți ce plugin să utilizați, dar pentru a-l încerca, trebuie să îl obțineți mai întâi. De aceea, voi începe de la bun început și voi descrie procesul pentru ao obține - prețul, efortul implicat și simplitatea procesului de configurare.

Popup Builder

Elementor

Acest plugin a fost creat de echipa Elementor. Prin urmare, l-am putea numi adevăratul său „copil”. Aceasta este ultima actualizare pentru Elementor, lansată în ianuarie 2019 pentru a satisface nevoile clienților. Cu toate acestea, nu este disponibil pentru utilizatorii versiunii gratuite a Elementor.

Popup Builder este inclus în planul de abonament profesional. Deci, pentru a avea posibilitatea de a crea ferestre pop-up, trebuie mai întâi să aveți Elementor Pro. Cel mai simplu plan de prețuri care vă permite să utilizați toate caracteristicile Elementor pentru un singur site web costă 49 ​​USD pe an. Deci, de la primii pași (achiziționarea Elementor Pro), iată algoritmul pentru a obține Popup Builder:

  • Cumpărați Pro Elementor Page Builder.
  • Accesați contul personal și descărcați pluginul.
  • Accesați tabloul de bord al site-ului dvs. Web, pluginuri> Adăugați un nou, faceți clic pe butonul „Încărcați pluginul” și alegeți fișierul .zip corespunzător.
  • Când instalarea este finalizată, activați pluginul cu cheia de licență.
  • Iată Generatorul de ferestre pop-up situat în fila Șabloane> Ferestre pop-up.

Este un drum cam lung, dar cu Popup Builder veți obține, de asemenea, o colecție uriașă de elemente diferite de la Elementor, cum ar fi widget-uri, șabloane și alte instrumente suplimentare.

Popup Builder

JetPopup

„Familia” de plugin-uri Jet are deja mai mult de articole 10, iar JetPopup este unul dintre ele. A fost creat cu atenție special pentru Elementor și crește numărul de instrumente disponibile. Acest plugin este tJetPopupsComplet compatibil cu versiunile gratuite și cu plată. Deci nu este nevoie să faceți achiziții suplimentare. JetPopup costă 15 USD și, odată ce îl obțineți, îl puteți folosi pentru un singur site web. Dacă aveți nevoie de el pentru mai multe proiecte, puteți achiziționa pluginul sub licența dezvoltatorului (vă va costa 45 USD) și îl puteți utiliza pentru cinci site-uri web. Algoritmul pentru obținerea pluginului este puțin mai simplu:

  • Cumpărați pluginul de pe piața TemplateMonster. Va fi descărcat pe computer.
  • Accesați tabloul de bord al site-ului dvs. Web, pluginuri> Adăugați un nou, faceți clic pe butonul „Încărcați pluginul” și alegeți fișierul .zip corespunzător.
  • Când instalarea este finalizată, activați pluginul.
  • Voila! Când deschideți meniul de personalizare Elementor (făcând clic pe butonul „Modificați cu elementor”), veți găsi secțiunea JetPopup din meniul din stânga widget-ului.

JetPopup

Crearea pop-up

Acum, când instrumentele sunt acolo și gata, pot încerca să creez o fereastră cu ambele pluginuri și să văd cât de simplă și de înțeles este caracteristica. În continuare, voi crea un pop-up de bază și aruncați o privire asupra opțiunilor de personalizare pentru Popup Builder și JetPopup.

Popup Builder

În Pro Elementor ferestrele pop-up se fac separat de paginile site-ului. Pentru a schimba aspectul site-ului web, deschideți pagina pe care doriți să o personalizați, faceți clic pe butonul „Editați cu Elementor” și efectuați modificări. Dar pentru a crea (și apoi a edita) ferestre pop-up, trebuie să accesați Șabloane> Ferestre pop-up și să apăsați butonul „Adăugați un popup nou”.

Popup Builder
Încercați acum Popup Builder

În fereastra deschisă, trebuie să alegeți șablonul pe care îl veți crea (da, puteți crea șabloane nu numai pentru ferestrele pop-up, ci și pentru pagini și alte elemente) și dați-i un nume.

crearea pop-up

După apăsarea butonului „Creați șablon” veți fi redirecționat către meniul de personalizare Elementor. Este mai ușor să personalizați un element existent construindu-l de la zero. Prin urmare, vi se va solicita mai întâi să alegeți un model adecvat.

popups biblioteca

Am ales unul dintre modelele afișate în partea de sus a listei de biblioteci. Imediat după alegere, aterizați pe spațiul de lucru Elementor cu care probabil sunteți obișnuit. Opțiunile de personalizare sunt plasate în bara laterală din partea stângă a ecranului. Aveți trei file aici.

Fila „Setări” vă permite să schimbați aspectul ferestrei, să schimbați numele modelului și previzualizarea. În fila „Stil” puteți personaliza designul - puteți schimba culorile, fonturile, imaginile și bordurile. Fila „Advanced” are, de asemenea, un set de cursoare suplimentare; de exemplu, acestea împiedică pop-up-ul să se închidă cu tasta ESC.

setări pop-up

După cum puteți vedea - nimic neașteptat, dacă ați folosit Elementor înainte, atunci nu veți întâmpina probleme cu acest plugin. Iată un videoclip detaliat care explică cum să creați o fereastră pop-up utilizând Popup Builder:

JetPopup

Acest plugin adaugă, de asemenea, o nouă filă pe tabloul dvs. de bord WordPress temă și cu ajutorul acestuia, pop-up-urile sunt create și separat de pagini. Ferestrele de tip pop-up din cutie sunt, de asemenea, stocate într-o filă numită „Biblioteca popup”. Pentru a crea o fereastră pop-up nouă, puteți fie să apăsați butonul „Adăugați” pe șablonul prestabilit, fie să accesați JetPopup > Adăugați un pop-up nou, să dați un nume șablonului și să apăsați pe „Editare cu Elementor”.

adăugați pop-up nou

Câmpul de lucru este ușor diferit de normă, deoarece acum creați o fereastră mai mică. În meniul din stânga, puteți adăuga orice tip de element în fereastra pop-up.

elemente popup

Pluginul JetPopup adaugă un singur element la meniul widget - buton de acțiune contextuală. Aceasta permite definirea tipului de acțiune care va avea loc atunci când utilizatorul apasă butonul.

popup buton de acțiune

editați butonul de acțiune pop-up

Nu este chiar evident să deschideți setările din fereastra pop-up. Trebuie să faceți clic pe butonul de întreținere din partea de jos a meniului. Meniul de setări este destul de similar cu cel din Popup Builder, dar există doar două file de personalizare. „Setări generale” vă permite să definiți un efect de animație, să redenumiți modelul sau să definiți condițiile. În fila „Stil” puteți schimba aspectele, culorile, imaginile, fonturile și marginile.

popup setări generale

JetPopup are o funcționalitate ceva mai puțin evidentă, dar compensează cu tutoriale video detaliate și utile.

declanșatoare

Pentru a fi utile și pentru a nu enerva vizitatorii, pop-up-urile trebuie să apară la momentul potrivit. Condițiile în care este afișat pop-up-ul sunt numite „declanșatoare”. Cu cât sunt mai detaliate condițiile disponibile, cu atât este mai flexibil pluginul pop-up. Precizia este foarte importantă dacă nu doriți ca utilizatorul dvs. să părăsească site-ul după ce apare fereastra pop-up a formularului de abonament.

Popup Builder

editare pop-up

publică pop-up

Acest plugin vă ajută să definiți condițiile necesare imediat după personalizarea ferestrei pop-up. Când apăsați butonul „Publicare” vedeți fereastra în care puteți defini condiții (pe care pagini va fi afișată această fereastră), declanșează (când va fi afișată fereastra pop-up) și reguli avansate.

Popup Builder are șase declanșatoare, cum ar fi afișarea pe un scroll și clic și șapte reguli avansate, cum ar fi afișarea după un număr stabilit de sesiuni sau afișarea pe anumite dispozitive. Declanșatoarele și regulile avansate au comutatoare simple cu glisor și va fi foarte rapid să setați parametrii doriți.

JetPopup

setări pop-up

prima pagină a unei ferestre

Toți declanșatorii, condițiile și evenimentele de deschidere sunt grupate împreună în parametri. După ce faceți clic pe butonul de întreținere, deschideți filele de setări și puteți seta declanșatoarele imediat. Puteți seta procentajul paginii după derulare, meniul contextual de afișat sau numărul de secunde după care utilizatorul va vedea mesajul.

Fereastra poate fi afișată doar o dată sau de fiecare dată când utilizatorul efectuează anumite acțiuni (nu o recomand cu mare încredere - nu îi va face pe utilizatori fericiți). De asemenea, puteți alege foarte precis ce postări sau pagini vor fi afișate acest pop-up concret. În general, acest plugin este destul de flexibil și vă permite să afișați ferestre pop-up cu mare precizie.

poziționare

Utilizatorii cu siguranță nu vor putea evita ferestrele care sar chiar din centrul ecranului, dar distrag vizitatorii de pe site și pot fi foarte enervanți. Nu toate ferestrele pop-up ar trebui să fie plasate în centru, o panglică îngustă în partea de sus va fi mai puțin vizibilă, dar poate fi mult mai eficientă. Aceasta înseamnă că trebuie să controlați poziția ferestrei și să vă puteți deplasa pe ecran.

poziționare

Popup Builder et JetPopup împărțiți ecranul în nouă sectoare și vă permite să plasați popup-ul în oricare dintre ele. Poziționarea este definită de-a lungul scalelor stânga-dreapta și sus-jos. Nu este foarte flexibil, dar este suficient pentru un popup.

Efecte de animație

Modul în care fereastra alunecă (sau se rostogolește sau sare) pe pagină este foarte important. Dacă fereastra se mișcă prea repede sau prea încet, nu va fi eficientă. Sărituri, gâdilări și tremurături ar trebui, de asemenea, să fie utilizate cu mare precizie. Efectele de animație fac site-ul mai dinamic, dar pot strică și toată impresia.

Efecte de animație

Popup Builder are 36 de tipuri de animație de intrare, incluzând diferite tipuri de glisare, desfășurare, mărire, ricoșare și rotire în direcții diferite. Toate acestea, împreună cu durata animației, pot fi găsite în secțiunea „Aspect” din fila Setări.

setări pop-up jet

Există 13 tipuri de animație în plugin JetPopup, inclusiv decolorarea, întoarcerea verticală, diapozitive diferite, sărituri și zoom. Le veți găsi în secțiunea „Setări” din fila Setări.

modele

În unele cazuri, doriți să creați un pop-up cu o structură specifică și să știți exact cum ar trebui să arate. Dar aceasta este o ocazie destul de rară; mult mai des nu ai idee ce elemente ar trebui să conțină popup-ul tău. Aici sunt utile șabloanele. Chiar dacă nu utilizați niciunul dintre mostrele preconfigurate, procesarea acestora vă poate oferi o imagine de ansamblu bună. Și, desigur, personalizarea unui articol ieșit din cutie este mult mai rapidă și mai ușoară decât construirea lui de la zero.

Biblioteca modelului Elementor

Popup Builder a adăugat o categorie la biblioteca de șabloane Elementor. După cum v-am mai spus, puteți vedea acest lucru chiar la începutul noului proces de creare a unui popup. Sortimentul de șabloane pop-up este suficient de mare; există mai mult de 100 de articole. În colțul din stânga sus, un instrument de sortare pe categorii derulante vă permite să accelerați căutarea. Categoriile sunt de înțeles și nu va dura mult timp pentru a găsi popup-ul de care aveți nevoie.

jet popups biblioteca presetată

JetPopup are, de asemenea, o imensă bibliotecă de șabloane. Toate acestea sunt stocate în fila Bibliotecă contextuală și au caracteristici utile, cum ar fi butonul de previzualizare și contorul de utilizare. Există mai multe opțiuni de sortare, lista ar putea fi configurată pentru a afișa un anumit tip de modele și apoi să fie plasată în orice ordine; de exemplu, în funcție de data creării. Nu vă pot spune numărul exact de modele disponibile, dar cu siguranță există peste 100.

Tabelul de comparație

Elementor Popup Builder JetPopup
Prix 45 $ 15 $
modele 100+ 100+
declanșatoare 6 declanșează, reguli avansate 7 5 evenimente deschise cu parametri suplimentari
Animatio Tipuri 36 Tipuri 13
tutoriale documentaţie documentare, tutoriale video 9

JetPopup vs Popup Builder

Concluzie

Nu pot spune care dintre aceste două pluginuri este mai bun; este prea complicat să-i judecăm. Fiecare caz și fiecare persoană are propriile cerințe pentru alegerea pluginurilor. Cred că ar trebui să-l definiți singur - care dintre acestea două va fi cel mai bun pentru dvs.? Vă doresc mult noroc în adăugarea unui popup extraordinar pe site-ul dvs. web!