Modální okenní pluginy pro WordPress. Vyskakovací okna na WordPress

V první verzi tohoto článku jsme nabízeli několik bezplatných pluginů, ale na základě zpětné vazby, kterou jsme obdrželi od našich uživatelů, kteří si stěžovali na mnoho chyb a někdy zákaznickou podporu, kterou někteří vydavatelé těchto pluginů neměli, jsme se rozhodli nabídnout vám vyskakovací nabídka se seznamem, která vám ušetří hodiny hledání.

Vyskakovací okna jsou velmi výkonné nástroje, které mnoho bloggerů používá k zobrazování reklam, získávání e-mailových adres nebo prohlížení jiných typů informací. Mohou také zobrazovat reklamy atraktivním způsobem a vyhýbat se obtěžujícím čtenářům, když cílí na konkrétní obsah.

Dnes vám tedy představíme seznam bezplatných pluginů WordPress, které vám umožní zobrazovat vyskakovací okna na vašem webu.

1. OptinMonster

2. Modální vyskakovací okna

Rozšíření WordPress Modal Popup Box lze zakoupit samostatně nebo v balíčku s Ultimate Addons od Visual Composer. Tento plugin WordPress vám umožňuje přidávat vyskakovací okna pro různé účely:


přihlášení k odběru e-mailů, krátkých kódů, obrázků, videí, kontaktních formulářů nebo widgetů sociálních médií.

Toto je nejjednodušší řešení z tohoto seznamu a osloví uživatele Ultimate Addons Visual Composer nebo uživatele, kteří hledají jednoduché vyskakovací okno.

Mezi jeho funkce patří: podpora pluginů, podpora krátkých kódů, možnost přidávat obrázky nebo videa a další

3. vyskakovací okna

Co Popups postrádá v kreativitě nominálních hodnot, to vynahrazuje snadnost použití a metody cílení specifické pro WordPress. Přestože nenabízí tolik funkcí jako OptinMonster, je ideální pro základní typy vyskakovacích oken.

Má některé metody cílení specifické pro WordPress a má také výhodu, že je zdarma. S ním můžete vytvářet vyskakovací okna, která se objeví na pěti různých místech vašeho webu.

Tvůrce vyskakovacích oken nemá funkci drag-and-drop, ale je stále poměrně jednoduchý a snadno se používá. Jakmile zvolíte vzhled a chování vyskakovacího okna, můžete použít cílení pomocí pravidel ET/OR a mnoha dalších kritérií. Některé spouštěče nabízí nativně, ale prémiová verze přidává další spouštěče.

4. Superformy - vyskakovací okna

Toto rozšíření pluginu WordPress Super Forms nemá stejnou záři jako ostatní vyskakovací pluginy v tomto seznamu, ale stále je to dobrá volba pro uživatele, kteří chtějí rychle přeměnit návštěvníky na předplatitele.


Super Forms – Popups jsou skvělou volbou, pokud hledáte jednoduché řešení pro vytvoření seznamu e-mailů.

Jeho hlavní funkce jsou: 7 šablon vyskakovacích oken, které vám mohou pomoci rychle začít, 12 různých spouštěčů a filtrů založených na chování návštěvníků, vyskakovací okna, která mohou být lepkavá a mnoho dalšího

5. Ninja vyskakovací okna

S více než 30 000 prodeji a hodnocením 4,4 hvězdičky je Ninja Popups jedním z nejoblíbenějších pluginů WordPress dostupných od Canyon Code.

Kromě široké škály modelů pro různé aplikace má také několik funkcí, jako jsou: vizuální vyskakovací blok, 10 různých pozic zobrazení vyskakovacích oken, 74 různých animačních efektů, podpora antiblokovací technologie pro práci s reklamou blokátory, různé možnosti cílení, statistiky na ovládacích panelech, blokování obsahu pro odhlášení nebo sdílení e-mailů, spousta integrací e-mailových služeb a další.

6. ChimpMate Pro

ChimpMate Pro je plugin WordPress vytvořený speciálně pro uživatele MailChimp a pro přeměnu čtenářů na předplatitele. Stejně jako jeho plugin OptinPoint, na který se podíváme později, je tento plugin vysoce přizpůsobitelný a poskytuje vám úplnou kontrolu nad tím, kdy a kde se objeví vyskakovací okna.


ChimpMate Pro bude plugin pro uživatele MailChimp, ale pokud nepoužíváte MailChimp, nebojte se: plugin OptinPoint z našeho seznamu vás může oslovit.

