Vyskakovací okno ve WordPress

Jak ve WordPress vytvořit informační pop-up okno na webu

V posledních dnech mě kontaktovali desítky lidí, se žádostí na umístění pop-up okna s upozorněním na jejich WordPress web. Jedná se samozřejmě o reakci na aktuální situaci, kdy majitelé/správci webu potřebují umístit informaci ohledně provozu/uzavření v nouzovém stavu kvůli COVID-19.

V tomto návodu si ukážeme jednoduchý způsob jak pomocí pluginu vytvořit pop-up okno s vlastním textem.

Budeme k tomu potřebovat plugin Popup Builder, který se nachází v oficiálním katalogu pluginů, takže je možné jej nainstalovat přímo z WordPress administrace.

Plugin Popup Builder
Plugin Popup Builder

Tvorba pop-up okna

Po instalaci a aktivaci se v administračním menu WordPress objeví nová položka Popup Builder. Klikněte na ní a poté vyberte tlačítko Add New, kterým založíte nové pop-up okno.

Vytvoření pop-up okna
Vytvoření pop-up okna

Na další stránce vyberte typ pop-up okna HTML.

Výběr typu okna
Výběr typu okna

Dostanete se na stránku, kde může pop-up naplnit a nastavit jeho chování.

Nastavení pop-up okna

Nebudu zde popisovat veškeré nastavení, ale jen to, které potřebujete k zobrazení informační zprávy.

V horní části obrazovky zadejte název pop-up okna (slouží jen pro vás) a pomocí klasického editoru vložte upozornění, které chcete vytvořit.

Vložení obsahu
Vložení obsahu

Box Popup Display Rules 

Slouží k nastavení pravidel, kde se pop-up okno zobrazí. V rozbalovací záložce označené Select rule vyberte typ obsahu, kde chcete informace zobrazit. V případě, že chcete vybrat konkrétní stránku, bude pak ještě potřeba ve třetím sloupci z nabídky vybrat stránku nebo její typ. Níže pár příkladů nastavení.

Na každé stránce
Na každé stránce
Pouze na hlavní straně
Pouze na hlavní straně
Na vybraných stránkách
Na vybraných stránkách

Box Design

Slouží k nastavení vzhledu pop-up okna. Obvykle stačí jen nastavit odsazení obsahu od krajů okna (Padding) a vzhled lightboxu (Theme).

Nastavení vzhledu
Nastavení vzhledu

Box Dimensions

Zde můžete nastavit rozměry okna, aby nebylo s textem obrovské přes celou obrazovku. Používejte k tomu pole Max width. Já jej nastavuji na 1000.

Nastavení velikosti
Nastavení velikosti

Box Popup Options

V tomto boxu máte další nastavení týkající se vyskakovacího okna. Důležité nastavení je:

  • Action on popup content click – co se stane, když na okno někdo klikne.
    • Close Popup – zavře okno (výchozí).
    • Redirect – přesměruje na jinou stránku.
    • Copy to clipboard – zkopíruje obsah okna.
  • Popup showing limitation – omezení zobrazení okna pro návštěvníka.
    • Pokud nezaškrtnete, zobrazí se vždy, když návštěvník splní podmínku zobrazení (navštíví stránku).
    • Popup showing count – počet, kolikrát se může okno zobrazit danému návštěvníkovi.
    • Popup showing expiry – doba ve dnech, za jak dlouho se zresetuje možnost zobrazení návštěvníkovi.
    • Apply option on each page – zaškrtnutím bude počet a expirace počítána na každé stránce zvlášť.
Nastavení pop-up okna
Nastavení pop-up okna

Posledním krokem je jen publikování a máte vše hotovo.

Zveřejnění
Zveřejnění

Kontrola nastavení a příklady zobrazení

Dobré pak je si přes anonymní okno ověřit a zkontrolovat zobrazení pop-up okna.

Vyskakovací okno ve WordPress
Vyskakovací okno ve WordPress
Vyskakovací okno ve WordPress #2
Vyskakovací okno ve WordPress #2
Vyskakovací okno ve WordPress #3
Vyskakovací okno ve WordPress #3

 

Neuteklo vám něco?

Pokrok a WordPress na nikoho nečekají, tak nám tu raději nechte email, ať o nic nepřijdete!

Nespamujeme! Další informace naleznete v našich zásadách ochrany osobních údajů.

Správa WordPress webu

Nemusíte na to být sami. Pomůžeme vám s pravidelnou údržbou i novými vylepšeními.

Více informací

7 názorů na “Jak ve WordPress vytvořit informační pop-up okno na webu”

  1. Dobrý den, je možnost, aby se pop up okno objevilo v momentě, kdy návštěvník bude chtít opustit stránku? Jak pak funguje nastavení?

  2. Děkuji za rady. Pěkný plugin.
    Popup Buider jsem využil pro informaci o ukončení podpory IE na stránkách. Některé pluginy už pod IE nefungují.
    Po čase pak plánuji využít volbu „Redirect“ a přesměruji na statickou stránku s textem, že pro zobrazení potřebujete jiný prohlížeč.
    Toto ale umí až placená verze za 12$. Ovšem POZOR – je to každoroční poplatek – ne jednorázový. Další rok 8,40$. Dá se samozřejmě vypovědět. Stačí mi na rok. Aby to fungovalo, tak po zaplacení máte dole na jejich stránce v sekci „Products“ ke stažení ZIP soubor. Ten importujete a aktivujete jako nový plugin. Nikde se žádná licence nezadává.

  3. Dobrý deň,

    pop-up okno sa nezobrazí na mobilnom zariadení (Android). Robím niečo nesprávne?
    Ďakujem.

Diskuze

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Nákupní košík
Přejít nahoru