Einfaches Hinzufügen von CSS-Animationen in WordPress

Möchten Sie CSS-Animationen in WordPress hinzufügen?

Sie können Animationen verwenden, um die Aufmerksamkeit der Besucher zu wecken und die wichtigsten Inhalte einer Seite hervorzuheben. Sie können Kunden auch dazu ermutigen, auf Ihre Call-to-Action-Schaltflächen und Links zu klicken.

In diesem Tutorial zeigen wir Ihnen, wie Sie ganz einfach CSS-Animationen in WordPress hinzufügen können.

Warum CSS-Animationen in WordPress hinzufügen?

Sie können CSS-Animationen verwenden, um die Aufmerksamkeit des Besuchers auf verschiedene Teile einer Seite zu lenken. Wenn Sie z. B. einen Online-Shop betreiben, können Animationen die wichtigsten Merkmale oder Verkaufsargumente eines Produkts hervorheben. Das kann das Benutzererlebnis verbessern und Ihnen mehr Umsatz bescheren.

Animationen heben auch Ihre CTAs hervor, was Ihnen helfen kann, ein bestimmtes Ziel zu erreichen, z. B. mehr Leute dazu zu bringen, Ihren E-Mail-Newsletter zu abonnieren.

Sie können CSS-Animationen in das Stylesheet Ihres WordPress-Themes oder Child-Themes einfügen. Dies ist jedoch sehr zeit- und arbeitsaufwändig und kann das Design und sogar die Funktion Ihrer Website beeinträchtigen, wenn Sie einen Fehler machen.

Sehen wir uns also an, wie Sie Ihrer WordPress-Website ganz einfach CSS-Animationen hinzufügen können. Wenn Sie es vorziehen, direkt zu einer bestimmten Methode zu springen, dann können Sie die unten stehenden Links verwenden:

Methode 1: Wie man jeden WordPress-Block leicht animiert (schnell und einfach)

Der einfachste Weg, eine einfache CSS-Animation hinzuzufügen, ist die Verwendung von Blocks Animation.

Mit diesem kostenlosen Animations-Plugin können Sie jedem Block eine Eingangsanimation hinzufügen, ohne eine einzige CSS-Zeile schreiben zu müssen. Außerdem bietet es eine Animation zum Tippen und einen Effekt im Stil einer Laufschrift, den Sie zu Text und Zahlen hinzufügen können.

Zunächst müssen Sie das kostenlose Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unseren Leitfaden für Einsteiger zur Installation eines WordPress-Plugins.

Nach der Aktivierung öffnen Sie eine beliebige Seite oder einen Beitrag im WordPress-Block-Editor. Klicken Sie dann einfach auf den Block, den Sie animieren möchten, und wählen Sie die Registerkarte „Block“ im rechten Menü.

Sie werden sehen, dass dieses Menü einen neuen Abschnitt „Animationen“ enthält.

Klicken Sie einfach darauf, um den Abschnitt „Animationen“ zu erweitern, und Sie sehen drei verschiedene Optionen: Animationen, Animationen zum Zählen und Animationen zum Tippen.

Animationen“ sind kurze Effekte, die einmal beim Laden der Seite abgespielt werden. Um diese Art von Eingangsanimation zu Ihrem WordPress-Blog hinzuzufügen, klicken Sie einfach auf das Dropdown-Menü neben „Animation“.

Es öffnet sich ein Menü, in dem Sie die gewünschte Animation auswählen können.

Der WordPress-Editor zeigt eine Vorschau der Animation an, so dass Sie verschiedene Optionen ausprobieren können, um zu sehen, was am besten aussieht.

Standardmäßig wird die Eingangsanimation abgespielt, sobald die Seite geladen ist, aber Sie können eine Verzögerung hinzufügen, wenn Sie dies wünschen. Wenn Sie mehrere Animationen auf einer Seite verwenden, können Sie sogar Verzögerungen einsetzen, um die Animationen zu staffeln, damit sie nicht überladen wirken.

Öffnen Sie einfach das Dropdown-Menü „Verzögerung“ und wählen Sie eine Zeit aus der Liste.

