Iskačući prozor šta. HTML: Kreiranje vlastitog PopUp prozora

Dom / Tvrdi diskovi

Dobro je poznata činjenica da većina posjetitelja ne obavi kupovinu prilikom prve posjete stranici proizvoda online trgovine i čak ne ostavlja potencijalne klijente – ali kolika je ta većina?

Prema istraživanju SeeWhy, 99% posetilaca koji prvi put posete resurs su takvi. Naravno, prije svega govorimo o eCommerce stranicama, ali se i dalje postavlja pitanje: ako 99% posjetitelja ne kupi ništa prilikom prve posjete, kako ih onda potaknuti da se vrate?

Dobra vijest je sljedeća statistika: 75% posjetitelja je i dalje spremno da se vrati kasnije kako bi dovršili kupovinu.

Bez obzira na to što mislite o popup prozorima, ova marketinška tehnika je i dalje efikasna za privlačenje pažnje i prikupljanje podataka o kontaktu (generacija potencijalnih kupaca).

Jednostavno rečeno, pomoću popup prozora možete brzo vratiti posjetitelja na odredišnu stranicu.

Zašto?

To je zbog tehnike uvjeravanja poznate kao "prekidanje uzorka" - kada vašu pažnju, "uljuljkanu" određenim ritmom ili sekvencom naracije, iznenada agresivno privlači nešto neočekivano. Ovaj efekat često doživljavate kada gledate filmove, humoristične emisije, pa čak i u važnim pregovorima.

Kada je u pitanju marketing sadržaja i e-pošte, „prekid obrasca“ je najefikasniji kada je čitač već podešen da riješi problem i nastavi interakciju (pretplata na newsletter, kupovina itd.).

Primjer sa Made.com. Marketari su svojim posetiocima ponudili besplatan vaučer od 10 evra za jednu sitnicu – mejl adresu. Ovo je urađeno zbog:

  1. Svi vole gotovinske poklone;
  2. 10 eura za stalni kontakt putem e-pošte je mala cijena.

Prema ExactTargetu, Email je najpoželjniji marketinški kanal za kupce, jer 77% potrošača preferira e-poštu u odnosu na druge kanale interakcije s brendom.

Možda iskačući prozori ipak nisu tako loši?

Najvjerovatnije, mrzite iskačuće prozore i imate pravo na to. Ipak, ko bi želio da vidi ovako nešto odmah nakon prelaska na odredišnu stranicu:

ili ovako:

Možda i ne znate za područje djelatnosti kompanije, a već ste bombardirani pop-up prozorima do vrata. Gore navedeni primjeri su loši: prije svega, posjetitelj želi saznati više o brendu, a zatim preuzeti “Besplatni vodič za generiranje prometa”, “Besplatnu e-knjigu” itd. Naravno, većina korisnika mrzi takve stvari i odgovoriti odbijanjem dalje interakcije s brendom.

Možda bi se trebali malo ohladiti i pogledati rezultate testa. Šta govore brojke? Ovdje su podaci podijeljenog testa iskačućeg prozora i dugmeta „Ne, hvala“ na iskačućoj ponudi.

Tekst Broj pregleda Broj prikupljenih emailova Stopa konverzije
Ne hvala. Radije plaćam punu cijenu 165 416 9928 6,0%
Ne zanima me 165 625 7961 4,81%
Ne hvala 165 021 7616 4,62%
Ne 166 072 7433 4,48%

Impresivno? Zatim pogledajmo rezultate kompanija koje efikasno koriste ovaj pristup.

1. Iskustvo sa iskačućim prozorima

Uobičajenog dana, usluga WP Beginner dobije oko 70-80 novih pretplatnika zahvaljujući razne metode olova generacija. Ali što je veća baza pretplate, to uspešnije poslovanje, pa su se trgovci usluge odlučili na niz eksperimenata sa iskačućim prozorima.

Šta je urađeno?

Razvijen je iskačući prozor koji se pojavljuje kada korisnik namjerava napustiti stranicu. Efekat je postignut zahvaljujući tehnologiji praćenja kursora i drugim metodama. Evo kako je izgledao prozor:

Kakvi su rezultati?

Korištenje iskačućeg prozora na kritičnim stranicama (ne na cijelom sajtu) povećalo je registracije za 660%. Odnosno, sa 70-80 kontakta, usluga je prešla na indikator od 445-470 potencijalnih kupaca dnevno - skok na kvalitativno novi nivo.

Sljedeći slučaj je iz Backlinka. Nakon dodavanja CTA-a na odredišnu stranicu sa ponudom da se pretplatite na newsletter, konverzija je pala na 1,73% - nešto je hitno trebalo učiniti. Marketeri kompanije razvili su iskačući prozor koji se pojavio pred korisnicima koji su odlučili da napuste odredišnu stranicu. Evo kako je to izgledalo:

Sjećate li se da je konverzija bila oko 1,7% prije korištenja iskačućeg prozora? 2 dana nakon pokretanja iskačućeg prozora, statistika se promijenila. Za samo dva dana stopa konverzije je porasla sa 1,73% na 4,83% - više od 2 puta!

Naravno, u svijetu u kojem jedan kompetentan test može povećati konverzije za 100%, 300%, čak 1300%, rezultati ovog eksperimenta izgledaju skromno. Međutim, to nije sasvim tačno.

Prije svega, imajući veliku bazu pretplatnika, trgovci mogu kreirati sadržaje relevantne za njihovu publiku i postaviti sistem unakrsne prodaje. Dakle, uzimajući u obzir povećanje prodaje i druge faktore, jedan kontakt donosi uslugu u prosjeku 15 USD.

Ako popup prozori dovedu 15 dodatnih pretplatnika dnevno, dnevni prihod će se povećati u prosjeku za 225 dolara, a godišnji za 82,125 dolara, respektivno. Nije loš prihod za 2 minute provjere postavki, zar ne?

Očigledno su pogriješili iskačući mrzitelji. Ali postoje i drugi faktori: stopa posete početne stranice i uticaj iskačućih prozora na korisničko iskustvo. sta je sa ovim?

2. Kako iskačući prozori utiču na korisničko iskustvo i stopu posete početne stranice?

Jedna od prvih misli kada se spomene pop-up je povećanje broja odbijanja, jer će sve više ljudi napustiti landing stranicu zbog iskačućeg prozora, što je sasvim logično. Međutim, zapamtite gornje primjere: WP Beginner marketinški stručnjaci nisu vidjeli fluktuacije u ovom indikatoru, kao ni Backlinko - broj odbijanja se nije promijenio u oba slučaja.

Dan Zarrella je došao do istog zaključka nakon što je izvršio niz testova na svojoj ličnoj odredišnoj stranici, otkrivši da prisustvo iskačućeg prozora nema uticaja na stope posete početne stranice. Jedina stvar koja se promijenila je da je uklanjanjem iskačućih prozora Dan izgubio 50% dolaznih potencijalnih klijenata.

