Lottie-Animationen sind leichte, JSON-basierte Animationen, die mit dem von Airbnb entwickelten Lottie-Framework erstellt wurden. Diese Animationen sind klein und behalten auch beim Skalieren eine hohe Qualität bei, was sie ideal für die Verbesserung des Benutzererlebnisses auf Websites und mobilen Anwendungen macht.
Um Lottie-Animationen in WordPress einzufügen, können Sie die folgenden Schritte ausführen:
Laden Sie die Lottie-Animationsdatei herunter:
Laden Sie zunächst die Lottie-Animationsdatei herunter, die Sie verwenden möchten. Lottie-Animationen sind auf verschiedenen Plattformen und Marktplätzen zu finden.
In JSON-Format konvertieren:
Sobald Sie die Animationsdatei haben, konvertieren Sie sie in das JSON-Format, falls sie noch nicht in diesem Format vorliegt. Zu diesem Zweck stehen Online-Konverter zur Verfügung, oder Sie können das Befehlszeilentool von Lottie verwenden.
Laden Sie die JSON-Datei in die WordPress-Medienbibliothek hoch:
Melden Sie sich bei Ihrem WordPress-Dashboard an und navigieren Sie zu „Medien“> „Neu hinzufügen“. Laden Sie hier die JSON-Datei mit Ihrer Lottie-Animation hoch.
Shortcode kopieren:
Navigieren Sie nach dem Hochladen der JSON-Datei zur Medienbibliothek und suchen Sie die Lottie-Animation, die Sie gerade hochgeladen haben. Klicken Sie auf den Link „Bearbeiten“ unter der Animationsvorschau, um die Details anzuzeigen.
In den Animationsdetails finden Sie den Shortcode zum Einbetten der Animation. Kopieren Sie den bereitgestellten Shortcode.
Shortcode in Inhalt einfügen:
Öffnen Sie den Beitrag oder die Seite, auf der Sie die Lottie-Animation einfügen möchten. Platzieren Sie im WordPress-Editor den Cursor an der gewünschten Einfügemarke.
Klicken Sie in der Symbolleiste des WordPress-Editors auf die Schaltfläche „Medien hinzufügen“.
Wählen Sie im linken Menü „Einbetten“ und wechseln Sie zur Registerkarte „Code einbetten“.
Fügen Sie den Lottie-Animations-Shortcode in das Feld „Einbettungscode“ ein.
Klicken Sie auf die Schaltfläche „In Beitrag einfügen“ oder „In Seite einfügen“.
Ihre Lottie-Animation wird nun an der gewählten Stelle in Ihren WordPress-Inhalt eingebettet.
Update und Vorschau:
Aktualisieren Sie Ihren Beitrag oder Ihre Seite, und die Lottie-Animation sollte wie vorgesehen angezeigt werden.
Hinweis:Einige WordPress-Themes verfügen möglicherweise über integrierte Funktionen zum einfachen Einfügen von Lottie-Animationen. Sehen Sie in Ihrer Theme-Dokumentation nach, ob sie solche Optionen bietet.
Wenn Sie diese Schritte befolgen, können Sie Lottie-Animationen nahtlos in Ihre WordPress-Website einfügen und fesselnde und ansprechende Elemente hinzufügen, um das Benutzererlebnis zu verbessern.
