So erstellen Sie Textanimationen in WordPress (einfache Schritte) 

Wenn Sie versuchen, Ihre Hauptüberschrift hervorzuheben, ohne CSS zu verwenden, sind Sie wahrscheinlich auf eine Wand gestoßen. Die meisten Anleitungen gehen davon aus, dass Sie Elementor verwenden oder dass Sie sich mit der Bearbeitung von Code auskennen.

In dieser Anleitung zeige ich Ihnen, wie Sie Textanimationen in WordPress mit drei Methoden hinzufügen: dem Animated Headline-Block von SeedProd, einem kostenlosen Gutenberg-Plugin und dem Animate It! CSS-Plugin. Wählen Sie diejenige, die zu Ihrer Einrichtung passt, und befolgen Sie die Schritte.

Was sind animierte Texteffekte und warum sollten Sie sie verwenden?

Animierte Texteffekte in WordPress sind kleine Bewegungsdesigns, die Sie auf Überschriften, Schaltflächen oder andere Textelemente anwenden können. Anstelle von statischem Text können Sie Stile wie Tippen, Gleiten, Hüpfen oder Hervorheben hinzufügen, um sofort Aufmerksamkeit zu erregen.

Diese Effekte werden durch modernes CSS angetrieben, das schnell, leichtgewichtig und von allen wichtigen Browsern unterstützt wird.

Es gibt zwei Arten von Textanimationen, die es wert sind, unterschieden zu werden: Eingangseffekte, die beim Laden der Seite ausgeführt werden, und scrollgesteuerte Animationen, die ausgelöst werden, wenn Besucher nach unten scrollen. Diese Anleitung behandelt Eingangseffekte, einschließlich rotierender und hervorgehobener Überschriften.

Die Scroll-Reveal-Funktion von SeedProd kümmert sich um scrollgesteuerte Animationen, falls Sie daran interessiert sind. Die folgenden Schritte konzentrieren sich auf Effekte, die automatisch beim Laden der Seite ausgeführt werden.

Hier sind einige praktische Möglichkeiten, Textanimationen auf Ihrer WordPress-Website zu verwenden:

• Heben Sie Sonderangebote in Ihrer Preisliste hervor
• Präsentieren Sie Produktmerkmale mit animierten Hervorhebungen
• Erstellen Sie rotierende oder tippende Überschriften, die Besucher fesseln
• Lenken Sie die Aufmerksamkeit auf wichtige Call-to-Action (CTA)-Schaltflächen
• Fügen Sie subtile Bewegungen hinzu, während Benutzer durch Ihre Inhalte scrollen

Da CSS-Animationen im Vergleich zu Video oder Flash leichtgewichtig sind, verlangsamen sie Ihre Website bei korrekter Verwendung nicht. Mit einem WordPress-Animations-Plugin oder einem Drag-and-Drop-Builder wie SeedProd können Sie diese Effekte mit nur wenigen Klicks hinzufügen, ganz ohne Programmierung.

So fügen Sie animierte Texteffekte in WordPress hinzu: 3 Wege

Es gibt verschiedene Möglichkeiten, Animationen zu WordPress hinzuzufügen. Sie können ein WordPress-Plugin verwenden oder CSS-Effekte manuell hinzufügen.

Da die manuelle Erstellung von Texteffekten für Anfänger schwierig ist, zeigen wir Ihnen, wie Sie Textanimationen mit dem Drag-and-Drop-Website-Builder von SeedProd, einem kostenlosen Animations-Plugin und dem Gutenberg-Blockeditor erstellen.

Methode	Am besten für	Kosten
SeedProd	Landing Pages, benutzerdefinierte Themes, Verkaufsseiten	Bezahlt (Pro)
Animierter Textblock	Gutenberg-Beiträge und -Seiten	Kostenlos
Animate It!	Seiten mit klassischem Editor	Kostenlos

