Prvi skočni prozori stvoreni su prema scenariju koji je zamislio Ethan Zukerman zasmještaj svoje web stranice na Tripodu ranih 90-ih. Njegovi su se korisnici žalili na broj oglasa koje je postavio na web stranicu, pa je odlučio staviti bannere na zasebnu stranicu koja se otvarala kada je korisnik pristupio stranici.

Ovaj mali dio koda još uvijek nije bio pravi skočni prozor kakav trenutno vidite na svakoj web lokaciji, ali tu je sve počelo. Na modernim web stranicama skočni se prozori koriste u različite svrhe, ne samo za reklame. Obrasci za kontakt, upozorenja o pravilima o privatnosti i prijedlozi za pretplatu također se često prikazuju kao skočni prozori.

Dvije su stvari koje smetaju korisnicima kada su u pitanju skočni prozori: kad skaču na vas kad ih ne želite; i kada se njegov izgled potpuno razlikuje od stila web stranice. Ova dva problema pojavljuju se kada upotrebljavate dodatke koji nisu najkvalitetniji.

Najveći je problem većine dodataka za koje novi programeri koriste stvarajući pop up prozore je nedostatak kontrole nad rezultirajućom porukom. Međutim, možete izbjeći sve ove probleme ako koristite Elementor za stvoriti web stranicu.

Dva sjajna dodatka, stvorena posebno za Elementor stranica Builder, pomoći će vam da stvorite skočne prozore bilo koje vrste, oblika i stila koji vam je potreban – Elementor Popup Builder et JetPopup. Budući da su oba izrađena od istog tijela kao što je bio i Elementor, jedino pitanje koje treba postaviti je koji od ovih dodataka odabrati. Kako bih vam pomogao u donošenju ove odluke, temeljito ću ih pregledati i možete usporediti njihove prednosti i nedostatke. Pa, idemo !

Preuzimanje i instalacija

To nije najvažniji kriterij pri odabiru dodatka koji ćete koristiti, ali da biste ga isprobali, morate ga prvo dobiti. Zato ću započeti od samog početka i iznijeti postupak kako bih ga postigao - cijene, uloženi trud i lakoću postupka postavljanja.

Popup Builder

Elementor

Ovaj dodatak stvorio je tim Elementor. Stoga bismo ga mogli nazvati svojim pravim "djetetom". Ovo je posljednje ažuriranje za Elementor, izdano u siječnju 2019. godine kako bi se zadovoljile potrebe kupaca. Međutim, nije dostupan za korisnike besplatne verzije Elementara.

Popup Builder uključen je u profesionalni plan pretplate. Dakle, da biste imali mogućnost stvaranja skočnih prozora, prvo morate imati Elementor Pro. Najjednostavniji cjenovni plan koji vam omogućuje upotrebu svih Elementorovih raznolikosti značajki za jedno web mjesto košta 49 USD godišnje. Dakle, od prvih koraka (kupnja Elementor Pro), evo algoritma za dobivanje Popup Builder:

  • Kupite Pro Elementor stranica Builder.
  • Idite na svoj osobni račun i preuzmite dodatak.
  • Idite na nadzornu ploču svoje web stranice, Dodaci> Dodaj novi, kliknite gumb "Učitaj dodatak" i odaberite odgovarajuću .zip datoteku.
  • Kada je instalacija završena, aktivirajte dodatak s vašim licencnim ključem.
  • Ovdje je Popup Builder koji se nalazi na kartici Predlošci> Skočni prozori.

Malo je dug put, ali s Popup Builder-om od Elementara dobivate i ogromnu kolekciju različitih elemenata, poput widgeta, predložaka i drugih dodatnih alata.

Popup Builder

JetPopup

"Obitelj" Jet dodataka već sadrži više od 10 članaka, a JetPopup je jedan od njih. Pažljivo je stvoren posebno za Elementor i povećava broj njegovih dostupnih alata. Ovaj dodatak je tJetPopupsPotpuno kompatibilan s besplatnom i plaćenom verzijom. Dakle, ne trebate obavljati nikakve dodatne kupnje. JetPopup košta 15 USD, a nakon što ga nabavite, možete ga koristiti za samo jedno web mjesto. Ako vam treba za više projekata, dodatak možete kupiti pod licencom programera (koštat će vas 45 USD) i koristiti ga za pet web stranica. Algoritam za dobivanje dodatka je malo jednostavniji:

  • Kupite dodatak na tržištu TemplateMonster. Bit će preuzet na vaše računalo.
  • Idite na nadzornu ploču svoje web stranice, Dodaci> Dodaj novi, kliknite gumb "Učitaj dodatak" i odaberite odgovarajuću .zip datoteku.
  • Kada je instalacija završena, aktivirajte dodatak.
  • Voila! Kada otvorite izbornik za prilagođavanje Elementa (klikom na gumb "Uredi s elementom Elementor"), na lijevom izborniku widgeta pronaći ćete odjeljak JetPopup.

JetPopup

Stvaranje skočnih prozora

