CSS-Animationen in WordPress einfach hinzufügen

Im Laufe der Jahre haben wir mit verschiedenen Methoden experimentiert, um WordPress-Websites interaktiver zu gestalten. Wenn Sie die Aufmerksamkeit Ihrer Besucher auf sich ziehen möchten, können Animationen sehr effektiv sein.

Sie können Animationen verwenden, um die Aufmerksamkeit eines Besuchers zu erregen und die wichtigsten Inhalte einer Seite hervorzuheben. Dies kann Kunden auch dazu ermutigen, auf Ihre Call-to-Action-Buttons und Links zu klicken.

Glücklicherweise ist es auch einfach, Animationen in WordPress einzurichten, selbst wenn Sie keine Programmierkenntnisse haben.

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 Bereiche einer Seite zu lenken. Wenn Sie beispielsweise einen Online-Shop haben, können Animationen die wichtigsten Merkmale oder Verkaufsargumente eines Produkts hervorheben. Dies kann die Benutzererfahrung verbessern und den Umsatz steigern.

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

Sie können CSS-Animationen zur Stylesheet Ihres WordPress-Themes oder Child-Themes hinzufügen. Dies erfordert jedoch viel Zeit und Mühe, und wenn Sie einen Fehler machen, kann dies das Design und sogar die Funktion Ihrer Website beeinträchtigen.

Mit diesen Worten wollen wir sehen, wie Sie ganz einfach CSS-Animationen zu Ihrer WordPress-Website hinzufügen können. Wenn Sie lieber direkt zu einer bestimmten Methode springen möchten, können Sie die folgenden Links verwenden:

• Methode 1: So animieren Sie ganz einfach jeden WordPress-Block (schnell und einfach)
• Methode 2: CSS-Animationen zu benutzerdefinierten Seiten hinzufügen (empfohlen)

Methode 1: So animieren Sie jeden WordPress-Block ganz einfach (Schnell und einfach)

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

Dieses kostenlose Animations-Plugin ermöglicht es Ihnen, jeder Blockanimation eine Eingangsanimation hinzuzufügen, ohne eine einzige Zeile CSS schreiben zu müssen. Es verfügt auch über eine Tippanimation und einen Ticker-Effekt, die Sie Text und Zahlen hinzufügen können.

Installieren und aktivieren Sie zuerst das kostenlose Plugin Blocks Animation. Wenn Sie Hilfe benötigen, lesen Sie bitte unseren Anfängerleitfaden zur Installation eines WordPress-Plugins.

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

Sie sehen, dass dieses Menü einen neuen Abschnitt 'Animationen' hat.

Klicken Sie einfach, um den Abschnitt „Animationen“ zu erweitern, und Sie sehen drei verschiedene Optionen: Animationen, Zähl-Animationen und Tipp-Animationen.

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

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

Der WordPress-Editor zeigt eine Vorschau der Animation an, sodass 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 bei Bedarf eine Verzögerung hinzufügen. Wenn Sie mehrere Animationen auf derselben Seite verwenden, können Sie sogar Verzögerungen verwenden, um sie zu staffeln, damit sie nicht überwältigend wirken.

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

Sie können die Animation auch mit dem Dropdown-Menü 'Geschwindigkeit' schneller oder langsamer machen.

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

Das Plugin bietet auch 'Zähl-Animationen' und 'Tipp-Animationen'.

Tippanimationen ermöglichen es Ihnen, Text zu animieren, während Zähl-Animationen einen Ticker-Effekt zu Zahlen hinzufügen. Diese Animationen funktionieren mit jedem Gutenberg-Block, der Text oder Zahlen unterstützt, sodass Sie sie zum Animieren von Schaltflächen, Bildunterschriften, Überschriften und mehr verwenden können.

Um einen dieser Effekte hinzuzufügen, beginnen Sie damit, den Text oder die Zahlen hervorzuheben, die Sie animieren möchten. Klicken Sie dann auf den nach unten gerichteten Pfeil in der kleinen Symbolleiste.

Sie können nun 'Zähl-Animationen' oder 'Tipp-Animationen' aus dem Dropdown-Menü auswählen.

Wenn diese Optionen ausgegraut sind, stellen Sie sicher, dass Sie den richtigen Inhalt hervorgehoben haben. Sie können beispielsweise „Zähl-Animation“ nicht auswählen, wenn Sie nur Text hervorgehoben haben.

Nachdem Sie die Animation hinzugefügt haben, können Sie die Dropdown-Menüs im kleinen Popup verwenden, um die Geschwindigkeit zu ändern und eine optionale Verzögerung hinzuzufügen.

Im folgenden Bild verwenden wir beispielsweise eine Verzögerung von einer Sekunde.

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

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

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

SeedProd ist das beste Page-Builder-Plugin, mit dem Sie schöne Landing Pages, Verkaufseiten, eine Startseite und mehr mit einem einfachen Drag-and-Drop-Editor erstellen können.

Es kommt auch mit einem 'Animated Headline'-Block, den Sie verwenden können, um rotierende und hervorgehobene animierte Schlagzeilen zu erstellen.

Trotz des Namens können Sie den Block "Animierte Überschrift" verwenden, um jeden Text zu animieren, einschließlich eines Call-to-Action, einer Unterüberschrift oder eines anderen Textes, den Sie hervorheben möchten.

