So fügen Sie in WordPress Animationen zu Texten hinzu

Ausgefallene Textstile erregen schnell die Aufmerksamkeit des Betrachters. Besitzer von WordPress-Websites fragen oft, wie sie dem Text Animationen hinzufügen können. Natürlich gibt es mehrere Möglichkeiten, die Texte Ihrer WordPress-Site zu gestalten. Sie können HTML-CSS-Effekte manuell hinzufügen, die etwas mehr Code erfordern. Aber Codierung ist eine großartige Möglichkeit, Ihrer Website benutzerdefinierte Animationen hinzuzufügen. Wieder, Ein Plugin mit dem besten Widget ist relativ praktisch, effektiv und auch beliebt.

Wir haben jedoch versucht, beide Techniken so einfach wie möglich abzudecken. Wenn Sie eine WordPress-Site betreiben, nehmen Sie sich die Zeit, den Blog zu lesen und die Prozesse zu verstehen. Wenn Sie die Schritte und Anweisungen richtig befolgen, können Sie Ihre eigene Animation reibungslos anpassen.

So fügen Sie animierte Texteffekte in WordPress hinzu

Animierte Texteffekte können verwendet werden, um Ihrer WordPress-Site Flair und Persönlichkeit zu verleihen. In diesem Tutorial zeigen wir Ihnen, wie Sie diese Effekte hinzufügen können. aber vorher müssen Sie eine klare Vorstellung von einem animierten Text und seiner Rolle haben; Lass uns lernen!

Was ist ein animierter Texteffekt und wie sieht er aus?

Animierte Texteffekte sind eine großartige Möglichkeit, Ihrem Text ein wenig Spaß und Spannung zu verleihen Artikel und Titel auch. Wenn Sie sich für einen ausgefallenen animierten Texteffekt entscheiden, können Sie verschiedene Effekte erstellen. Einige Effekte sind Ganz einfach: Ändern Sie die Textfarbe oder -größe, während es sich bei einigen um detaillierte Animationen handelt, z blinkender oder blinkender Text.

Animierter Text unterscheidet sich ein wenig von normalem Text. Normalerweise bewegt sich diese Art von Text nicht von alleine. Stattdessen hat es einen Effekt, der den Eindruck erweckt, als würde es sich über den Bildschirm bewegen. Die ausgefallenen Texte erhöhen also die Wahrscheinlichkeit, dass die Leute es tun Klicken Sie auf den Inhalt, die Links oder öffnen Sie E-Mails.

Die Rolle animierter Texte auf Ihrer Website

Es gibt verschiedene Arten animierter Texteffekte, die in WordPress-Themes verfügbar sind, aber alle haben die gleiche Grundfunktionalität. Sie ändern die Farbe oder den Textstil und ändern einfach einen Teststil. Sie können beispielsweise a ändern „Call-to-Action“-Button mit rotem Hintergrund und weißem Text mit der Aufschrift „ "Klicken Sie hier!" wenn darauf geklickt wird.

Der animierte Überschrift oder einen Heldenabschnitt mit ausgefallenen Texten spielt die folgenden Rollen-

• Macht Ihre Designs optisch interessanter.
• Heben Sie Sonderangebote und wichtige Informationen hervor.
• Macht Ihre Produktmerkmale sichtbar.
• Macht eine Website interaktiver und fördert das Geschäft.

Die einfachsten Möglichkeiten, animierte Texteffekte hinzuzufügen

Verwendung eines WordPress-Plugins

Der heutige Markt bietet Ihnen verschiedene Arten von Plugins, um Textgestaltungsaufgaben zu erleichtern. ElementsKit ist ein so leistungsstarkes Plugin sowie Add-on für den Elementor-Seitenersteller. Mit ElementsKit erhalten Sie alles unter einer Haube.

Ausgefallener animierter Text ist ein beeindruckendes Widget, das von ElementsKit Pro präsentiert wird. 