Mezi jeho funkce patří: integrace s , vizuální vyskakovací editor s náhledem v reálném čase, plně přizpůsobitelný vzhled, 9 možností chování a spouštění a mnoho dalšího

7. Pop-up zařízení

Popup Maker je nejoblíbenější plugin pro vyskakovací okna WordPress uvedený na WordPress.org s více než 200 000 aktivními instalacemi. Pomůže vám vytvořit mnoho vyskakovacích oken. Jeho vyskakovací editor vám je pomůže vytvořit pomocí známého rozhraní WordPress, i když to není dokonalý nástroj, jako jsou ty, které najdete na vyskakovacích oknech OptinMonster nebo Ninja.

Pokud jde o cílení a spouštěče, Popup Maker je nakonfigurován se sadou možností pro cílení obsahu na vašem webu, ačkoli většina jeho pokročilých možností je uzamčena za doplněk, který je prémiový.

8. Vrstvená vyskakovací okna

Specialitou Layered Popups je možnost vytvářet si vlastní animovaná a vrstvená vyskakovací okna. Pokud vás chytne meandrování tohoto designu, není to váš styl, můžete si užít více než 150 modelů hotových a krásně navržených pop-upů.


Vrstvená vyskakovací okna se širokou škálou funkcí trochu okoření vaše možnosti a vyskakovací okna.

Mezi funkce patří: kompatibilita s 65 poskytovateli e-mailových služeb, tvůrce vizuálních vyskakovacích oken, podpora kampaní a statistiky A/B atd.

9. Popup Dominance

Popup Domination je jedním z nejstarších nástrojů pro vytváření vyskakovacích oken, což do značné míry vysvětluje jeho slogan. A i když je tu už nějakou dobu, Popup Domination obdrželo spoustu aktualizací, aby zůstalo konkurenceschopné.

Nejen, že přichází se spoustou šablon vyskakovacích oken, které vám umožní rychle začít, má také: analytický systém, abyste viděli, jak si vaše vyskakovací okna vedou, podporuje A/B testování pro optimalizaci vašich vyskakovacích oken na základě shromážděných dat. možností cílení, jako je cíl ukončení, kliknutí, úroveň stránky, referrer, zařízení atd..., podpora všech oblíbených spouštěčů, jako je čas, hloubka posouvání, zobrazení stránek atd., integrace sledování událostí z Google Analytics atd.

Kromě těchto funkcí má Popup Domination ve srovnání s OptinMonster také jedinečný cenový model. Místo placení více za další funkce vám Popup Domination poskytuje všechny funkce každého plánu a platí vám pouze za počet zobrazení vyskakovacích oken za měsíc.

V závislosti na vašich potřebách může být levnější než OptinMonster.

10.ConvertPlug

ConvertPlug je plugin WordPress, který obsahuje obrovskou knihovnu více než 100 hotových šablon a je speciálně navržen tak, aby převedl návštěvníky vašeho webu na předplatitele a zákazníky pomocí široké škály přizpůsobitelných vyskakovacích oken spouštěných různými akcemi uživatele.


Pokud tedy chcete zvýšit svůj konverzní poměr, ConvertPlug by měl být jedním z vašich pluginů, které byste měli vyzkoušet.

Mezi jeho hlavní vlastnosti patří: více než 10 vyskakovacích pozic zobrazení, 12 různých spouštěčů a filtrů pro chování návštěvníků, schopnost znovu zaujmout neaktivní návštěvníky pomocí interaktivních oken, možnost přizpůsobit své nabídky novým, starým a souvisejícím návštěvníkům a mnoho dalšího. více

11. sumo

Plugin Sumo WordPress není omezen na vyskakovací okna: je to kompletní sada nástrojů pro váš web. Ale jedním z nejoblíbenějších nástrojů v tomto balíčku je List Builder, který, jak správně uhodli, vám pomůže zobrazovat vyskakovací okna na vašem webu.

Pomocí přetažení můžete vytvářet vyskakovací okna pomocí vlastních obrázků, tlačítek a textu. Poté můžete vyvolat vyskakovací okno s podmínkami, jako jsou: pozastavení ukončení, zpoždění, hloubka posouvání atd.

Sumo List Builder má také A/B testování a analýzu, takže můžete optimalizovat vyskakovací okna, která používáte na svém webu. Tento plugin není tak flexibilní, pokud jde o typy vyskakovacích oken, které můžete vytvořit, ale pokud chcete konkrétně vytvořit seznam e-mailů pomocí vyskakovacích oken, je to stále skvělá volba.

