--- 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: "Nově v Divi: Pokročilé nastavení animací pro všechny moduly, řádky i sekce" url: https://www.wplama.cz/divi-animace/ date: 2017-09-25 modified: 2018-01-13 author: Tomáš Cirkl type: post categories: [Divi šablona a Elegant Themes] tags: [animace, Divi, Elegant Themes, Nově v Divi] --- Divi šablona a Elegant Themes # Nově v Divi: Pokročilé nastavení animací pro všechny moduly, řádky i sekce [TC **Tomáš Cirkl**](https://www.wplama.cz/author/tomas/) Publikováno 25. 9. 2017 Aktualizováno **13. 1. 2018** 3 min čtení Pozor: Článek je z roku 2017. Některé postupy se mohly změnit. ![webdesign layout sketching picjumbo com](https://www.wplama.cz/wp-content/uploads/2017/09/webdesign-layout-sketching-picjumbo-com.jpg "webdesign layout sketching picjumbo com") Obsah článku (3 kapitoly) 1. [Kombinování animací pro tvorbu zajímavých efektů](https://www.wplama.cz/divi-animace/#kombinovani-animaci-pro-tvorbu-zajimavych-efektu) 2. [Sedm druhů animace](https://www.wplama.cz/divi-animace/#sedm-druhu-animace) 3. [Pokročilé nastavení pro každý druh animace](https://www.wplama.cz/divi-animace/#pokrocile-nastaveni-pro-kazdy-druh-animace) Každému modulu, řádce nebo sekci v [Divi šabloně](https://www.wplama.cz/divi) lze nově přiřadit pokročilou animaci. Díky tomu můžete zajímavou cestou zaujmout návštěvníky stránky. Nastavení animací bylo v Divi zcela předěláno a bylo pro něj vytvořeno nové rozhraní, které opět pracuje s ikonami a posuvníky a je velmi jednoduché a uživatelsky přívětivé. V tomto článku se podíváme jak animace prvků funguje a jak s ní pracovat. [Divi Feature Update! Introducing Advanced Animations Options For All Divi Modules, Rows and Sections](about:blank) ## Kombinování animací pro tvorbu zajímavých efektů Protože všechny prvky Divi Builderu nyní obsahují možnost animace, lze kombinovat styly animací tak, že vytvoříte jedinečné sekvence. Využívá se k tomu časový posun animace. Níže je ukázka animací, kterých lze v Divi dosáhnout. [![Divi ukázka animace prvku 1](https://www.wplama.cz/wp-content/uploads/2017/09/animace-1.gif "Divi ukázka animace prvku 1")](https://www.wplama.cz/wp-content/uploads/2017/09 / animace-1.gif) Divi ukázka animace prvku 1 [![Divi ukázka animace prvku 2](https://www.wplama.cz/wp-content/uploads/2017/09/animace-2.gif "Divi ukázka animace prvku 2")](https://www.wplama.cz/wp-content/uploads/2017/09 / animace-2.gif) Divi ukázka animace prvku 2 [![Divi ukázka animace prvku 3](https://www.wplama.cz/wp-content/uploads/2017/09/animace-3.gif "Divi ukázka animace prvku 3")](https://www.wplama.cz/wp-content/uploads/2017/09 / animace-3.gif) Divi ukázka animace prvku 3 [![Divi ukázka animace prvku 4](https://www.wplama.cz/wp-content/uploads/2017/09/animace-4.gif "Divi ukázka animace prvku 4")](https://www.wplama.cz/wp-content/uploads/2017/09 / animace-4.gif) Divi ukázka animace prvku 4 [![Divi ukázka animace prvku 5](https://www.wplama.cz/wp-content/uploads/2017/09/animace-5.gif "Divi ukázka animace prvku 5")](https://www.wplama.cz/wp-content/uploads/2017/09 / animace-5.gif) Divi ukázka animace prvku 5 [![Divi ukázka animace prvku 6](https://www.wplama.cz/wp-content/uploads/2017/09/animace-6.gif "Divi ukázka animace prvku 6")](https://www.wplama.cz/wp-content/uploads/2017/09 / animace-6.gif) Divi ukázka animace prvku 6 [![Divi ukázka animace prvku 7](https://www.wplama.cz/wp-content/uploads/2017/09/animace-7.gif "Divi ukázka animace prvku 7")](https://www.wplama.cz/wp-content/uploads/2017/09 / animace-7.gif) Divi ukázka animace prvku 7 [![Divi ukázka animace prvku 8](https://www.wplama.cz/wp-content/uploads/2017/09/animace-8.gif "Divi ukázka animace prvku 8")](https://www.wplama.cz/wp-content/uploads/2017/09 / animace-8.gif) Divi ukázka animace prvku 8 [![Divi ukázka animace prvku 9](https://www.wplama.cz/wp-content/uploads/2017/09/animace-9.gif "Divi ukázka animace prvku 9")](https://www.wplama.cz/wp-content/uploads/2017/09 / animace-9.gif) Divi ukázka animace prvku 9 [![Divi ukázka animace prvku 10](https://www.wplama.cz/wp-content/uploads/2017/09/animace-10.gif "Divi ukázka animace prvku 10")](https://www.wplama.cz/wp-content/uploads/2017/09 / animace-10.gif) Divi ukázka animace prvku 10 Všechny výše uvedené animace si můžete prohlédnout v [demu 1](https://www.wplama.cz/divi-animations-demo-1) a [demu 2](https://www.wplama.cz/divi-animations-demo-2) na oficiálních stránkách. ## Sedm druhů animace Nový systém animace obsahuje sedm různých stylů animace. Mezi ně patří Prolnutí, Příjezd, Skočení, Přiblížení, Přeložení a Přetočení. Každá animace vytváří unikátní efekt, který lze použít na všechny typy obsahu a veškeré další nastavení animace je také upravitelné pomocí dalšího nastavení. Animaci tak můžete udělat rychlou, pomalou, upravit její načasování a prodlevu nebo třeba změnit její směr. ### Ukázka animací [![Prolnutí](https://www.wplama.cz/wp-content/uploads/2017/09/prolnuti.gif "Prolnutí")](https://www.wplama.cz/wp-content/uploads/2017/09 / prolnuti.gif) Prolnutí [![Příjezd](https://www.wplama.cz/wp-content/uploads/2017/09/prijezd.gif "Příjezd")](https://www.wplama.cz/wp-content/uploads/2017/09 / prijezd.gif) Příjezd [![Skočení](https://www.wplama.cz/wp-content/uploads/2017/09/skoceni.gif "Skočení")](https://www.wplama.cz/wp-content/uploads/2017/09 / skoceni.gif) Skočení [![Přiblížení](https://www.wplama.cz/wp-content/uploads/2017/09/priblizeni.gif "Přiblížení")](https://www.wplama.cz/wp-content/uploads/2017/09 / priblizeni.gif) Přiblížení [![Přeložení](https://www.wplama.cz/wp-content/uploads/2017/09/prelozeni.gif "Přeložení")](https://www.wplama.cz/wp-content/uploads/2017/09 / prelozeni.gif) Přeložení [![Přetočení](https://www.wplama.cz/wp-content/uploads/2017/09/pretoceni.gif "Přetočení")](https://www.wplama.cz/wp-content/uploads/2017/09 / pretoceni.gif) Přetočení ## Pokročilé nastavení pro každý druh animace Animace lze podobně upravovat pomocí jejich ovládacích prvků a nastavení. Díky tomu lze docílit unikátních efektů zobrazení. Jedna z unikátních nastavení v Divi je možnost *intenzity* pro animaci Příjezd. Tato možnost umožňuje rychlé transformování animace z jemné a rychlou. Toto nastavení lze skvěle uplatnit například v modulu Posuvníku. Celkem je pro animace až sedm dalších možností, jak upravit její průběh. [![Nastavení animací v Divi](https://www.wplama.cz/wp-content/uploads/2017/09/nastaveni-animaci-v-divi.gif "Nastavení animací v Divi")](https://www.wplama.cz/wp-content/uploads/2017/09 / nastaveni-animaci-v-divi.gif) Nastavení animací v Divi **Animation Repeat (Opakování animace)** – ve výchozím nastavení je zadáno, že animace proběhne pouze jednou. Nicméně lze upravit, aby probíhala dokola (vhodné například pro akční tlačítka). --- **Animation Direction (Směr animace)** – každá animace může mít nastavený jiný směr. Můžete animovat ze shora dolů, zespodu nahoru, zleva doprava a zprava doleva. --- **Animation Duration (Doba animace)** – ve výchozím nastavení je průběh animace nastaven na 1s. Lze si to však upravit a animaci urychlit nebo zpomalit. --- **Animation Delay (Zpoždění animace)** – animace se obvykle spouští, když se daný prvek objeví v prohlížeči při posunu stránkou dolů. Nastavením zpoždění animace prodloužíte dobu, kdy animace proběhne po jejím zobrazení na obrazovce. --- **Animation Intensity (Intenzita animace)** – nastavuje pohyb animace. Můžete s ní jednoduše udělat například agresivní nebo jemný slider. --- **Animation Starting Opacity (Výchozí nastavení průhlednosti)** – výchozí nastavení je 0 (maximální průhlednost). Průhlednost jde upravit dle potřeby nebo ji zcela vypnout. --- **Animation Speed Curve (Rychlostní křivka animace)** – upravením rychlostní křivky animace upravíte výchozí styl animace a jejich průběh. --- [Elegant Themes](https://www.wplama.cz/elegant-themes-web) opět dokázal, že [Divi šablona](https://www.wplama.cz/divi) je jejich vlajkovou lodí a nová aktualizace přináší další skvělé možnosti do této šablony. - [#animace](https://www.wplama.cz/stitek/animace/) - [#Divi](https://www.wplama.cz/stitek/divi/) - [#Elegant Themes](https://www.wplama.cz/stitek/elegant-themes/) - [#Nově v Divi](https://www.wplama.cz/stitek/nove-v-divi/) Sdílet - - [](mailto:?subject=Nově v Divi: Pokročilé nastavení animací pro všechny moduly, řádky i sekce&body=Nově v Divi: Pokročilé nastavení animací pro všechny moduly, řádky i sekce https://www.wplama.cz/divi-animace/) - [](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.wplama.cz%2Fdivi-animace%2F) - [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.wplama.cz%2Fdivi-animace%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 Zatím tu nikdo nekomentoval. Napište první komentář. ### Přidat komentář [Zrušit odpověď](https://www.wplama.cz/divi-animace/#respond) [← Předchozí článek WordPress 4.8.2](https://www.wplama.cz/wordpress-4-8-2/) [Další článek → Hlasujte o podobě WordCamp Praha 2018](https://www.wplama.cz/hlasujte-o-podobe-wordcamp-praha-2018/) Související ## Mohlo by vás zajímat [Všechny články z rubriky Divi šablona a Elegant Themes →](https://www.wplama.cz/wordpress/divi-elegant-themes/) ![kombinovatelne nastaveni](https://www.wplama.cz/wp-content/uploads/2026/04/kombinovatelne-nastaveni.png "kombinovatelne nastaveni") Divi šablona a Elegant Themes ### [Divi 5: Kombinovatelné nastavení](https://www.wplama.cz/divi-5-kombinovatelne-nastaveni/) 13. 4. 2026 2 min čtení --- ![command center](https://www.wplama.cz/wp-content/uploads/2026/03/command-center.png "command center") Divi šablona a Elegant Themes ### [Divi 5: Command Center](https://www.wplama.cz/divi-5-command-center/) 7. 4. 2026 4 min čtení --- ![spekulativni prerendering](https://www.wplama.cz/wp-content/uploads/2026/03/spekulativni-prerendering.png "spekulativni prerendering") Divi šablona a Elegant Themes ### [Divi 5: Spekulativní prerendering](https://www.wplama.cz/divi-5-spekulativni-prerendering/) 30. 3. 2026 3 min čtení ---