Methode 1. Animierte Schlagzeilen mit SeedProd erstellen

Für die erste Methode verwenden wir SeedProd, den besten Website-Builder für WordPress. Mit seinem Drag-and-Drop-Website-Builder und dem Block für animierte Schlagzeilen können Sie mit wenigen Klicks aufregende Übergangseffekte hinzufügen.

SeedProd ermöglicht es Ihnen, benutzerdefinierte WordPress-Themes und responsive Layouts zu erstellen, ohne Code schreiben oder einen Entwickler beauftragen zu müssen. Es enthält leistungsstarke Inhaltsblöcke zur Anpassung von Seiten, WooCommerce-Unterstützung für E-Commerce-Shops und lässt sich nahtlos in beliebte WordPress-Plugins integrieren.

Darüber hinaus ist dieses Plugin leichtgewichtig und schlank, sodass Ihre Seitenladezeiten schnell und benutzerfreundlich sind.

Befolgen Sie die nachstehenden Schritte, um Textanimationen in WordPress mit SeedProd zu erstellen.

Schritt 1. SeedProd-Plugin installieren und aktivieren

Gehen Sie zuerst zur SeedProd Preisgestaltungs-Seite und wählen Sie eine Lizenz. Wir empfehlen SeedProd Pro wegen seiner erweiterten Funktionen.

Danach loggen Sie sich in Ihren SeedProd-Konto-Bereich ein und laden Sie das Plugin herunter. Sie können Ihren Lizenzschlüssel gleichzeitig unter dem Reiter „Downloads“ kopieren.

Installieren Sie als Nächstes das Plugin und aktivieren Sie es auf Ihrer WordPress-Site. Wenn Sie Hilfe benötigen, können Sie diese Schritte zur Installation eines WordPress-Plugins befolgen.

Nach der Aktivierung von SeedProd navigieren Sie zu SeedProd » Einstellungen, geben Sie Ihren Lizenzschlüssel ein und klicken Sie auf die Schaltfläche Schlüssel überprüfen .

Sie sind nun bereit, mit dem Erstellen einer Seite mit Animationseffekten zu beginnen.

Schritt 2. Wählen Sie eine Landingpage-Vorlage

Sie können SeedProd verwenden, um eine einzelne WordPress-Seite, ein WordPress-Theme oder eine Landing Page mit seinem visuellen Editor zu erstellen. Für diese Anleitung fügen wir Textanimationen zu einer Verkaufs-Landing-Page hinzu.

Zuerst müssen Sie zu SeedProd » Landing Pages gehen und auf die Schaltfläche Neue Landing Page hinzufügen klicken.

Hier können Sie aus über 180 mobil-responsiven Landing Page-Vorlagen wählen.

Da wir eine Verkaufsseite erstellen, klicken Sie auf die Registerkarte Verkauf, um die verschiedenen Vorlagen für Verkaufsseiten anzuzeigen. Wenn Sie eine Vorlage finden, die Ihnen gefällt, bewegen Sie den Mauszeiger, bis Sie den Hover-Effekt des Bildes sehen, und klicken Sie auf das orangefarbene Häkchensymbol.

Als Nächstes sehen Sie ein Popup-Fenster, in dem Sie den Namen und die URL Ihrer Landingpage eingeben können. Klicken Sie anschließend auf die Schaltfläche Speichern und Seite bearbeiten starten .

Schritt 3. Inhalte Ihrer Landing Page anpassen

Ihre Landingpage-Vorlage wird nun im Drag-and-Drop-Visual-Editor von SeedProd geöffnet. Hier können Sie den Inhalt und das Styling anpassen und weitere Seitenelemente hinzufügen.

Sie können beispielsweise Ihr benutzerdefiniertes Logo hinzufügen, indem Sie auf den aktuellen Bildblock klicken und eine Datei aus Ihrer WordPress-Mediathek oder Ihrem Computer hochladen.