Jedinou nevýhodou je, že budete muset zaplatit za Sumo Pro, pokud chcete odstranit značku Sumo nebo získat přístup k integraci jedním kliknutím s většinou e-mailových marketingových služeb.

Závěr

V tomto článku jsme zkontrolovali nejoblíbenější pluginy WordPress navržené pro snadné vytváření vyskakovacích oken.

Budete-li však potřebovat více prvků k dokončení svých projektů tvorby internetových stránek, budete se moci také podívat na náš průvodce vytvářením nebo Diva: Nejlepší téma WordPress všech dob.

Pokud však víte o dalších prémiových pluginech WordPress, které umí lépe než tyto, neváhejte je s námi sdílet.

Pop-up neboli modální okno je nejziskovější typ reklamy. Vyhledávače to nemají rádi, zvláště pokud je na webu WordPress příliš mnoho vyskakovacích oken, je to však jednoduchý a efektivní způsob, jak získat další příjem z provozu zdrojů.

Vytvořit si sami tvar okna a napsat scénář jeho vzhledu během sezení na webu je pro netrénovaného člověka velmi náročná práce. Než přijdete na to, jak vytvořit modální okno, budete se muset prohrabat spoustou programovacích a CSS tutoriálů. Abyste nemuseli projít tak obtížnou křivkou učení, tento článek pojednává o 6 nejpohodlnějších a nejoblíbenějších modulech pro generování vyskakovacích reklam.

Unlimited Pop-Ups – víceúčelový plugin pro vytváření vyskakovacích oken a další

Vyplatí se provést rezervaci ihned - Neomezená vyskakovací okna nejsou distribuována zdarma - je to placený plugin. Měli byste jej kupovat pouze v případě, že máte na svém webu alespoň nějakou organickou návštěvnost. Pak se vám nákup určitě vrátí.

Pomocí neomezených vyskakovacích oken můžete vytvořit nejen modální okno, ale také pohyblivé widgety na stránce, pruhy a sloupce. Svůj web na WordPressu můžete naplnit reklamami, ale všude musíte používat moderování. Obvykle stačí jedna vyskakovací reklama – další bude příliš. Kromě toho vám Neomezená vyskakovací okna umožňují přilákat návštěvníky ne množstvím reklamy, ale její kvalitou. Můžete vytvořit modální víceúrovňové okno, kterým můžete procházet.

Kontaktní formulář Pop-up – nevtíravá vyskakovací reklama na webu během pár minut

Vývojáři kontaktního formuláře Pop-up pečlivě vyslechli všechny stížnosti vyhledávačů na vyskakovací okna a vytvořili nástroj, pomocí kterého můžete vytvořit modální okno, které nebude rušit návštěvníky. Jde o to, že reklamní formulář nevyskočí celý najednou. Na obrazovce se objeví pouze část okna. Plně se otevře, pouze pokud si to uživatel přeje - klikne na zástupce, který se objeví. Poté se modální okno otevře v celé své kráse.

Existuje mnoho možností a je pro vás lepší se okamžitě rozhodnout, jak používat vyskakovací okno kontaktního formuláře, protože plugin je placený.

Jedinou nevýhodou Pop-up kontaktního formuláře je, že vyskakovací formulář lze umístit pouze do pravého dolního rohu webu WordPress.

Advert Flap Pro – plugin pro vytváření efektních vyskakovacích oken

Tento nástroj je určen především pro reklamní použití. Umožňuje vytvářet neobvyklá miniaturní okna. Pomocí něj můžete vytvořit modální reklamu, která nejen nebude rušit uživatele, ale také ozdobí design webu. Barva pozadí a text jsou snadno přizpůsobitelné. Kromě toho můžete nakonfigurovat dobu zobrazení vyskakovacího banneru. Formulář lze umístit pouze na pravou horní stranu webu WordPress. Nejde ale jen o rozmar vývojářů – právě zde reklama vykazuje nejlepší výkon. Na modální okno vyskakující někde níže už jsou totiž všichni tak zvyklí, že okno Advert Flap Pro rozhodně přitáhne tu správnou pozornost.

Promotions Plugin – originální plugin WordPress, který změní reklamu na webu

V mnoha ohledech je tento nástroj podobný předchozím. Modul lze stejným způsobem přizpůsobit změnou pozadí, obsahu a načasování zobrazení okna. Jeho zvláštností je však vyšší konverzní poměr, zejména pokud se používá pro předplatné a prodej. Umístíte tlačítko s výzvou k akci (například „Přihlásit se“, „Zaregistrovat se“, „Koupit“ atd.) a po kliknutí se v jiné části webu otevře modální okno. Tato forma vzhledu okna uživatele mírně „nadchne“ a přitáhne jeho pozornost k vaší nabídce.

