Skript pre uvítacie okno na domovskej stránke WordPress. Ako vytvoriť kontextové okno vo wordpresse? Algoritmus na vytváranie modálnych okien vo WordPress

Dobrý deň, priatelia! Navrhujem, aby sme sa porozprávali vytváranie modálnych okien vo WordPress. Pop-up (modálne) okná výrazne rozširujú možnosti stránky. Máte správu alebo reklamu, ktorú by mal vidieť každý návštevník webu? Potrebujete zviditeľniť svoju kampaň? Chcete si na svojom webe vytvoriť vyskakovací registračný formulár alebo formulár na zdieľanie obsahu na sociálnych sieťach? Vytvorte modálne okno!

Pop-up modály sú navrhnuté tak, aby upútali pozornosť. Tým, že sa objavia na stránke, blokujú hlavný obsah a nútia používateľa, aby sa oboznámil s ich obsahom (text, video, výzva na akciu atď.).

Pozor! Nenechajte sa zastrašiť dĺžkou tejto lekcie - pri vytváraní modálnych okien nie sú žiadne ťažkosti (prečítajte si to a presvedčte sa sami), len podrobne popisujem každý krok.

Algoritmus na vytváranie modálnych okien vo WordPress

WordPress nemá vstavané nástroje na prácu s vyskakovacími oknami. Navrhneme a upravíme ich pomocou pluginu Maker vyskakovacích okien. Vytvorme napríklad modálne okno s videom, vyskakovacie okno po kliknutí na tlačidlo(môžete ho nakonfigurovať neskôr automatické vzhľad).

1. Inštalácia Doplnok Popup Maker. Aktivovať jeho. Dovoľte mi pripomenúť: naučili sme sa, ako nainštalovať doplnky.
   
2. Nájdite sekciu v bočnej ponuke na ľavej strane panela správcu Maker vyskakovacích okien a prejdite do jej podsekcie Pridať vyskakovacie okno.
3. Otvorí sa editor modálneho okna. Do poľa v hornej časti stránky zadajte názov okna (názov sa zobrazí iba v admin paneli - používatelia ho neuvidia).
4. Navrhnúť názov okna(bude viditeľné pre používateľov) a zadajte ho do poľa nad tlačidlom Pridajte mediálny súbor.
5. V bloku Podmienky Vyberte z rozbaľovacej ponuky stránky (kategórie), na ktorých sa okno zobrazí. Ak by mal plugin fungovať na všetkých stránkach lokality, vyberte Formát: Všetky.
6. Pridajte do veľkého poľa pod panelom s nástrojmi text, obrázky, video alebo zvuk– akýkoľvek obsah, ktorý sa zobrazí vo vyskakovacom okne. V uvažovanom príklade som pridal kód pre video z YouTube (študovali sme pridávanie videí na stránku WordPress).
   
7. V bloku Spúšťače K dispozícii sú nastavenia pre manuálne alebo automatické otváranie (samoaktivácia) vyskakovacieho okna. V našom príklade som zvolil hodnotu Kliknite na Otvoriť.
8. Uveďte nižšie veľkosť vyskakovacieho okna(v pixeloch alebo percentách). Pri výbere možnosti Auto Doplnok automaticky zmení veľkosť modálneho okna.
9. Začiarknite políčko v riadku Zakázať pozadie aby bola stránka webu viditeľná za vyskakovacím oknom (odporúčam).
10. Nastaviť typ a rýchlosť animácie(nie je potrebné: optimálne hodnoty sú už predvolene nastavené).
    
11. Upravte polohu okna na obrazovke. Doplnok ho najprv umiestni do stredu hore.
12. Hodnota nehnuteľnosti z-index, predvolene nastavené, zvyčajne nie je potrebné meniť.
    