3. Šta je sa korisničkim iskustvom?

Očigledno, posjetitelje nije briga. WP Beginner marketari nisu primili niti jednu pritužbu na popup prozore od svojih kupaca.

Ako razmislite o tome, ovo ima smisla. Da, neprijatno je vidjeti ovo nakon klika na link sa Facebooka:

Ali to nije razlog da napustite stranicu u ljutnji. Šta obično radite u takvim slučajevima? Tako je - zatvorite popup prozor i nastavite tražiti željeni sadržaj.

Štaviše, kompetentna upotreba iskačućih prozora može poboljšati korisničko iskustvo, po uzoru na uslugu Vero. Ako dođeš početna stranica i ne preduzimate ništa 30 sekundi, videćete prozor u uglu sa tekstom: „Šta vas sprečava da se trenutno pretplatite na Vero?“.

4. Kako uništiti upotrebljivost iskačućim prozorima?

Međutim, ne možete ugraditi nikakav pop-up oglas u svoju odredišnu stranicu i očekivati ​​visoke konverzije. Ako popup prozor nije istaknut na stranici, onda je u najmanju ruku beskoristan.

Upravo ćete napustiti odredišnu stranicu, a onda ... Bam! Desilo se nešto neshvatljivo, gdje se pojavilo CTA dugme na sredini stranice? Zapravo, ovaj iskačući prozor bio je postavljen na nezasjenjenu stranicu, spajajući se u pozadinu. Kada ne odvojite iskačuće prozore od ostatka stranice, to zaista poremeti korisničko iskustvo.

Kako se ispostavilo, mnogi trgovci griješe u vezi s iskačućim prozorima – ispostavilo se da i dalje rade. Sada ćete naučiti kako koristiti iskačuće prozore na vašoj odredišnoj stranici za maksimalan učinak.

5. Kreirajte efektivne iskačuće prozore

Prije nego počnemo stvarati iskačuće prozore, pogledajmo njihove glavne vrste. Postoje dvije glavne varijante iskačućih prozora:

  1. Veliki prozori (preklopi).
  2. Windows koji se pojavljuje kao rezultat pomicanja stranica.

Prekrivači

Izgledaju kao u gornjem primjeru. Ovi prozori zaklanjaju cijeli ekran, zatamnjujući pozadinu. Skočni prozor ostaje jedini element na stranici koji je jasno vidljiv korisniku - u novije vrijeme postoji tendencija da se koriste iskačući prozori ovog posebnog formata.

Poznati marketer Dan Zarella također koristi prekrivače za zatamnjenje pozadine, ali sam prozor je mnogo manji nego inače:

Windows koji se pojavljuje kao rezultat pomicanja stranica

Ova vrsta iskačućih prozora se pojavljuje kada korisnik skroluje stranicu do neke faze – najčešće dati format koristi se na blogovima i izuzetno je efikasan. Skrolujući na pola stranice, vidjet ćete nešto poput ovoga:

Ovisno o softveru ili dodatku koji koristite, možete eksperimentirati s dubinom pomicanja—koliko daleko korisnik mora ići da vidi iskačući prozor. Osim toga, možete podesiti izgled iskačućih prozora na osnovu vremena koje je korisnik proveo na stranici.

Isti zahtjevi se odnose na naslove, tekstove polja i dugmad na iskačućim prozorima kao i na sadržaj na CTA. Uostalom, iskačući prozori su elementi poziva na akciju, čija je svrha povećanje pregleda / pretplatnika / potencijalnih klijenata.

6. Najbolje vrijeme za prikaz iskačućih prozora

Kada je u pitanju testiranje preklapanja, SumoMe je prikupio sljedeće podatke: trenutno je optimalno vrijeme 5 sekundi nakon što posjetitelj ode na odredišnu stranicu.

Usluga WhichTestWon daje različite statistike. Tokom testiranja provjerena je pojava prekrivača na 15, 30 i 45 sekundi nakon sletanja korisnika, a prva opcija je pokazala najbolji rezultat: izgled prozora nakon 15 sekundi je 11% efikasniji od 30- druga opcija, i 50% efikasnija od opcije od 45 sekundi nakon sletanja.

Ali zapamtite - ne postoji idealno vrijeme za pojavljivanje prozora, jer su testovi neophodni u svakom slučaju. To važi i za pitanje učestalosti iskačućih prozora. Najjednostavnije rečeno, statistika tuđih resursa može da vas motiviše da se testirate, ali ne bi trebalo da bude predmet imitacije – testa.

Danas ćemo razgovarati o tome kako kreirati vlastiti popup prozor za svoju web stranicu. Sad ovu metodu vrlo popularan, ali većina rješenja za njegovu implementaciju je plaćena. Primjer ne tako lijepog prozora (ali to je samo primjer) unutar posta...

U ovom postu ćemo naučiti kako napraviti takav popup prozor. Jednostavno, brzo, efikasno i što je najvažnije besplatno!

Svaki popup prozor se u suštini sastoji od dva dijela. Prvi je potamnjenje opće pozadine. Drugi je sam prozor. Prozor je, pak, obično podijeljen na naslov, tekst i obrazac za pretplatu. Pripremimo bazu za naš prozor, s obzirom na navedenu strukturu.

Imamo:
fs_popup_bg- Zamračenje lokacije;
fs_popup- sam prozor;
fs_popup_head— naslov prozora;
fs_content- sadržaj prozora, podijeljen na dva dijela;

Sada napišimo potrebne stilove...

Pogledajmo na brzinu stilove našeg popup prozora.
#fs_popup_bg- označava da će naša pozadina biti crna, i gotovo neprozirna (0.9), nalaziće se u gornjem lijevom uglu i zauzimati cijelo područje ekrana. U ovom slučaju, dubina elementa, odnosno njegova visina iznad ostalih elemenata, bit će vrlo velika (očito više od ostalih).
#fs_popup- označava da će prozor biti jedan nivo viši od pozadine (inače ga ne bismo vidjeli). Biće 600px x 300px sa zaobljenim uglovima i crvenim rubom.
.fs_content_left, .fs_content_right- govori nam da su blokovi pritisnuti ulijevo (potrebno za njihovu lokaciju na istom nivou), imaju uvlake i font Arial.

Popunimo naš prozor sadržajem:

U ovom postu ćemo naučiti kako napraviti takav popup prozor. Jednostavno, brzo, efikasno i što je najvažnije besplatno!
Požurite, unesite svoj e-mail i nabavite gomilu korisne informacije!*

Vaš email:


* - Ovo polje nije aktivno. Klikom na dugme "Pretplati se" pristajete na korištenje vaše adrese u svrhu masovnog slanja promotivnih materijala. Takođe, autoru sajta zaveštavate svoj automobil, stan i 10% prihoda.

I dodajmo naše stilove za ljepši prikaz:

To je u osnovi sve. Kao što se vidi iz JavaScript primjer za iskačući prozor, zapravo, potreban je u dva slučaja:
1) Događaj koji zatvara naš prozor;
2) Događaj pritiskom na dugme "Pretplati se";
Također ne škodi provjeriti da li je ovaj prozor prikazan ovaj računar. Za ove svrhe rad s kolačićima je sasvim prikladan.

Pogledajmo kreiranje modalnih iskačućih prozora, koji se popularno nazivaju i popup prozori.

Razgovarali smo o kreiranju iskačućih (modalnih) prozora u WordPress-u.

U ovom primjeru, modalni prozori se pojavljuju kada se klikne na dugme (tekst) i nestaju kada se klikne bilo gdje iza modalnog prozora ili kada se klikne na ključnu riječ.

Promjena vrijednosti u skripti fadeIn možete povećati ili smanjiti brzina otvaranja iskačući modalni prozor i fadeOut- povećanje ili smanjenje brzina zatvaranja.

Potreban za rad obavezno povežite biblioteku jQuery.

Pogled i skinuti demo možete vidjeti primjer ispod.

Ako imate pitanja, pitajte u komentarima.

HTML

Kliknite na mene!
I na meni takođe...
Naslov prvog modalnog prozora!

Da li zaista volite wasabi?

NO
Naslov drugog modalnog prozora!

Nebo je plavo?

DA
wordpress-club.com

css