Einloggen in Ihr Dashboard -> Wählen Sie eine beliebige Seite oder einen beliebigen Beitrag aus -> Klicken Sie auf „Bearbeiten mit ElementsKit“ -> Durchsuchen Sie das ElementsKit Fancy Animation Text-Widget -> Ziehen Sie das Widget per Drag & Drop

Inhaltsbereich

Der Teil heißt Ausgefallener Textteil, es enthält die folgenden Felder-

Wissen Sie, warum ElementsKit so beliebt ist? 🤔
Überprüfe hier 👉 Mit ElementsKit erstellte Websites mit dem besten Ranking der Welt

Animation

• Animationsstil – Hier sind die beiden Optionen Text oder SVG. Mit beiden können Sie unterschiedliche Animationsstile erstellen.
• Animationstyp – Basierend auf Ihrem Animationstyp erhalten Sie hier verschiedene Auswahlmöglichkeiten.
• Offenlegungsdauer (ms) – Über das Optionsfeld können Sie die Animationsdauer in Millisekunden einstellen.
• Animationsverzögerung anzeigen (ms) – Passen Sie hier die Animationsverzögerungszeit an. Es gibt an, dass eine Animation später, unmittelbar von Anfang an oder sofort und mitten in der Animation beginnen kann.

Inhalt

• Präfixtext – Hier müssen Sie den Präfixinhalt eingeben, den Sie anzeigen möchten. Das bedeutet, dass es vor der ausgefallenen Animation geschrieben wird.
• Ausgefallene Listen – Fügen Sie hier Elemente für ausgefallene Animationen hinzu.
• Suffixtext – Geben Sie den Suffixinhalt ein, den Sie anzeigen möchten. Es wird also nach der ausgefallenen Animation angegeben.

• Titel-HTML-Tag – Wählen Sie hier den HTML-Tag des Inhalts aus.
• Link (optional) – Fügen Sie einen beliebigen Link hinzu, wenn Sie möchten, dass die Benutzer zu einem anderen Ort weitergeleitet werden.

Style-Bereich

• Überschriftentext – Verwenden Sie dieses Feld, um die Ausrichtung der Überschrift, die Typografie, die Farbe usw. anzupassen.
• Ausgefallene Textlisten – Verwenden Sie dieses Feld, um Typografie, Farbe und Polsterung anzupassen.
• Ausgefallener Cursor – Mit diesem Feld können Sie dem Cursor ein schickes Aussehen mit Farbe, Breite und Höhe verleihen.

Nachdem Sie alle erforderlichen Anweisungen bearbeitet und gestaltet haben, klicken Sie auf „Aktualisieren“ und sehen Sie sich die Änderungen im Frontend an. Ein Beispiel ist –

Anwenden von CSS

Beachten Sie beim Erstellen von CSS-Animationen in WordPress Folgendes grundlegende, aber wichtige Dinge im Hinterkopf:

• Einen richtigen Animationsnamen festlegen – Dies ist der Name, der auf einem Element angezeigt wird, wenn es durch eine CSS-Animation verschoben wird. Wenn Sie beispielsweise eine Schaltfläche mit einer Animation namens „fadeIn“ haben, wäre dies der Wert, den Sie für diese Eigenschaft verwenden würden.
• Animationsdauer - Dies ist die Anzahl der Sekunden, die eine Animation benötigt, um abgeschlossen zu sein. Sie können dies auch auf „Keine“ oder „0“ setzen, damit eine Animation auf unbestimmte Zeit oder bis etwas anderes passiert (z. B. das Laden einer Seite) andauert.
• Animation-Timing-Funktion – Dies steuert, wie sich das Element von einer Stelle zur anderen bewegt, basierend darauf, wie lange es für eine bestimmte Zeitspanne (in Millisekunden) dauert. Wenn Sie diese Eigenschaft beispielsweise auf „ease-out“ setzen, beginnt sich Ihr Element langsam zu bewegen und beschleunigt dann am Ende seiner Dauer, bevor es wieder von vorne beginnt.
• Animationsverzögerung – Dies ist ein Wert, der angibt, wie viele Millisekunden nach Abschluss einer Animation hinzugefügt werden sollen, bevor sie erneut beginnt (z. B. 1 s).
• Anzahl der Animationsiterationen – Dies ist die Zeit, die Sie zum Abspielen der Animation benötigen. Mithilfe der CSS-Eigenschaft können Sie diese Iteration zählen.
• Animationen-Regie – Es ist die Reihenfolge oder Richtung, in der eine Animation abgespielt werden soll. Es kann normal, umgekehrt, alternativ und abwechselnd umgekehrt sein.
• Animationsfüllmodus – Diese Werte geben an, wie ein Element angezeigt werden soll. Dies kann vor und nach der Anwendung einer Animation erfolgen.
• @keyframes kennen – Es gibt die Eigenschaften der Animation an, die sich im Verlauf ändern, sowie die Werte, die diese Eigenschaften annehmen sollen. Zum Beispiel: 