Ninja Kick Sliding Panel – moderní plugin pro vytváření moderních vyskakovacích oken

Důvod, proč je vyskakovací formulář pro web WordPress nebezpečný, je ten, že lidé jsou z něj již unaveni. Je to jako televizní reklama – všichni vypadají rezignovaně, ale jsou strašně naštvaní. A s každým dalším webem s vyskakovacími bannery a reklamními videi se uživateli doslova vaří krev. V důsledku toho to nemusí vydržet a váš web zůstane „extrémní“ – návštěvník ho zařadí na černou listinu a už se nevrátí.

Ninja Kick Sliding Panel se dobrovolně přihlásil k nápravě situace. Tento WordPress plugin umí udělat formu tak, aby uživatelé neodpuzovali, ale naopak si ji oblíbili. Modul vytváří okna v moderním „plochém“ stylu, připomínajícím minimalismus v architektuře – minimální okázalost, maximální obsah. S ním můžete dělat úžasně efektivní reklamu nebo vytvořit fungující formulář předplatného. Jedná se o placený doplněk, ale v tomto případě je za co platit.

Ninja Popup je oblíbený mezi ostatními pluginy pro generování vyskakovacích oken

Ninja Popup dá šanci na jakýkoli jiný plugin. Má skoro všechno. Vyskakovací formulář vytvořený pomocí Ninja Popup vám určitě začne vydělávat peníze. Nástroj poskytuje hotovou databázi více než 40 stylů vyskakovacích oken. Můžete upravit kterýkoli ze stylů uvedených v katalogu. Kromě reklamních bannerů můžete pomocí Ninja Popup přidat formulář pro ověření věku, předplatné, sociální průzkum, registraci, výzvu k nákupu a mnoho dalšího. Za takové funkce si ale musíte zaplatit – tento nástroj je jedním z nejdražších mezi ostatními recenzovanými pluginy.

závěry

Vyskakovací formulář na webu WordPress pro vás bude velkým přínosem, pokud jej používáte správně. Zkuste vyskakovací okna pro reklamu třetích stran používat pouze jako poslední možnost, pokud neexistují jiné způsoby, jak vydělat peníze. To nejlepší, co vám vyskakovací formulář může poskytnout, jsou noví odběratelé a opakující se zákazníci. Je lepší vydělat 10 rublů na osobu každý měsíc kvůli jeho neustálým návštěvám, než vydělat 30 rublů jednou za klikání na rušivou reklamu!

(Poslední aktualizace: 16.05.2019)

Ahoj všichni! To jsem zase já, s užitečným příspěvkem - vyskakovací okno pro wordpress- pro začátečníky a nejen uživatele WordPressu. Jestli máte zájem Vyskakovací pluginy WordPress, také se mu říká modul modálního okna, pak jste vy, přátelé, přišli přesně na správné místo.

Vytvářejte modální okna a vkládejte jakýkoli druh obsahu

Pluginy, které uvedu níže, můžete použít pro: Kontaktní formulář 7 v modálním okně; jakýkoli kontaktní (zpětný) formulář v modálním (vyskakovacím) okně; video v modálním okně; obrázky ve vyskakovacím okně; zveřejňování užitečných informací s odkazy; formulář pro odběr pošty pro nové články v modálním okně a tak dále a tak dále, nemůžete to všechno vyjmenovat. Tyto pluginy jsou velmi jednoduché, bez složitého nastavování a nevytvářejí téměř žádné další zatížení webu. Tak čtěte – Jak udělat vyskakovací okno ve WordPressu?

Easy Modal Plugin - Popup/Modal Window pro WordPress

Modul pro modální okno pro WordPress - Easy Modal

Tento plugin nainstalujete standardním způsobem, přes admin panel - Plugins - Add new a do pole Search for plugins zadejte název Easy Modal a stiskněte Enter. Mělo by být první na seznamu. Nainstalujte a aktivujte jej jako obvykle. A pak můžete přejít k vytvoření nového modálního okna.

Chcete-li to provést, klikněte na novou sekci Easy Modal, která se objeví, a vyberte Modals:

Easy Modal - vytvoření nového modálního okna

Poté úplně nahoře na stránce klikněte na tlačítko Přidat nový:

Přidat nové okno

A zde je vše jednoduché:

Vytvoření vyskakovacího okna videa

