Prvé vyskakovacie okná boli vytvorené zo scenára, ktorý si predstavil Ethan Zukermanubytovanie svojej webovej stránky na Tripod začiatkom 90. rokov. Jeho používatelia sa sťažovali na množstvo reklám, ktoré umiestnil na webovú stránku, a tak sa rozhodol umiestniť bannery na samostatnú stránku, ktorá sa otvorila, keď používateľ na stránku vstúpil.

Tento malý kúsok kódu stále nebol skutočným vyskakovacím oknom, aké momentálne vidíte na všetkých webových stránkach, ale tam to všetko začalo. Na moderných webových stránkach sa kontextové okná používajú na rôzne účely, nielen na reklamu. Kontaktné formuláre, varovania týkajúce sa ochrany osobných údajov a návrhy na predplatné sa tiež často zobrazujú ako kontextové okná.

Pokiaľ ide o kontextové okná, obťažujú používateľov dve veci: keď na vás skočia, keď ich nechcete; a keď sa jeho vzhľad úplne líši od štýlu webovej stránky. Tieto dva problémy sa objavia, keď používate doplnky, ktoré sa nezdajú byť najvyššej kvality.

Najväčší problém väčšiny doplnkov, ktoré začínajúci vývojári používajú vytváranie vyskakovacích okien je nedostatok kontroly nad výslednou správou. Všetkým týmto problémom sa však môžete vyhnúť, ak použijete Elementor vytvoriť webovú stránku.

Dva úžasné doplnky vytvorené špeciálne pre Elementor Page Builder, vám pomôže vytvoriť kontextové okná akéhokoľvek typu, tvaru a štýlu, ktoré potrebujete – Elementor Popup Builder et JetPopup. Pretože sú obe vyrobené z rovnakého mäsa ako Elementor, je potrebné si len položiť otázku, ktorý z týchto doplnkov si zvoliť. Aby som vám pomohol urobiť toto rozhodnutie, urobím dôkladné preskúmanie oboch a môžete porovnať ich klady a zápory. Tak, poďme !

Stiahnutie a inštalácia

Toto nie je najdôležitejšie kritérium pri výbere, ktorý plugin chcete použiť, ale aby ste si ho vyskúšali, musíte si ho najskôr zaobstarať. Preto začnem úplne od začiatku a načrtnem postup, ako to dosiahnuť - ceny, vynaložené úsilie a jednoduchosť procesu nastavenia.

Tvorca kontextových okien

Elementor

Tento doplnok vytvoril tím Elementor. Mohli by sme ho preto nazvať jeho skutočným „dieťaťom“. Toto je posledná aktualizácia produktu Elementor, ktorá bola vydaná v januári 2019 s cieľom uspokojiť potreby zákazníkov. Nie je však k dispozícii pre používateľov bezplatnej verzie Elementoru.

Program Popup Builder je zahrnutý v pláne profesionálneho predplatného. Aby ste mohli vytvárať vyskakovacie okná, musíte mať najskôr Elementor Pro. Najjednoduchší cenový plán, ktorý vám umožní využívať všetky funkcie Elementoru pre jednu webovú stránku, stojí 49 dolárov ročne. Takže od prvých krokov (zakúpenie produktu Elementor Pro) je tu algoritmus na získanie programu Popup Builder:

  • Kúpte si Pro Elementor Page Builder.
  • Prejdite na svoj osobný účet a stiahnite si doplnok.
  • Prejdite na hlavný panel svojho webu, Pluginy> Pridať nové, kliknite na tlačidlo „Nahrať doplnok“ a vyberte príslušný súbor .zip.
  • Po dokončení inštalácie aktivujte doplnok pomocou svojho licenčného kľúča.
  • Tu je Nástroj na tvorbu kontextových okien, ktorý nájdete na karte Šablóny> Vyskakovacie okná.

Je to trochu dlhá cesta, ale s programom Popup Builder získate od Elementoru aj obrovskú zbierku rôznych prvkov, ako sú miniaplikácie, šablóny a ďalšie ďalšie nástroje.

Tvorca kontextových okien

JetPopup