Sie können die Animation auch schneller oder langsamer machen, indem Sie die Dropdown-Liste „Geschwindigkeit“ verwenden.

Während Sie verschiedene Einstellungen ausprobieren, können Sie die Animation jederzeit in der Vorschau ansehen, indem Sie auf „Animation wiederholen“ klicken.

Das Plugin verfügt auch über „Zählanimationen“ und „Tippanimationen“.

Mit Typing Animations können Sie Text animieren, während Count Animations Zahlen einen tickerähnlichen Effekt hinzufügen. Diese Animationen funktionieren mit jedem Gutenberg-Block, der Text oder Zahlen unterstützt, sodass Sie sie zur Animation von Schaltflächen, Bildunterschriften, Überschriften und mehr verwenden können.

Um einen dieser Effekte hinzuzufügen, markieren Sie zunächst den Text oder die Zahlen, die Sie animieren möchten. Klicken Sie dann auf den Abwärtspfeil in der kleinen Symbolleiste.

Sie können nun „Zählanimationen“ oder „Tippanimationen“ aus dem Dropdown-Menü auswählen.

Wenn diese Optionen ausgegraut sind, vergewissern Sie sich, dass Sie den richtigen Inhalt hervorgehoben haben. Sie können zum Beispiel nicht „Animation zählen“ auswählen, wenn Sie nur Text markiert haben.

Nachdem Sie die Animation hinzugefügt haben, können Sie die Geschwindigkeit ändern und eine optionale Verzögerung hinzufügen, indem Sie die Dropdown-Menüs in dem kleinen Popup verwenden.

In der folgenden Abbildung wird zum Beispiel eine Verzögerung von einer Sekunde verwendet.

Wenn Sie bereit sind, die CSS-Animation live zu schalten, klicken Sie entweder auf die Schaltfläche „Veröffentlichen“ oder „Aktualisieren“, um die Animationen auf Ihrer Website anzuwenden. Wenn Sie nun Ihre WordPress-Website besuchen, werden Sie die Animation live sehen.

Methode 2: Hinzufügen von CSS-Animationen zu benutzerdefinierten Seiten (empfohlen)

Wenn Sie einfache Animationen zu den integrierten WordPress-Blöcken hinzufügen möchten, ist Blocks Animation eine gute Wahl. Wenn Sie jedoch die Aufmerksamkeit der Besucher wirklich erregen, die Besucher auf Ihrer Website halten und mehr Konversionen erzielen möchten, empfehlen wir SeedProd.

SeedProd ist das beste Seitenerstellungs-Plugin, mit dem Sie wunderschöne Landing Pages, Verkaufsseiten, eine Homepage und vieles mehr mit einem einfachen Drag-and-Drop-Editor erstellen können.

Er enthält auch einen Block „Animierte Überschrift“, mit dem Sie rotierende und hervorgehobene animierte Überschriften erstellen können.

Trotz des Namens können Sie den Block Animierte Überschrift verwenden, um einen beliebigen Text zu animieren, z. B. eine Handlungsaufforderung, eine Zwischenüberschrift oder einen anderen Text, den Sie hervorheben möchten.

SeedProd enthält außerdem über 40 Eingangsanimationen, die Sie zu jedem Block hinzufügen können, einschließlich Bildern, Text, Schaltflächen, Videos und mehr.

Sie können sogar ganze Abschnitte und Spalten mit nur wenigen Klicks animieren. Auf diese Weise können Sie innerhalb weniger Minuten ansprechende animierte Seiten erstellen.

Wenn Sie Animationen verwenden, um mehr Konversionen und Verkäufe zu erzielen, dann lässt sich SeedProd mit WooCommerce integrieren. Es unterstützt auch viele der wichtigsten E-Mail-Marketing-Dienste, die Sie möglicherweise bereits zur Bewerbung Ihrer Website verwenden.

So richten Sie den SeedProd Page Builder ein

Als Erstes müssen Sie SeedProd installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Bei der Aktivierung müssen Sie Ihren Lizenzschlüssel eingeben.

Sie können diese Informationen in Ihrem Konto auf der SeedProd-Website finden. Nachdem Sie den Lizenzschlüssel hinzugefügt haben, klicken Sie einfach auf „Schlüssel überprüfen“.