Sada, kad su alati tamo i spremni, mogu pokušati stvoriti skočni prozor s oba dodatka i vidjeti koliko je značajka jednostavna i razumljiva. Zatim ću stvoriti osnovni skočni prozor i razmotriti mogućnosti prilagodbe za Popup Builder i JetPopup.

Popup Builder

U Pro Elementor skočni prozori rade se odvojeno od stranica web mjesta. Da biste promijenili izgled web stranice, otvorite stranicu koju želite prilagoditi, kliknite gumb "Uredi pomoću Elementara" i unesite promjene. Ali da biste stvorili (i zatim uredili) skočne prozore, morate otići na Predlošci> Skočni prozori i pritisnuti gumb "Dodaj novi skočni prozor".

Popup Builder
Isprobajte Popup Builder odmah

U otvorenom prozoru trebate odabrati predložak koji ćete stvoriti (da, možete stvoriti predloške ne samo za skočne prozore, već i za stranice i druge stavke) i dati mu ime.

stvaranje popup

Nakon pritiska na gumb "Kreiraj predložak" bit ćete preusmjereni na izbornik za personalizaciju Elementara. Lakše je prilagoditi postojeći predmet tako što ćete ga graditi ispočetka. Stoga ćete prvo trebati odabrati odgovarajući model.

skočna knjižnica

Odabrao sam jedan od modela prikazanih na vrhu popisa knjižnica. Odmah nakon izbora slijećete na radni prostor Elementor na koji ste vjerojatno navikli. Opcije personalizacije nalaze se na bočnoj traci s lijeve strane zaslona. Ovdje imate tri kartice.

Kartica "Postavke" omogućuje vam promjenu izgleda skočnog prozora, promjenu naziva modela i pregled. Na kartici "Stil" možete prilagoditi dizajn - promijeniti boje, fontove, slike i obrube. Kartica "Napredno" također ima skup dodatnih klizača; na primjer, sprječavaju zatvaranje skočnog prozora s tipkom ESC.

postavke skočnog prozora

Kao što vidite - ništa neočekivano, ako ste prije koristili Elementor, nećete naići na probleme s ovim dodatkom. Evo detaljnog videozapisa koji objašnjava kako stvoriti skočni prozor pomoću Popup Builder:

JetPopup

Ovaj dodatak također dodaje novu karticu na vašu nadzornu ploču od WordPress tema a uz njegovu pomoć kreiraju se i skočni prozori odvojeno od stranica. Gotovi skočni prozori također se pohranjuju na kartici pod nazivom "Biblioteka skočnih prozora". Da biste stvorili novi skočni prozor, možete pritisnuti gumb "Dodaj" na unaprijed napravljenom predlošku ili otići na JetPopup > Dodaj novi skočni prozor, dati naziv predlošku i pritisnuti "Uredi s Elementorom".

dodaj novi skočni prozor

Područje rada malo se razlikuje od norme jer sada stvarate manji prozor. U lijevom izborniku možete dodati bilo koju vrstu predmeta u skočni prozor.

skočni elementi

Dodatak JetPopup dodaje jednu stavku na izbornik widgeta - gumb kontekstualne akcije. To omogućuje definiranje vrste radnje koja će se dogoditi kada korisnik pritisne gumb.

gumb za skočnu akciju

gumb za uređivanje skočne akcije

Nije zapravo očito otvoriti postavke iz skočnog prozora. Na dnu izbornika morate kliknuti gumb za održavanje. Izbornik postavki prilično je sličan onom u Popup Builderu, ali postoje samo dvije kartice za prilagodbu. "Opće postavke" omogućuju vam definiranje efekta animacije, preimenovanje modela ili definiranje uvjeta. Na kartici "Stil" možete promijeniti izgled, boje, slike, fontove i obrube.

skočne opće postavke

JetPopup ima malo manje očite funkcionalnosti, ali nadoknađuje detaljnim i korisnim video vodičima.

okidači

Kako bi bili korisni i ne smetati posjetiteljima, skočni prozori moraju se pojaviti u pravo vrijeme. Uvjeti pod kojima se prikazuje skočni prozor nazivaju se "okidači". Što su detaljniji uvjeti dostupni, fleksibilniji je skočni dodatak. Preciznost je vrlo važna ako ne želite da vaš korisnik napusti web mjesto nakon što se pojavi skočni prozor obrasca za pretplatu.

Popup Builder

uređivanje skočnih prozora

objaviti skočni prozor

Ovaj dodatak pomaže vam definirati potrebne uvjete neposredno nakon prilagodbe skočnog prozora. Kada pritisnete gumb "Objavi", vidjet ćete prozor u kojem možete definirati uvjete (na kojim će se stranicama pojaviti taj skočni prozor), okidače (kada će se prikazati skočni prozor) i napredna pravila.

Popup Builder ima šest okidača, poput prikaza na jednom pomicanju i kliku, te sedam naprednih pravila, poput prikaza nakon određenog broja sesija ili prikaza na određenim uređajima. Okidači i napredna pravila imaju jednostavne klizačeve sklopke i bit će vrlo brzo postaviti bilo koje parametre koje želite.

