Cum să creezi un pop-up captivant pe site-ul tău WordPress

Publicat: 2022-02-25

Ce îți vine în minte când te gândești la un pop-up? Enervant, nu-i așa? Nu, va trebui să gândiți diferit de acum înainte ca profesionist web. Pentru că conceptul de popup s-a schimbat semnificativ în ultimii ani.

Utilizarea ferestrelor pop-up este acum o modalitate importantă de a crește ratele de conversie. Conform statisticilor recente ale OptiMonk, rata medie de conversie a ferestrelor pop-up este de peste 11,1%.

Apoi, cum să creați un pop-up pe WordPress și cum să îl aplicați eficient? Și se poate face gratuit? Nu-ți face griji. Vă avem acoperit.

În acest articol, vă vom arăta două metode de a crea ferestre pop-up pe site-urile dvs. WordPress.

Metoda 1: Crearea unui pop-up pe un site WordPress general gratuit

Metoda 2: Adăugarea unui pop-up pe un site WordPress bazat pe Elementor

De asemenea, vă vom anunța diferența dintre ferestrele pop-up convenționale și modale, beneficiile utilizării ferestrelor pop-up și cele mai bune practici ale acestora.

Să începem:

Convențional vs Modal: ce pop-up să alegeți

Popup-urile au diferite tipuri și cazuri de utilizare. În general, o fereastră pop-up este o interfață grafică cu utilizatorul (GUI), afișată de obicei într-o fereastră mică, care apare brusc (apare) în prim-planul unui site web sau al unei aplicații.

Conventional vs Modal: Which Popup to Choose

Oamenii folosesc de ani de zile ferestre pop-up care se deschid dincolo de fereastra actuală. Această metodă convențională de utilizare a ferestrelor pop-up nu este eficientă. Pentru că, aceste tipuri de ferestre pop-up, în cele mai multe cazuri, dor atenția utilizatorilor și sunt de fapt enervante.

Pe de altă parte, ferestrele pop-up modale (cunoscute și ca ferestre modale) sunt forma modernă de ferestre pop-up care se deschide în interiorul paginii sau ferestrei curente. Ferestrele pop-up modale sunt mult mai eficiente, deoarece nu ratează ochii utilizatorilor și șansa de a obține interacțiune este evident mare aici.

Poate că aveți care dintre ele să alegeți – ferestrele pop-up modale, desigur.

Beneficiile utilizării pop-up-urilor moderne

Popup-urile vă pot beneficia în multe feluri – de la informarea utilizatorilor până la creșterea ratelor de conversie – dacă le utilizați pe cele moderne (cum ar fi ferestrele pop-up modale) și le aplicați inteligent.

Acum, vă vom informa pe scurt despre beneficiile utilizării ferestrelor pop-up moderne în următoarele puncte:

  • Atrageți atenția utilizatorilor cu 50% mai repede decât anunțurile banner – (Monitor campanie)
  • Oferiți o modalitate utilă de a afișa un mesaj sau o notificare importantă
  • Creșteți interacțiunea utilizatorului, cum ar fi rata de clic și rata de conversie
  • Vă permite să afișați anunțuri sau promoții pe care utilizatorii nu le pot evita
  • Vă ajută să creșteți vânzările, abonamentele, traficul web și durata sesiunii
  • Vă permite să primiți feedback de la utilizatori și să colectați datele acestora
  • Generați o rată excelentă de rentabilitate a investiției (ROI), deoarece acestea sunt eficiente din punct de vedere al costurilor

Sperăm că ați realizat beneficiile și importanța utilizării ferestrelor pop-up. Vom vorbi despre cele mai bune practici pop-up după ce arătăm cum le puteți crea singur.

Cum se creează un pop-up pe WordPress

How to Create a Popup on WordPress

Puteți crea gratuit un pop-up pe site-urile WordPress în diferite moduri. Cele mai simple modalități sunt asociate cu instalarea pluginului. Vă vom arăta în special două metode. Sunt:

  1. Crearea unui pop-up pe un site WordPress general gratuit
  2. Adăugarea unui pop-up pe un site WordPress bazat pe Elementor

Înainte de a începe, trebuie să vă asigurați că aveți acces administrativ la site-ul unde va fi creat popup-ul. De asemenea, va trebui să pregătiți conținutul pop-up-ului.

Acum, vom discuta toate procesele în detaliu cu elementele vizuale necesare. Deci, rămâi cu noi.