.fond ( position:absolute; padding-top:45px; top:0; lijevo:0; desno:0; bottom:0; background-color:#f8b334; ) .mymagicoverbox ( display:inline-block; color:#ffffff ; padding:10px; margin:10px; cursor:pointer; font-weight:300; font-family:"Roboto"; ) .mymagicoverbox_fenetre(z-index:9999; position:fixed; margin-left:50%; top: 100px; text-align:center; display:none; padding:5px; background-color:#ffffff; color:#97BF0D; font-style:normal; font-size:20px; font-weight:300; font-family: "Roboto"; ) .mymagicoverbox_fenetreinterieur ( text-align:center; overflow:auto; padding:10px; background-color:#ffffff; color:#666666; font-weight:400; font-family:"Roboto"; font- size:17px; border-top:1px solid #e7e7e7; margin-top:10px ) .mymagicoverbox_fermer ( color:#CB2025; cursor:pointer; font-weight:400; font-size:14px; font-style:normal font- porodica:"Roboto"; ) #myfond_gris (prikaz: nema; boja pozadine:#000000; neprozirnost:0,7; širina:100%; visina:100%; z-inde x:9998; pozicija:fiksna; top:0; bottom:0; desno:0; lijevo:0; )

JS

$(document).ready(function()( $(".mymagicoverbox").click(function() ( $("#myfond_gris").fadeIn(300); var iddiv = $(this).attr("iddiv "); $("#"+iddiv).fadeIn(300); $("#myfond_gris").attr("opendiv",iddiv); return false; )); $("#myfond_gris, .mymagicoverbox_fermer") .click(function() ( var iddiv = $("#myfond_gris").attr("opendiv"); $("#myfond_gris").fadeOut(300); $("#"+iddiv).fadeOut(300 ); )); ));

Pogledajmo kreiranje modalnih iskačućih prozora, koji se popularno nazivaju i popup prozori. O kreiranju iskačućih (modalnih) prozora u WordPress-u smo govorili u zasebnoj lekciji. U ovom primjeru, modalni prozori se pojavljuju kada se klikne na dugme (tekst) i nestaju kada se klikne bilo gdje iza modalnog prozora ili kada se klikne na ključnu riječ. Promjenom vrijednosti u skripti fadeIn, možete povećati ili smanjiti brzinu otvaranja popup modala, a fadeOut - povećati ili smanjiti brzinu zatvaranja. Da biste radili, morate uključiti jQuery biblioteku. U nastavku možete pogledati i preuzeti demo. Ako imate pitanja, pitajte u komentarima. HTML

Sales Generator

vrijeme čitanja: 15 minuta

Mi ćemo vam poslati materijal:

pop-gore- ovo je iskačući prozor koji se pojavljuje na ekranu prilikom posjete stranici i potiče osobu da izvrši određene radnje (pretplati se na newsletter, postane učesnik promocije, unese svoje kontakt podatke itd.). U osnovi zadatak pop-gore-windows – prikuplja email adrese.

O efikasnosti iskačućih prozora svjedoče razne studije. Na primjer, sajt sa 44 hiljade posetilaca dnevno je sticao 10-15 pretplatnika na svoj newsletter, a nakon pokretanja iskačućih prozora sa zakašnjenjem od jedne minute, oko 100-150 posetilaca je počelo da se pretplaćuje svakog dana.

Koja je svrha kolekcije e-mail-ov koristeći pop-up? Hajde da napravimo jednostavnu analogiju. Mjesto je oštećena kanta napunjena vodom. Svi vaši napori da ga popunite do vrha osuđeni su na neuspjeh, jer tečnost izlijeva iz rupa. Slična je situacija i sa posjetiteljima web stranice. Mnogi ljudi zatvaraju karticu nakon posjete web-mjestu i nikada se ne vraćaju na "kantu".

Da bi posao bio uspješan, potrebno je da postignete visok promet na vašem Internet resursu. Što više adresa e-pošte prikupite, više ljudi možete naknadno privući na svoju stranicu korištenjem efikasnog biltena e-pošte.

Iz ovog članka ćete naučiti:

  1. Očigledne prednosti i nedostaci iskačućih prozora

Prikazivanje iskačućih prozora - zlo ili efikasno sredstvo

Zamislite situaciju: zaokupljeni ste čitanjem informacija na stranici, pokušavate da ih skrolujete... i prozori sa oglasima iskaču pred vama. Prva reakcija je iritacija. Međutim, ako se nalazite na web-mjestu neke online trgovine i želite nešto kupiti, tada će vam se popust ponuđen u iskačućem prozoru sigurno svidjeti.

Moguća je i druga situacija. Dok čitate postove blogera koji se bavi internet marketingom, iskačući prozor nudi vam da besplatno preuzmete vodič za najpopularnije greške u Google Adwords-u. Najvjerovatnije će vas zanimati takva pop-up ponuda.

Percepcija iskačućih prozora može biti i negativna i pozitivna. Zavisi, kao iu svakom drugom slučaju, da li je ponuda sadržana u pop-upu korisna i relevantna za potencijalnog klijenta.

Očigledne prednosti i nedostaci prilagođavanja iskačućih prozora

Prednosti pop ups:

  • Omogućavaju vam da privučete pažnju. Kada korisnici kliknu na link sa druge stranice, prvo vide pop-up baner koji nudi nešto u njihovu korist. To ih odlaže i tjera da preduzmu daljnje mjere.
  • Kada se koristi, konverzije se povećavaju. Statistike pokazuju da su pop-up baneri mnogo efikasniji (13 puta) u odnosu na obične banere koji se kreiraju da povećaju promet na sajtu ili broj pregleda.
  • Viapop-gore prozore možete brzo dobiti povratne informacije. Prisustvo pop-up banera na stranici sa često postavljanim pitanjima omogućit će posjetiteljima da brže kontaktiraju administratore stranice.

nedostatke pop ups:

  • Smanjenje posjećenosti. U slučaju nepravilnog postavljanja pop-up prozora, posjetitelji će osjetiti samo iritaciju kada se pojave. Na primjer, ako je baner ogroman ili morate dugo tražiti križ da biste ga zatvorili, tada korisnici mogu preferirati druge stranice.
  • Tretiranje banera kao neželjene pošte. To je moguće sa vrlo velikim brojem iskačućih prozora. Rezultat može biti pogoršanje reputacije kompanije.
  • pop-gore baneri mogu biti blokirani. Neki ljudi znaju da je moguće instalirati program u pretraživač koji će blokirati pojavu iskačućih prozora. Istovremeno, možete zaboraviti na efikasnost oglašavanja pomoću pop-up prozora.

Koji su elementi iskačućeg prozora?

Ključ efikasne komunikacije sa posetiocima sajta putem pop-up banera je stalno testiranje tekstova, dizajna i formata njihovog prikaza.

Navodimo najznačajnije elemente:

  1. Naslov teksta. Morate formulirati pop-up ponudu jednostavnim i razumljivim riječima, tada će ona djelotvorno funkcionirati. Razmotrite različite opcije, analizirajte stav posjetitelja prema svakoj od njih.
  2. Dizajn zaglavlja. Nakon što odaberete odgovarajući naslov, lijepo ga ukrasite (odaberite boju, font, veličinu). Mora biti čitljivo.
  3. Dizajn blokova i slika. Saznajte koji je format bloka, boja i veličina najbolji za vašu stranicu. Često je za povećanje konverzije dovoljno dodati sliku u blok.
  4. Polja obrasca. Možete koristiti različite fontove, postavljati opise na različite načine (unutar, iznad ili lijevo od polja). Mora se imati na umu da ih svaki ekran mora ispravno prikazati.
  5. Dugme za izlaz. Obavezni element iskačućeg prozora je dugme koje vam omogućava da odbijete ponudu (na primjer, "Ne, hvala" itd.). Korisnicima možete dati mogućnost da zatvore iskačući prozor klikom na glavnu stranicu.
  6. Glavni tekst. Mora uključivati ​​opis prednosti prijedloga i njegovih karakteristika. Prema rezultatima testa, nedostatak takvih informacija na baneru može dovesti do niske konverzije.
  7. Tekst poziva na akciju. Isprobajte nekoliko alternativa. Dugme "Pošalji" može se zamijeniti sa "Nabavite besplatan izvještaj", "Preuzmite sada", "Pretplatite me na bilten".
  8. Dizajn akcijskog gumba. Testirajte dugmad različitih oblika, veličina i boja kako biste pronašli onaj koji vam najviše odgovara da kliknete.

Vrste iskačućih prozora na web stranici

Postoje dvije grupe iskačućih prozora: Hello-Board i Page-Stop.

Prvu kategoriju karakterizira horizontalno ili vertikalno postavljanje banera, u kojem korisnik može vidjeti glavne informacije stranice, a njena funkcionalnost ostaje gotovo ista. Ova iskačuća varijanta je mekana i omogućava vam da održite ravnotežu između percepcije posjetitelja i rezultata koji se postiže korištenjem banera.

Takvi iskačući prozori imaju neke nedostatke, ali ih trenutno nije moguće otkloniti - pregled stranice, iako djelimično, je ograničen. Ovo čini prozore Hello-board manje efikasnim od prozora Page-Stop.

Kategorija banera Page-Stop podrazumeva potpuno ograničenje aktivnosti na sajtu sve dok posetilac ne klikne na jedno od dugmadi – prihvati ponudu ili je odbije zatvaranjem iskačućeg prozora. Takav iskačući prozor u većini slučajeva samo nervira korisnike, jer ih odvlači od glavne svrhe posjete stranici.

Dobar, loš i sjajan primjer skočnog prozora

  • Dobar primjer

Kada prvi put posjetite internetske trgovine Lamoda i Quelle, prozori se pojavljuju sa posebnim ponudama:

"Kupite, a dostava će biti o našem trošku"; "Pretplatite se i spustit ćemo 40% popusta." Atraktivne ponude, zar ne? Treba napomenuti da se takve tehnike stalno koriste u trgovini. Ako obratite pažnju, možete vidjeti da u svakom odjeljenju trgovačkih centara postoje oglasi za rasprodaje i velike popuste, koji navodno funkcionišu danas. Međutim, ovaj sistem prodaje se praktikuje stalno.

Za internet prodavnicu (uključujući i Lamodu) veoma je važno da dobije adresu e-pošte posetioca. Marketinški stručnjaci će ga uključiti u listu e-mailova za distribuciju i ponuditi svoje proizvode. Ovo je korisno za sve. Korisnici dobijaju popuste, a online prodavnice primaju stalne kupce. Ovaj model se zove "win-win".


Pošaljite svoju prijavu

Dobro poznati CallBackHunter. Kada je ova tehnologija tek rođena u Runetu, izazvala je vau efekat. Na kraju krajeva, složićete se, vozite se telefonom i oni vas automatski zovu za 30 sekundi i posavetuju po određenim pitanjima. Konverzija mnogih sajtova se povećala. Ali nemogućnost većine vlasnika sajtova da pravilno konfigurišu ovu tehnologiju ubrzo je dovela do činjenice da je sve to iznerviralo. Dva su razloga za to. Prvi je njegov trenutni izgled nakon odlaska na stranicu. Posjetilac nema vremena ni da sazna gdje se nalazi i da li mu treba nešto ovdje. Drugo - formulacija u CallBackHunteru je u najmanju ruku zbunjujuća:

Iskačući prozor ne sadrži nikakvu isplativu ponudu, korisnika se ne nagovara da se pretplati. Ovdje dolazi do izražaja element iznenađenja. Ako posjetitelj klikne na željeno iskačuće dugme, a da nije shvatio kako da zatvori prozor, poziv će automatski ići kompaniji. Zaposlenici će početi nuditi proizvode, a možda čak i nešto prodati. Tako organizacija može samo izgubiti svoju reputaciju.

Trebate nastojati zadovoljiti potrebe kupaca, a ne povećati prodaju po svaku cijenu. Izgradnja odnosa sa potrošačima treba da se zasniva na poverenju, tada možete računati na dugoročnu saradnju, korisnu za obe strane.

  • Sjajan primjer

Na web stranici magazina General Director, koji je naš klijent, pojavljuje se sljedeći baner:

Ovaj obrazac se pojavljuje dok čitate članak ili nakon što ste proveli određeno vrijeme na stranici. Glavna svrha ovog obrasca je da ljudima pruži koristan sadržaj kada se spremaju napustiti stranicu.

Napominjemo da iskačući prozor na stranici magazina Generalni direktor sadrži dovoljno informacija, njegova ponuda je primamljiva. Sa upornošću, također, nije išlo predaleko. Posjetioci nemaju utisak da ovaj pop-up pripada drugom sajtu ili je reklama, tako da radi efikasno.

7 ideja kako postaviti skočne prozore na svoju web stranicu

1. Popup prozor umjesto banera

Webmasteri često koriste banere, postavljajući ih sa strane stranice ili u bočnu traku. Ako kliknete na baner, otvorit će se određena stranica. Ako sadrži ponudu za pretplatu na newsletter, umjesto toga se mogu koristiti skočni obrasci.

Pros:

  • Skočni prozor će se odmah otvoriti, dok će stranici za pretplatu trebati neko vrijeme da se učita. To može dovesti do povećanja konverzije pretplatnika.
  • Postoji mogućnost uštede prostora. Ako je baner zamijenjen obrascem za pretplatu, tada se možete ograničiti na samo jedno dugme, uklanjajući sva polja. Klikom na nju će se pojaviti skočni prozor.

minusi:

  • Nećete moći postaviti puno informacija u iskačući prozor, za razliku od stranice za pretplatu. Takođe nećete moći da otpremite sliku ili video.

2. Popup prozor umjesto pretplate

Ovdje mislimo na obrasce za pretplatu postavljene i na zasebne stranice i na bočnu stranu glavne stranice (u bočnoj traci, kao u primjeru). Na blogovima postoje ponude za pretplatu na bilten na kraju članka. Dobra opcija u ovom slučaju je da eliminišete sva polja, ostavljajući jedno dugme za klik, što će pozvati skočni prozor. I već može sadržavati potreban broj polja.

Pros:

  • Povećanje broja pretplatnika. Razlog za to je što je klikom na iskačuće dugme za poziv posetilac već skloniji da popuni polja. Ako se obrazac za pretplatu odmah prikaže, obično se zanemaruje.
  • Ekonomičnije korišćenje internet prostora. Polja iz obrasca za pretplatu mogu se zamijeniti promotivnim informacijama. Druga opcija je dizajn stranice u minimalističkom stilu, čineći je urednom.

minusi:

  • Očekivanja korisnika ostaju neopravdana. Na primjer, klikom na dugme "Preuzmi", osoba čeka da preuzimanje počne. Pojava nakon popunjavanja ovog obrasca može izazvati negativne emocije. Međutim, ovo možete kombinovati sa bilo kojom stavkom i naknadno kreirati dugmad koja vam omogućavaju da odmah preuzmete datoteke (bez iskačućih prozora).

3. Iskačući prozor umjesto riječi zahvalnosti

Ovo je dobro i jednostavno rješenje. Nema potrebe da pravite stranice sa rečima zahvalnosti i linkovima za preuzimanje fajlova od interesa. Umjesto toga, trebali biste osobu uputiti na istu stranicu, uz neznatno mijenjanje njene adrese (na primjer, /?yhx935/ je dodat na /page/). Takav dodatak će dati naredbu za otvaranje iskačućeg prozora sa zahvalama ili vezama za preuzimanje.

Pros:

  • Možete kreirati takve stranice, trošeći mnogo manje vremena na to.

minusi:

  • Morat ćete pronaći stručnjaka koji će konfigurirati izgled iskačućeg prozora prilikom dodavanja tajnog parametra na adresu stranice.
  • Podrška za linkove na društvene mreže nije tipična za sve iskačuće prozore.

4. Popup prozor umjesto stranice "Hvala na pretplati".

Ovaj popup obrazac je sličan prethodnim prikazima. Korisnik koji se pretplati na newsletter ne usmjerava se na stranicu zahvale, već na stranicu prodaje, gdje se odmah pojavljuje pop-up. Sadrži veze i riječi zahvalnosti koje su posjetitelju potrebne. Ispod iskačućeg prozora možete postaviti informacije o plaćenom proizvodu koji se odnosi na završenu pretplatu i ponudu za kupovinu radi promocije.

Pros:

  • Nema potrebe za stranicom zahvalnosti.
  • Rast konverzije. Kada se prozor zatvori, osoba dolazi na potpuno učitanu stranicu sa reklamom za plaćeni proizvod. Ako ga učinite atraktivnim, mnogi će zatvoriti iskačući prozor kako bi vidjeli ponudu detaljnije.

minusi:

  • Iskačući prozor bi se trebao pojaviti odmah, inače bi korisnici mogli posumnjati na prevaru i nepostojanje potrebnih veza. Kao rezultat toga, obim prodaje će pasti.

5. Secret Popup

Za korisnike koji dugo putuju na vašem Internet resursu, možete razviti tajni pop-up postavljanjem informacija o vrlo povoljnim ponudama na njemu. Ako ga napravite ispravno, tada će samo određeni ljudi koji su najaktivniji imati priliku vidjeti takav pop-up. Ovo je lijep bonus.

Takav iskačući prozor može se pojaviti, na primjer, nakon 36 minuta boravka na vašoj stranici (ili duže). Alternativno, možete saznati koliko dugo najviše 1% posjetitelja ostaje na vašoj web-lokaciji i ovaj put postići rezultat u iskačućem prozoru. Nije potrebno nuditi promociju, možete anketirati korisnike (+ pa dati popust) ako želite prikupiti bilo kakve podatke o onima koji duže gledaju vašu stranicu.

Pros:

  • Najaktivniji dobijaju bonuse. Ako je ponuda isplativa, korisnici će biti zadovoljni. Takav skočni prozor za stranicu je analog skrivenog uskršnjeg jajeta.

minusi:

  • Ako svi pronađu "jaje", onda ćete pretrpjeti gubitke.

Dodavanje na listu personalizacije može se smatrati čudnim. Međutim, sada se ne koristi često, a zajedno sa iskačućim prozorima bi radio prilično efikasno. Sastoji se u sljedećem. Ako znate kontakte korisnika (na primjer, ime, adresu e-pošte, broj telefona), tada:

  • Uradite automatsko popunjavanje formulara za pretplatu na stranici.
  • Izbrišite nepotrebne formulare. Oni su beskorisni, jer svoju ponudu možete poslati posjetiocu putem e-maila. Uklonjene forme možete zamijeniti oglašavanjem (umjesto obrasca koji je bio sa strane stranice, napravite baner koji reklamira prodajnu stranicu ili promociju).

Pros:

  • Moći ćete postići veću konverziju, jer će se polja automatski popunjavati, ostaje samo da kliknete na iskačuće dugme.
  • Moći ćete postaviti više oglasa na stranicu.

7. Popup prozor unutar članka

Moguće je ne samo kreirati iskačuće prozore koji se pojavljuju sami, već i uključiti nekoliko dugmadi u tekst na stranici, klikom na koje će se pojaviti iskačući prozori. Što je članak duži, više dugmadi možete postaviti.

Pros:

  • Korisnici se neće nervirati zbog iskačućih prozora jer to mogu nazvati kad god žele.
  • Mogućnost povećanja konverzija. Da biste to učinili, morate privući interesovanje posjetitelja za iskačuće tipke za pozive.

minusi:

  • U članku ima nepotrebnih elemenata. U tom smislu, preporučuje se da se takva dugmad povezuju sa personalizacijom: pretplatnik ih više ne bi trebao vidjeti u tekstu.

Kako kreirati vlastiti popup

Kako sami napraviti pop-up? Da biste to učinili, morate znati HTML jezik barem na osnovnom nivou. U tom slučaju možete jednostavno napraviti iskačući prozor za web lokaciju.

Biblioteke JavaScript okvira (jQuery, MooTools, Prototype, itd.) se često koriste za njegovo kreiranje, ali laicima nisu od koristi. Alati HTML jezika za označavanje hiperteksta i CSS kaskadnog jezika opisa stilova omogućavaju vam da razvijete dobar pop-up. Windows napisani na ovim jezicima neće zavisiti od prisustva podrške za JavaScript u pretraživaču.

Kod koji daje komandu za otvaranje iskačućeg prozora nalazi se u dva reda. Zadatak prvog je formiranje veze, klikom na koju se pojavljuje skočni prozor:

Vrijednosti atributa oznake za ovu vezu su sljedeće. Onmouseover definira tip kursora miša koji se pojavljuje kada pređete preko iskačućeg gumba. Onclick je potreban za naredbu pojavljivanja skrivenog bloka sa iskačućim identifikatorom nakon što korisnik klikne na dugme.

Drugi red je iskačući prozor. Iskačući ID se koristi za određivanje sloja. Atribut style vam omogućava da postavite parametre prozora, fonta i okvira (njihovu boju, veličinu, pozadinu):

Skočni prozor je prema zadanim postavkama nevidljiv (jer je birač prikaza postavljen na ništa u tijelu koda).

Ove dvije linije su dovoljne za kreiranje html popup-a. Morat ćete ih umetnuti između oznaka i Vašu web lokaciju i skočni prozor će raditi.

Da bi se iskačući prozor zatvorio, potrebno je da ga umetnete ispred oznake

link koji daje naredbu za sakrivanje vidljivog sloja sa iskačućim ID-om:


zatvori

Ako želite, možete podesiti izgled prozora ne kada kliknete na link, već samo kada pređete mišem preko njega. Da biste to učinili, promijenite prvi red:

pomjerite miša ovdje!

popup prozor za wordpress

Postoji više od jednog popup dodatka za Wordpress. Kako odabrati pravu od mnogih opcija? Iskačući prozor se može pojaviti neočekivano ili glatko, na glavnoj stranici stranice ili iznutra, odmah kada odete na stranicu ili kada je zatvorena. Ispod su najbolje opcije dodataka:

  • ITRO Popup Plugin

Besplatno je. Vrlo je zgodan za korištenje, uređivanje također nije teško. Dodatak pruža mogućnost postavljanja slika, oznaka za naslove, videa sa YouTube-a.

Postavke vam omogućavaju prilagođavanje. Možete kreirati baner bilo koje veličine, boje. Granice iskačućih prozora također se mogu uređivati. Također možete odabrati stranice na kojima će se pojavljivati ​​iskačući prozori.

  • YITH Newsletter Popup

Također je besplatan. Dizajniran za kreiranje iskačućeg prozora u obrascu za pretplatu. Nije teško instalirati i konfigurirati. Morate raditi samo na dvije stranice. Na jednoj - opće postavke, na drugoj - uređivač skočnog dizajna.

Opšta podešavanja omogućavaju pisanje naslova, umetanje slike i informacija u obliku teksta. Ovdje također možete postaviti boju pozadine, boju teksta, odabrati font. Nedostatak je nemogućnost odabira lokacije teksta i slika. Međutim, šablonski skočni prozor je prilično lijep.

  • WordPress PopUp

Ovaj dodatak vam omogućava da kreirate kreativne iskačuće prozore. Njegove prednosti uključuju jednostavnost dodavanja obrazaca i slika, veliki izbor opcija izgleda. Možete podesiti izgled iskačućeg prozora samo za korisnike koji nisu komentirali stranicu, ili koji su na stranicu došli iz tražilice. U postavkama možete odrediti koliko puta iskačući prozor može iskočiti ispred svakog posjetitelja.

  • Optinmonster

Ovaj dodatak je plaćen, ali pruža širok spektar opcija za uređivanje iskačućih prozora. Automatski ga podržavaju GetResponse, MailChimp i drugi. Nakon odabira usluge e-pošte, vrši se automatska konfiguracija. Plaćena verzija je dizajnirana da sprovede testiranje i analizira rezultate kako bi se identifikovala efikasnija opcija iskačućih prozora. Video zapisi se mogu ugraditi direktno u obrazac.

  • Ninja Popups

Također plaćeni dodatak koji podržavaju mnoge usluge e-pošte. Šabloni su dizajnirani na profesionalnom nivou, dizajn banera se može napraviti u stilu sajta. Moguće je prilagoditi izgled iskačućeg prozora na bilo kojoj stranici, u bilo kojoj kategoriji. Iskačući prozor se također može pojaviti kada je stranica zatvorena.

Stranicu možete učiniti privatnom sve dok je korisnik ne podijeli na društvenim mrežama ili se pretplati. Moguće je provesti testove za poboljšanje efikasnosti iskačućeg prozora.

9 savjeta kako napraviti popup i ne pretjerati

1. Nemojte biti poznati

Ni u kom slučaju ne smijete biti nepristojni, posjetitelje smatrajte idiotima. Takođe je bolje ne ulaziti u ono što ih pokreće. Pod zabranom natpisa u iskačućim prozorima poput "Ne, više volim da nemam pretplatnike", jer se oni mogu shvatiti kao "Ne, ne želim poslovati s vama".

2. Nemojte kompenzirati kvalitet kvantitetom.

Želja za dostizanjem 400% ne bi trebala dovesti do povećanja broja iskačućih prozora nauštrb njihovog kvaliteta. Da biste odabrali najefikasniju opciju, provedite testove. Ne postavljajte iskačuće prozore na svaku stranicu web stranice.

3. Nemojte iskočiti na pogrešnom mjestu u pogrešno vrijeme

Pojava iskačućeg prozora dok se stranica učitava rezultirat će gubitkom posjetitelja. Ako je iskačući prozor velik i teško ga je zatvoriti, veća je vjerovatnoća da ćete izgubiti potencijalne kupce.

Najbolja opcija je da se skočni prozor pojavi neposredno prije nego što korisnik zatvori stranicu. Možete ga postaviti na ovaj način analizirajući koliko dugo posjetitelji ostaju na vašoj web stranici. Također možete popraviti kako se kursor pomiče od bloka sa sadržajem do blokova koji naiđu na putu prema gumbu za zatvaranje stranice.

4. Personalizirajte svoje iskačuće prozore

Sada, kada se organizuje elektronska prodaja, moderno je raditi personalizaciju. Vjeruje se da je osobi ugodnije kupovati u trgovinama u kojima se njemu lično nudi roba. Niko ne želi da bude korisnik bez lica.

Ako je moguće, personalizirajte svoje iskačuće prozore. Ako ste vlasnik online trgovine, onda pričekajte da klijent naznači šta ga zanima, a zatim formirajte ponudu u skladu s tim.

5. Ne sakrivajte krst da biste zatvorili prozor

Ako je iskačući prozor teško zatvoriti, korisnik može razviti negativan stav prema vašoj web stranici. Stoga će vjerovatnoća da će oni izvršiti kupovinu (ili pretplatiti se, itd.) biti smanjena.

6. Ne budite previše nasilni koliko god je to moguće.

Neočekivani događaji ne prijaju uvijek osobi, pogotovo ako mu se ispriječe na putu. Ako se skočni prozor pojavi dok čitate zanimljiv članak ili birate proizvod i nudi pretplatu na tjedni bilten, onda produktivna interakcija neće funkcionirati.

7. Budite konkretni

Posebnost iskačućeg prozora je potreba da se brzo privuče pažnja posjetitelja. Da biste to učinili, morate jasno formulirati svoje prijedloge, tada će to biti jasno potencijalnim kupcima.

8. Budite sažeti

Ne samo tekstualne informacije treba da budu sažete, već i dizajn iskačućeg prozora. Bolje je odabrati jednostavan dizajn, mirne boje i funkcionalne elemente poznate većini korisnika. Efikasno je razbiti iskačući prozor u zone koje čine strukturu vaše ponude razumljivom na intuitivnom nivou.

9. Odvažite sve prednosti i nedostatke

Kreirajte iskačuće prozore samo ako nema drugih opcija.

9 razloga zašto vaš pop-up ne radi

Imate "ne-mobilni" iskačući prozor

Otprilike 1/3 korisnika koristi pametne telefone za pregled web stranica. Međutim, u većini slučajeva, iskačući prozori na telefonu se ne prikazuju ispravno. Slika iskačućeg prozora na telefonu izgleda mutno, ne postoji način da se zatvori ili da se vidi u potpunosti. To je razlog gubitka prihoda. Obavezno provjerite funkcionalnost iskačućih prozora. Ukoliko dođe do problema, sajt treba prilagoditi za pametne telefone.

Niste ocijenili dodatak

Reakcija vaše web stranice se smanjuje sa svakim dodatkom. Ako je stranica spora, onda je manje prometa, a samim tim i manje prodaje. Brzinu preuzimanja možete pronaći na Sitespeed.ru ili PageSpeed ​​Insights servisima. Pored rezultata, dobit ćete preporuke za poboljšanje brzine web stranice:

Ali to nije sve.

Ako se popup dodaci vaše web stranice sukobljavaju, to može uzrokovati da izgledaju užasno. Prije nego što dozvolite da iskačući prozori prikazuju posjetitelje, morate biti sigurni da izgledaju dobro na svim uređajima.

Dizajn vašeg skočnog prozora je loš

Pokazujete skočni prozor svojim potencijalnim kupcima. Kako bi oni stvorili mišljenje o proizvodima vašeg brenda kao praktičnim, kvalitetnim, dobro dizajniranim, potrebno je poraditi na dizajnu pop-up prozora, pobrinuti se da budu pogodni za posjetitelje. Napravite pop-up u stilu vaše stranice, koristite prekrasne fontove, otpremajte slike.

Vi niste izmislili, već ste kopirali tekst za iskačući prozor

Biznismen mora biti originalan da bi se izdvojio od konkurencije. Tada mu je uspeh zagarantovan. Ako je vaša strategija da kopirate druge, nećete moći izaći na prvo mjesto. Korisnici će biti posljednji koji će posjetiti vašu stranicu. Morate pokazati publici da ste vi lider. Imajte to na umu kada kreirate iskačuće prozore.

Imate nerelevantan sadržaj

Na primjer, korisnik je poslao proizvod u korpu, nije preostalo mnogo do završetka kupovine i iz nekog razloga zatvara karticu... Istovremeno se pojavljuje iskačući prozor koji nudi knjiga u elektronskom obliku. Mislite li da je ova odluka ispravna?

Još jedan primjer. Osoba čita vaš blog, a da ništa ne kupuje. Da li je moguće da mu ponudim popust na robu, šta mislite?

Ista ponuda korisnicima u različitim fazama procesa kupovine neće biti podjednako efikasna. Onima koji su u procesu odabira, dodavanja artikla u korpu, dobro će doći popust ili besplatna dostava. A za one koji prvi put posjete vašu stranicu, možete ponuditi probnu verziju proizvoda.

Vrijedi podsjetiti da sadržaj iskačućih prozora mora odgovarati sadržaju stranice. Na primjer, u katalogu ženske odjeće ne biste trebali dopustiti pojavu iskačućih prozora reklamnih veza.

Tražite previše informacija.

Šta ćete raditi zavisi od toga koje informacije želite da dobijete o svojim klijentima kako biste dalje sarađivali sa njima. Ljudi su obično spremniji da popune formulare ako ih nema mnogo.

Međutim, ako osoba pruži dodatne informacije (pol, godine, ime, adresa, itd.), personalizacija ponuda će biti dublja.

U slučaju kreiranja iskačućeg prozora u jednom koraku, najbolje je zatražiti samo e-poštu.

Ako je prozor višestepeni, onda se mogu tražiti drugi podaci. Ako su posjetitelji zainteresirani za prvi pop-up, obično su spremni dati više informacija o sebi u drugom iskačućem prozoru. Međutim, ne bi trebalo da sadrži više od četiri polja.

Niste A/B testirali

Marketinški stručnjaci znaju da efikasno A/B testiranje omogućava povećanje profita uz postojeći promet.

Prije split testiranja potrebno je:

  • utvrditi koji okidači imaju glavni utjecaj na korisnike;
  • izmjeriti tačku A prije tačke podešavanja B;
  • provjerite sve sami, ne vjerujući opštoj statistici;
  • povećati broj posjeta potrebnih za testiranje (najmanje 1500 za svaki prozor);
  • odrediti indikatore koji se mjere.

Trebalo bi biti nekoliko testova. Upoređujući dizajn iskačućih prozora, identifikujte najefikasnije. Čak i male promjene mogu udvostručiti vaše konverzije.

Ako ste isključili utjecaj gore navedenih razloga, onda morate kopati dublje - revidirati stranicu. A za to je bolje obratiti se profesionalcima! Specijalisti Internet agencija "Sales Generator" u kratkom roku za vas će izvršiti kompletnu analizu grešaka interne i eksterne optimizacije resursa, kao i dati 47+ preporuka za povećanje prometa i prodaje sa vaše stranice.


23.1K

Kod mnogih korisnika interneta izraz "skočni prozor" izaziva negativne asocijacije. Slika kako, kada pokušate da pogledate potrebne informacije na sajtu, ovaj gmaz zatvara potreban deo teksta odmah „lebdi” pred vašim očima. Što je još gore, ako pokušate da ga zatvorite, korisnik često bude potpuno prebačen na drugi resurs.

Jesu li vaši pop-up prozori takav reptil?

Uprkos ovoj ozloglašenosti, iskačući prozori mogu biti ne samo neugodni, već i korisni. U početku, oni su samo neka vrsta dijaloških okvira koji se koriste u programiranju kao elementi korisničkog interfejsa.

Služe za informiranje i kao sredstvo dijaloga između korisnika i programa (web aplikacija). Ali, nažalost, takav negativan stav mnogih korisnika prema pop-up prozorima je u velikoj mjeri opravdan, jer se koriste uglavnom u reklamne svrhe na webu.

  • Otvaranje u prvom planu (pop-up) - iskačući na vrhu glavnog;
  • Otvaranje u pozadini (pop-under) - otvara se iza glavnog prozora.

Potonji su najpodmukliji. Oni postaju aktivni i vidljivi korisniku tek nakon što se glavni zatvori. Stoga neće biti moguće na vrijeme utvrditi njihov izvor i blokirati.

Sredstva borbe

Zbog sveprisutnosti iskačućih prozora za neželjeno oglašavanje na Internetu, mnogi programeri softvera počeli su da ugrađuju anti-pop-up prozore u svoje proizvode.

Glavni program za korištenje Interneta je pretraživač. Stoga je glavni način blokiranja djelovanja prozora za oglašavanje implementiran u pregledniku:

  • Internet Explorer - bio je posljednji od svih softverskih proizvoda u kojima je implementirana mogućnost blokiranja pop-up reklama. To je urađeno tek 2004. godine;
  • Opera - ovaj proizvod je bio prvi pretraživač na svijetu sa ugrađenim blokatorom iskačućih prozora. Pop-up prozori u Operi mogu biti blokirani od 2000;
  • Mozilla Firefox - ovaj pretraživač je poboljšao pristup borbi protiv reklama koji je implementiran u Operi. Za razliku od njega, u Mozilli nisu blokirani svi pop-up oglasi, već samo oni koji se učitavaju kada se otvori glavni prozor.

U modernim pretraživačima, sistem za blokiranje iskačućih prozora se konfiguriše preko korisničkog interfejsa. Chrome, kao i većina drugih pretraživača, ima mogućnost da omogući ili onemogući blokiranje, kao i sastavljanje liste izuzetaka ( pouzdane stranice):

Kreiranje iskačućih prozora pomoću javascripta

Postoji nekoliko tehnologija koje se koriste u web programiranju za kreiranje iskačućih prozora. Glavno sredstvo njihovog kreiranja je i dalje javascript. Njegova funkcionalnost ima nekoliko tipova dijaloga, čija je radnja slična akciji iskačućih prozora:

  • Metoda alert() prikazuje običnu tekstualnu poruku na ekranu. Da biste sakrili dijalog nakon čitanja, morate kliknuti na dugme " Ok»Na dnu prozora;
  • Metoda confirm() je slična prethodnoj metodi. Ali dijaloški okvir koji on prikazuje, osim "U redu" je opremljen i dugmetom "Otkaži". Uz njihovu pomoć, korisnik može prihvatiti ili odbiti uslov naveden u prozoru;
  • Metoda prompt() se koristi za pozivanje druge vrste javascript iskačućeg prozora. Za razliku od gore navedenih, ovaj prozor ima i tekstualno polje. Korisnik može u njega unijeti tekstualne podatke, koji se mogu dodijeliti vrijednosti željene varijable.

Radnja sve tri metode i tipovi dijaloga koje pozivaju prikazani su na slici:


Ali ovo su samo varijante dijaloga. Da biste kreirali pravi popup prozor u javascriptu, koristite metodu open() objekta prozora.

Evo pune sintakse metode:

win=prozor. otvoren (url, ime, parametri), gdje:

  • url je adresa stranice koja će se otvoriti u novom prozoru;
  • Ime - naziv kreiranog prozora. Može se koristiti za dalju obradu u obrascima (parametar cilj);
  • Params - niz parametara za novi prozor. Kompletnu listu njih možete sami pronaći u javascript dokumentaciji.

Slika ispod prikazuje radnju metode i pojednostavljenu popup skriptu:


Kreira se funkcija f1 u čijem tijelu je poziv prozoru. open() . Zatim se ova metoda poziva sa jednim parametrom, koji označava adresu stranice koja će se otvoriti u kreiranom prozoru. Nakon toga se poziva metoda setTimeout(). Funkcija f1 i vremenski interval nakon kojeg će se otvoriti novi prozor su joj proslijeđeni kao parametri.

Kreiranje iskačućeg prozora pomoću CSS-a

Takođe je moguće kreirati iskačući prozor u CSS-u. Ova mogućnost je realizovana tek izdavanjem treće verzije ove tehnologije. Ne biste trebali zloupotrebljavati ovu opciju, jer će raditi samo u najnovijim verzijama pretraživača:


Kao što možete vidjeti sa slike, takav modalni prozor se kreira pomoću CSS-a i html-a. Za razliku od onih kreiranih pomoću js-a, ovaj skočni prozor se ne može pomicati po stranici. Osim toga, njegov kod je previše glomazan da bi ga opisali na skali ovog članka. Ali takav prozor neće biti blokiran od strane pretraživača.

Pregled ostalih tehnologija

Nije potrebno sami razvijati iskačući prozor. Sada postoji mnogo besplatnih jQuery dodataka za ovo. Povezivanjem jednog od njih dobit ćete gotov prozor.

Postoji i mnogo dodataka za popularni CMS. Mogu uključivati ​​cijeli set prozora. Dizajn i funkcionalnost svakog od njih je "naoštren" za određeni zadatak ( registracija, slanje poruke i drugo).

Postoji i nekoliko popularnih skripti. Primjer jednog od njih bit će prikazan u nastavku. Iskačući prozori u kontaktu i drugim popularnim društvenim mrežama rade po ovom principu:

Kako napraviti popup pomoću jqueryja

Primjer skočnog prozora
Prikaži skočni prozor

Šifra je data u verziji "za lijene". Ako ga zalijepite u bilo koji uređivač i pokrenete ga, dobit ćete gotov primjer iskačućeg prozora zasnovanog na jqueryju.

© 2022 ermake.ru -- O popravci računara - Informativni portal