V obecných nastaveních (záložka Obecné) zadejte název nového okna (nezobrazí se, to je pro vás, pokud např. vytvoříte více modálních oken); typ zatížení Load Sitewide (pro celý web); název okna a nakonec vložte požadovaný kód do editoru (režim Text). V mém příkladu jsem vložil kód videa z YouTube.

Nastavení modálního okna

V parametrech můžete vybrat velikost okna; zda použít pozadí nebo ne; typ animace pro modální/vyskakovací okno; umístění okna a také můžete okno opravit (zaškrtněte políčko a uveďte vzdálenost od horní části obrazovky).

Na kartě Příklady najdete příklady kódu pro zobrazení vyskakovacího okna ve WordPressu:

Kód pro zobrazení modálního okna ve WordPressu

Zde můžete vybrat jednoduchý textový odkaz, tlačítko nebo ikonu. Vezměte prosím na vědomí, že každému nově vytvořenému oknu je přiřazena třída eModal. První vytvořené okno bude mít třídu eModal - 1, druhé eModal - 2 a tak dále. Stačí pouze nahradit číslo za znakem - sami. Tento kód lze vložit do vašeho článku nebo kdekoli v něm. Do kódu samozřejmě můžete napsat libovolný text. Ano, málem bych zapomněl, že po vytvoření modálního okna na pravé straně stránky nezapomeňte kliknout na tlačítko Publikovat.

Vložil jsem kód pro modální okno s videem do postranního panelu jako tlačítko:

Tlačítko postranního panelu blogu

Návštěvník na něj klikne a otevře se okno s videem:

Modální okno s videem

Doufám, přátelé a soudruzi, obecný princip práce s pluginem Easy Modal je vám jasný. Jen doplním, že vzhled modálního okna můžete poté nebo okamžitě upravit kliknutím na položku Téma. Free verze pluginu má bohužel pouze jedno téma pro design, ale můžete si ho navrhnout dle libosti, nastavení je dost. Při přizpůsobení vzhledu modálního okna můžete okamžitě vidět náhled návrhu vpravo:

Úprava motivu – modální/vyskakovací design okna

Po všech nastaveních vzhledu okna klikněte vpravo na tlačítko Uložit. A nakonec, dámy a pánové, ukážu vám příklad zobrazení kontaktního formuláře Contact Form 7 v modálním okně.

Vytvořte nové modální okno, jak je uvedeno výše, a do textového editoru jednoduše vložte krátký kód Contact Form 7 (pokud máte nainstalovaný tento plugin, pokud ne):

Vytvořte kontaktní formulář 7 ve vyskakovacím okně

Pokud vás čtenář bude chtít kontaktovat, klikne na tlačítko a v modálním okně se otevře kontaktní formulář:

Něco takového. Na stránce se také zobrazí všechna vámi vytvořená vyskakovací okna (položka Modální), kde jsou mimochodem uvedeny třídy pro každé modální okno:

Vytvořená modální okna na WordPressu

Vzhledem k tomu, že tento plugin nebyl dlouhou dobu aktualizován, doporučuji vám věnovat pozornost následujícímu modulu.

Věděli jste, že Easy Modal má novou luxusní náhradu s názvem Popup Maker? Toto je nejoblíbenější vlastní vyskakovací a modální plugin pro WordPress.

  • Neomezená témata;
  • Přesné cílení, spouštěče a soubory cookie;
  • Nakonfigurujte vše;
  • Celá řada rozšíření;
  • Rozsáhlá dokumentace a API pro vývojáře.

Pokud již jste uživatelem Easy Modal, přechod z Easy Modal na Popup Maker je s vlastním importérem hračkou!

Popup Maker - plugin pro vyskakovací okna ve WordPressu

Modul Popup Maker pro WordPress

Nejlepší popup plugin, který WordPress nabízí. Možností je spousta. Hned řeknu, že Popup Maker podporuje ruský jazyk. S nastavením tedy nebudete mít žádné problémy. Přizpůsobte si jej, abyste vytvořili jakýkoli typ vyskakovacího, modálního nebo obsahového překrytí pro váš web WordPress.

A nyní možnosti pluginu. Má příliš mnoho funkcí, než abych je zde všechny vyjmenoval. Zde jsou ty nejdůležitější, které budete určitě potřebovat.

Snadno vytvářejte oznámení, vyskakovací okna (lightboxy) s videi, modální formuláře (Ninja Forms, Gravity Forms, Contact Form 7). A mnohem víc. K vytvoření libovolného obsahu můžete použít vyskakovací editor. Všechna vyskakovací okna/modální okna reagují. Ideální pro mobilní zařízení.