„Rodina“ doplnkov Jet už obsahuje viac ako 10 článkov a JetPopup je jedným z nich. Bol starostlivo vytvorený špeciálne pre spoločnosť Elementor a zvyšuje počet dostupných nástrojov. Tento doplnok je tJetPopupsPlne kompatibilný s bezplatnou a platenou verziou. Takže nemusíte robiť žiadne ďalšie nákupy. JetPopup stojí 15 dolárov a akonáhle ho získate, môžete ho použiť iba pre jednu webovú stránku. Ak ho potrebujete pre viac ako jeden projekt, môžete si kúpiť doplnok na základe licencie vývojára (bude vás stáť 45 dolárov) a použiť ho pre päť webových stránok. Algoritmus na získanie doplnku je o niečo jednoduchší:

  • Kúpte si doplnok na TemplateMonster Marketplace. Bude stiahnutá do vášho počítača.
  • Prejdite na hlavný panel svojho webu, Pluginy> Pridať nové, kliknite na tlačidlo „Nahrať doplnok“ a vyberte príslušný súbor .zip.
  • Po dokončení inštalácie aktivujte doplnok.
  • Voila! Keď otvoríte ponuku prispôsobenia prvku Elementor (kliknutím na tlačidlo „Upraviť pomocou prvku Elementor“), nájdete časť JetPopup v ľavej ponuke miniaplikácie.

JetPopup

Tvorba vyskakovacích okien

Keď sú nástroje pripravené a pripravené, môžem sa pokúsiť vytvoriť kontextové okno s oboma doplnkami a zistiť, aká jednoduchá a zrozumiteľná je táto funkcia. Ďalej vytvorím základné kontextové okno a pozriem sa na možnosti prispôsobenia pre kontextové okno a program JetPopup.

Tvorca kontextových okien

Vyskakovacie okná sa v Pro Elementor vykonávajú osobitne od stránok webu. Ak chcete zmeniť vzhľad webovej stránky, otvorte stránku, ktorú chcete prispôsobiť, kliknite na tlačidlo „Upraviť pomocou nástroja Elementor“ a vykonajte zmeny. Ak chcete vytvoriť (a potom upraviť) vyskakovacie okná, musíte prejsť do ponuky Šablóny> Vyskakovacie okná a stlačiť tlačidlo „Pridať nové vyskakovacie okno“.

Tvorca kontextových okien
Vyskúšajte službu Popup Builder

V otvorenom okne musíte vybrať šablónu, ktorú vytvoríte (áno, môžete vytvoriť šablóny nielen pre kontextové okná, ale aj pre stránky a ďalšie položky) a pomenovať ju.

vyskakovacie okno

Po stlačení tlačidla „Vytvoriť šablónu“ budete presmerovaní na ponuku Prispôsobenie Elementor. Je ľahšie prispôsobiť existujúcu položku tak, že ju budete stavať od nuly. Najprv preto budete vyzvaní, aby ste vybrali vhodný model.

vyskakovacia knižnica

Vybral som si jeden z modelov zobrazených v hornej časti zoznamu knižníc. Hneď po výbere pristanete na pracovnom priestore Elementor, na ktorý ste pravdepodobne zvyknutí. Možnosti prispôsobenia sú umiestnené na bočnom paneli na ľavej strane obrazovky. Máte tu tri karty.

Karta „Nastavenia“ umožňuje zmeniť rozloženie kontextového okna, zmeniť názov modelu a ukážku. Na karte „Štýl“ môžete upraviť vzhľad - meniť farby, písma, obrázky a orámovanie. Karta „Rozšírené“ obsahuje aj množstvo ďalších posúvačov; napríklad zabraňujú zatvoreniu kontextového okna klávesom ESC.

kontextové nastavenie

Ako vidíte - nič neočakávané, ak ste predtým používali Elementor, s týmto doplnkom sa nestretnete so žiadnymi problémami. Tu je podrobné video, ktoré vysvetľuje, ako vytvoriť kontextové okno pomocou nástroja na tvorbu kontextových okien:

JetPopup