13. Vyberte možnosti na zatvorenie kontextového okna. Začiarknite políčka v riadkoch s výrazom „vtáky“ Kliknite na položku Prekrytie na zatvorenie(okno sa zatvorí, keď kliknete na pozadie okolo neho), Zatvorte stlačením klávesu F4(okno sa zatvorí kľúčom F4), Zatvorte stlačením klávesu ESC(okno sa zatvorí kľúčom ESC). Aby ste návštevníkov stránky neotravovali hádankou zatvárania modálneho okna, odporúčam zaškrtnúť všetky políčka.
    
14. Kliknite Publikovať. Gratulujeme, vaše modálne okno bolo vytvorené!

O prispôsobení dizajnu kontextového okna

Ak chcete zmeniť dizajn vytvoreného modálneho okna, prejdite do podsekcie Téma oddiele Maker vyskakovacích okien bočná ponuka administračného panela (vľavo).

V editore, ktorý sa otvorí, nakonfigurujte požadované pozadie okna, farba A veľkosti písma, výplň, tiene, názov tlačidla zatváranie. Chuť a farba... viete, takže nebudem zachádzať do podrobností o prispôsobení dizajnu vyskakovacieho okna. Ak máte otázky, opýtajte sa ich v komentároch.

Ako nastaviť vyskakovacie okno

Pamätáte si, že sme v nastaveniach doplnku nepovolili funkciu automatického otvárania modálneho okna? Preto musíme zistiť, ako sa naše okno otvorí. Nastavme okno, ktoré sa zobrazí po kliknutí na odkaz, obrázok alebo tlačidlo.

Doplnok Popup Make priradí každé okno dve jedinečné triedy CSS. Ak pridáte niektorú z týchto tried do prvku webovej stránky, potom po kliknutí na tento prvok sa otvorí modálne okno.

Kde a ako posilniť komentáre na Instagrame – všetky metódy. Portál pricesmm.com zisťoval, čo je lacnejšie a lepšie: zvýšiť komentáre na Instagrame sami, pomocou programov, získať výmenou alebo si objednať službu v službe SMM. Výhody a nevýhody každej metódy.

Príklady pridania kódu CSS modálneho okna k odkazu, obrázku a tlačidlu:

Po kliknutí na obrázok sa zobrazí modálne okno

Modálne okno sa aktivuje po kliknutí na tlačidlo

Po pridaní triedy CSS do prvku HTML kliknite na prvok HTML popmake-obrazets-modalnogo-okna. Malo by sa zobraziť modálne okno podobné tomuto:

Objavilo sa to? Skvelé! Teraz môžete nakonfigurovať kontextové okná. Ak sa okno neotvorí, popíšte problém v komentároch - spustíme ho spoločne!

Dnes mám v pláne hovoriť o jednom doplnku, ktorý je veľmi užitočný pre prácu s webom WordPress. Tento plugin je preložený približne na 75%, ale to je celkom dosť na to, aby ste ho mohli začať používať.

Predtým, ako vám poviem, ako ho používať, chcem povedať pár slov o tom, pre koho by to mohlo byť užitočné:

• Máte informačný biznis a zhromažďujete predplatiteľov svojej webovej stránky - vyskakovacie okno Wordpress je pre vás doplnok.
• Máte internetový obchod alebo katalóg produktov – tento plugin je vhodný aj na to, aby ste ho používali na upozorňovanie používateľov a návštevníkov vašej stránky na nové produkty, ktoré máte.

Úprimne povedané, plugin sa dá použiť na mnoho rôznych vecí.

Verzia, ktorú uverejním na konci tejto stránky, je bezplatná. Existuje aj platená verzia pluginu. Či si ho kúpite alebo nekúpite, je len na vás.

Vyskakovacie okno Wordpress – plugin v ruštine.

Po nainštalovaní a aktivácii doplnku na vašej webovej stránke. Pred vami sa zobrazí nasledujúce okno:

Takmer celý doplnok bol preložený do ruštiny a nemali by ste s ním mať žiadne problémy. Vývojári doplnku - vyskakovacie okno wordpress však vzali tento bod do úvahy, a preto pripravili pokyny v ruštine, ako používať tento slávny doplnok:

V zásade tu mohol článok skončiť, no napriek tomu som sa rozhodol prejsť si ho od A po Z.

Keď sme sa pozreli na časť „Prehľad“, odporúčam prejsť na položku „Nastavenia“:

Vedľa každej položky je ikona s otáznikom - keď na ňu prejdete, vyskočí okno s tipom, na čo je táto alebo tá položka potrebná. Samozrejme, prečítajte si tipy a začiarknite políčka alebo nie.

Po vykonaní niektorých zmien musíte samozrejme kliknúť na tlačidlo „Uložiť“, ktoré sa nachádza nad ponukou.

Ďalšia časť kontextového okna pre wordpress je „Zobraziť všetky kontextové okná“:

V čase testovania PopUp som nemal žiadne z nich, takže sa tu nič nezobrazuje, myslím, že ak ho používate často, môžete skončiť s niekoľkými vyskakovacími oknami WordPress.

A nakoniec, najzaujímavejšie okno je „Pridať nové vyskakovacie okno“:

Budete požiadaní, aby ste si vybrali jednu alebo druhú šablónu pre svoje budúce vyskakovacie okno WordPress a vybrali jej názov - použite angličtinu, napríklad „primer“. Otvorí sa pred vami špeciálne okno, v ktorom si môžete vytvoriť svoj PopUp.

WordPress popup – hlavné nastavenia.

Táto sekcia obsahuje hlavné nastavenia vášho pluginu. Všetky sú preložené do ruštiny a vedľa každého je náznak, prečo je potrebné to alebo ono nastavenie. Niektoré z nich sú označené „ Pro“ – to znamená, že prispôsobenie bude dostupné až po zakúpení platenej verzie vyskakovacieho okna wordpress.

Ďalšia sekcia:

Dizajn vyskakovacieho okna WordPress.

O tejto časti sa oplatí hovoriť samostatne, pretože obsahuje ďalšie veľmi užitočné podsekcie. Nezabudnite, že po vykonaní akýchkoľvek zmien musíte kliknúť na tlačidlo „Uložiť“ - inak sa zmeny neuložia a budete musieť všetko znova nakonfigurovať.

Tu sú špeciálne podsekcie:

• • Vzhľad– tu si môžete vybrať napríklad to, aké bude pozadie vášho vyskakovacieho okna WordPress – môže to byť určitá farba alebo obrázok – napríklad nejaký obrázok.
  • Vyskakovacie umiestnenie– tu sa zobrazí výzva na výber, kde sa bude nachádzať vyskakovacie okno wordpress – táto funkcia je žiaľ dostupná len v platenej verzii pluginu.

• • Texty piesní– v tomto doplnku vlastne napíšete text, ktorý človek uvidí, keď navštívi vašu stránku.

• • Animácia otvárania kontextového okna– tu môžete nastaviť animáciu toho, ako sa vaše vyskakovacie okno WordPress zobrazí na monitore používateľa.

Odberatelia vyskakovacích okien WordPress.

V tomto okne budete vyzvaní, aby ste vykonali ďalšie nastavenia, ktoré vám umožnia povoliť predplatné na vašej lokalite, keď používateľ uvedie svoje meno a e-mail:

Prihlásenie/registrácia wordpress popup.

Toto nastavenie je, žiaľ, platená funkcia. Ak si myslíte, že ho potrebujete, odporúčam zakúpiť si doplnok:

A/B testovanie vyskakovacieho okna WordPress.

A v tomto prípade je táto sekcia platená:

Štatistika vyskakovacích okien Wordpress.

V čase, keď som plugin testoval, sa štatistiky nezobrazovali, no v čase, keď som písal tento článok, plugin zaznamenal 3 zobrazenia okna.

WordPress popup CSS/HTML kód.