(funkce(w, d, n, s, t) ( w[n] = w[n] || ; w[n].push(function() ( Ya.Context.AdvManager.render(( blockId: "R-A -292864-4", renderTo: "yandex_rtb_R-A-292864-4", async: true )); )); t = d.getElementsByTagName("script"); s = d.createElement("script"); s .type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); ))(toto , this.document, "yandexContextAsyncCallbacks");

Dobrý den, přátelé! Navrhuji, abychom si o tom promluvili vytváření modálních oken ve WordPressu. Pop-up (modální) okna výrazně rozšiřují možnosti webu. Máte nějakou zprávu nebo reklamu, kterou by měl vidět každý návštěvník webu? Potřebujete zviditelnit svou kampaň? Chcete na svém webu vytvořit vyskakovací registrační formulář nebo formulář pro sdílení obsahu na sociálních sítích? Vytvořte modální okno!

Pop-up mody jsou navrženy tak, aby přitahovaly pozornost. Tím, že se objeví na stránce, blokují hlavní obsah a nutí uživatele, aby se seznámil s jejich obsahem (text, video, výzva k akci atd.).

Pozornost! Nenechte se zastrašit délkou této lekce - při vytváření modálních oken nejsou žádné potíže (přečtěte si a přesvědčte se sami), pouze podrobně popisuji každý krok.

Algoritmus pro vytváření modálních oken ve WordPressu

WordPress nemá vestavěné nástroje pro práci s vyskakovacími okny. Navrhneme a upravíme je pomocí pluginu Popup Maker. Vytvořme například modální okno s videem, vyskakovací okno při kliknutí na tlačítko(můžete jej nakonfigurovat později automatický vzhled).

  1. Nainstalujte Popup Maker plugin. aktivovat jeho. Dovolte mi připomenout: naučili jsme se, jak nainstalovat pluginy.
  2. Najděte sekci v postranní nabídce na levé straně panelu administrátora Popup Maker a přejděte do jeho podsekce Přidat vyskakovací okno.
  3. Otevře se editor modálního okna. Do pole v horní části stránky zadejte název okna (název se zobrazí pouze v admin panelu - uživatelé jej neuvidí).
  4. Přijít s název okna(bude viditelné pro uživatele) a zadejte jej do pole nad tlačítkem Přidat mediální soubor.
  5. V bloku Podmínky Vyberte z rozbalovací nabídky stránky (kategorie), na kterých se okno zobrazí. Pokud by měl plugin fungovat na všech stránkách webu, vyberte Formát: Vše.
  6. Přidejte do velkého pole pod panelem nástrojů text, obrázky, video nebo zvuk– veškerý obsah, který se zobrazí ve vyskakovacím okně. V uvažovaném příkladu jsem přidal kód pro video z YouTube (studovali jsme přidávání videí na web WordPress).
  7. V bloku Spouštěče K dispozici je nastavení pro ruční nebo automatické otevírání (samoaktivace) vyskakovacího okna. V našem příkladu jsem zvolil hodnotu Klikněte na Otevřít.
  8. Uveďte prosím níže velikost vyskakovacího okna(v pixelech nebo procentech). Při výběru možnosti Auto Plugin automaticky změní velikost modálního okna.
  9. Zaškrtněte políčko v řádku Zakázat pozadí aby byla stránka webu viditelná za vyskakovacím oknem (doporučuji).
  10. Založit typ a rychlost animace(není nutné: optimální hodnoty jsou již nastaveny ve výchozím nastavení).
  11. Upravte polohu okna na obrazovce. Zpočátku jej plugin umístí do středu nahoře.
  12. Hodnota majetku z-index, ve výchozím nastavení, obvykle není nutné měnit.
  13. Výběrem možností zavřete vyskakovací okno. Zaškrtněte políčka v řádcích s „ptáky“ Klikněte na Překrytí pro zavření(okno se zavře, když kliknete na pozadí kolem něj), Stisknutím klávesy F4 zavřete(okno se zavře klíčem F4), Stisknutím ESC zavřete(okno se zavře klíčem ESC). Abyste návštěvníky webu neobtěžovali hádankou se zavíráním modálního okna, doporučuji zaškrtnout všechna políčka.
  14. Klikněte Publikovat. Gratulujeme, vaše modální okno bylo vytvořeno!

O přizpůsobení designu vyskakovacího okna

