Die 10 besten Animationen mit dem WordPress Avada Theme
Heutzutage ist es üblich, Websites nur noch schnell zu „scannen“, anstatt sie komplett zu lesen. Deshalb macht es Sinn, den Besuchern etwas zu präsentieren, woran sie „kleben bleiben“ können.
Animationen sinnvoll auf Deiner Website eingesetzt, helfen Dir, Besucher zu halten und zu steuern. Zum Beispiel können animiere Diagramme komplexe Zusammenhänge illustrieren und so für ein leichteres Verständnis Deiner Inhalte sorgen. Allgemein erzeugen Animationen eine erhöhte Aufmerksamkeit, machen neugierig und bleiben leicht im Gedächtnis.
Hier unsere 10 Favoriten, die wir oft einsetzen, wenn wir für unsere Kunden Websites mit dem WordPress Avada Theme erstellen.
1. Lottie Animationen
Lottie Animationen sind eine tolle Möglichkeit, ansprechende und Aufmerksamkeit erregende Grafiken in Deine Website einzubinden. Sie sind immer scharf, da sie auf Vektoren basieren. Auch bei komplexeren Darstellungen glänzen sie mit vergleichsweise geringen Dateigrößen.
Mittlerweile gibt es schon eine beachtliche Auswahl verschiedener Animationen zu allen möglichen Themenbereichen. Gerade für Firmen im Dienstleistungsbereich ist es oft eine Herausforderung, ihre Leistungen visuell ansprechend darzustellen. Lottie Animationen verhelfen der Website zu einem frischen Look, auch wenn wenig eigene Business-Fotos zur Verfügung stehen, oder ein Shooting im Moment nicht möglich ist. Die Kosten für Lottie Animationen halten sich ähnlich wie bei den gängigen Stockfoto- und Bilddatenbanken in Grenzen. Es gibt aber auch etliche Designer, die Dir zu einer völlig individuellen Animation verhelfen können.
2. Diagramm
Avada bietet 7 verschiedene Möglichkeiten numerische Daten zu visualisieren. Zur Verfügung stehen die Typen: Balken, horizontaler Balken, Linie, Kreis, Donut, Radar oder Polar. Alle sind individuell an Deine Bedürfnisse anpassbar.
In unserem Beispiel siehst Du ein Doughnut-Diagramm (die deutsche Schreibweise ist Donut).
3. Progress Bar
Dieses Element mit den Fortschrittsbalken eignet sich gut, um das Interesse des Besuchers zu wecken und ihm verschiedene Informationen anzuzeigen.
Wie Du oben siehst, kann man zum Beispiel aufzeigen wie ausgeprägt die eigene Qualifikation in gewissen Bereichen ist.
4. Toggles
In die Toggles kann man zum Beispiel beliebigen Text einfügen wie hier als Beispiel der Platzhaltertext.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Du kannst hier einfach Bilder, Grafiken oder Viedeos einblenden. Aber auch komplexere Layouts sind in den Toggles möglich.
Die Toggles sind dazu gedacht gewisse Inhalte Deiner Website ein- oder auszublenden. Zum einen sind sie ein schickes Gestaltungselement, mit vielfältigen Darstellungsmöglichkeiten. Zum anderen ermöglichen sie es Dir, die „Länge“ Deiner Seite zu verringern. Vor allem für mehr Nutzerfreundlichkeit auf dem Handy kann es hilfreich sein, wenn man diverse Texte erst einmal ausblendet. Dann muss man nicht so lange scrollen, um zum gewünschten Bereich der Seite zu gelangen.
Counter Circles eigenen sich ausgezeichnet dem Besucher Deiner Website verschiedene Arten von Daten anzuzeigen. Die Zählerkreise können beliebige Textinformationen oder individualisierbare Icons enthalten.
6. Counter Boxes
Auch die Counter Boxes ziehen die Aufmerksamkeit des Betrachters auf sich und bieten Dir die Möglichkeit unterschiedliche Daten darzustellen. Man kann sie mit Icons kombinieren, ihnen Rahmen zuweisen und beliebige Farben wählen.
7. Countdown
Dieses Element liefert Dir die optimale Möglichkeit Deinen Besuchern einen aktiven Countdown bis zu einem bestimmten Event anzuzeigen. Ein Countdown kann also den Abverkauf von Tickets oder die Buchung eines Seminars unterstützen. Die Hintergründe, Farben, und Texte lassen sich beliebig anpassen.
9. Animierte Icons
Gleitende Icons
Drehende Icons
Hover-Effekt
Icons können mit Avada verschieden animiert werden. Man kann sie zum Beispiel drehen, hüpfen, springen oder blinken lassen oder ihnen interessante Hover-Effekte (= wenn man mit der Maus über das Icon fährt) zuweisen. Dezent eingesetzt können sie eine Bereicherung für Deine Website sein.
10. Parallax Scrolling
Man kann dem Hintergrund in Avada einen Parallax-Scrolling-Effekt zuweisen. Dadurch bewegt er sich in einer anderen Geschwindigkeit als der Vordergrund und es entsteht eine Art 3D Effekt. Es gibt Einstellungen für verschiedene Bereiche Deiner Website. Unser Beispiel zeigt den Effekt für das Hintergrundbild eines Containers.
Fazit
Grundsätzlich gilt: Animationen richtig auf der Website eingesetzt, können einen klaren Mehrwert bringen. Man sollte aber auf alle Fälle nicht übertreiben bei der Verwendung. Hier gilt die Redewendung – weniger ist oft mehr. Animationen gezielt als Eyecatcher eingesetzt, sollen Interesse für den Inhalt Deiner Website generieren und ihn unterstützen, nicht aber davon ablenken. Und letztlich solltest Du natürlich noch darauf achten, dass die Animationen gut zum allgemeinen Stil Deiner Website passen.
Wir wünschen Dir viel Spaß bei der Auswahl passender Animationen für Dein Projekt.
Weiterführende Hilfe
- Hast Du eine konkrete Frage?
- Ist heute etwas passiert, sodass Du Dich über dieses Thema informierst?
- Wie schwierig ist es für Dich eine gute Lösung zu finden?
Erhalte unverbindliche Lösungsansätze in einem kostenlosen Erstgespräch mit der Webgeist B2B SEO Agentur..