Metoda 1: Crearea unui pop-up pe un site WordPress general gratuit

Puteți crea ferestre pop-up frumoase și utile pe site-urile dvs. WordPress gratuit cu ajutorul unui plugin. Veți găsi mai multe plugin-uri gratuite pentru a vă face treaba. Am pregătit mai jos o listă scurtă a pluginurilor de top pentru a vă ajuta să luați o decizie rapidă. Hai să verificăm:

  1. Creator de pop-up
  2. OptinMonster
  3. HubSpot
  4. Popup Builder
  5. Hustle

Fiecare dintre pluginuri este bun și excelează în diferite cazuri de utilizare. Vom demonstra această metodă folosind „ Poup Maker ”, deoarece este versatilă, ușor de utilizat și foarte popular.

Instalați pluginul: mai întâi, trebuie să instalați pluginul „Popup Maker” pe site-ul dvs. WordPress. Cel mai probabil, știi cum să instalezi un plugin. Nicio problemă dacă nu o faci. Citiți acest articol și urmați instrucțiunile: Cum se instalează un plugin WordPress.

Creați popup-ul: După instalarea și activarea pluginului, va trebui să creați, configurați și proiectați pop-up-ul din meniul pluginului. Este la fel de simplu ca și crearea unei postări pe WordPress. Doar urmați pașii de mai jos:

  1. Accesați meniul „ Popup Maker ” din tabloul de bord
  2. Faceți clic pe butonul „ Creați o fereastră pop-up nouă ”.
Create a Popup on WordPress Sites

Introduceți ferestrei pop-up: acum, se va deschide panoul de editare pop-up (ar arăta ca imaginea de mai jos). Aici, veți configura și proiecta pop-up-ul dând diferite intrări. Urmați acești pași:

  1. Dați un nume pop-up (este doar un ID care nu va fi vizibil)
  2. Scrieți titlul pop-upului (este partea de antet a ferestrei dvs. pop-up)
  3. Scrieți și proiectați mesajul pe care doriți să îl afișați în fereastra pop-up
Create and design a popup with the Popup Maker plugin

Explorați setările pop-up: aproape ați terminat. Tot ce trebuie să faceți acum este să finalizați câteva setări de bază ale ferestrei pop-up și apoi să apăsați butonul „ Publicare ”. Următoarele setări sunt disponibile în prezent pentru acest plugin:

  • Declanșatoare (setați condiția de ce și când se vor deschide ferestrele pop-up)
  • Direcționare (vă permite să vizați un anumit grup de utilizatori)
  • Afișare (definește aspectul ferestrelor pop-up)
  • Închidere (creează condiția cum și când se vor închide ferestrele pop-up)
  • Avansat (câteva setări avansate pentru utilizatori experți)
Customize your popups with the settings menu

În primul rând, nu va trebui să vă deranjați cu toate opțiunile de setări. Va fi suficient dacă setați un declanșator și faceți unele ajustări în meniul „ Afișare ”. Lucrul cu meniul „ Închidere ” este opțional.

Setați declanșatoarele: Setarea declanșatorilor este foarte importantă. Pentru că ferestrele pop-up nu se vor deschide decât dacă le adăugați declanșatoare. Urmați pașii de mai jos pentru a adăuga declanșatorii:

  1. Accesați meniul de setări „Declanșatoare”.
  2. Faceți clic pe butonul „Adăugați un nou declanșator”, apoi se va deschide un mic panou (ca imaginea de mai jos)
  3. Aici, va trebui să oferiți condițiile pentru a deschide ferestrele pop-up
How to set triggers on a popup

Joacă-te cu setările de afișare: în această parte, vei putea modifica opțiunile de afișare – inclusiv dimensiunea, animația și șmecheria – ale ferestrei pop-up. Doar urmați acești pași:

  1. Accesați meniul de setări „ Afișare ”, se vor deschide mai multe file în partea dreaptă
  2. Faceți clic pe filele preferate unde doriți să faceți modificările
Tweak display settings to make your popups compelling

Ai terminat. Acum, apăsați butonul „ Publicați ” pe care l-am citat mai devreme. Am creat un pop-up (imaginea de mai jos) urmând acești pași. De asemenea, vei putea crea așa ceva, chiar mai bine dacă încerci.

Popup Sample

Pentru a vedea pop-up-ul în acțiune, trebuie să vă deschideți site-ul din front-end după ce îl publicați. Puteți edita sau modifica ferestrele pop-up din backend oricând doriți.