Chcete-li změnit design vytvořeného modálního okna, přejděte do podsekce Téma sekce Popup Maker postranní nabídka panelu administrátora (vlevo).

V editoru, který se otevře, nakonfigurujte požadované pozadí okna, barva A velikosti písma, výplň, stíny, název tlačítka zavírání. Chuť a barva… víte, takže nebudu zabíhat do podrobností o přizpůsobení designu vyskakovacího okna. Pokud máte dotazy, zeptejte se jich v komentářích.

Jak nastavit vyskakovací okno

Pamatujte, že jsme v nastavení pluginu nepovolili funkci automatického otevírání modálního okna? Proto musíme zjistit, jak se naše okno otevře. Pojďme nastavit okno, které se zobrazí po kliknutí na odkaz, obrázek nebo tlačítko.

Plugin Popup Make přiřadí každé okno dvě jedinečné třídy CSS. Pokud přidáte některou z těchto tříd do prvku webové stránky, otevře se po kliknutí na tento prvek modální okno.

Kde a jak posílit komentáře na Instagramu – všechny metody. Portál pricesmm.com zjišťoval, co je levnější a lepší: zvýšit komentáře na Instagramu sami, pomocí programů, získat výměnou nebo si objednat službu ve službě SMM. Klady a zápory každé metody.

Příklady přidání kódu CSS modálního okna k odkazu, obrázku a tlačítku:

< a href = "#" class = >Otevřete modální okno< / a >

Po kliknutí na obrázek se zobrazí modální okno

< img src = "popup-primer.jpg" class = "popmake-obrazets-modalnogo-okna"/ >

Modální okno se aktivuje po kliknutí na tlačítko

< button class = "popmake-obrazets-modalnogo-okna"> Otevřít modální okno< / button >

Po přidání třídy CSS na prvek HTML klikněte popmake-obrazets-modalnogo-okna. Mělo by se objevit modální okno podobné tomuto:

Objevilo se to? Skvělý! Nyní můžete konfigurovat vyskakovací okna. Pokud se okno neotevře, popište problém v komentářích - spustíme jej společně!

Nedávno jsem byl pro jeden web požádán, abych vytvořil formulář zpětné vazby pro WordPress v modálním okně. To znamená, že při kliknutí na odkaz „napište nám“ by měl uživatel místo přechodu na příslušnou stránku otevřít nové vyskakovací okno, kde bude umístěna funkce odeslání zprávy. Jedná se o interaktivnější řešení, i když ne každému se líbí. Osobně preferuji klasickou implementaci s kontaktní stránkou, ale formuláře na stránkách se liší - bude tedy užitečné zvážit řešení tohoto problému. Ve své práci jsem použil 2 pluginy: známý Contact Form 7 a modul Easy Modal pro vytvoření modálního okna ve WordPressu.

Aktualizace 18.05.2017: Soudě podle posledních recenzí v úložišti mohou být v některých případech problémy s jeho provozem. Pokud se to týká i vás, vyzkoušejte nové řešení od vývojářů s názvem Popup Maker. Lze uvažovat o jiné alternativě.

Nebudu zabíhat do podrobností o instalaci a konfiguraci kontaktního formuláře 7; všechny informace o něm jsou zde. Na blogu byl také článek o tom, co by se mohlo hodit.

Přejděme rovnou k modulu Easy Modal. Najdete ho. Vývojáři tvrdí, že jde o nejlepší řešení pro vytváření modálních oken na webu s různými zajímavými možnostmi prezentace obsahu.

Přes 10 tisíc stažení, hodnocení 4,6. Platné verze 3.4 jsou 4.0.8, i když jsem to úspěšně spustil na WP 4.3.1. Navzdory skutečnosti, že plugin byl nyní transformován do nového řešení Popup Maker, na webu wordpress.org a při hledání pluginů v admin panelu stále najdete obvyklou Easy Modal verze 2.0.17. Na jeho příkladu vám řeknu o vytvoření modálního okna zpětné vazby ve WordPressu.

Po instalaci se objeví stejnojmenná sekce, kde je několik položek. Budeme potřebovat úplně první z nich - Modály. Zde klikněte na tlačítko Přidat nový.

Tato akce vytvoří nové modální okno pro váš web WordPress. Nastavení prvků bude mít 4 karty:

  • Obecné — obecné parametry.
  • Možnosti zobrazení - možnosti zobrazení.
  • Zavřít Možnosti - nastavení pro zavření okna (kliknutím nebo tlačítkem Esc).
  • Příklady - příklady kódu k použití.