Väčšinou túto položku málokto používa. Môžete v ňom robiť zmeny, ak ovládate CSS a HTML - v opačnom prípade by som neodporúčal robiť úpravy kódu:

Nepredvádzal som sa a vytvoril som štandardné vyskakovacie okno WordPress, takto to vyzerá:

Dúfam, že sa vám článok páčil a budete chcieť použiť tento plugin na vytvorenie PopUP.

P.S. Nie je potrebné kupovať platenú verziu pluginu, funkčnosť bezplatnej verzie je úplne postačujúca.

Modálne okná sa na webových stránkach často používajú na upútanie pozornosti používateľa na dôležité udalosti alebo na poskytnutie užitočných informácií. Ide najmä o bonusy, bezplatný materiál, predplatné, „bream giveaway“ a oveľa viac. Aké účinné a nenápadné sú takéto opatrenia, zvažuje každý po svojom. Ale napriek zváženiu výhod a nevýhod vyskakovacích okien sa používajú na zdroje a pomerne aktívne. Preskočme všetku kritiku a prejdime k malému výberu piatich modelových pluginov okien pre WordPress.

Jednoduché, adaptívne modálne okno s množstvom najnutnejších nastavení. Upravovať sa dá úplný vonkajší dizajn, podmienky zobrazenia (aj podľa dátumu), pamäť cookies, čas vyskakovania, vkladanie videí, HTML kód, bannery atď.

Otváranie mediálnych súborov v modálnom okne pri kliknutí na webové tlačidlo. Okno sa do príspevku vloží cez krátky kód s určitými parametrami.

Veľmi jednoduché vyskakovacie okno s niekoľkými základnými možnosťami. Je možné určiť šírku, výšku, farbu pozadia a k dispozícii je aj náhľad.

Vyskakovacie okno s možnosťou pridať doň ľubovoľný obsah. K dispozícii sú nastavenia vzhľadu, ukladanie súborov cookie, prispôsobivosť a mnoho ďalšieho.

Dobrý deň, milí čitatelia blogu. Všimli ste si vyskakovacie okná na niektorých webových stránkach? Vyvstali otázky: ako sa vyrábajú a prečo sú vôbec potrebné? ja mam ano.

Takže priatelia, dnes vám o nich poviem presne. Ale! Poďme najprv zistiť, prečo ich vôbec potrebujeme? Čo z nich môžete získať a aký bude výsledok? Odpovedám.

Prostredníctvom takýchto vyskakovacích okien je efekt dopadu veľmi veľký. Hovorí sa, že niekedy sa stane, že počet predplatiteľov sa zvýši 4-krát. Super! Nieje to? Používanie vyskakovacích okien (popunders) je veľmi efektívny spôsob, ako prilákať obrovské množstvo návštevníkov. Zvyčajne sa používajú na:

• newsletter;
• PR pre platené školiace kurzy;
• propagácia skupín na sociálnych sieťach siete;

Musím vám pripomenúť, že niekedy takéto vyskakovacie reklamy môžu poškodiť stránku. Je to spôsobené tým, že niektorí používatelia to považujú za veľmi nepríjemné. Čo môžem povedať, tiež som veľmi nahnevaný na takéto spôsoby upútania pozornosti. V reakcii na toto všetko dochádza k nárastu 100% zlyhania na stránke, čo je škodlivé.

Ale! Všetky tieto problémy je možné obísť, ak je kontextové okno správne nakonfigurované.

Vráťme sa teda k našej hlavnej otázke.

Vyskakovacie okná na WordPress

1.WP-MK

Skvelý plugin, na ktorý som narazil náhodou. Jednoduché nastavenie, rozhranie v ruskom jazyku a celá sada nástrojov. Je ideálny pre:

• Reklama (napríklad Google Adsense);
• PR pre vaše skupiny na sociálnych sieťach. siete;
• Jednoduchý formulár predplatného.

