WordPress návody

Jak jednoduše ve WordPressu přidat prvku CSS animaci

Autor příspěvku Tomáš Cirkl

WordPress šablony bývají často vybaveny možností aktivovat CSS animace. Pomocí těchto efektů můžete ovlivnit návštěvníka webu a upoutat jeho pozornost na určitou část obsahu. V tomto článku si ukážeme jak na jakýkoliv WordPress web přidat CSS animace.

CSS animace obrázku

CSS animace obrázku

K tomuto účelu budeme potřebovat nainstalovat a aktivovat plugin Animate It!. Tento plugin se nachází v oficiálním repozitáři a můžete jej tedy nainstalovat přímo z WordPress administrace.

Pro vkládání animace se používá vizuální editor. Běžte tedy v administraci do stránky/příspěvku a všimněte si, že zde přibyla nová ikona.

Animate It ikona

Animate It ikona

Kliknutím na tuto ikonu se otevře vyskakovací okno, kde můžete nastavit parametry animace.

Vložení animace

Vložení animace

Můžete zde:

  • vybrat styl animace (Animation Style)
  • v sekundách nastavit zpoždění animace (Delay)
  • nastavit dobu trvání animace (Duration)
  • aktivovat opakování animace (Animate Infinitely)
  • nastavit spouštěč animace – jestli na kliknutí (Click), při najetí myší (Hover), zobrazení při najetí (Scroll)

Super je také automatický náhled v horní části okna.

Jakmile budete mít animaci hotovou klikněte na tlačítko Insert.

Do vizuálního editoru se přidá shortcode a v něm bude nadpis a text.

Vložení animace do editoru

Vložení animace do editoru – označený text nahraďte

Obsah shortcodu smažte a nahraďte prvkem, u kterého chcete, aby se prováděla animace. Může to být text, obrázek, shortcode atd..

Obrázek s animací

Obrázek s animací

Nyní jen stačí kliknout na tlačítko Autualizovat/Publikovat a máte hotovo.

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.

3 komentářů

  • Dobrý den, na stránce pluginu je banner „trial for 30 days.“ Zajímalo by mě, jestli je tedy zpoplatněná verze a kolik stojí? Na ofiko webu jsem informace o tomto nenašel. Děkuji za informace.

  • Přesně jak píše Tomáš – plugin by měl být zadarmo 😀 Michale, jestli ty už nepotřebuješ brýle 🙂 – žádný takový banner jsem na stránce pluginu neviděl – používám jej již delší dobu vždy v aktualizované verzi a žádné omezení ani trial to není… GL

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ž 5 let. O WordPress přednáším a pořádám školení. Pro své klienty vytvářím a spravuji webové stránky.