Hinweis: Der folgende Artikel hilft Ihnen weiter: So erstellen Sie Textanimationen in WordPress (einfache Schritte)
Möchten Sie Animationen in WordPress hinzufügen?
Animationen sind eine hervorragende Möglichkeit, die Aufmerksamkeit Ihres Publikums zu erregen und es auf hilfreiche Inhalte und wichtige Elemente wie Call-to-Action-Schaltflächen, Testimonials und Anmeldeformulare zu leiten.
In diesem Artikel zeigen wir Ihnen Schritt für Schritt, wie Sie Textanimationen auf Ihrer WordPress-Website erstellen.
Videoanleitung
Was sind animierte Texteffekte und warum werden sie verwendet?
Animierte Texteffekte sind CSS-Animationen für die Überschriften Ihrer Website und andere textbasierte Inhalte. Sie ermöglichen Ihnen das Hinzufügen von Übergangseffekten und Animationsstilen wie Springen, Scrollen und Gleiten, um die Aufmerksamkeit auf wichtige Informationen auf Ihrer Website zu lenken.
Sie können Textanimationen in WordPress verwenden, um:
- Markieren Sie Angebote in Ihrer Preistabelle
- Animieren Sie Produktmerkmale
- Erstellen Sie aufmerksamkeitsstarke Schlagzeilen
- Machen Sie auf Call-to-Action-Buttons (CTA) aufmerksam
- Und mehr.
Viele Websites verwenden Seitenanimationen und Übergänge für das Scrollen von Seiten. Beispielsweise können Sie Text-Widgets so animieren, dass sie „platzen“, wenn Benutzer auf der Seite nach unten scrollen.
Da CSS3-Animationen schneller als Flash oder Videos sind, laden sie schnell und werden von den meisten modernen Webbrowsern unterstützt. Sie lassen sich mit einem WordPress-Animations-Plugin auch viel einfacher zu Ihrer Website hinzufügen.
Lassen Sie uns vor diesem Hintergrund untersuchen, wie Sie animierte Texteffekte in WordPress erstellen.
So fügen Sie animierte Texteffekte in WordPress hinzu: 2 Möglichkeiten
Es gibt mehrere Möglichkeiten, Animationen zu WordPress hinzuzufügen. Sie können ein WordPress-Plugin verwenden oder CSS-Effekte manuell hinzufügen.
Da das manuelle Erstellen von Texteffekten für Anfänger eine Herausforderung darstellt, zeigen wir Ihnen, wie Sie Textanimationen mit einem WordPress-Seitenersteller und einem kostenlosen WordPress-Animations-Plugin erstellen.
Methode 1. Erstellen Sie animierte Schlagzeilen mit SeedProd
Für die erste Methode verwenden wir SeedProd, den besten Website-Builder für WordPress. Mit dem visuellen Drag-and-Drop-Seitenersteller und dem animierten Überschriftenblock können Sie mit wenigen Klicks aufregende Übergangseffekte hinzufügen.
Mit SeedProd können Sie benutzerdefinierte WordPress-Themes und responsive Layouts erstellen, ohne Code schreiben oder einen Entwickler engagieren zu müssen. Es enthält leistungsstarke Inhaltsblöcke zum Anpassen 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 frei von Aufblähungen, sodass Ihre Seitenladezeiten schnell und benutzerfreundlich sind.
Befolgen Sie die folgenden Schritte, um Textanimationen in WordPress mit SeedProd zu erstellen.
Schritt 1. Installieren und aktivieren Sie das SeedProd-Plugin
Gehen Sie zunächst zur Preisseite von SeedProd und wählen Sie eine Lizenz aus. Wir empfehlen SeedProd Pro für seine erweiterten Funktionen.
Melden Sie sich anschließend in Ihrem SeedProd-Kontobereich an und laden Sie das Plugin herunter. Unter dem Reiter „Downloads“ können Sie gleichzeitig Ihren Lizenzschlüssel kopieren.
Als nächstes installieren Sie das Plugin und aktivieren es auf Ihrer WordPress-Site. Wenn Sie Hilfe benötigen, können Sie diesen folgen Schritte zur Installation eines WordPress-Plugins.
Navigieren Sie nach der Aktivierung von SeedProd zu SeedProd » Einstellungengeben Sie Ihren Lizenzschlüssel ein und klicken Sie auf Schlüssel überprüfen Taste.
Sie können jetzt mit dem Erstellen einer Seite mit Animationseffekten beginnen.
Schritt 2. Wählen Sie eine Landingpage-Vorlage
Sie können SeedProd verwenden, um mit seinem visuellen Editor eine einzelne WordPress-Seite, ein WordPress-Theme oder eine Landingpage zu erstellen. In diesem Leitfaden fügen wir Textanimationen zu einer Verkaufs-Landingpage hinzu.
Zuerst müssen Sie zu gehen SeedProd » Landing Pages und klicken Sie auf Neue Landingpage hinzufügen Taste.
Hier können Sie aus über 180 auf Mobilgeräten ansprechenden Landingpage-Vorlagen wählen.
Da wir eine Verkaufsseite erstellen, klicken Sie auf Verkauf Klicken Sie auf die Registerkarte, um die verschiedenen Verkaufsseitenvorlagen anzuzeigen. Wenn Sie eine Vorlage gefunden haben, die Ihnen gefällt, bewegen Sie den Cursor, bis Sie den Bild-Hover-Effekt sehen, und klicken Sie auf das orangefarbene Häkchensymbol.
Als Nächstes wird ein Popup-Fenster angezeigt, in dem Sie den Namen Ihrer Zielseite und die URL-Informationen hinzufügen können. Klicken Sie anschließend auf Speichern Sie und beginnen Sie mit der Bearbeitung der Seite Taste.
Schritt 3. Passen Sie den Inhalt Ihrer Landingpage an
Ihre Landingpage-Vorlage wird nun im visuellen Drag-and-Drop-Editor von SeedProd geöffnet. Hier können Sie den Inhalt und das Design anpassen und weitere Seitenelemente hinzufügen.
Sie können beispielsweise Ihr individuelles Logo hinzufügen, indem Sie auf den aktuellen Bildblock klicken und eine Datei aus Ihrer WordPress-Medienbibliothek oder Ihrem Computer hochladen.
Sie können Ihre CTA-Schaltflächen auch mit verschiedenen Farben, Texten und Stilen bearbeiten, indem Sie darauf klicken und den Bereich „Erweiterte Einstellungen“ auf der linken Seite aufrufen.
Das Hinzufügen neuer Elemente ist genauso einfach. Sie können einen Block aus dem Blockfeld auf der linken Seite ziehen und auf Ihrem Design ablegen. Ein Countdown-Timer kann beispielsweise die Dringlichkeit Ihrer Seite erhöhen 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 Überschriftentext animieren.
Schritt 4. Fügen Sie den Block „Animierte Schlagzeilen“ hinzu
Nehmen wir an, Sie möchten die Hauptüberschrift auf Ihrer Landingpage animieren. Dazu müssen Sie das finden Animierte Überschrift Block und ziehen Sie ihn auf Ihr Seitendesign.
Wenn Sie auf den Block klicken, um seine Einstellungen anzuzeigen, sehen Sie zwei Möglichkeiten, Ihre Überschrift zu animieren:
- Hervorgehoben
- Rotierend
Der Hervorgehoben Der Stil fügt Ihrem Text eine Formanimation hinzu, mit folgenden Formen:
- Kreis
- Lockig
- Unterstreichen
- Doppelt
- Doppelte Unterstreichung
- Unterstreichen Sie ZipZag
- Diagonale
- Durchgestrichen
- X
Im Gegensatz dazu ist die Rotierend Der Stil fügt Ihrer Überschrift Übergangseffekte hinzu, darunter:
- Tippen
- Clip
- Umdrehen
- Prallen
- Rollen
- Zoomen
- Verblassen
- Lichtgeschwindigkeit
- Herunterrutschen
Darüber hinaus können Sie Text vor und nach Ihrem animierten Text hinzufügen, Endlosschleifen aktivieren, die Animationsdauer ändern sowie Ausrichtung, Schriftarten und Ü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 auf Speichern Schaltfläche in der oberen rechten Ecke.
Schritt 5. Konfigurieren Sie Ihre Einstellungen
Der nächste Schritt besteht darin, Ihren E-Mail-Marketingdienst zu verbinden und Ihre Zielseiteneinstellungen zu konfigurieren.
SeedProd bietet direkte Integrationen mit vielen beliebten E-Mail-Anbietern, darunter Constant Contact, Mailchimp und mehr. Sie können eines auswählen, indem Sie auf klicken Verbinden Klicken Sie oben auf dem Bildschirm auf die Registerkarte.
Sehen Sie sich die Dokumentation zur E-Mail-Integration an, um Hilfe bei der Verbindung zu Ihrem spezifischen Anbieter zu erhalten.
Klicken Sie anschließend auf Seiteneinstellungen Registerkarte, auf der Sie Einstellungen wie Ihren Seitennamen, Ihre URL und On-Page-SEO bearbeiten und eine Verbindung zu einem Google Analytics-Plugin herstellen können.
Sie können auch SeedProds verwenden Domänenzuordnung Funktion, um Ihrer Zielseite einen benutzerdefinierten Domainnamen zu geben. Dies ist eine hervorragende Möglichkeit, mehrere Zielseiten mit eindeutigen Domänen in einer einzigen WordPress-Installation zu haben.
Vergessen Sie nicht zu klicken Speichern bevor Sie mit dem nächsten Schritt fortfahren.
Schritt 6. Veröffentlichen Sie Ihre Landing Page
Wenn Sie mit Ihrem Design zufrieden sind, klicken Sie auf das Dropdown-Menü Speichern drücken und auswählen Veröffentlichen.
Sie können jetzt Ihre Seite anzeigen und Ihre Textanimationen in Aktion sehen.
Methode 2. Textanimationen hinzufügen mit Animate It! CSS-Plugin
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-Blockeditors verwenden.
Installieren und aktivieren Sie zunächst das Animieren Sie es! Plugin auf Ihrer WordPress-Website. Es sollte sofort funktionieren, 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!
Durch Klicken auf die Schaltfläche wird ein Popup-Fenster geöffnet, in dem Sie einen Animationsstil auswählen können. Es stehen viele Animationsstile zur Auswahl. Finden Sie im Dropdown-Menü den Stil, der Ihnen gefällt.
Danach können Sie die Verzögerung und Dauer auswählen und festlegen, wann die Animation angezeigt werden soll. Sie können die Animation auch beim Laden, Klicken, Schweben oder Scrollen ausführen.
Wenn Sie mit den Einstellungen zufrieden sind, klicken Sie auf Animieren Sie es Klicken Sie auf die Schaltfläche, um eine Vorschau der Animation anzuzeigen.
Klicken Sie anschließend auf Einfügung Klicken Sie auf die Schaltfläche, um die Animation zu Ihrem Beitrag oder Ihrer Seite hinzuzufügen. Das Plugin fügt dem Post-Editor einen Shortcode mit etwas Dummy-Inhalt hinzu.
Sie können diesen Inhalt anpassen und durch Ihre Überschriften, Bilder und benutzerdefinierten Text ersetzen.
Jetzt können Sie Ihre Änderungen veröffentlichen und Ihren animierten Text live auf Ihrer WordPress-Site in der Vorschau anzeigen.
Das ist alles für den Moment.
Wir hoffen, dass Sie dieses Tutorial zum Erstellen von Textanimationen in WordPress hilfreich fanden. Diese Anleitung zum Erstellen einer dynamischen Landingpage in WordPress könnte Ihnen auch gefallen.
Danke fürs Lesen. Bitte folgen Sie uns weiter YouTube, TwitterUnd Facebook für weitere hilfreiche Inhalte zum Wachstum Ihres Unternehmens.