Metoda 2: Adăugarea unui pop-up pe un site WordPress bazat pe Elementor

Dacă site-ul dvs. WordPress este construit pe Elementor, veți putea crea niște pop-up-uri frumoase și intuitive cu ajutorul pluginului HappyAddons – un supliment eficient Elementor. Are un widget util numit „Modal Popup”, care vă va face treaba foarte ușor.

Instalați HappyAddons: Deoarece site-ul dvs. se bazează pe Elementor, evident că aveți pluginul Elementor instalat pe site-ul dvs. Acum, trebuie să instalați pluginul Happy Addons și versiunea sa Pro.

Adăugați popup-ul modal: După instalarea pluginului, puteți adăuga un pop-up modal la o pagină existentă sau nouă cu Elementor.

Citiți acest tutorial dacă nu știți cum să utilizați Elementor.

Acum, vă vom arăta cum puteți adăuga un pop-up modal pe site-ul dvs. Urmați acești pași:

  1. Căutați și găsiți widgetul „Modal Popup” din editorul Elementro
  2. Doar trageți și plasați „Modal Popup” și ați terminat!
Add a Popup on an Elementor-based WordPress Site

Personalizați popup-ul: ați creat deja un pop-up pe site-ul dvs. WordPress bazat pe Elementor. Acum, este timpul să-l personalizați. Doar urmați pașii de mai jos:

  1. Faceți clic pe pop-up-ul pe care tocmai l-ați creat
  2. Acum, mai multe opțiuni de personalizare se vor deschide pe panoul editorului
  3. Personalizați-vă pop-up așa cum doriți cu aceste opțiuni
Create a popup on Elementor with HappyAddons

Urmând acești pași, am adăugat un pop-up modal pe site-ul nostru Elementor, cum ar fi captura de ecran de mai jos. Hai să verificăm.

HappyAddons Modal Popup

Procesul de vizualizare a ferestrei pop-up este același. Deschideți-vă site-ul din front-end după ce îl publicați. Da, puteți edita sau modifica ferestrele pop-up Elementor oricând doriți din backend.

De asemenea, puteți verifica documentația widget-ului Happy Addons Modal Popup.

Articol relevant de citit: Cum să adăugați pop-up modal în Elementor

Cele mai bune practici pop-up: Ce să faceți pentru cel mai bun rezultat

Dacă doriți să obțineți tot ce este mai bun dintr-o fereastră pop-up, trebuie să o utilizați inteligent și cu atenție, deoarece ferestrele pop-up uneori pot strica experiența utilizatorului. Cele mai bune practici pe care ar trebui să le urmați pentru un pop-up sunt:

  • Adăugați ferestre pop-up numai în locurile unde este necesar
  • Utilizați pop-urile care sunt relevante pentru pagina dvs
  • Asigurați-vă că ferestrele pop-up sunt convingătoare și utile
  • Folosiți-le la momentul potrivit și la locul potrivit
  • Alegeți formatul și designul potrivit
  • Stabiliți ce doriți din fereastra pop-up
  • Vizează diferiți utilizatori cu diferite tipuri de ferestre pop-up
  • Test A/B înainte de a finaliza orice pop-up
  • Asigurați-vă că utilizatorii nu au fost nevoiți să petreacă mult timp pentru a interacționa

Acestea sunt practici foarte necesare și obligatorii pe care ar trebui să le urmați. Mai sunt câteva lucruri pe care trebuie să le întreții. Vă vom recomanda să faceți câteva cercetări înainte de a executa ferestrele pop-up.

Acum e rândul tău

Nu uitați, ferestrele pop-up devin utile zi de zi. Dar trebuie să fii inteligent și inovator pentru a obține tot ce este mai bun din asta. În caz contrar, ferestrele pop-up-uri pot ajunge să fie enervante ca oamenii care sunt neglijenți.

În acest blog, v-am arătat metodele atât pentru site-urile WordPress generale, cât și pentru cele bazate pe Elementor. Acum, este rândul dvs. să aplicați aceste metode în timp ce vă creați pop-up.

Sperăm că veți putea crea niște ferestre pop-up drăguțe și eficiente cu ajutorul tutorialului nostru cuprinzător. Vă rugăm să nu ezitați să ne anunțați în secțiunea de comentarii dacă vă confruntați cu probleme în acest proces.

Citește și: Construiește un site web profesional cu Elementor și suplimente Happy