Erstellen eines benutzerdefinierten Seitendesigns

Um zu beginnen, gehen Sie zu SeedProd “ Landing Pages und klicken Sie auf „Neue Landing Page hinzufügen“.

Auf dem nächsten Bildschirm werden Sie aufgefordert, eine Vorlage auszuwählen.

SeedProd enthält über 180 wunderschöne Vorlagen, die in verschiedene Kategorien unterteilt sind, wie z. B. 404-Seiten-Vorlagen und benutzerdefinierte WooCommerce-Dankeschön-Seiten.

In dieser Anleitung zeigen wir Ihnen, wie Sie eine Verkaufsseite mit animiertem Text und Eingangsanimationen erstellen, aber die Schritte sind ähnlich, egal welche Art von Seite Sie erstellen.

Klicken Sie einfach auf eine beliebige Registerkarte, um die verschiedenen Vorlagen innerhalb dieser Kategorie anzuzeigen.

Wenn Sie eine Vorlage gefunden haben, die Sie verwenden möchten, fahren Sie einfach mit der Maus darüber und klicken Sie auf das Häkchen.

Wir verwenden für alle unsere Bilder die Vorlage „Zen Sales Page“, aber Sie können jede beliebige Vorlage verwenden.

Als nächstes müssen Sie der Seite einen Titel geben.

SeedProd erstellt automatisch eine URL, die auf dem Seitentitel basiert, aber Sie können diese nach Belieben ändern. Das Hinzufügen von relevanten Schlüsselwörtern zu einer URL kann zum Beispiel oft Ihre WordPress-SEO verbessern und dazu beitragen, dass die Seite in relevanten Suchergebnissen erscheint.

Weitere Informationen finden Sie in unserem Leitfaden für die Keyword-Recherche für Ihren WordPress-Blog.

Wenn Sie mit dem Titel und der URL zufrieden sind, klicken Sie auf „Speichern und mit der Bearbeitung der Seite beginnen“.

Dadurch wird der SeedProd-Drag-and-Drop-Seiteneditor geladen.

Auf der rechten Seite sehen Sie eine Live-Vorschau des Seitendesigns, auf der linken Seite einige Einstellungen.

SeedProd wird mit vielen Blöcken geliefert, die Sie Ihrem Design hinzufügen können, darunter Blöcke, mit denen Sie Schaltflächen für soziale Netzwerke, Videos, Kontaktformulare und vieles mehr hinzufügen können.

Weitere Informationen finden Sie in unserer Anleitung zum Erstellen einer benutzerdefinierten Seite in WordPress.

Wie man animierten Text zu WordPress hinzufügt

Um der Seite einen animierten Text hinzuzufügen, suchen Sie den Block Animierte Überschrift und ziehen Sie ihn auf Ihren Seitenentwurf.

Es gibt zwei Möglichkeiten, Ihre Überschrift zu animieren. Erstens fügt der Stil „Hervorgehoben“ Ihrem Text eine Formanimation hinzu, z. B. einen Kreis oder einen unterstrichenen Zickzack.

Sie können diese Animation verwenden, um die Aufmerksamkeit auf ein bestimmtes Wort oder einen Satz in der Überschrift zu lenken. Dadurch wird Ihre Überschrift leichter zu lesen und zu verstehen, da der wichtigste Inhalt hervorgehoben wird. Es ist auch eine gute Möglichkeit, die Aufmerksamkeit auf eine Handlungsaufforderung zu lenken.

Der Stil Hervorgehoben hat auch einige durchgestrichene Formen.

Sie können Durchstreichungen verwenden, um interessante und auffällige Effekte zu erzielen, oder einfach nur, um Ihrem Design etwas Spaß zu verleihen.

Um eine hervorgehobene Animation zu erstellen, öffnen Sie einfach das Dropdown-Menü „Stil“ und wählen Sie „Hervorgehoben“.

Öffnen Sie als nächstes das Dropdown-Menü „Form“ und wählen Sie eine Form aus. Wenn Sie auf eine Form klicken, zeigt SeedProd eine Vorschau dieser Animation an, sodass Sie verschiedene Formen ausprobieren können, um zu sehen, welche Ihnen am besten gefällt.

SeedProd verfügt auch über einen Animationsstil „Rotierend“, der dem Text einen Übergangseffekt verleiht.

Animierter Text ist oft das erste, was Besucher sehen, wenn eine Seite geladen wird. Daher ist dies eine gute Möglichkeit, den wichtigsten Text hervorzuheben.

Um eine Übergangsanimation zu erstellen, öffnen Sie einfach das Dropdown-Menü „Stil“ und klicken Sie auf „Rotierend“.

Sie können dann die Dropdown-Liste „Animation“ öffnen und die Art des Übergangs auswählen, die Sie verwenden möchten, z. B. Überblenden, Zoomen oder Rollen. Auch hier spielt SeedProd die Animation im Seiteneditor ab, so dass Sie verschiedene Effekte ausprobieren können, um zu sehen, welche Sie bevorzugen.

Unabhängig davon, ob Sie eine „Hervorgehoben“- oder eine „Dreh“-Animation erstellen, können Sie Text vor und nach dem animierten Text hinzufügen.

Geben Sie einfach in die Felder „Vor Überschrift“ und „Nach Überschrift“ ein. Fügen Sie in das Feld „Text“ das Wort oder den Satz ein, den Sie animieren möchten.

Wenn Sie die gesamte Überschrift animieren möchten, lassen Sie die Felder „Vor Überschrift“ und „Nach Überschrift“ einfach leer.

Standardmäßig spielt SeedProd die Animation in einer Schleife ab, was manche Besucher als störend empfinden könnten.

Um die Animation nur einmal abzuspielen, deaktivieren Sie den Schalter „Endlosschleife“.

Standardmäßig wird die Animation 1200 Millisekunden lang nach einer Verzögerung von 8000 Millisekunden abgespielt.

Um andere Werte zu verwenden, geben Sie in die Felder „Dauer“ und „Verzögerung“ ein. Sie können zum Beispiel die Animation schneller machen, indem Sie eine kürzere Dauer verwenden.

Möglicherweise möchten Sie den Text auch gestalten. Sie können zum Beispiel die Schriftgröße und die Ausrichtung ändern.

Wenn Sie mit dem Aussehen der animierten Überschrift zufrieden sind, klicken Sie auf die Schaltfläche „Speichern“, um Ihre Änderungen zu speichern.

Eingangsanimationen in WordPress hinzufügen

Eingangsanimationen werden beim ersten Laden der Seite abgespielt und sind daher eine gute Möglichkeit, die Aufmerksamkeit des Besuchers zu wecken.

Sie können sie auch verwenden, um die Inhalte hervorzuheben, die sich die Besucher zuerst ansehen sollten. Wenn Sie z. B. einen Online-Marktplatz betreiben, können Sie das Hero-Bild des Produkts oder das Banner für den Black Friday Sale animieren.

Klicken Sie im SeedProd-Editor einfach auf den Inhalt, den Sie animieren möchten, und wählen Sie dann im linken Menü die Registerkarte „Erweitert“.

Anschließend können Sie den Bereich „Animationseffekte“ erweitern.

Danach wählen Sie einfach eine Animation aus dem Dropdown-Menü „Eingangsanimation“.

Sie können nun Eingangsanimationen zu jedem Block, Abschnitt oder jeder Spalte hinzufügen, indem Sie einfach den oben beschriebenen Prozess befolgen.

Veröffentlichen Sie Ihre CSS-Animationen in WordPress

Wenn Sie mit der Einrichtung der Seite zufrieden sind, klicken Sie auf das Dropdown-Menü der Schaltfläche „Speichern“ und wählen Sie „Veröffentlichen“.

Sie können nun diese Seite besuchen, um die CSS-Animationen live zu sehen.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie man CSS-Animationen in WordPress hinzufügt. Vielleicht möchten Sie auch unseren ultimativen Leitfaden zur Steigerung von Geschwindigkeit und Leistung oder unsere Liste der häufigsten WordPress-Fehler und deren Behebung lesen.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.