Cum să creați și să afișați pop-up prin etichetă de post în WordPress

Doriți să creați și să afișați o etichetă pop-up per postare în WordPress? Așa că continuă să citești acest articol.

Suntem siguri că ești deja familiarizat cu fereastra mică care apare atunci când navighezi pe un site web. Ei bine, se numește popup sau popup. Popup-urile pot apărea în diferite dimensiuni și poziții pe ecran pe un site web.

În WordPress, există multe plugin-uri pentru crearea de ferestre pop-up, cum ar fi Elementor Pro, JetPopup, Brizy Pro și multe altele.

Lucrul important de reținut este că ferestrele pop-up nu ar trebui să fie deranjante pentru vizitatorii site-ului dvs. Prin urmare, creați un pop-up cât mai simplu și atractiv posibil.

Cuprins

Unele plugin-uri WordPress pentru a crea ferestre pop-up

Elementor Pro

Elementor Pro este o extensie Elementor cu sute de funcții premium. Vă oferă instrumente profesionale puternice care vă accelerează fluxul de lucru și designul. Elementor Pro vă oferă control deplin asupra aspectului și designului site-ului dvs. web. În acest caz, puteți personaliza liber designul pop-up-ului dvs.

Utiliser Elementor Pro a crea o fereastră pop-up prin etichetă post este foarte simplu și ușor de utilizat. Puteți defini cu ușurință condițiile de afișare ale pop-up-ului dvs. într-un mod foarte precis.

Crocoblock's JetPopup este o extensie pentru Elementor. Îl puteți cumpăra ca plugin independent sau îl puteți cumpăra într-un pachet cu alte plugin-uri Crocoblock. Avantajul utilizării JetPopup pentru a crea o fereastră pop-up este că vine cu o mulțime de caracteristici interesante.

Vă puteți juca cu declanșatoarele ferestrei pop-up.
Puteți crea animații pentru fereastra pop-up.
Sunt disponibile un număr mare de șabloane pop-up.

Citiți și: 22 de cele mai bune suplimente premium pentru Elementor

Brizy Pro

Creatorul pop-up al Brizy Pro iti ofera doua variante. Primul este pop-up-ul activat prin clic, iar al doilea este declanșatoarele și condițiile automate.

Deschiderea la clic: pop-up-ul dvs. poate fi declanșat pur și simplu făcând clic pe elementele paginii dvs.
Declanșatoare și condiții automate: puteți configura acțiunile vizitatorilor care vor determina când sunt afișate ferestrele pop-up.

După cum am menționat mai devreme, aveți mai multe opțiuni pentru a crea un pop-up în WordPress. În acest tutorial, vă vom arăta cum să creați și să afișați o etichetă pop-up per postare folosind versiunea Elementor Pro, așa că asigură-te că ai deja unul.

Primul lucru de făcut este să creați un nou șablon Popup. Pentru a crea un nou șablon Popup, accesați Șabloane > Ferestre pop-up pe tabloul de bord WordPress și faceți clic pe butonul Adăuga nou.

Apoi, adăugați numele popup-ului dvs. și faceți clic pe butonul CREAȚI UN MODEL.

Veți fi direcționat către biblioteca de șabloane, puteți alege un șablon din fereastra bibliotecii sau puteți crea propriul șablon Popup. Pentru a utiliza un șablon din bibliotecă, faceți clic pe butonul insera.

Dar în acest tutorial, vom crea șablonul Popup de la zero. Faceți clic pe pictogramă X pentru a închide biblioteca de șabloane.

Trebuie să facem unele ajustări în setările Popup înainte de a începe să creăm un șablon Popup. Puteți găsi cele mai bune setări pentru site-ul dvs. În acest tutorial, vă vom arăta setările pop-up la alegere.

Faceți clic pe pictograma roată din colțul din stânga jos. În setările pop-up, modificați Lățime în 90% din lățimea vederii (VW) Et Poziţie en Centru-Jos.

Apoi, proiectați șablonul pop-up. Adăugați o nouă secțiune și selectați structura cu 5 coloane. În setările secțiunii, setați Lățime pe 950. Vă puteți juca cu setările dvs.

De exemplu, puteți accesa fila Stil pentru a seta fundalul, accesați fila avansat pentru a personaliza marginea și multe altele.

Acum reveniți la coloanele dvs. În coloana din stânga, setați lățimea la 33%, iar pentru celelalte patru, la 16%.

În coloana din stânga, vom adăuga un widget Titlu cu ceva text. Puteți adăuga text care invită vizitatorii site-ului dvs. să vadă alt conținut care este relevant pentru conținutul curent sau orice alt text la alegere.

În dreapta, vom adăuga un widget Imagine. Puteți adăuga imagini din miniaturi/imagini prezentate ale postărilor sau le puteți încărca manual.

Acum structura este gata. Intoarce-te la Setări pop-up pentru a personaliza animațiile de intrare, ieșire și margine. În acest tutorial, setăm intrarea la Se estompează în jos iar ieșirea este activată Se estompează. Apoi accesați fila avansat și setați marja la 30 (valoare comună pentru linkuri).

Acum că designul este gata, faceți clic pe butonul publier pentru a seta condițiile de afișare și declanșatoarele. Pentru a defini starea de afișare, faceți clic pe butonul ADĂUGAȚI O CONDIȚIE și selectați opțiunea dvs. din lista verticală.

Deoarece doriți să afișați eticheta Popup prin postare, puteți seta următoarele condiții de afișare (vezi animația).

Faceți clic pe Următorul. În fila declanșatoare, setați declanșatorul la Pe Defilare acţionând comutatorul la da. Definiți Direcţie pe Bas și Lățime peste 95%. Pentru că dorim ca popup-ul să apară atunci când vizitatorii ajung la sfârșitul articolului nostru.

În acest tutorial, nu vom defini Reguli avansate. Așa că faceți clic pe SALVEAZA SI INCHIDE. Ei bine, acum am terminat.

Să vedem cum arată.

Aici tocmai ați terminat pop-up-ul. Vezi și articolele noastre conexe:

Descărcați Elementor Pro

Distribuie acest articol:

Mikhos Gartner

Mikhos Gartner este un expert în instrumente digitale care achiziționează, testează și revizuiește instrumente SAAS pentru întreprinderile mici. Bazându-se pe ani de experiență în domeniul tehnologiei, el oferă recenzii perspicace. Conținutul său este consumat pe scară largă, deservind milioane de utilizatori în fiecare lună.