So fügen Sie CSS-Animationen einfach in WordPress hinzu

Haben Sie diese schönen CSS-Animationen auf beliebten Websites gesehen? Animierte Effekte wie das Verschieben von Inhalten, das Einblenden von Feature-Boxen, das Prellen von Bildern usw. In diesem Artikel zeigen wir Ihnen, wie Sie CSS-Animationen in WordPress hinzufügen, ohne Code schreiben zu müssen.

Wann und warum sollten Sie CSS-Animationen verwenden??

Mit CSS-Animationen können Sie die Aufmerksamkeit der Benutzer auf verschiedene Bereiche der Seite ziehen.

Sie können sie verwenden, um Produktfunktionen zu animieren oder eine Aktionsschaltfläche aufzurufen.

Viele Websites verwenden CSS-Animationen, wenn Benutzer eine Seite nach unten scrollen. Dies fügt der Seite ein Storytelling-Element hinzu, dessen Elemente mit dem Scrollen der Benutzer fortschreiten.

CSS-Animationen sind auch schneller als Flash oder Videos. Sie werden schnell geladen und werden von den meisten modernen Webbrowsern unterstützt.

Sie können CSS-Animationen manuell zu Ihrem WordPress-Theme oder Stylesheet des Child-Themes hinzufügen. Die meisten Anfänger möchten ihre Themendateien jedoch nicht bearbeiten oder Zeit damit verbringen, CSS zu lernen.

Sehen wir uns jedoch an, wie Sie CSS-Animationen problemlos zu Ihrer WordPress-Site hinzufügen können.

CSS Animate einrichten Plugin

Wir werden ein Plugin für dieses Tutorial verwenden. Sie können CSS-Animationen mit einem WYSIWYG-Editor erstellen.

Als erstes müssen Sie das Animate it installieren und aktivieren! Plugin. Das Plugin ist sofort einsatzbereit und Sie müssen keine Einstellungen vornehmen.

Erstellen Sie einfach einen neuen Beitrag und Sie werden eine neue Schaltfläche in Ihrem WordPress-Editor mit der Bezeichnung "Animate it!" Sehen..

Wenn Sie auf die Schaltfläche klicken, wird ein Popup-Fenster geöffnet, in dem Sie Ihre CSS-Animation entwerfen können. Das Plugin unterstützt viele CSS-Animationen, aus denen Sie auswählen können.

Zuerst müssen Sie einen Animationsstil auswählen. Danach müssen Sie die Animationsverzögerung und -dauer auswählen. Zum Schluss müssen Sie auswählen, wann die Animation erscheinen soll.

Das Plugin bietet drei Möglichkeiten. Sie können die Animation mit einem Klick-, Hover- oder Scroll-Offset ausführen.

Wenn Sie mit den Einstellungen zufrieden sind, können Sie auf die Schaltfläche Animieren klicken, um eine Vorschau der Animation anzuzeigen.

Klicken Sie anschließend auf die Schaltfläche Einfügen, um die Animation Ihrem WordPress-Beitrag oder Ihrer Seite hinzuzufügen. Sie werden feststellen, dass das Plugin einen Kurzcode mit Dummy-Inhalt in den Post-Editor einfügt.

Sie müssen den Dummy-Inhalt im Shortcode löschen und durch Ihren eigenen Inhalt, Ihre eigenen Bilder oder andere Elemente, die Sie animieren möchten, ersetzen.

Jetzt können Sie den Beitrag speichern oder veröffentlichen und dann auf die Vorschau-Schaltfläche klicken. Sie werden Ihre Inhalte schön animiert sehen.

Wir hoffen, dass Sie mit diesem Artikel erfahren haben, wie Sie CSS-Animationen problemlos in WordPress hinzufügen. Vielleicht möchten Sie auch einen Vergleich der fünf besten Drag & Drop-Seitenersteller sehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unsere Video-Tutorials für unseren YouTube-Kanal für WordPress. Sie finden uns auch auf Twitter und Facebook.