@keyframes-Beispiel { 0% {Hintergrundfarbe: Rot;} 25% {Hintergrundfarbe: Gelb;} 50% {Hintergrundfarbe: Blau;} 100% {Hintergrundfarbe: Grün;} }

Im Allgemeinen werden Prozentsätze verwendet, um den Zeitpunkt der Animation anzugeben. Der obige Keyframe zeigt, dass sich die Hintergrundfarbe des Elements im Laufe der Animation um 25 Prozent von Rot zu Gelb ändert.

Jedoch, von und nach kann anstelle von verwendet werden 0% bzw. 100%.

Ein „Timeline“-Segment spielt eine große Rolle, um die Aufmerksamkeit der Kunden zu erregen und sie zum Besuch Ihrer Website zu bewegen! Weiterlesen 👉 Hier!

Erstellen einer animate.css-Datei

Sie müssen zunächst in dem Texteditor, in dem Sie arbeiten, eine separate Datei mit allen erforderlichen Eigenschaften erstellen. Sie können das auswählen Keyframes für jede Animation. Als nächstes müssen Sie sie mit bestimmten CSS-Klassen kombinieren, um sie auf jeden Text auf Ihrer WordPress-Site anzuwenden.

Beginnen Sie damit, einen einfachen Code in Ihre CSS-Datei zu schreiben. Ein Beispielcode für einen Animationstext könnte wie folgt aussehen:

„@keyframes MyAnimation { from { opacity: 0; transformieren: drehen (20 Grad); Animationsdauer: 3s; } zu {Opazität: 1;} transformieren: rotieren(0deg); } }

Um diesen Keyframe nun an eine CSS-Klasse zu binden, haben wir einen Text mit dem Namen festgelegt MeineAnimation. Also müssen Sie direkt nach dem obigen Code den folgenden Code in die Datei einfügen.

.MyAnimation { Animationsname: MyAnimation; }

Hier finden Sie alle grundlegenden CSS-Animationskenntnisse und können diese üben Codes hier!

Sie können diesen Vorgang wiederholen, um so viele Animationen wie möglich entsprechend Ihren Anforderungen zu erstellen. Speichern Sie die Datei dann als animate.css. Alternativ können Sie die Datei Animate.css herunterladen. Es handelt sich um eine beliebte Datei, die die Keyframes und CSS-Klassen für unzählige beliebte Animationsdesigns enthält. Darüber hinaus verringert die Verwendung der Datei den Aufwand beim Codieren der komplexen Animation.

Der obige Code animiert den Text Ihres h1-Tag 'MeineAnimation'. Sie können die Dauer der Animation ändern, indem Sie die ändern „3s“ auf einen anderen Wert. Sie können die Farben auch ändern, indem Sie die Hex-Werte ändern. Sobald Sie die CSS-Datei gespeichert haben, können Sie weitere Änderungen am Erscheinungsbild Ihrer Website vornehmen und die CSS-Datei bearbeiten. Sie können die Schriftart, die Textgröße und die Textfarbe ändern, indem Sie die CSS-Datei bearbeiten. Sie können auch die Hintergrundfarbe und die Größe der Kopfzeile ändern, indem Sie die CSS-Datei ändern.

