Kako kreirati i prikazati iskačući prozor pomoću oznake za objavu u WordPress-u

Da li želite da kreirate i prikažete jedan iskačući prozor po oznaci objave u WordPress-u? Stoga nastavite čitati ovaj članak.

Sigurni smo da ste već upoznati s malim prozorčićem koji se pojavljuje prilikom pregledavanja web stranice. Pa, to se zove popup ili popup. Skočni prozori se mogu pojaviti u različitim veličinama i pozicijama na ekranu na web stranici.

U WordPress-u postoji mnogo dodataka za kreiranje iskačućih prozora, kao što su Elementor Pro, JetPopup, Brizy Pro i još mnogo toga.

Važno je zapamtiti da skočni prozori ne bi trebali biti dosadni posjetiteljima vaše web stranice. Stoga, napravite skočni prozor što jednostavniji i atraktivniji.

Sadržaj

Neki WordPress dodaci za kreiranje iskačućih prozora

Elementor Pro

Elementor Pro je proširenje za Elementor sa stotinama vrhunskih funkcija. Daje vam moćne profesionalne alate koji ubrzavaju vaš radni proces i dizajn. Elementor Pro vam daje potpunu kontrolu nad izgledom i dizajnom vaše web stranice. U tom slučaju možete slobodno prilagoditi dizajn svog skočnog prozora.

upotreba Elementor Pro kreiranje iskačućeg prozora po tag-u je vrlo jednostavno i lako za korištenje. Možete jednostavno definirati uvjete prikaza vašeg skočnog prozora na vrlo precizan način.

Crocoblockov JetPopup je proširenje za Elementor. Možete ga kupiti kao samostalni dodatak ili ga kupiti u paketu s drugim Crocoblock dodacima. Prednost korištenja JetPopup-a za kreiranje iskačućeg prozora je u tome što dolazi s puno cool funkcija.

Možete se poigrati sa okidačima iskačućih prozora.
Možete kreirati animacije za popup prozor.
Dostupan je veliki broj popup šablona.

Pročitajte takođe: 22 najbolja premium dodatka za Elementor

Brizy Pro

Kreator iskačućih prozora Brizy Pro nudi vam dvije opcije. Prvi je iskačući prozor koji se aktivira klikom, a drugi su automatski okidači i uvjeti.

Otvaranje na klik: Vaš skočni prozor može se pokrenuti jednostavnim klikom na elemente vaše stranice.
Automatski okidači i uvjeti: Možete konfigurirati radnje posjetitelja koje će odrediti kada će se iskačući prozori prikazati.

Kao što je ranije spomenuto, imate nekoliko opcija za kreiranje iskačućeg prozora u WordPress-u. U ovom vodiču pokazat ćemo vam kako da kreirate i prikažete iskačući prozor po objavi oznake koristeći verziju Elementor Pro, pa se pobrinite da ga već imate.

Prva stvar koju treba učiniti je kreirati novi popup predložak. Da kreirate novi iskačući predložak, idite na Predlošci > Skočni prozori na vašoj WordPress kontrolnoj tabli i kliknite na dugme Dodaj novi.

Zatim dodajte naziv vašeg skočnog prozora i kliknite na dugme IZRADITE MODEL.

Bićete preusmjereni na biblioteku predložaka, možete odabrati predložak iz prozora biblioteke ili dizajnirati svoj vlastiti popup predložak. Da biste koristili predložak iz biblioteke, samo kliknite na dugme umetnuti.

Ali u ovom vodiču ćemo kreirati popup predložak od nule. Kliknite na ikonu X da zatvorite biblioteku šablona.

Moramo izvršiti neke prilagodbe u postavkama iskačućih prozora prije nego počnemo kreirati predložak iskačućeg prozora. Možete pronaći najbolje postavke za svoju web lokaciju. U ovom vodiču ćemo vam pokazati postavke iskačućih prozora po vašem izboru.

Kliknite na ikonu zupčanika u donjem lijevom uglu. U postavkama iskačućeg prozora promijenite širina u 90% širine prikaza (VW) A Položaj en Center-Bottom.

Zatim dizajnirajte svoj popup predložak. Dodajte novi odjeljak i odaberite strukturu od 5 stupaca. U postavkama odjeljka postavite širina na 950. Možete se igrati sa svojim postavkama.

Na primjer, možete otići na karticu stil da postavite pozadinu, idite na karticu napredan za prilagođavanje margine i još mnogo toga.

Sada se vratimo na vaše kolumne. U lijevoj koloni postavite širinu na 33%, a za ostala četiri na 16%.

U lijevoj koloni ćemo dodati widget za naslov s nekim tekstom. Možete dodati tekst koji poziva posjetitelje vaše web stranice da pogledaju drugi sadržaj koji je relevantan za trenutni sadržaj ili bilo koji drugi tekst po vašem izboru.

Sa desne strane ćemo dodati widget za sliku. Možete dodati slike sa sličica/istaknutih slika postova ili ih učitati ručno.

Sada je struktura spremna. Vrati se na Popup Settings da prilagodite animacije ulaza, izlaza i margina. U ovom tutorijalu postavili smo unos na Fade down i izlaz uključen Fade up. Zatim idite na karticu napredan i postavite marginu na 30 (uobičajena vrijednost za veze).

Sada kada je dizajn spreman, kliknite na dugme OBJAVLJUJEMO za postavljanje uvjeta prikaza i okidača. Da biste definirali stanje prikaza, kliknite na dugme DODAJTE UVJET i odaberite svoju opciju sa padajuće liste.

Kako želite da prikažete Popup by post tag, možete postaviti sledeće uslove prikaza (pogledajte animaciju).

Kliknite na Next. U kartici okidači, postavite okidač na On Scroll okrećući prekidač na da. Definirajte pravac na bas i širina preko 95%. Zato što želimo da se popup pojavi kada posjetitelji dođu do kraja našeg članka.

U ovom tutorijalu nećemo definirati Napredna pravila. Dakle, kliknite na SAČUVAJ I ZATVORI. Pa, sada smo gotovi.

Hajde da vidimo kako to izgleda.

Ovdje ste upravo završili svoj popup. Pogledajte i naše povezane članke:

Preuzmite Elementor Pro

Podijelite ovaj članak:

Mikhos Gartner

Mikhos Gartner je stručnjak za digitalne alate koji kupuje, testira i recenzira SAAS alate za mala preduzeća. Oslanjajući se na dugogodišnje iskustvo u oblasti tehnologije, daje pronicljive kritike. Njegov sadržaj se široko konzumira, opslužujući milione korisnika svakog mjeseca.