Pozdrav prijatelji! Predlažem da razgovaramo o stvaranje modalnih prozora u WordPressu. Skočni (modalni) prozori značajno proširuju mogućnosti stranice. Imate poruku ili oglas koji bi svaki posjetitelj web stranice trebao vidjeti? Trebate li svoju kampanju učiniti vidljivom? Želite li napraviti pop-up obrazac za registraciju na vašoj web stranici ili obrazac za dijeljenje sadržaja na društvenim mrežama? Napravite modalni prozor!
Pop-up modali dizajnirani su da privuku pozornost. Pojavljujući se na stranici, blokiraju glavni sadržaj i prisiljavaju korisnika da se upozna s njihovim sadržajem (tekst, video, poziv na akciju itd.).
Pažnja! Neka vas ne uplaši duljina ove lekcije - nema poteškoća u stvaranju modalnih prozora (pročitajte i uvjerite se sami), samo detaljno opisujem svaki korak.
Algoritam za kreiranje modalnih prozora u WordPressu
WordPress nema ugrađene alate za rad sa skočnim prozorima. Dizajnirat ćemo ih i prilagoditi pomoću dodatka Izrađivač skočnih prozora. Napravimo, na primjer, modalni prozor s videom, skočni prozor kada kliknete gumb(možete ga konfigurirati kasnije automatski izgled).
- Instalirati Dodatak za izradu skočnih prozora. Aktivirati njegov. Da vas podsjetim: naučili smo kako instalirati dodatke.
- Pronađite odjeljak u bočnom izborniku s lijeve strane administratorske ploče Izrađivač skočnih prozora i idite na njegov pododjeljak Dodaj skočni prozor.
- Otvara se uređivač modalnog prozora. Unesite naziv prozora u polje na vrhu stranice (naziv će biti prikazan samo u administratorskoj ploči - korisnici ga neće vidjeti).
- Dosjetiti se naslov prozora(bit će vidljiv korisnicima) i unesite ga u polje iznad gumba Dodajte medijsku datoteku.
- U bloku Uvjeti Odaberite iz padajućeg izbornika stranice (kategorije) na kojima će se pojaviti prozor. Ako dodatak treba raditi na svim stranicama stranice, Izaberi Format: Sve.
- Dodajte u veliko polje ispod alatne trake tekst, slike, video ili audio– bilo koji sadržaj koji će se prikazati u skočnom prozoru. U primjeru koji razmatram dodao sam kod za video s YouTubea (proučavali smo dodavanje videa na WordPress stranicu).
- U bloku Okidači Postoje postavke za ručno ili automatsko otvaranje (samoaktivacija) skočnog prozora. U našem primjeru sam odabrao vrijednost Pritisnite Otvori.
- Navedite u nastavku veličina skočnog prozora(u pikselima ili postocima). Prilikom odabira opcije Auto Dodatak će automatski promijeniti veličinu modalnog prozora.
- Označite okvir u retku Onemogući pozadinu tako da je stranica stranice vidljiva iza skočnog prozora (preporučujem).
- Postaviti vrstu i brzinu animacije(nije potrebno: optimalne vrijednosti već su postavljene prema zadanim postavkama).
- Podesite položaj prozora na ekranu. U početku ga dodatak postavlja u sredinu na vrhu.
- Vrijednost imovine z-indeks, postavljen prema zadanim postavkama, obično se ne treba mijenjati.
- Odaberite opcije za zatvaranje skočnog prozora. Označite potvrdne okvire u redovima s "pticama" Pritisnite Preklapanje za zatvaranje(prozor će se zatvoriti kada kliknete na pozadinu oko njega), Pritisnite F4 za zatvaranje(prozor će se zatvoriti tipkom F4), Pritisnite ESC za zatvaranje(prozor će se zatvoriti tipkom ESC). Kako ne biste gnjavili posjetitelje web stranice zagonetkom zatvaranja modalnog prozora, preporučujem da označite sve okvire.
- Klik Objaviti.Čestitamo, vaš modalni prozor je stvoren!
O prilagodbi dizajna skočnog prozora
Da biste promijenili dizajn kreiranog modalnog prozora, idite na pododjeljak Tema odjeljak Izrađivač skočnih prozora bočni izbornik administrativne ploče (lijevo). 
U uređivaču koji se otvori konfigurirajte željena pozadina prozora, boja I veličine fonta, ispuna, sjene, naziv gumba zatvaranje. Okus i boja... znate, pa se neću detaljno zadržavati na postavljanju dizajna skočnog prozora. Ako imate pitanja, postavite ih u komentarima.
Kako postaviti skočni prozor
Zapamtite, nismo omogućili funkciju automatskog otvaranja modalnog prozora u postavkama dodatka? Stoga moramo smisliti kako će se naš prozor otvoriti. Postavimo prozor koji će iskočiti kada kliknete na poveznicu, sliku ili gumb.
Popup Make plugin dodjeljuje svaki prozor dvije jedinstvene CSS klase. Ako bilo koju od ovih klasa dodate elementu web stranice, kada kliknete na taj element, otvorit će se modalni prozor.
Gdje i kako povećati komentare na Instagramu – sve metode. Portal pricesmm.com otkrio je što je jeftinije i bolje: sami povećati komentare na Instagramu, programima, dobiti u zamjenu ili naručiti uslugu na SMM servisu. Za i protiv svake metode.
Primjeri dodavanja CSS koda modalnog prozora na vezu, sliku i gumb:
< a href = "#" class = >Otvori modalni prozor< / a >Kada kliknete na sliku pojavit će se modalni prozor
< img src = "popup-primer.jpg" class = "popmake-obrazets-modalnogo-okna"/ >Modalni prozor se aktivira nakon klika na gumb
< button class = "popmake-obrazets-modalnogo-okna"> Otvori modalni prozor< / button >Kliknite na HTML element nakon što ste mu dodali CSS klasu popmake-obrazets-modalnogo-okna. Trebao bi se pojaviti modalni prozor sličan ovome: 
Je li se pojavilo? Sjajno! Sada možete konfigurirati skočne prozore. Ako se prozor ne otvori, opišite problem u komentarima - pokrenut ćemo ga zajedno!
Jeste li često primjećivali skočne prozore na web stranicama? Dakle, većina internetskih izvora, posebno vijesti i blogovi, posjetiteljima prikazuju skočne ili skočne prozore s ovim ili onim informacijama. Zašto su uopće potrebni? Obično njihova prisutnost pomaže pretvoriti posjetitelje u pretplatnike (tj. redovne korisnike). Prema internetskim trgovcima, najveći postotak konverzija dolazi iz skočnih prozora, ako su, naravno, ispravno konfigurirani. Naravno, ako takvi prozori "lete" iz sata u sat pred očima posjetitelja, onda je jasno da će napustiti takvo mjesto i neće se htjeti vratiti.
Kako postaviti skočne prozore u WordPressu?
"Motor" prema zadanim postavkama ne pruža mogućnost stvaranja i konfiguriranja skočnih prozora. Stoga ćemo koristiti rješenje treće strane - besplatni dodatak Popup Maker.
Dodatak za izradu skočnih prozora
Dakle, nakon instalacije i aktivacije dodatka, odmah vidimo prozor dobrodošlice. Za početak rada pritisnite tipku Preskočiti.
Kao rezultat toga, bit ćete preusmjereni na glavni prozor za stvaranje skočnih prozora.
Za stvaranje skočnog prozora kliknite gumb Dodaj skočni prozor, nakon čega ćete biti preusmjereni na stranicu za stvaranje skočnog prozora.
Ovdje ćete morati unijeti sljedeće podatke. U prva dva polja za unos upisujemo naziv i naslov našeg prozora. Imajte na umu da u naslov možete unijeti proizvoljan tekst jer se on neće nigdje prikazati.
Blok Uvjeti uključuje postavljanje lokacije skočnog prozora. Kao što vidite, postoji prilično velik izbor parametara koji vam omogućuju fleksibilnu prilagodbu prikaza (na svim stranicama web mjesta, samo na glavnoj stranici, u kategorijama itd.) Osim toga, moguće je onemogućiti prikaz skočnog prozora na mobilnim i tablet uređajima (postavke Onemogućite ovaj skočni prozor na mobilnim uređajima I Onemogućite ovaj skočni prozor na tablet uređajima odnosno).
U bloku postavki Postavljanje teme Možete odabrati jednu od tema vizualnih prozora koje nudi dodatak.
Blok Prikaži postavke omogućuje postavljanje veličine skočnog prozora.
postavke Onemogući pozadinu Omogućuje vam da prikažete ili sakrijete pozadinu ispod skočnog prozora.
Blok Animacija omogućuje vam da postavite brzinu vašeg prozora, kao i efekte animacije (blijeđenje, zumiranje, itd.)
U bloku Položaj Možete odabrati mjesto na zaslonu gdje će se prikazati vaš skočni prozor.
Dakle, nakon što su sve postavke napravljene, trebate kliknuti gumb Objaviti.
Naš skočni prozor je kreiran i sada ga možete vidjeti na web stranici.
Nedavno su me za jednu stranicu zamolili da izradim obrazac za povratne informacije za WordPress u modalnom prozoru. Odnosno, prilikom klika na poveznicu “pišite nam”, umjesto odlaska na odgovarajuću stranicu, korisnik bi trebao otvoriti novi pop-up prozor, gdje će se nalaziti funkcija slanja poruke. Ovo je interaktivnije rješenje, iako se ne sviđa svima. Ja osobno preferiram klasičnu implementaciju sa stranicom za kontakt, ali obrasci na web stranicama su drugačiji - stoga će biti korisno razmotriti rješenje ovog problema. U svom radu koristio sam 2 dodatka: dobro poznati Contact Form 7 i Easy Modal modul za izradu modalnog prozora u WordPressu.
Ažuriranje 18.5.2017.: Sudeći prema najnovijim recenzijama u repozitoriju, u nekim slučajevima može doći do problema s njegovim radom. Ako i vas to pogađa, isprobajte novo rješenje programera pod nazivom Popup Maker. Može se razmotriti i druga alternativa.
Neću ulaziti u detalje o instaliranju i konfiguriranju kontakt forme 7; Blog je također imao članak o tome što bi moglo biti korisno.
Prijeđimo ravno na modul Easy Modal. Naći ćeš ga. Programeri tvrde da je ovo najbolje rješenje za kreiranje modalnih prozora na web stranici s raznim zanimljivim opcijama za predstavljanje sadržaja.
Preko 10 tisuća preuzimanja, ocjena 4,6. Valjane verzije 3.4 su 4.0.8, iako sam je uspješno pokrenuo na WP 4.3.1. Unatoč činjenici da je dodatak sada transformiran u novo rješenje Popup Maker, na web stranici wordpress.org i kada tražite dodatke unutar admin panela još uvijek možete pronaći uobičajenu Easy Modal verziju 2.0.17. Koristeći njegov primjer, ispričat ću vam o stvaranju modalnog prozora za povratne informacije u WordPressu.
Nakon instalacije pojavit će se istoimeni odjeljak u kojem se nalazi nekoliko stavki. Trebat će nam prvi od njih - Modali. Tamo kliknite gumb Dodaj novo.
Ova će radnja stvoriti novi modalni prozor za vašu WordPress stranicu. Postavke elementa imat će 4 kartice:
- Općenito—opći parametri.
- Display Options - opcije prikaza.
- Close Options - postavke za zatvaranje prozora (klikom ili tipkom Esc).
- Primjeri - primjeri koda za korištenje.
Opće postavke sadrže naziv prozora (nije prikazan na stranici), njegov naslov, sadržaj i vrstu preuzimanja. U bloku sadržaja, prebacujući se u HTML način, dodajte kratki kod obrasca za povratne informacije u modalni prozor.
Vrsta opterećenja ima 2 opcije:
- Load Sitewide (za cijelu stranicu).
- Po stranici/objavi (za određene postove i stranice).
Vrlo zanimljiva opcija. Ako vam je potreban skočni prozor koji će biti prikazan na svim stranicama web mjesta (veza se nalazi na bočnoj traci, na primjer), odaberite prvu opciju. U drugom slučaju, odgovarajući blok postavki pojavit će se na stranicama/objavama web mjesta prilikom uređivanja:
Možete aktivirati i odabrati vlastiti skočni prozor za određenu stranicu. Ako ne označite okvir, element se neće učitati na stranici.
Druga kartica parametara modula je Postavke zaslona.
Ovdje naznačite:
- veličina prozora - automatski, srednji, adaptivni, mali, veliki itd.;
- pozadinu - možete koristiti pozadinu za obrazac ili ga prikazati bez nje;
- animacija skočnog prozora;
- položaj (lokacija) - gore u sredini, dolje desno itd.; fiksni ili ne;
- udubljenje na vrhu ekrana.
Primjeri prikaza izlaza modalnog prozora u WordPressu pomoću dodatka Easy Modal mogu se pronaći u posljednjoj kartici.
Morate umetnuti ovaj kod kroz widget na bočnoj traci ili u uređivaču teksta. Ne razlikuje se od bilo kojeg drugog HTML koda, jedino je ovdje naznačena klasa određenog modalnog prozora (eModal-1). Za drugi element koji ste stvorili, klasa će biti eModal-2, itd. Da ne biste pogriješili prilikom umetanja koda, najlakši način je da ga kopirate s ove stranice.
Uređivanje teme modalnog prozora
U dodatku Easy Modal, osim postavki za određeni element, možete definirati teme za skočne prozore (Theme). Osnovna besplatna verzija modula ima samo jedan predložak, ali to je više nego dovoljno.
Ovaj alat ima 6 kartica:
- Općenito - označiti naziv teme;
- Prekrivanje — pozadina (ovdje možete odabrati boju i prozirnost pozadine obrasca);
- Spremnik - različite postavke samog modalnog prozora (padding, frame, shadow);
- Naslov—parametri naslova skočnog prozora (font, sjena);
- Sadržaj — font i boja tekstova u bloku;
- Zatvori - element za zatvaranje forme (tekst i dizajn).
Kao što vidite, izgled se može prilagoditi vašim potrebama. Završio sam s ovim jednostavnim WordPress obrascem u modalnom prozoru:
Nakon postavljanja svih postavki, ne zaboravite ih spremiti (kliknite gumb Spremi).
Videozapis dodavanja obrasca za kontakt 7 u skočni prozor Easy Modal
Usput, pronašao sam video o radu s dodatkom Easy Modal, koji demonstrira proces stvaranja prozora za modalne povratne informacije u WordPressu. Tamo je sučelje modula malo zastarjelo (neke postavke izgledaju drugačije), ali možete dobiti opću suštinu. Možda će nekome biti lakše razumjeti ovo pitanje uz pomoć videa.
Ukupno o modalnim prozorima za WordPress
Kao što je gore spomenuto, sada je dodatak Easy Modal (sudeći prema službenoj stranici) pretvoren u Popup Maker. Uspio sam pronaći istoimeni modul u repozitoriju, ali ga nisam testirao. Govorim vam o ovome kako biste znali što trebate tražiti ako Easy Modal u WordPressu u sljedećim verzijama iznenada prestane raditi.
Oba rješenja su besplatna, iako imaju dodatke koji se plaćaju. Omogućuju vam prilagođavanje ciljanja, dodavanje više tema dizajna, sadrže analitiku i neke druge značajke. Ako trebate napredniji mehanizam modalnog prozora, možete pobliže pogledati ova proširenja.
Što se tiče zadatka otvaranja obrasca za povratne informacije Contact Form 7 u skočnom prozoru, dovoljne su osnovne mogućnosti Easy Modala. Štoviše, ovo se rješenje može koristiti i za prikaz drugih modalnih prozora u WordPressu - korisni savjeti, dodatne informacije itd. S obzirom na prisutnost uređivača za umetanje HTML koda, možete prikazati videozapise, obrasce itd. u skočnom prozoru. Općenito, koristan dodatak. Ako imate pitanja o tome, napišite u komentarima.
Sergej Arsentjev
Najbolji WordPress skočni dodatak
Svaki blog ima slike, a ima ih dosta i različite su širine. Pritom se velike slike na stranici pojavljuju kao minijature, a kada kliknete na njih, učitava se cijela slika. Postoje posebni dodaci za WordPress koji omogućuju otvaranje slika u skočnom prozoru s prekrasnim efektom.
Samo jedan problem: ovi su dodaci prilično hiroviti i neće svi htjeti "iskočiti" na vašu stranicu. Isprobao sam mnogo dodataka prije nego što sam našao onaj koji mi je odgovarao.
WP Lightbox, Lightbox2, Fancybox, Jquery Lightbox i drugi dodaci meni osobno NISU radili.
Ali ovaj je dodatak proradio odmah i bez ikakvih dodatnih postavki ili traženja JavaScript sukoba. Vrlo je moguće da će i vama savršeno poslužiti, pa vam preporučam da ga odmah pokušate instalirati, pogotovo jer ima mnogo prednosti.
Pažnja! Našao sam još cool plugin!
Našao sam još cool i pametniji dodatak za skočne slike i galerije - Responzivni Lightbox iz dFactory. Tako da ne morate čitati ostatak, ostavit ću to kao povijest
Dodatak je potpuno rusificiran, jednostavne i potrebne postavke, radi još stabilnije i bolje.
Samo ga instalirajte kao obični WordPress dodatak i sve bi trebalo raditi, testirao sam ga na nekoliko tema, uključujući one nestandardne s jedinstvenim dizajnom i izgledom. Gdje su drugi dodaci ostali po strani, ovaj je radio.
Možete preuzeti iz repozitorija https://ru.wordpress.org/plugins/responsive-lightbox/
5 minuta i sve radi, sretno!
Povijesti radi ostavljam prethodni tekst:
Prema recenzijama nekih programera na Internetu, ovaj dodatak za skočne prozore jedan je od najbržih za rad jer koristi najmodernije JS skripte. U principu, sve se otvara prilično brzo, ali nisam koristio štopericu i nisam uspoređivao brzinu različitih dodataka. Ali u svakom slučaju, lijepo je znati da imate "najbrži dodatak"
Jedna od očitih prednosti Colorboxa su brojne postavke: čak sam ih stavio u zaseban podnaslov. Neću opisivati sve, samo ću reći koje sam postavke postavio, pogotovo jer postoje opisi svake postavke.
Instalacija i konfiguracija Lightbox Plus Colorbox
U datoteci header.php prije završne oznake
U datoteci footer.php prije završne oznake