Laden Ihrer animate.css-Datei auf die WordPress-Site

Nachdem Sie mit der Dateiarbeit fertig sind, laden Sie sie in das Verzeichnis Ihres Themes hoch. Wir haben den gesamten Prozess in drei Schritte unterteilt:

Schritt 1

Gehen Sie mit zur Website File Transfer Protocol (FTP) -> Wählen Sie den FTP-Client (FileZilla, WinSCP, Cyberduck usw.) -> Wählen Sie die erforderlichen Anmeldeinformationen in Ihrem Hosting-Konto aus.

Schritt 2

Zugriff auf Ihr public_html-Verzeichnis -> Navigieren Sie zu wp-content – > Themes -> Wählen Sie den Ordner des aktiven oder untergeordneten Themes

Schritt 3

Suchen Sie nun nach einem Unterverzeichnis namens css. Wenn Sie es erhalten, laden Sie Ihre animate.css- oder animate.min.css-Datei aus der Animate.css-Datei mit dem Unterverzeichnis hoch. 

Wenn Sie jedoch nicht über den Unterverzeichnisordner verfügen, können Sie problemlos einen neuen erstellen. Führen Sie dazu direkt nach dem Laden der Datei eine einfache Bearbeitung durch, um die neue Datei zu erstellen, und fertig.

Rufen Sie das Animate Stylesheet über Functions.php auf

Sie finden die Datei „functions.php“ in Ihrem aktiven Theme-Ordner. Jetzt müssen Sie diesen Codeausschnitt hinzufügen, um das Animate Stylesheet aufzurufen:

add_action( 'wp_enqueue_scripts', 'wpb_animate_styles' ); function wpb_animate_styles() { wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '/css/animate.css', '3.5.0', 'all'); }

ErinnernWenn Sie die Datei animate.min.css aus Animate.css verwendet haben, müssen Sie animate.min.css in die Endzeile schreiben anstelle von animate.css. Nachdem Sie alle Änderungen gespeichert haben, gehen Sie zu Ihrem WordPress-Dashboard.

Anwenden von Animationen mithilfe von CSS-Klassen

Jetzt ist es also möglich, jede gewünschte Klasse in der Datei animate.css anzuwenden, um verschiedene Animationseffekte in Beiträgen und Seiten anzuzeigen. Außerdem können Sie in der Datei Animate.css auf eine vollständige Liste aller Dateien verweisen.

Endlich, Wählen Sie einen Beitrag oder eine Seite im klassischen Editor aus -> Wechseln Sie zum Texteditor -> Oder klicken Sie auf das Dreipunktsymbol in der Blocksymbolleiste, wenn es sich um einen Blockeditor handelt -> Wählen Sie Als HTML bearbeiten -> Fügen Sie die animierte Klasse hinzu und die Klasse für Ihre Animation zum Element-Tag -> Vorschau

Dies sind zwei effektive Techniken zum Hinzufügen von animiertem Text zu Ihrer Website, und sie können bei der Gestaltung Ihrer Website helfen ansprechender und optisch ansprechender. Mit einer dieser Techniken können Sie Ihren Seiten etwas Bewegung und Interesse verleihen.

Allerdings kann die Anwendung von CSS etwas schwierig sein, wenn Sie keine Ahnung vom Programmieren haben. Daher wird empfohlen, beim Erstellen von CSS-Animationen in WordPress die Hilfe eines Experten in Anspruch zu nehmen. Alternativ ist ElementsKit Fancy Animation Text ein intelligentes Widget, das Sie dabei unterstützt, schnell jede stilvolle Animation zu entwerfen. Mit dem Widget können Sie Ihre ausgewählten Texte in ausgefallene Animationen umwandeln.