JetPopup

postavke skočnog prozora

naslovna stranica skočnog prozora

Svi okidači, uvjeti i događaji otvaranja grupirani su zajedno u parametrima. Nakon klika na gumb održavanja otvorite kartice s postavkama i odmah možete postaviti okidače. Možete postaviti postotak stranice nakon pomicanja, kontekstni izbornik koji će se prikazati ili broj sekundi nakon kojeg će korisnik vidjeti poruku.

Prozor se može prikazati samo jednom ili svaki put kad korisnik izvrši određene radnje (ne preporučujem ga - neće to učiniti korisnike sretnima). Također možete vrlo precizno odabrati koji će se postovi ili stranice prikazivati ​​u ovom konkretnom skočnom prozoru. Općenito, ovaj je dodatak prilično fleksibilan i omogućuje vam prikazivanje skočnih prozora s velikom preciznošću.

namještanje

Korisnici zasigurno neće moći izbjeći prozore koji iskaču izravno iz središta zaslona, ​​ali odvlače pozornost posjetitelja s web stranice i mogu biti stvarno neugodni. Ne trebaju svi skočni prozori biti smješteni u sredini, uska vrpca na vrhu bit će manje uočljiva, ali može biti puno učinkovitija. To znači da trebate kontrolirati položaj prozora i moći se kretati po zaslonu.

namještanje

Popup Builder et JetPopup podijelite zaslon na devet sektora i omogućite vam da svoj skočni prozor smjestite u bilo koji od njih. Pozicioniranje je definirano na ljestvici lijevo-desno i gore-dolje. Nije baš fleksibilno, ali dovoljno je za skočni prozor.

Učinci animacije

Način na koji se prozor pomiče (ili se kotrlja ili skače) na stranici vrlo je važan. Ako se prozor kreće prebrzo ili presporo, to neće biti učinkovito. Odskoke, škakljanje i podrhtavanje također treba koristiti s velikom preciznošću. Učinci animacije čine stranicu dinamičnijom, ali mogu pokvariti i cijeli dojam.

Efekti animacije

Popup Builder ima 36 vrsta ulazne animacije, uključujući različite vrste klizanja, rasklapanja, zumiranja, odbijanja i rotiranja u različitim smjerovima. Sve to, zajedno s trajanjem animacije, možete pronaći u odjeljku "Izgled" na kartici Postavke.

postavke jet popup-a

U dodatku postoji 13 vrsta animacije JetPopup, uključujući blede, okomito okretanje, različite slajdove, odskakanje i zumiranje. Pronaći ćete ih u odjeljku "Postavke" na kartici Postavke.

modeli

U nekim slučajevima želite stvoriti skočni prozor s određenom strukturom i točno znati kako bi trebao izgledati. Ali ovo je prilično rijetka prilika; mnogo češće nemate pojma koje bi elemente vaš popup trebao sadržavati. Ovdje predlošci dobro dolaze. Čak i ako ne koristite nijedan od unaprijed konfiguriranih uzoraka, njihova obrada može vam dati dobar pregled. I, naravno, prilagodba stavke izvan kutije puno je brža i lakša nego izgradnja od nule.

Biblioteka modela Elementor

Popup Builder dodao je kategoriju u Elementorovu biblioteku predložaka. Kao što sam vam već rekao, to možete vidjeti odmah na početku novog postupka stvaranja skočnog prozora. Asortiman skočnih predložaka dovoljno je velik; postoji više od 100 predmeta. U gornjem lijevom kutu alat za sortiranje po padajućoj kategoriji omogućuje vam ubrzavanje pretraživanja. Kategorije su razumljive i neće trebati puno vremena da pronađete skočni prozor koji vam treba.

jet popups unaprijed postavljena knjižnica

JetPopup također ima ogromnu biblioteku predložaka. Svi su pohranjeni na kartici Kontekstna knjižnica i imaju praktične značajke poput gumba za pregled i brojača korištenja. Postoji više opcija sortiranja, popis se može konfigurirati tako da prikazuje određenu vrstu modela, a zatim se stavlja u bilo kojem redoslijedu; na primjer, ovisno o datumu stvaranja. Ne mogu vam reći točan broj dostupnih modela, ali sigurno ih ima preko 100.

Tabela usporedbe

Elementor Popup Builder JetPopup
cijena 45 $ 15 $
modeli 100 + 100 +
okidači 6 okidači, napredna pravila 7 5 otvara događaje s dodatnim parametrima
Animatio 36 vrste 13 vrste
Tutoriali dokumentacija dokumentacija, 9 video tutorijali

JetPopup vs Popup Builder

Zaključak

Ne mogu reći koji je od ova dva dodatka bolji; prekomplicirano je suditi im. Svaki slučaj i svaka osoba imaju svoje zahtjeve za odabir dodataka. Pretpostavljam da biste to trebali sami definirati - što će od ove dvije biti najbolje za vas? Želim vam puno sreće u dodavanju sjajnog skočnog prozora na vašu web stranicu!