SeedProd bietet auch über 40 Eingangsanimationen, die Sie jedem Block hinzufügen können, einschließlich Bildern, Texten, Schaltflächen, Videos und mehr.

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

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

So richten Sie den SeedProd Page Builder ein

Das Erste, was Sie tun müssen, ist SeedProd zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

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

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

Ein benutzerdefiniertes Seitendesign erstellen

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 bietet über 350 schöne Vorlagen, die in verschiedene Kategorien unterteilt sind, wie z. B. 404-Seiten-Vorlagen und benutzerdefinierte WooCommerce „Danke“-Seiten.

In diesem Leitfaden zeigen wir Ihnen, wie Sie eine Verkaufsseite mit animiertem Text und Eingangsanimationen erstellen. Die Schritte sind jedoch bei jeder Art von Seite, die Sie erstellen, ähnlich.

Klicken Sie einfach auf eine 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 dann auf das Häkchen-Symbol.

Wir verwenden in allen unseren Bildern 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 basierend auf dem Seitentitel, aber Sie können diese in alles ändern, was Sie möchten. Zum Beispiel kann das Hinzufügen relevanter Schlüsselwörter zu einer URL oft Ihre WordPress SEO verbessern und dazu beitragen, dass die Seite in relevanten Suchergebnissen erscheint.

Um mehr zu erfahren, lesen Sie bitte unseren Leitfaden zum Thema Keyword-Recherche für Ihren WordPress-Blog.

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

Dies lädt den SeedProd Drag-and-Drop-Seiteneditor.

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

SeedProd bietet viele Blöcke, die Sie Ihrem Design hinzufügen können, einschließlich Blöcken, die es Ihnen ermöglichen, Social-Share-Buttons, Videos, Kontaktformulare und mehr hinzuzufügen.

Weitere Informationen finden Sie in unserem Leitfaden zum Thema Erstellen einer benutzerdefinierten Seite in WordPress.

Wie man animierten Text zu WordPress hinzufügt

Um der Seite animierten Text hinzuzufügen, suchen Sie den Block „Animierte Überschrift“ und ziehen Sie ihn auf Ihr Seitendesign.

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

Sie können diese Animation verwenden, um die Aufmerksamkeit auf ein bestimmtes Wort oder eine bestimmte Phrase in der Überschrift zu lenken. Dies kann Ihre Überschrift leichter lesbar und verständlich machen, indem die wichtigsten Inhalte hervorgehoben werden. Es ist auch eine großartige Möglichkeit, die Aufmerksamkeit auf einen Call-to-Action zu lenken.

Der Stil „Hervorgehoben“ hat auch einige Durchstreichformen.

Sie können Durchstreichungen verwenden, um interessante und auffällige Effekte zu erzielen, oder es kann einfach etwas Spaß in Ihr Design bringen.

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 hat auch einen Animationsstil „Rotierend“, der dem Text einen Übergangseffekt hinzufügt.

Oft ist animierter Text das Erste, worauf Besucher achten, wenn eine Seite geladen wird. Es ist also eine großartige Möglichkeit, den wichtigsten Text hervorzuheben.

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

Sie können dann das Dropdown-Menü „Animation“ öffnen und den gewünschten Übergangstyp auswählen, z. B. Ausblenden, Zoomen oder Rollen. SeedProd spielt die Animation erneut im Seiten-Editor ab, sodass Sie verschiedene Effekte ausprobieren können, um zu sehen, welcher Ihnen am besten gefällt.

Egal, ob Sie eine 'Hervorgehobene' oder 'Rotierende' Animation erstellen, Sie können Text vor und nach dem animierten Text hinzufügen.

Geben Sie einfach in die Felder 'Vor der Überschrift' und 'Nach der Überschrift' ein. Geben Sie im Feld 'Text' das Wort oder die Phrase ein, die Sie animieren möchten.

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

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

Um die Animation nur einmal abzuspielen, klicken Sie auf den Schalter „Endlosschleife“, um ihn zu deaktivieren.

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

Um andere Werte zu verwenden, geben Sie diese in die Felder „Dauer“ und „Verzögerung“ ein. Sie können die Animation beispielsweise beschleunigen, indem Sie eine kürzere Dauer verwenden.

Möglicherweise möchten Sie auch den Text formatieren. Sie können zum Beispiel die Schriftgröße und 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, sodass sie eine großartige Möglichkeit sind, die Aufmerksamkeit des Besuchers zu erregen.

Sie können sie auch verwenden, um Inhalte hervorzuheben, auf die Besucher zuerst achten sollen. Wenn Sie beispielsweise einen Online-Marktplatz haben, können Sie das Hero-Bild des Produkts oder das Banner, das Ihren Black Friday-Sale bewirbt, animieren.

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

Sie können dann fortfahren und klicken, um den Abschnitt „Animationseffekte“ zu erweitern.

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

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

Veröffentlichen Sie Ihre CSS-Animationen in WordPress

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

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

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie CSS-Animationen in WordPress hinzufügen. Möglicherweise möchten Sie auch unseren Leitfaden zum Thema Hinzufügen eines animierten Hintergrunds in WordPress oder die wichtigen WordPress-Designelemente, die jede Website benötigt, ansehen.

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