--- site_name: WPlama site_description: "Správa, opravy a vývoj WordPress webů a e-shopů" site_url: https://www.wplama.cz contact_email: info@wplama.cz title: Jak vytvořit unikátní pohyblivé částicové pozadí url: https://www.wplama.cz/jak-vytvorit-unikatni-pohyblive-casticove-pozadi/ date: 2019-09-16 modified: 2019-11-05 author: Tomáš Cirkl type: post categories: [WordPress návody] tags: [plugin, pozadí] --- WordPress návody # Jak vytvořit unikátní pohyblivé částicové pozadí [TC **Tomáš Cirkl**](https://www.wplama.cz/author/tomas/) Publikováno 16. 9. 2019 Aktualizováno **5. 11. 2019** 2 min čtení Pozor: Článek je z roku 2019. Některé postupy se mohly změnit. ![Částicové pozadí](https://www.wplama.cz/wp-content/uploads/2019/08/casticove-pozadi.png "Částicové pozadí") Pohyblivé částicové pozadí lze použít k oživení stránky. Pozadí je interaktivní a reaguje na pohyb kurzoru myši a klikání. V tomto článku si ukážeme jak do WordPress stránky přidat pohyblivé částicové pozadí. Budeme k tomu potřebovat plugin [WP Particles Plugin](https://github.com/ingeniousweb/ParticleJs-WP-Plugin/archive/master.zip). Plugin se nachází na GitHubu a po stažení zipu jej můžete [nainstalovat do WordPress](https://www.wplama.cz/3-zpusoby-jak-nainstalovat-wordpress-plugin/) přes administraci nebo přes FTP. Po instalaci a aktivaci pluginu běžte ve WordPress administraci do nové sekce *Particle Background*. [![Particle Background](https://www.wplama.cz/wp-content/uploads/2019/08/particle-background-1024x478.png "Particle Background")](https://www.wplama.cz/wp-content/uploads/2019/08 / particle-background.png) Particle Background Sem je zapotřebí vložit JSON kód s nastavením pozadí. Kód pro částicové pozadí získáte v tomto nástroji – [particle.js configuration](https://vincentgarreau.com/particles.js/). V pravém horním rohu najdete možnosti nastavení, které můžete pro tvorbu pohyblivého částicového pozadí použít. Měnit můžete: - barvu - rychlost - počet vzorů - velikost - průhlednost a mnohé další… [![Nastavení částicového pozadí](https://www.wplama.cz/wp-content/uploads/2019/08/nastaveni-casticoveho-pozadi-1024x478.png "Nastavení částicového pozadí")](https://www.wplama.cz/wp-content/uploads/2019/08 / nastaveni-casticoveho-pozadi.png) Nastavení částicového pozadí Jakmile máte všechno nastavené, klikněte na poslední možnost *Download current config (json)*. [![Stáhnout JSON](https://www.wplama.cz/wp-content/uploads/2019/08/stahnout-json-1024x478.png "Stáhnout JSON")](https://www.wplama.cz/wp-content/uploads/2019/08 / stahnout-json.png) Stáhnout JSON Do počítače se vám stáhne soubor, který můžete například pomocí Notepad++ otevřít. Jeho obsah pak zkopírujte celý do pole nastavení pluginu. [![Zkopírované nastavení pozadí](https://www.wplama.cz/wp-content/uploads/2019/08/zkopirovane-nastaveni-pozadi-1024x504.png "Zkopírované nastavení pozadí")](https://www.wplama.cz/wp-content/uploads/2019/08 / zkopirovane-nastaveni-pozadi.png) Zkopírované nastavení pozadí Nyní je potřeba přiřadit ID pozadí. To uděláte tak, že nad zkopírovaný kód vložíte *particles JS („particles ID“,* a za zkopírovaný kód vložíte *);*. ``` particles JS ("particles ID", zde nechte zkopírovaný obsah nastavení ); ``` Vše uložte. [![Přiřazení ID](https://www.wplama.cz/wp-content/uploads/2019/08/prirazeni-id-1024x478.png "Přiřazení ID")](https://www.wplama.cz/wp-content/uploads/2019/08 / prirazeni-id.png) Přiřazení ID Posledním krokem je přiřazení ID k divu na stránce, který pak dostane připravený efekt pozadí. V tuto chvíli mají výhodu ti, kteří používají některý page builder ([Divi](https://www.wplama.cz/divi-sablona/), Elementor …), protože pro přiřazení ID jim stačí rozhraní builderu a nemusí do zdrojového kódu. Například v Divi ID přiřadíte tak, že si otevřete prvek, kde chcete nastavit pozadí. V otevřeném nastavení půjdete na záložku *Pokročilé* a do pole *ID* vložíte vaše ID (particles ID). Prvku nezapomeňte nastavit barevné pozadí, aby byly částice vidět. [![Vložení ID k divu v Divi](https://www.wplama.cz/wp-content/uploads/2019/08/vlozeni-id-k-divu-v-divi-1024x478.png "Vložení ID k divu v Divi")](https://www.wplama.cz/wp-content/uploads/2019/08 / vlozeni-id-k-divu-v-divi.png) Vložení ID k divu v Divi Vše uložíte a máte hotovo. Jak vypadá pohyblivé částicové pozadí na živém webu si můžete prohlédnout například na [Toret.cz](https://toret.cz/). - [#plugin](https://www.wplama.cz/stitek/plugin/) - [#pozadí](https://www.wplama.cz/stitek/pozadi/) Sdílet - - [](mailto:?subject=Jak vytvořit unikátní pohyblivé částicové pozadí&body=Jak vytvořit unikátní pohyblivé částicové pozadí https://www.wplama.cz/jak-vytvorit-unikatni-pohyblive-casticove-pozadi/) - [](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.wplama.cz%2Fjak-vytvorit-unikatni-pohyblive-casticove-pozadi%2F) - [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.wplama.cz%2Fjak-vytvorit-unikatni-pohyblive-casticove-pozadi%2F) TC Autor Tomáš Cirkl Baví mě Internet a zvláště pak redakční systém WordPress. Jsem pravidelným účastníkem a přednášejícím na Word Camp Praha a WordPress konferencích. 1 030 článků [Všechny články autora →](https://www.wplama.cz/author/tomas/) ## Komentáře (3) [Přidat komentář →](https://www.wplama.cz/jak-vytvorit-unikatni-pohyblive-casticove-pozadi/#respond) T Tomáš [17. 9. 2019](https://www.wplama.cz/jak-vytvorit-unikatni-pohyblive-casticove-pozadi/#comment-85295) Ahoj Tome udělal jsem vše podle návodu a přesto bez efektu… Nevíš prosím kde by mohla být chyba? [Odpovědět](https://www.wplama.cz/jak-vytvorit-unikatni-pohyblive-casticove-pozadi/#comment-85295) TC Tomáš Cirkl WPlama [17. 9. 2019](https://www.wplama.cz/jak-vytvorit-unikatni-pohyblive-casticove-pozadi/#comment-85296) Ahoj, zkus promazat cache, koukni jestli se ti ten skript netluče. Ujisti se, že to ID je na prvku nastaveno správně a je i v tom skriptu. [Odpovědět](https://www.wplama.cz/jak-vytvorit-unikatni-pohyblive-casticove-pozadi/#comment-85296) --- --- T Tomáš [17. 9. 2019](https://www.wplama.cz/jak-vytvorit-unikatni-pohyblive-casticove-pozadi/#comment-85300) Oprava a možná nápad na dodání do článku: Je potřeba nastavit nějaké barevné pozadí sekce kde budou částice… Na bílém to nelze vidět [Odpovědět](https://www.wplama.cz/jak-vytvorit-unikatni-pohyblive-casticove-pozadi/#comment-85300) --- ### Přidat komentář [Zrušit odpověď](https://www.wplama.cz/jak-vytvorit-unikatni-pohyblive-casticove-pozadi/#respond) [← Předchozí článek Nové designy zdarma pro Divi šablonu přidané v srpnu 2019](https://www.wplama.cz/nove-designy-zdarma-pro-divi-sablonu-pridane-v-srpnu-2019/) [Další článek → Jak propojit WooCommerce s Uloženkou + přidat nabídku výdejních míst zákazníkům](https://www.wplama.cz/jak-propojit-woocommerce-a-ulozenka/) Související ## Mohlo by vás zajímat [Všechny články z rubriky WordPress návody →](https://www.wplama.cz/wordpress/navody/) ![llms txt scaled](https://www.wplama.cz/wp-content/uploads/2026/03/llms-txt-scaled.png "llms txt scaled") WordPress návody ### [Konec tradičního SEO? Jak a proč začít optimalizovat WordPress web pro AI vyhledávače](https://www.wplama.cz/optimalizace-pro-ai-vyhledavace/) 3. 3. 2026 9 min čtení --- ![cloudflare turnstile scaled](https://www.wplama.cz/wp-content/uploads/2025/12/cloudflare-turnstile-scaled.png "cloudflare turnstile scaled") WordPress návody ### [Cloudflare Turnstile – Jeden antispam, který ochrání celý váš WordPress](https://www.wplama.cz/cloudflare-turnstile-antispam/) 17. 12. 2025 4 min čtení --- ![image scaled](https://www.wplama.cz/wp-content/uploads/2025/09/image-scaled.png "image scaled") WordPress návody ### [Jak přidat měřicí kód Sklik do WordPress pomocí Complianz](https://www.wplama.cz/jak-pridat-merici-kod-sklik-do-wordpress-pomoci-complianz/) 16. 9. 2025 3 min čtení ---