Sie können Ihre CTA-Schaltflächen auch mit anderen Farben, Texten und Stilen bearbeiten, indem Sie darauf klicken und das Bedienfeld für erweiterte Einstellungen auf der linken Seite aufrufen.

Das Hinzufügen neuer Elemente ist genauso einfach. Sie können einen Block aus dem Block-Bedienfeld auf der linken Seite ziehen und in Ihr Design ziehen. Ein Countdown-Timer kann beispielsweise Dringlichkeit auf Ihrer Seite erzeugen und Benutzer dazu ermutigen, aus Angst, etwas zu verpassen, zu handeln.

Nachdem Sie Ihre Anpassungen vorgenommen haben, sehen wir uns als Nächstes an, wie Sie Ihren Schlagzeilentext animieren können.

Schritt 4. Den Block für animierte Schlagzeilen hinzufügen

Nehmen wir an, Sie möchten die Hauptüberschrift auf Ihrer Landingpage animieren. Dazu müssen Sie den Block Animierte Überschrift finden und ihn in Ihr Seitendesign ziehen.

Wenn Sie auf den Block klicken, um seine Einstellungen anzuzeigen, sehen Sie 2 Möglichkeiten, Ihre Überschrift zu animieren:

1. Hervorgehoben
2. Drehen

Der Stil Hervorgehoben fügt Ihrem Text eine Formanimation hinzu, wobei Formen wie folgt enthalten sind:

• Kreis
• Gekräuselt
• Unterstreichen
• Doppelt
• Doppelte Unterstreichung
• Unterstrichen Zickzack
• Diagonal
• Durchgestrichen
• X

Im Gegensatz dazu fügt der Stil Rotierend Übergangseffekte zu Ihrer Überschrift hinzu, die Folgendes umfassen:

• Tippen
• Ausschnitt
• Umklappen
• Hüpfen
• Rollen
• Zoomen
• Verblassen
• Lichtgeschwindigkeit
• Runterrutschen

Zusätzlich können Sie Text vor und nach Ihrem animierten Text hinzufügen, die Endlosschleife aktivieren, die Animationsdauer ändern und die Ausrichtung, Schriftarten und die Überschriftenebene anpassen.

In unserem Beispiel verwenden wir die Form „Unterstreichen“ aus dem hervorgehobenen Dropdown-Menü.

Wenn Sie mit Ihren animierten Texteffekten zufrieden sind, klicken Sie oben rechts auf die Schaltfläche Speichern.

Schritt 5. Ihre Einstellungen konfigurieren

Der nächste Schritt ist die Konfiguration Ihrer Landingpage-Einstellungen vor der Veröffentlichung.

Klicken Sie auf die Registerkarte Seiteneinstellungen, um den Seitennamen, die URL und die On-Page-SEO-Einstellungen zu bearbeiten und eine Verbindung zu einem Google Analytics-Plugin herzustellen.

SeedProd ermöglicht es Ihnen auch, E-Mail-Marketingdienste zu verbinden und das Domain-Mapping für Ihre Seiten zu konfigurieren. Weitere Informationen finden Sie in der SeedProd-Integrationsdokumentation.

Vergessen Sie nicht, auf Speichern zu klicken, bevor Sie mit dem nächsten Schritt fortfahren.

Schritt 6. Veröffentlichen Sie Ihre Landingpage

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

Sie können Ihre Seite jetzt anzeigen und Ihre Textanimationen in Aktion sehen.

Methode 2. Textanimationen mit dem Animate It! CSS-Plugin hinzufügen

Für die folgende Methode verwenden wir ein kostenloses WordPress-Animations-Plugin, um animierte Texteffekte zu Ihrer Website hinzuzufügen. Dies ist eine gute Lösung, wenn Sie den klassischen WordPress WYSIWYG-Editor anstelle eines Page Builders oder des WordPress Block Editors verwenden.

