Divi šablona a Elegant Themes

Nově v Divi: Pokročilé nastavení animací pro všechny moduly, řádky i sekce

Autor příspěvku Tomáš Cirkl

Každému modulu, řádce nebo sekci v Divi šabloně 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.

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

Divi ukázka animace prvku 2

Divi ukázka animace prvku 3

Divi ukázka animace prvku 4

Divi ukázka animace prvku 5

Divi ukázka animace prvku 6

Divi ukázka animace prvku 7

Divi ukázka animace prvku 8

Divi ukázka animace prvku 9

Divi ukázka animace prvku 10

Všechny výše uvedené animace si můžete prohlédnout v demu 1demu 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í

Příjezd

Skočení

Přiblížení

Přeložení

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

  • 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 opět dokázal, že Divi šablona je jejich vlajkovou lodí a nová aktualizace přináší další skvělé možnosti do této šablony.

O autorovi

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 WordCamp Praha a WordPress konferencích.

Zanechat komentář

Získejte více informací o WordPress!

Připojte se do našeho emailového seznamu a nenechte si ujít informace, novinky a návody ze světa WordPressu.

Úspěšně jste se zapsali do našeho newsletteru. Děkujeme!

Tomáš Cirkl

Tomáš Cirkl

WordPress specialista

Blog WPlama.cz píši už více než 3 roky. O WordPress přednáším a pořádám školení. Pro své klienty vytvářím a spravuji webové stránky.