Obecná nastavení obsahují název okna (nezobrazuje se na webu), jeho název, obsah a typ stahování. V bloku obsahu, přepnutím do režimu HTML, přidejte krátký kód formuláře zpětné vazby v modálním okně.

Typ zatížení má 2 možnosti:

  • Načíst celý web (pro celý web).
  • Za stránku/příspěvek (pro konkrétní příspěvky a stránky).

Velmi zajímavá možnost. Pokud potřebujete vyskakovací okno, které se bude zobrazovat na všech stránkách webu (odkaz se nachází například v bočním panelu), pak zvolte první možnost. V druhém případě se na stránkách/příspěvcích webu při úpravách objeví odpovídající blok nastavení:

Můžete aktivovat a vybrat vlastní vyskakovací okno pro konkrétní stránku. Pokud políčko nezaškrtnete, prvek se na web nenačte.

Druhá záložka parametrů modulu je Volby zobrazení.

Zde uvádíte:

  • velikost okna - automatická, střední, adaptivní, malá, velká atd.;
  • pozadí - můžete použít pozadí formuláře nebo jej zobrazit bez něj;
  • animace vyskakovacích oken;
  • pozice (umístění) - nahoře uprostřed, vpravo dole atd.; pevné nebo ne;
  • odsazení v horní části obrazovky.

Příklady zobrazení výstupu modálního okna ve WordPressu pomocí pluginu Easy Modal najdete na poslední záložce.

Tento kód musíte vložit pomocí widgetu na postranním panelu nebo v textovém editoru. Neliší se od jakéhokoli jiného HTML kódu, pouze je zde uvedena třída konkrétního modálního okna (eModal-1). Pro druhý prvek, který jste vytvořili, bude třída eModal-2 atd. Abyste při vkládání kódu neudělali chybu, je nejjednodušší jej zkopírovat z této stránky.

Úprava motivu modálního okna

V pluginu Easy Modal lze kromě nastavení pro konkrétní prvek definovat motivy pro vyskakovací okna (Theme). Základní bezplatná verze modulu má pouze jednu šablonu, ale ta je více než dostačující.

Tento nástroj má 6 záložek:

  • Obecné - uveďte název tématu;
  • Překrytí — pozadí (zde můžete vybrat barvu a průhlednost pozadí formuláře);
  • Kontejner - různá nastavení samotného modálního okna (výplň, rám, stín);
  • Title—parametry titulku vyskakovacího okna (font, stín);
  • Obsah — font a barva textů v bloku;
  • Close - uzavírací prvek formuláře (text a design).

Jak vidíte, vzhled lze upravit tak, aby vyhovoval vašim potřebám. Skončil jsem s tímto jednoduchým formulářem WordPress v modálním okně:

Po nastavení všech nastavení je nezapomeňte uložit (klikněte na tlačítko Uložit).

Video přidání kontaktního formuláře 7 do vyskakovacího okna Easy Modal

Mimochodem, našel jsem video o práci s pluginem Easy Modal, které demonstruje proces vytváření modálního okna zpětné vazby ve WordPressu. Tam je rozhraní modulu mírně zastaralé (některá nastavení vypadají jinak), ale můžete získat obecnou podstatu. Snad pro někoho bude snazší tuto problematiku pochopit pomocí videa.

Celkem o modálních oknech pro WordPress

Jak bylo uvedeno výše, nyní byl plugin Easy Modal (soudě podle oficiální stránky) převeden na Popup Maker. V úložišti se mi podařilo najít stejnojmenný modul, ale netestoval jsem ho. Říkám vám o tom, abyste věděli, co hledat, pokud Easy Modal ve WordPressu v následujících verzích náhle přestane fungovat.

Obě řešení jsou zdarma, i když mají placené doplňky. Umožňují vám přizpůsobit cílení, přidat další designová témata, obsahují analýzy a některé další funkce. Pokud potřebujete pokročilejší mechanismus modálních oken, můžete se na tato rozšíření podívat blíže.

Pokud jde o úkol otevřít formulář zpětné vazby Contact Form 7 ve vyskakovacím okně, základní možnosti Easy Modal jsou dostatečné. Navíc lze toto řešení použít i pro zobrazení dalších modálních oken ve WordPressu – užitečné tipy, doplňkové informace atd. Vzhledem k přítomnosti editoru pro vkládání HTML kódu můžete ve vyskakovacím okně zobrazovat videa, formuláře atd. Celkově vzato užitečný plugin. Pokud k tomu máte nějaké dotazy, napište do komentářů.

Publikace na dané téma