(Hinweis: Das Animate It!-Plugin wurde zuletzt 2021 aktualisiert. Es bleibt für Benutzer des klassischen Editors funktionsfähig. Informationen zum aktuellen Support-Status finden Sie auf der WordPress.org-Plugin-Seite.)

Installieren und aktivieren Sie zuerst das Animate It! -Plugin auf Ihrer WordPress-Website. Es sollte sofort einsatzbereit sein, ohne dass Sie Einstellungen konfigurieren müssen.

Erstellen Sie als Nächstes eine neue Seite, und Sie sehen eine neue Schaltfläche im WordPress-Editor: Animate It!

Wenn Sie auf die Schaltfläche klicken, öffnet sich ein Popup-Fenster, in dem Sie einen Animationsstil auswählen können. Es gibt viele Animationsstile zur Auswahl, also finden Sie einen, der Ihnen gefällt, im Dropdown-Menü.

Danach können Sie die Verzögerungs- und Dauerzeit auswählen und festlegen, wann die Animation erscheinen soll. Sie können die Animation auch beim Laden, Klicken, Hovern oder Scrollen auslösen.

Wenn Sie mit den Einstellungen zufrieden sind, klicken Sie auf die Schaltfläche Animate It, um eine Vorschau der Animation anzuzeigen.

Klicken Sie als Nächstes auf die Schaltfläche Einfügen, um die Animation zu Ihrem Beitrag oder Ihrer Seite hinzuzufügen. Das Plugin fügt einen Shortcode mit einigen Dummy-Inhalten in den Beitragseditor ein.

Sie können diese Inhalte anpassen und durch Ihre Schlagzeilen, Bilder und benutzerdefinierten Text ersetzen.

Jetzt können Sie Ihre Änderungen veröffentlichen und Ihre animierten Texte live auf Ihrer WordPress-Site in der Vorschau anzeigen.

Methode 3. Animierten Text im Gutenberg Block Editor hinzufügen

Das Plugin Animated Text Block fügt einen nativen Gutenberg-Block für Textanimationseffekte hinzu. Wenn Sie Seiten und Beiträge im WordPress Block Editor erstellen, ist dies die direkteste Option, da es wie jeder andere Block ohne Shortcodes oder einen separaten Builder funktioniert.

Ich habe im Laufe der Jahre viele Animations-Plugins getestet, und die meisten von ihnen erfordern entweder den klassischen Editor oder einen dedizierten Page Builder, um richtig zu funktionieren. Dieses hier integriert sich direkt in Gutenberg als nativer Block, was die Verwaltung neben Ihren anderen Inhalten vereinfacht.

Schritt 1. Das Plugin für animierten Text installieren

Gehen Sie in Ihrem WordPress-Dashboard zu Plugins » Neu hinzufügen und suchen Sie nach „Animated Text Block“. Klicken Sie auf Jetzt installieren und dann auf Aktivieren.

Das Plugin funktioniert nach der Aktivierung ohne Konfiguration direkt.

Schritt 2. Den Block zu Ihrer Seite hinzufügen

Öffnen Sie einen beliebigen Beitrag oder eine Seite im Gutenberg-Blockeditor. Klicken Sie auf die Schaltfläche + zum Einfügen von Blöcken, suchen Sie nach „Animierter Text“ und fügen Sie den Block in Ihren Inhaltsbereich ein.

Platzieren Sie ihn dort, wo Ihre animierte Überschrift erscheinen soll, z. B. am Anfang eines Seitenabschnitts oder in einem Cover-Block.

Schritt 3. Ihre Animation konfigurieren

Wenn der Block ausgewählt ist, geben Sie Ihren animierten Text direkt in den Block ein. Verwenden Sie das Bedienfeld auf der rechten Seite, um einen Animationsstil auszuwählen, die Geschwindigkeit festzulegen und zu steuern, ob die Animation in einer Schleife wiederholt wird.