Tento doplnok tiež pridá na vašu hlavnú dosku novú kartu WordPress tému a s jeho pomocou sa vyskakovacie okná vytvárajú aj oddelene od stránok. Prednastavené kontextové okná sú tiež uložené na karte s názvom „Knižnica kontextových okien“. Ak chcete vytvoriť nové kontextové okno, môžete buď stlačiť tlačidlo „Pridať“ na preddefinovanej šablóne, alebo prejsť na položku JetPopup > Pridať nové kontextové okno, pomenovať šablónu a stlačiť „Upraviť pomocou Elementor“.

pridať nové kontextové okno

Pole práce sa mierne líši od normy, pretože teraz vytvárate menšie okno. V ľavom menu môžete do vyskakovacieho okna pridať akýkoľvek typ položky.

vyskakovacie prvky

Doplnok JetPopup pridáva do ponuky widgetov jednu položku - tlačidlo kontextovej akcie. Takto môžete definovať typ akcie, ktorá sa stane, keď používateľ stlačí tlačidlo.

tlačidlo vyskakovacej akcie

tlačidlo úpravy kontextovej akcie

Otvorenie nastavení z vyskakovacieho okna nie je skutočne zrejmé. Musíte kliknúť na tlačidlo údržby v dolnej časti ponuky. Ponuka nastavení je dosť podobná tej v aplikácii Popup Builder, existujú však iba dve karty prispôsobenia. „Všeobecné nastavenia“ vám umožňujú definovať efekt animácie, premenovať model alebo definovať podmienky. Na karte „Štýl“ môžete meniť rozloženie, farby, obrázky, písma a okraje.

vyskakovacie všeobecné nastavenia

JetPopup má trochu menej zrejmú funkčnosť, ale kompenzuje podrobnými a užitočnými videonávodmi.

spúšťače

Aby boli okná užitočné a neznepokojovali návštevníkov, musia sa objaviť v pravý čas. Podmienky, za ktorých sa kontextové okno zobrazuje, sa nazývajú „spúšťače“. Čím podrobnejšie sú dostupné podmienky, tým flexibilnejší je vyskakovací doplnok. Presnosť je veľmi dôležitá, ak nechcete, aby používateľ opustil stránku po zobrazení vyskakovacieho okna formulára na odber.

Tvorca kontextových okien

editácia vyskakovacích okien

zverejniť kontextové okno

Tento doplnok vám pomôže definovať potrebné podmienky hneď po prispôsobení vyskakovacieho okna. Po stlačení tlačidla „Zverejniť“ uvidíte okno, v ktorom môžete definovať podmienky (na ktorých stránkach sa toto kontextové okno zobrazí), spúšťače (keď sa zobrazí kontextové okno) a rozšírené pravidlá.

Aplikácia Popup Builder má šesť spúšťačov, napríklad zobrazenie na jednom rolovaní a kliknutí a sedem pokročilých pravidiel, ako je zobrazenie po nastavenom počte relácií alebo zobrazenie na určitých zariadeniach. Spúšťače a pokročilé pravidlá majú jednoduché posuvné prepínače a nastavenie všetkých požadovaných parametrov bude veľmi rýchle.

JetPopup

kontextové nastavenie

predná strana kontextového okna

Všetky spúšťače, podmienky a otváracie udalosti sú zoskupené v parametroch. Po kliknutí na tlačidlo údržby otvoríte karty nastavení a môžete okamžite nastaviť spúšťače. Môžete nastaviť percento stránky po rolovaní, kontextové menu, ktoré sa má zobraziť, alebo počet sekúnd, po ktorých sa používateľovi zobrazí správa.

Okno sa môže zobraziť iba raz alebo vždy, keď používateľ vykoná určité akcie (veľmi to neodporúčam - používateľov to neurobí šťastnými). Môžete tiež veľmi presne zvoliť, ktoré príspevky alebo stránky sa budú zobrazovať v tomto konkrétnom kontextovom okne. Všeobecne je tento doplnok pomerne flexibilný a umožňuje vám zobrazovať kontextové okná s vysokou presnosťou.

polohovacie

Používatelia sa určite nebudú môcť vyhnúť oknám, ktoré vyskakujú priamo zo stredu obrazovky, ale odvádzajú pozornosť od návštevníkov webových stránok a môžu byť skutočne nepríjemné. Nie všetky vyskakovacie okná by mali byť umiestnené v strede, úzka stuha v hornej časti bude menej nápadná, ale môže byť oveľa efektívnejšia. To znamená, že musíte ovládať polohu okna a vedieť sa pohybovať po obrazovke.

polohovacie

Tvorca kontextových okien et JetPopup rozdeľte obrazovku na deväť sektorov a do každého z nich môžete umiestniť svoje vyskakovacie okno. Umiestnenie je definované pozdĺž mierky zľava-doprava a hore-dole. Nie je to veľmi flexibilné, ale na vyskakovacie okno to stačí.

Efekty animácie

Spôsob, akým sa okno posúva (alebo roľuje alebo skáče) na stránke, je veľmi dôležitý. Ak sa okno pohybuje príliš rýchlo alebo príliš pomaly, nebude to efektívne. S vysokou presnosťou by sa mali používať aj odrazy, šteklenie a chvenie. Efekty animácie robia stránku dynamickejšou, ale môžu tiež pokaziť celý dojem.

Animačné efekty

Tvorca kontextových okien má 36 typov vstupnej animácie vrátane rôznych typov posúvania, rozkladania, zväčšovania, odrážania a otáčania v rôznych smeroch. To všetko spolu s trvaním animácie nájdete v sekcii „Rozloženie“ na karte Nastavenia.

nastavenia vyskakovacieho okna

V pluginu je 13 typov animácií JetPopup, vrátane stmievania, vertikálneho preklápania, rôznych snímok, poskakovania a priblíženia. Nájdete ich v sekcii „Nastavenia“ na karte Nastavenia.

modely

V niektorých prípadoch chcete vytvoriť kontextové okno so špecifickou štruktúrou a presne vedieť, ako by malo vyzerať. Ale toto je dosť zriedkavá príležitosť; oveľa častejšie nemáte potuchy, aké prvky by vaše vyskakovacie okno malo obsahovať. Tu prichádzajú vhod šablóny. Aj keď nepoužívate žiadnu z predkonfigurovaných vzoriek, ich spracovanie vám môže poskytnúť dobrý prehľad. A, samozrejme, prispôsobenie rozbaleného predmetu je oveľa rýchlejšie a jednoduchšie ako jeho zostavenie od začiatku.

Knižnica modelov prvkov

Tvorca kontextových okien pridal kategóriu do knižnice šablón Elementor. Ako som vám už povedal, môžete to vidieť hneď na začiatku nového procesu vytvárania kontextového okna. Sortiment vyskakovacích šablón je dostatočne veľký; existuje viac ako 100 položiek. V ľavom hornom rohu vám umožňuje urýchliť vyhľadávanie nástroj na triedenie podľa rozbaľovacej kategórie. Kategórie sú pochopiteľné a nájdenie vyskakovacieho okna, ktoré potrebujete, nebude trvať dlho.

Knižnica predvolieb pre automaticky otvárané okná

JetPopup má tiež obrovskú knižnicu šablón. Všetky z nich sú uložené na karte Kontextová knižnica a majú užitočné funkcie, ako napríklad tlačidlo ukážky a počítadlo použitia. Existuje viac možností triedenia, zoznam je možné nakonfigurovať tak, aby zobrazoval konkrétny typ modelov, a potom ho umiestniť v ľubovoľnom poradí; napríklad v závislosti od dátumu vytvorenia. Presný počet dostupných modelov vám nemôžem povedať, ale určite ich je viac ako 100.

Porovnávacia tabuľka

Elementor Popup Builder JetPopup
prix 45 $ 15 $
modely 100 + 100 +
spúšťače Spúšťače 6, rozšírené pravidlá 7 Otvorené udalosti 5 s ďalšími parametrami
Animatio 36 druhy 13 druhy
návody dokumentácie dokumentácia, videopríručky 9

JetPopup vs Tvorca kontextových okien

záver

Nemôžem povedať, ktorý z týchto dvoch doplnkov je lepší; je príliš komplikované ich súdiť. Každý prípad a každá osoba má svoje vlastné požiadavky na výber doplnkov. Myslím, že by ste si to mali definovať sami - ktorý z týchto dvoch bude pre vás najlepší? Prajem vám veľa šťastia pri pridávaní skvelého vyskakovacieho okna na vaše webové stránky!