Plugin si môžete stiahnuť z . Potom ho nainštalujeme a aktivujeme bežným spôsobom. Prejsť na nastavenia vľavo? vyskakovacie okno a vidíme nasledovné:

Podľa môjho názoru je tu všetko jednoduché; nevidím zmysel v rozoberaní všetkého samostatne. Ak máte nejaké otázky, môžete sa ich opýtať v komentároch.

2. Ninja vyskakovacie okná.

Ak chcete, aby sa používateľom pri návšteve vašej stránky zobrazilo „Wow“ a zobrazilo sa im vyskakovacie okno, nainštalujte si tento skvelý doplnok. Ninja Popups je pop-up monštrum na . V porovnaní s WP-MK je z hľadiska funkčnosti ďaleko lepší. Všimol som si, že Ninja Popups používajú majstri svojho remesla. prečo? Plugin je platený a nie každý si ho môže dovoliť. Za seba môžem povedať, že ich ceny sú primerané, nepýtajú si veľa. Môžete sa dozvedieť viac o nákladoch Tu.

Poďme zistiť, čo presne získame z tohto doplnku:

• jednoduchosť nastavenia;
• viac ako 100 pripravených šablón pre predplatné a iné druhy reklamy (súťaže, propagačné akcie, školenia atď.);
• štatistiky;
• mobilná verzia kontextového okna;
• pokročilé nastavenie časov zobrazenia;
• A oveľa viac.

Ak sa chcete dozvedieť o všetkých výhodách doplnku, prejdite na toto odkaz.

Ako si prispôsobiť plugin pre seba? Navrhujem nasledovné... Namiesto otravného textu je lepšie pozrieť si tréningové video:

To je všetko, priatelia, čo sa týka nastavení. Ale ak máte nejaké otázky, opýtajte sa ich v komentároch.

3. Popup Maker (modálne okno)

Doplnok, ktorý má funkciu vytvorenia modálneho kontextového okna. V našom prípade sa vyskakovacie okná zobrazia po kliknutí na:

• odkaz;
• tlačidlo;
• obrázok.

Ako to teda nastaviť?

1. Stiahnuť ▼ zapojiť;

2. Nainštalujte a aktivujte;

3. Vľavo v ponuke hľadáme: Pupup Maker -> Pridať nový.

4. Pred nami sa objaví takáto stránka:

Nič vám to nepripomína? Stránka je úplne rovnaká ako formulár na publikovanie článkov na WordPress. Ako vidíte, pribudli tu niektoré ďalšie funkcie (nastavenia).

Pozrime sa na ne podrobnejšie.

Vyskakovacie okno (názov)- nebude sa nikde zobrazovať, tu pomenujeme náš popunder v plugine.

Tu zadajte názov okna- napíšte meno (napríklad: odber noviniek).

Podmienky zacielenia- zaškrtnite políčko, kde sa zobrazí naše okno.

Nastavenia témy – zatiaľ tu nie sú žiadne možnosti. Predvolene vyberte. Priatelia, v budúcnosti si môžete vytvoriť vlastnú šablónu na návrh modálneho okna. Mimochodom, funkcia je veľmi cool. Môžete to nájsť: Pupup Maker -> Všetky motívy.

Kód - čo sa zobrazí v okne. V našom prípade video z YouTube:

Nižšie nás čakajú ďalšie nastavenia (veľkosť okna, priehľadnosť, doba zobrazenia a pod.). Nie je tam nič zložité. Dúfam, že to zvládneš. Ak máte nejaké otázky, pokojne sa ich spýtajte v komentároch.

Po vykonaní všetkých nastavení nám zostáva iba zverejniť vyskakovacie okno.

Ale priatelia nie sú všetko. Prejdite do sekcie Tvorca šteniatok -> Všetky kontextové okná. Hľadáme CSS triedy. Máme záujem o takýto kód: popmake-xxx.

Tento kód potrebujeme na zobrazenie okna pri kliknutí na odkaz, obrázok alebo tlačidlo (povedal som na začiatku).

