In letzter Zeit gewinnt der Trend, Animationen auf Websites zu verwenden, immer mehr an Popularität. Und langweilig wird es schon, wenn alles statisch ist und sich auf den Seiten nichts bewegt.
In diesem Artikel wird es über Animation diskutiert. Nämlich, wie Sie eine schöne und trendige Animation auf Ihrer Website erstellen. Und noch einmal, um solche Animationseffekte zu erstellen, benötigen Sie keine Kenntnisse in Programmierungssprachen oder HTML und CSS. Alles ist sehr einfach und übersichtlich.
Wo Animation verwendet wird
Und bevor ich direkt zu den Anweisungen übergehe, mache ich einen kleinen Exkurs und sage Ihnen, in welchen Elementen Animation verwendet wird.
Alle Seitenelemente, die am häufigsten animiert werden, können in zwei große Gruppen unterteilt werden.
Die erste Gruppe sind Bilder und Illustrationen. In der Regel sind das eher große Elemente, die den Inhalt bilden.
Und die zweite Gruppe sind Navigationselemente und Symbole. Dies sind kleine Elemente, die dem Benutzer bei der Navigation auf der Website helfen.
Mit dieser Anleitung können Sie sowohl Animationen von Illustrationen als auch Navigationselemente erstellen.
Was brauchen wir
Neben der Site mit dem CMS WordPress benötigen wir dafür den Elementor-Editor und das Plugin – Animentor – Lottie & Bodymovin for Elementor. Ich muss gleich sagen, dass wir zur Erstellung der Animation die Sammlung animierter Bilder von Lottie verwenden werden.
Zuerst müssen Sie sich auf der Seite https://lottiefiles.com/ registrieren, da es ohne Registrierung unmöglich ist, Dateien von dort herunterzuladen.
Erstellen wir das animierte Kontent
Beginnen wir also mit der Erstellung von Animationen. Wir gehen davon aus, dass Sie bereits eine WordPress-Site und Elementor installiert haben. Der nächste Schritt ist die Installation des Plugins Animentor – Lottie & Bodymovin for Elementor. Nachdem dieses Plugin installiert und aktiviert wurde, können Sie direkt mit dem Hinzufügen von Animationen zu den Seiten fortfahren.
Zunächst gehen wir auf die Seite https://lottiefiles.com/ und wählen die gewünschte Animation aus. Danach erstellen wir eine neue Seite oder öffnen eine vorhandene im WordPress-Admin-Panel. Klicken Sie im Abschnitt Seitenbearbeitung auf die Schaltfläche In Elementor bearbeiten, woraufhin der Seiteneditor selbst geladen wird.
Um das benötigte Element zu finden, müssen Sie in der Symbolleiste von Elementor nach unten zum Abschnitt Allgemein scrollen, und ganz unten können Sie sehen, dass ein neues Element erschienen ist – Lottie.
Wir ziehen es an die Stelle, die wir brauchen. Danach sollte das Einstellungsfenster für dieses Element auf der rechten Seite der Symbolleiste erscheinen.
Im Abschnitt Inhalt haben wir zwei Abschnitte – Animation und Animationsoptionen.
Abschnitt Animation. Es hat ein Feld, in das Sie die Animationsdatei selbst hochladen können, darunter ist ihre Ausrichtung und noch niedriger ist die Möglichkeit, einen Link für dieses Element festzulegen.
Animation options. Hier richten wir die Animationsparameter ein – Geschwindigkeit, Auto-Play, Looping, Reverse sowie die Steuerung des Maus-Hover-Verhaltens.
Im Abschnitt Stil legen wir alle Animationsstile fest, passen Größe und Transparenz an, Sie können Rahmen und Schatten hinzufügen.
Und der Abschnitt Erweitert ist für die globalen Einstellungen des Elements, seine Polsterung, sein Aussehen, seinen Hintergrund usw. verantwortlich. So haben wir eine schöne und modische Animation erstellt, ohne in den Programmcode einzusteigen.
So lassen sich animierte Illustrationen, Icons und Navigationselemente erstellen. Dadurch wird die Website lebendig und interessant, und die Navigation wird noch visueller und attraktiver.