Das Plugin unterstützt mehrere Stile, darunter Tippen, Ausblenden, Hüpfen und Gleiten. Beginnen Sie mit „Tippen“ oder „Ausblenden“ für einen dezenten, professionellen Look auf den meisten Websites.

Schritt 4. Vorschau und Veröffentlichung

Klicken Sie auf Vorschau, um Ihre Animation zu sehen, bevor sie live geschaltet wird. Wenn Sie mit dem Effekt zufrieden sind, klicken Sie auf Veröffentlichen oder Aktualisieren, um Ihre Änderungen zu speichern.

FAQs zu Textanimationen in WordPress

Funktioniert Textanimation mit dem Gutenberg-Blockeditor?

Ja. Das Animated Text Block Plugin fügt einen nativen Gutenberg-Block für animierte Texteffekte hinzu. Sobald Sie es installiert und aktiviert haben, finden Sie den Block im Einfügungswerkzeug und fügen Sie ihn in jeden Beitrag oder jede Seite ein. Es unterstützt mehrere Animationsstile und funktioniert ohne Shortcodes oder einen separaten Seitenersteller.

Schaden Textanimationen meinen Core Web Vitals oder meiner Seitengeschwindigkeit?

CSS-basierte Animationen sind leichtgewichtig und beeinträchtigen die Core Web Vitals im Allgemeinen nicht, wenn sie sparsam eingesetzt werden. Das Risiko besteht darin, zu viele Elemente auf einer einzigen Seite zu animieren, was Layoutverschiebungen auslösen oder das Rendern verzögern kann. Die meisten modernen Browser unterstützen die prefers-reduced-motion-Media-Query, die Animationen für Benutzer, die dies bevorzugen, reduziert oder deaktiviert.

Was ist der Unterschied zwischen einer rotierenden Schlagzeile und einer Scroll-Animation in WordPress?

Eine rotierende Schlagzeile durchläuft beim Laden der Seite Wörter oder Phrasen, normalerweise in einem Hero-Bereich. Eine Scroll-Animation wird ausgelöst, wenn ein bestimmtes Element beim Scrollen des Benutzers nach unten auf der Seite in den Ansichtsbereich gelangt. Diese Anleitung behandelt rotierende und hervorgehobene Schlagzeileneffekte, die beim Laden ausgeführt werden. Die Scroll-Reveal-Funktion von SeedProd behandelt scroll-ausgelöste Animationen separat.

Benötige ich SeedProd Pro, um den Animated Headline-Block zu verwenden?

Ja. Der Animated Headline-Block ist eine Pro-Funktion und in der kostenlosen Version von SeedProd nicht verfügbar. Wenn Sie Textanimationen ohne ein kostenpflichtiges Plugin benötigen, verwenden Sie das Animated Text Block Plugin für den Gutenberg-Blockeditor oder das Animate It! Plugin für den klassischen Editor. Beide sind kostenlos.

Wie füge ich Textanimationen in WordPress ohne Plugin hinzu?

Sie können CSS-Keyframe-Animationen verwenden, die über den zusätzlichen CSS-Bereich Ihres Themes (Darstellung » Anpassen » Zusätzliches CSS) angewendet werden. Schreiben Sie eine @keyframes-Regel, weisen Sie sie Ihrem Textelement mit der animation-Eigenschaft zu und fügen Sie die Klasse in einem benutzerdefinierten HTML-Block oder dem Markup Ihres Themes hinzu. Dieser Ansatz erfordert grundlegende CSS-Kenntnisse und eignet sich besser für Entwickler als für Anfänger.

Bereit, Textanimationen zu Ihren WordPress-Seiten hinzuzufügen? Probieren Sie SeedProd aus und verwenden Sie den Block "Animierte Überschrift", um Ihre Hero-Überschriften in wenigen Minuten hervorzuheben.

Vielleicht gefällt Ihnen auch dieser Leitfaden zum Erstellen einer dynamischen Landingpage in WordPress.

Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.