Otvorenie okna po kliknutí na obrázok:

Otváranie stlačením tlačidla:

< button class = "popmake-xxx" >Otvoriť okno

Tento kód je možné vložiť kamkoľvek (napríklad do článku alebo widgetu). Žiadny rozdiel. Ak máte nejaké problémy alebo otázky, opýtajte sa v komentároch, rád vám pomôžem.

Touto veselou poznámkou sa zoznam popup pluginov pre WordPress končí. Dúfam, že si z týchto troch nájdete tú svoju, ktorá sa vám páči. Ďakujem, že si so mnou až do konca.

Ak chcete získať aktualizácie, zúčastnite sa na . Do skorého videnia. Ahojte všetci!

S pozdravom Mogish Ivan

Ahojte všetci!

Popup plugin WordPress – vrstvené vyskakovacie okná

Čo teda získate, keď si ho stiahnete z odkazu na konci príspevku a nainštalujete ho na svoj blog alebo webovú stránku wordpress?

Budete mať príležitosť:

vytvorte vyskakovacie okno;

použite prednastavenú šablónu kontextového okna;

vytvorte si vlastné vyskakovacie okno.

Úprimne povedané, strávil som asi týždeň prekladom tohto kontextového doplnku a snažil som sa to urobiť dobre. Dúfam, že sa vám bude páčiť.

Nastavenia popup pluginu

V hlavných nastaveniach je všetko v ruštine, ako je uvedené vyššie. Nebude na tom pre vás nič zložité. Vyberte parametre, otestujte ich a vyberte najlepšiu možnosť.

Pri vytváraní nového vyskakovacieho okna budete mať prístup k množstvu funkcií, prostredníctvom ktorých môžete vykonať potrebné nastavenia vo svojom vyskakovacom okne WordPress, takže vám nikto nebráni v kreativite.

Ak uvidíte text ako: „zadajte správu...“ – nebojte sa, môžete ho nahradiť akýmkoľvek iným textom a v ľubovoľnom jazyku.

Doplnok vyskakovacieho okna na karte Mailing

Tu už máte postarané, no môžete zadať svoj vlastný text, ako chcete.

Sekcia Integrácie popup plugin WordPress

Pre mňa osobne to nie je mimoriadne zaujímavé, ale možno niekto používa služby tretích strán na odosielanie e-mailov.

Vyskakovacie okná – A/B kampane

Tu môžete vytvárať spoločnosti a sledovať, ktoré kontextové okno je najefektívnejšie.

Ak vidíte, že niektoré formuláre sú zablokované, neznepokojujte sa, môžete ich jednoducho odblokovať, ale v inej sekcii.

Hneď poviem, že túto časť som nijako zvlášť netestoval.

Ak kliknete na tlačidlo „vytvoriť“, zobrazia sa ďalšie nastavenia, ktoré môžete upraviť podľa svojich potrieb.

Časopis som tiež netestoval, tak len spomeniem a nič viac..

Popup plugin WordPress – vrstvené vyskakovacie okná má funkciu, ktorá vám umožní stiahnuť a nainštalovať ďalšie vyskakovacie okná, ale problém je, že bez nákupného kódu je to zbytočné.

Je tam aj sekcia s doplnkami, no tie, žiaľ, tiež stoja peniaze.

Určite by som sa najskôr pozrel do sekcie nastavení. Úprimne povedané, nastaviť všetky potrebné parametre.

K dispozícii je aj sekcia FAQ – „Frequently Asked Questions“, ale tá nemá nič spoločné s doplnkom a presmeruje používateľa na stránku s odpoveďami v angličtine, takže ju nebude možné preložiť.

Teraz by som rád uviedol niekoľko príkladov toho, aké vyskakovacie okno WordPress môžete vytvoriť, a to aj pomocou príkladov vyskakovacích okien zabudovaných do doplnku: