První vyskakovací okna byla vytvořena ze scénáře, který si představil Ethan Zukermanubytování jeho webové stránky na Tripodu na začátku 90. let. Jeho uživatelé si stěžovali na množství reklam, které umístil na web, a tak se rozhodl umístit bannery na samostatnou stránku, která se otevřela, když uživatel na stránku vstoupil.

Tento malý kousek kódu stále nebyl skutečným vyskakovacím oknem, jaké právě teď vidíte na každém webu, ale tam to všechno začalo. Na moderních webových stránkách se vyskakovací okna používají k různým účelům, nejen k reklamám. Kontaktní formuláře, upozornění na zásady ochrany osobních údajů a návrhy předplatného se také často zobrazují jako vyskakovací okna.

Pokud jde o vyskakovací okna, obtěžují uživatele dvě věci: když na vás skočí, když je nechcete; a když se jeho vzhled zcela liší od stylu webových stránek. Tyto dva problémy se objeví, když používáte doplňky, které se nezdají být nejvyšší kvality.

Největší problém většiny pluginů, pro které začínající vývojáři používají vytváření vyskakovacích oken je nedostatečná kontrola nad výslednou zprávou. Všem těmto problémům se však můžete vyhnout, pokud k tomu použijete Elementor vytvořit web.

Dva úžasné pluginy, vytvořené speciálně pro Elementor Page Builder, vám pomohou vytvořit vyskakovací okna jakéhokoli typu, tvaru a stylu, které potřebujete – Elementor Popup Builder et JetPopup. Jelikož jsou oba vyrobeny ze stejného masa jako Elementor, jedinou otázkou, kterou je třeba si položit, je, který z těchto pluginů si vybrat. Abych vám pomohl učinit toto rozhodnutí, provedu důkladnou kontrolu obou a můžete porovnat jejich klady a zápory. Tak pojďme !

Stažení a instalace

Toto není nejdůležitější kritérium při výběru pluginu, který chcete použít, ale abyste jej mohli vyzkoušet, musíte si jej nejprve stáhnout. Proto začnu od samého začátku a načrtnu postup, jak to získat - cenu, vynaložené úsilí a jednoduchost procesu nastavení.

Tvůrce vyskakovacích oken

Elementor

Tento plugin vytvořil tým Elementor. Mohli bychom ho tedy nazvat jeho skutečným „dítětem“. Toto je poslední aktualizace pro Elementor, vydaná v lednu 2019, aby vyhovovala potřebám zákazníků. Není však k dispozici pro uživatele bezplatné verze Elementoru.

Program Popup Builder je součástí plánu profesionálního předplatného. Abyste tedy mohli vytvářet vyskakovací okna, musíte mít nejprve Elementor Pro. Nejjednodušší cenový plán, který vám umožní využívat všechny funkce Elementoru pro jeden web, stojí 49 $ ročně. Takže od prvních kroků (nákup Elementor Pro) je zde algoritmus k získání Popup Builderu:

  • Koupit Pro Elementor Page Builder.
  • Přejděte na svůj osobní účet a stáhněte si plugin.
  • Přejděte na hlavní panel svého webu, Pluginy> Přidat nový, klikněte na tlačítko „Nahrát plugin“ a vyberte příslušný soubor .zip.
  • Po dokončení instalace aktivujte plugin pomocí svého licenčního klíče.
  • Tady je Tvůrce vyskakovacích oken na kartě Šablony> Vyskakovací okna.

Je to trochu dlouhá cesta, ale s Popup Builderem získáte od Elementoru také obrovskou sbírku různých prvků, jako jsou widgety, šablony a další doplňkové nástroje.

Tvůrce vyskakovacích oken

JetPopup

„Rodina“ pluginů Jet již obsahuje více než 10 článků a JetPopup je jedním z nich. Byl pečlivě vytvořen speciálně pro Elementor a zvyšuje počet dostupných nástrojů. Tento plugin je tJetPopupsPlně kompatibilní s bezplatnou a placenou verzí. Takže nemusíte provádět žádné další nákupy. JetPopup stojí 15 $ a jakmile jej získáte, můžete jej použít pouze pro jeden web. Pokud ho potřebujete pro více než jeden projekt, můžete si zakoupit plugin na základě licence pro vývojáře (bude vás stát 45 $) a použít jej pro pět webových stránek. Algoritmus pro získání pluginu je o něco jednodušší:

  • Kupte si plugin na TemplateMonster Marketplace. Bude stažena do vašeho počítače.
  • Přejděte na hlavní panel svého webu, Pluginy> Přidat nový, klikněte na tlačítko „Nahrát plugin“ a vyberte příslušný soubor .zip.
  • Po dokončení instalace aktivujte plugin.
  • Voila! Když otevřete nabídku přizpůsobení prvku Elementor (kliknutím na tlačítko „Upravit pomocí prvku Elementor“), najdete sekci JetPopup v levé nabídce widgetu.

JetPopup

Tvorba vyskakovacích oken

Když jsou nástroje k dispozici a jsou připraveny, mohu se pokusit vytvořit vyskakovací okno s oběma pluginy a zjistit, jak jednoduchá a srozumitelná je tato funkce. Dále vytvořím základní vyskakovací okno a podívám se na možnosti přizpůsobení pro vyskakovací okna a JetPopup.

Tvůrce vyskakovacích oken

V Pro Elementoru se vyskakovací okna dělají odděleně od stránek webu. Chcete-li změnit vzhled webu, otevřete stránku, kterou chcete upravit, klikněte na tlačítko „Upravit pomocí Elementoru“ a proveďte změny. Chcete-li však vytvořit (a poté upravit) vyskakovací okna, musíte přejít do části Šablony> Vyskakovací okna a stisknout tlačítko „Přidat nové vyskakovací okno“.

Tvůrce vyskakovacích oken
Vyzkoušejte vyskakovací okno

V otevřeném okně musíte vybrat šablonu, kterou vytvoříte (ano, můžete vytvářet šablony nejen pro vyskakovací okna, ale také pro stránky a další položky) a pojmenovat ji.

vyskakovací okno

Po stisknutí tlačítka „Vytvořit šablonu“ budete přesměrováni do nabídky personalizace Elementoru. Je snazší přizpůsobit existující položku vytvořením od nuly. Nejprve proto budete vyzváni k výběru vhodného modelu.

vyskakovací knihovna

Vybral jsem jeden z modelů zobrazených v horní části seznamu knihoven. Hned po výběru přistanete na pracovním prostoru Elementor, na který jste pravděpodobně zvyklí. Možnosti přizpůsobení jsou umístěny v postranním panelu na levé straně obrazovky. Máte zde tři karty.

Karta „Nastavení“ umožňuje změnit rozložení vyskakovacího okna, změnit název modelu a náhled. Na kartě „Styl“ můžete přizpůsobit design - měnit barvy, písma, obrázky a ohraničení. Karta „Upřesnit“ obsahuje také řadu dalších posuvníků; například brání zavření vyskakovacího okna klávesou ESC.

vyskakovací nastavení

Jak vidíte - nic neočekávaného, ​​pokud jste dříve používali Elementor, nebudete s tímto pluginem čelit žádným problémům. Zde je podrobné video, které vysvětluje, jak vytvořit vyskakovací okno pomocí nástroje Popup Builder:

JetPopup

Tento plugin také přidá novou kartu na váš dashboard WordPress téma a s jeho pomocí se také vyskakovací okna vytvářejí odděleně od stránek. Vyskakovací okna jsou také uložena na kartě s názvem „Knihovna vyskakovacích oken“. Chcete-li vytvořit nové vyskakovací okno, můžete buď stisknout tlačítko „Přidat“ na předdefinované šabloně, nebo přejít na JetPopup > Přidat nové vyskakovací okno, pojmenovat šablonu a stisknout „Upravit pomocí Elementor“.

přidat nové vyskakovací okno

Pole práce se mírně liší od normy, protože nyní vytváříte menší okno. V levé nabídce můžete do vyskakovacího okna přidat libovolný typ položky.

vyskakovací prvky

Plugin JetPopup přidává do nabídky widgetů jednu položku - tlačítko kontextové akce. To vám umožní definovat typ akce, ke které dojde, když uživatel stiskne tlačítko.

tlačítko vyskakovací akce

tlačítko Upravit vyskakovací akci

Není opravdu zřejmé otevřít nastavení z vyskakovacího okna. Musíte kliknout na tlačítko údržby ve spodní části nabídky. Nabídka nastavení je docela podobná nabídce v Popup Builderu, ale existují pouze dvě karty přizpůsobení. „Obecná nastavení“ umožňuje definovat efekt animace, přejmenovat model nebo definovat podmínky. Na kartě „Styl“ můžete změnit rozložení, barvy, obrázky, písma a ohraničení.

vyskakovací obecné nastavení

JetPopup má trochu méně zřejmou funkčnost, ale kompenzuje podrobnými a užitečnými videonávody.

spouštěče

Aby byla užitečná a neotravovala návštěvníky, musí se automaticky otevírat vyskakovací okna. Podmínky, za kterých se zobrazí vyskakovací okno, se nazývají „triggery“. Čím podrobnější jsou dostupné podmínky, tím flexibilnější je vyskakovací plugin. Přesnost je velmi důležitá, pokud nechcete, aby váš uživatel opustil web poté, co se objeví vyskakovací okno formuláře předplatného.

Tvůrce vyskakovacích oken

editace vyskakovacích oken

publikovat vyskakovací okno

Tento plugin vám pomůže definovat potřebné podmínky hned po přizpůsobení vyskakovacího okna. Po stisknutí tlačítka „Publikovat“ uvidíte okno, ve kterém můžete definovat podmínky (na kterých stránkách se toto vyskakovací okno zobrazí), spouští (když se zobrazí vyskakovací okno) a pokročilá pravidla.

Tvůrce vyskakovacích oken má šest spouštěčů, jako je zobrazení na jednom posouvání a kliknutí a sedm pokročilých pravidel, jako je zobrazení po nastaveném počtu relací nebo zobrazení na určitých zařízeních. Spouštěče a pokročilá pravidla mají jednoduché posuvné přepínače a bude velmi rychlé nastavit všechny požadované parametry.

JetPopup

vyskakovací nastavení

přední strana vyskakovacího okna

Všechny spouštěče, podmínky a otevírací události jsou seskupeny dohromady v parametrech. Po kliknutí na tlačítko údržby otevřete karty nastavení a můžete okamžitě nastavit spouštěče. Můžete nastavit procento stránky po rolování, kontextové menu, které se má zobrazit, nebo počet sekund, po které se uživateli zobrazí zpráva.

Okno lze zobrazit pouze jednou nebo pokaždé, když uživatel provede určité akce (moc ho nedoporučuji - uživatelům to nebude dělat radost). Můžete také velmi přesně zvolit, které příspěvky nebo stránky se budou zobrazovat v tomto konkrétním vyskakovacím okně. Obecně je tento plugin poměrně flexibilní a umožňuje vám zobrazovat vyskakovací okna s velkou přesností.

polohovací

Uživatelé se určitě nebudou moci vyhnout oknům, která vyskočí přímo ze středu obrazovky, ale odvádějí pozornost od návštěvníků webových stránek a mohou být opravdu otravní. Ne všechna vyskakovací okna by měla být umístěna uprostřed, úzká páska nahoře bude méně nápadná, ale může být mnohem efektivnější. To znamená, že musíte ovládat polohu okna a pohybovat se po obrazovce.

polohovací

Tvůrce vyskakovacích oken et JetPopup rozdělit obrazovku na devět sektorů a umožnit vám umístit vyskakovací okno do kteréhokoli z nich. Pozice je definována podél měřítka zleva doprava a nahoru dolů. Není to příliš flexibilní, ale pro vyskakovací okno to stačí.

Efekty animace

Způsob, jakým se okno posouvá (nebo posouvá nebo skáče) na stránce, je velmi důležitý. Pokud se okno pohybuje příliš rychle nebo příliš pomalu, nebude to účinné. Odraz, lechtání a třes by se měly používat také s velkou přesností. Efekty animace dělají web dynamičtějším, ale mohou také zkazit celý dojem.

Animační efekty

Tvůrce vyskakovacích oken má 36 typů vstupní animace, včetně různých typů posouvání, rozkládání, zvětšování, odskakování a otáčení v různých směrech. To vše, spolu s délkou animace, najdete v části „Rozvržení“ na kartě Nastavení.

nastavení vyskakovacího okna

V pluginu je 13 typů animací JetPopup, včetně blednutí, svislého převrácení, různých snímků, skákání a přibližování. Najdete je v sekci „Nastavení“ na kartě Nastavení.

modely

V některých případech chcete vytvořit vyskakovací okno se specifickou strukturou a přesně vědět, jak by mělo vypadat. Ale to je spíše vzácná příležitost; mnohem častěji nemáte ponětí, jaké prvky by vaše vyskakovací okno mělo obsahovat. Zde se šablony hodí. I když nepoužíváte žádný z předkonfigurovaných vzorků, jejich zpracování vám může poskytnout dobrý přehled. A samozřejmě přizpůsobení položky z krabice je mnohem rychlejší a snazší než její sestavení od začátku.

Knihovna modelů elementů

Tvůrce vyskakovacích oken přidal kategorii do knihovny modelů Elementor. Jak jsem vám řekl dříve, můžete to vidět hned na začátku nového procesu vytváření vyskakovacího okna. Sortiment vyskakovacích šablon je dostatečně velký; existuje více než 100 položek. V levém horním rohu umožňuje vyhledávací nástroj podle rozevírací kategorie zrychlit vyhledávání. Kategorie jsou srozumitelné a nalezení vyskakovacího okna, které potřebujete, nebude trvat dlouho.

knihovna vyskakovacích předvoleb

JetPopup má také obrovskou knihovnu šablon. Všechny z nich jsou uloženy na kartě Kontextová knihovna a mají užitečné funkce, jako je tlačítko náhledu a počítadlo využití. Existuje více možností řazení, seznam lze nakonfigurovat tak, aby zobrazoval konkrétní typ modelů, a poté jej umístit v libovolném pořadí; například v závislosti na datu vytvoření. Nemohu vám říct přesný počet dostupných modelů, ale určitě jich je přes 100.

Srovnávací tabulka

Elementor Popup Builder JetPopup
prix $ 45 $ 15
modely 100+ 100+
spouštěče Spouští 6, pokročilá pravidla 7 Otevřené události 5 s dalšími parametry
Animatio Typy 36 Typy 13
Návody dokumentace dokumentace, video návody 9

JetPopup vs Tvůrce vyskakovacích oken

Proč investovat do čističky vzduchu?

Nemohu říci, který z těchto dvou pluginů je lepší; je příliš komplikované soudit je. Každý případ a každá osoba má své vlastní požadavky na výběr pluginů. Myslím, že byste si to měli sami definovat - který z těchto dvou bude pro vás nejlepší? Přeji vám hodně štěstí při přidávání skvělého vyskakovacího okna na váš web!