--- site_name: WPlama site_description: Internetové stránky na WordPressu snadno a česky site_url: https://www.wplama.cz contact_email: tomas@wplama.cz title: Jak ve WordPress vytvořit informační pop-up okno na webu url: https://www.wplama.cz/jak-ve-wordpress-vytvorit-informacni-pop-up-okno-na-webu/ date: 2020-03-17 modified: 2020-03-17 author: Tomáš Cirkl type: post categories: [Ostatní] tags: [plugin, pop-up] --- 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](https://cs.wordpress.org/plugins/popup-builder/), který se nachází v oficiálním katalogu pluginů, takže je možné jej [nainstalovat](https://www.wplama.cz/3-zpusoby-jak-nainstalovat-wordpress-plugin/) přímo z WordPress administrace. [![Plugin Popup Builder](https://www.wplama.cz/wp-content/uploads/2020/03/plugin-popup-builder.png "Plugin Popup Builder")](https://www.wplama.cz/wp-content/uploads/2020/03 / plugin-popup-builder.png)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](https://www.wplama.cz/wp-content/uploads/2020/03/vytvoreni-pop-up-okna.png "Vytvoření pop-up okna")](https://www.wplama.cz/wp-content/uploads/2020/03 / vytvoreni-pop-up-okna.png)Vytvoření pop-up okna Na další stránce vyberte typ pop-up okna *HTML*. [![Výběr typu okna](https://www.wplama.cz/wp-content/uploads/2020/03/vyber-typu-okna.png "Výběr typu okna")](https://www.wplama.cz/wp-content/uploads/2020/03 / vyber-typu-okna.png)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](https://www.wplama.cz/wp-content/uploads/2020/03/vlozeni-obsahu-1024x486.png "Vložení obsahu")](https://www.wplama.cz/wp-content/uploads/2020/03 / vlozeni-obsahu.png)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](https://www.wplama.cz/wp-content/uploads/2020/03/na-kazde-strance-1-1024x93.png "Na každé stránce")](https://www.wplama.cz/wp-content/uploads/2020/03 / na-kazde-strance-1.png)Na každé stránce[![Pouze na hlavní straně](https://www.wplama.cz/wp-content/uploads/2020/03/pouze-na-hlavni-strane-1024x95.png "Pouze na hlavní straně")](https://www.wplama.cz/wp-content/uploads/2020/03 / pouze-na-hlavni-strane.png)Pouze na hlavní straně[![Na vybraných stránkách](https://www.wplama.cz/wp-content/uploads/2020/03/na-vybranych-strankach-1024x96.png "Na vybraných stránkách")](https://www.wplama.cz/wp-content/uploads/2020/03 / na-vybranych-strankach.png)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](https://www.wplama.cz/wp-content/uploads/2020/03/nastaveni-vzhledu-1024x422.png "Nastavení vzhledu")](https://www.wplama.cz/wp-content/uploads/2020/03 / nastaveni-vzhledu.png)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](https://www.wplama.cz/wp-content/uploads/2020/03/nastaveni-velikosti-1024x261.png "Nastavení velikosti")](https://www.wplama.cz/wp-content/uploads/2020/03 / nastaveni-velikosti.png)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](https://www.wplama.cz/wp-content/uploads/2020/03/nastaveni-pop-up-okna-1024x619.png "Nastavení pop-up okna")](https://www.wplama.cz/wp-content/uploads/2020/03 / nastaveni-pop-up-okna.png)Nastavení pop-up okna Posledním krokem je jen publikování a máte vše hotovo. [![Zveřejnění](https://www.wplama.cz/wp-content/uploads/2020/03/zverejneni.png "Zveřejnění")](https://www.wplama.cz/wp-content/uploads/2020/03 / zverejneni.png)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](https://www.wplama.cz/wp-content/uploads/2020/03/vyskakovaci-okno-ve-wordpress-1024x497.png "Vyskakovací okno ve WordPress")](https://www.wplama.cz/wp-content/uploads/2020/03 / vyskakovaci-okno-ve-wordpress.png)Vyskakovací okno ve WordPress[![Vyskakovací okno ve WordPress #2](https://www.wplama.cz/wp-content/uploads/2020/03/vyskakovaci-okno-ve-wordpress-2-1024x498.png "Vyskakovací okno ve WordPress #2")](https://www.wplama.cz/wp-content/uploads/2020/03 / vyskakovaci-okno-ve-wordpress-2.png)Vyskakovací okno ve WordPress #2[![Vyskakovací okno ve WordPress #3](https://www.wplama.cz/wp-content/uploads/2020/03/vyskakovaci-okno-ve-wordpress-3-1024x500.png "Vyskakovací okno ve WordPress #3")](https://www.wplama.cz/wp-content/uploads/2020/03 / vyskakovaci-okno-ve-wordpress-3.png)Vyskakovací okno ve WordPress #3