So fügen Sie Text in WordPress eine Animation hinzu

Ausgefallene Textstile erregen schnell die Aufmerksamkeit der Zuschauer. Besitzer von WordPress-Websites fragen oft, wie man Animationen zu Text hinzufügt. Absolut, Sie werden mehrere Methoden finden, um Ihre WordPress-Site-Texte zu gestalten. Sie können manuell HTML-CSS-Effekte hinzufügen, die etwas mehr Code erfordern. Aber Codierung ist eine großartige Möglichkeit, Ihrer Website benutzerdefinierte Animationen hinzuzufügen. Auch hier ist ein Plugin mit dem besten Widget 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 erscheint er?

Animierte Texteffekte sind eine großartige Möglichkeit, Ihren Artikeln und Titeln ein wenig Spaß und Aufregung zu verleihen. Wenn Sie sich für einen ausgefallenen animierten Texteffekt entscheiden, können Sie verschiedene Effekte erstellen. Einige Effekte sind einfach wie das Ändern der Textfarbe oder -größe , während andere detaillierte Animationen wie blinkender oder blinkender Text sind.

Animierter Text unterscheidet sich etwas von normalem Text. Normalerweise bewegt sich diese Art von Text nicht von alleine. Stattdessen hat es einen Effekt, der es so aussehen lässt, als würde es sich über den Bildschirm bewegen. Die ausgefallenen Texte führen also dazu, dass die Leute eher auf den Inhalt, die Links oder das Öffnen von E-Mails klicken .

Die Rolle von animierten Texten auf Ihrer Website

In WordPress-Designs sind verschiedene Arten von animierten Texteffekten verfügbar, aber alle haben dieselbe grundlegende Funktionalität. Sie ändern die Farbe oder den Stil des Textes und ändern einfach einen Teststil. Sie können beispielsweise eine „Call-to-Action“-Schaltfläche mit einem roten Hintergrund und weißem Text mit der Aufschrift „Klicken Sie hier!“ ändern. wenn angeklickt.

Die animierte Überschrift oder eine Heldensektion mit ausgefallenen Texten spielt folgende Rollen:

• Macht Ihre Designs optisch interessanter.
• Heben Sie Sonderangebote und wichtige Informationen hervor.
• Macht Ihre Produkteigenschaften spürbar.
• 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 vereinfachen. ElementsKit ist ein so leistungsstarkes Plugin und Addon 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.

Melden Sie sich bei Ihrem Dashboard an -> Wählen Sie eine beliebige Seite oder einen Beitrag aus -> Klicken Sie auf Bearbeiten mit ElementsKit -> Suchen Sie das ElementsKit Fancy Animation Text-Widget -> Ziehen Sie das Widget per Drag-and-Drop

Inhaltsbereich

Der Teil wird als Fancy Text-Teil bezeichnet und enthält die folgenden Felder:

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.
• Reveal Duration (ms) – Über das Optionsfeld können Sie die Animationsdauer in Millisekunden einstellen.
• Reveal Animation Delay (ms) – Passen Sie hier die Animationsverzögerungszeit an. Es gibt an, dass eine Animation später beginnen kann, sofort von Anfang an oder sofort und während der gesamten Animation.

Inhalt

• Präfixtext – Sie müssen hier den Präfixinhalt schreiben, den Sie anzeigen möchten. Es bedeutet, dass es vor der ausgefallenen Animation geschrieben wird.
• Ausgefallene Listen – Fügen Sie hier Elemente für ausgefallene Animationen hinzu.
• Suffix-Text – Schreiben Sie den Suffix-Inhalt, den Sie anzeigen möchten. Es wird also nach der ausgefallenen Animation angegeben.

• Titel-HTML-Tag – Wählen Sie hier das 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 umgeleitet werden.

Style-Sektion

• Überschriftstext – Verwenden Sie dieses Feld, um die Ausrichtung, Typografie, Farbe usw. der Überschrift anzupassen.
• Ausgefallene Textlisten – Verwenden Sie dieses Feld, um Typografie, Farbe und Polsterung anzupassen.
• Ausgefallener Cursor – Mit diesem Feld können Sie dem Cursor mit Farbe, Breite und Höhe ein ausgefallenes Aussehen 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 –

CSS anwenden

Beachten Sie beim Erstellen von CSS-Animationen in WordPress die folgenden grundlegenden, aber wichtigen Dinge :

• Festlegen eines richtigen Animationsnamens – 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 zum Abschließen benötigt. Sie können dies auch auf keine oder 0 setzen, damit eine Animation unbegrenzt oder bis etwas anderes passiert (wie das Laden einer Seite) andauert.
• Animation-Timing-Funktion – Diese steuert, wie sich das Element von einem Punkt zum anderen bewegt, basierend darauf, wie lange es für eine bestimmte Zeitdauer (in Millisekunden) dauert. Wenn Sie diese Eigenschaft beispielsweise auf Ease-out setzen, beginnt Ihr Element, sich langsam zu bewegen und beschleunigt dann am Ende seiner Dauer, bevor es wieder am Anfang beginnt.
• Animationsverzögerung – Dies ist ein Wert, der angibt, wie viele Millisekunden nach dem Ende einer Animation hinzugefügt werden sollen, bevor sie erneut gestartet wird (z. B. 1 s).
• Animation-Iteration-Count – Dies ist die Zeit, die Sie zum Abspielen der Animation benötigen. Mit der CSS-Eigenschaft können Sie diese Iteration zählen.
• Animationsrichtung – Dies ist die Reihenfolge oder Richtung, in der eine Animation abgespielt werden soll. Es kann normal, umgekehrt, abwechselnd und abwechselnd umgekehrt sein.
• Animation-fill-mode – Diese Werte geben an, wie ein Element angezeigt werden soll. Dies kann vor und nach dem Anwenden einer Animation erfolgen.
• Kennen von @keyframes – Es gibt die Eigenschaften der Animation an, die sich im Verlauf ändern, und auch die Werte, die diese Eigenschaften annehmen sollten. Zum Beispiel:

 @keyframes example { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} }

Im Allgemeinen werden Prozentsätze verwendet, um das Timing der Animation anzugeben. Der obige Keyframe zeigt, dass sich die Hintergrundfarbe des Elements während der Animation zu 25 Prozent von Rot nach Gelb ändert.

Von und bis können jedoch anstelle von 0 % bzw. 100 % verwendet werden .

Erstellen einer animate.css-Datei

Sie müssen zuerst eine separate Datei mit allen erforderlichen Eigenschaften erstellen, in dem Texteditor, in dem Sie arbeiten. Sie können die Keyframes für jede Animation auswählen. Als nächstes müssen Sie sie mit bestimmten CSS-Klassen zusammenstellen, um sie mit beliebigem 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; transform: rotate(20deg); animation-duration: 3s; } to {opacity: 1;} transform: rotate(0deg); } }

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

 .MyAnimation { animation-name: MyAnimation; }

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

Sie können diesen Vorgang wiederholen, um je nach Bedarf so viele Animationen wie möglich zu erstellen. Speichern Sie die Datei dann als animate.css. Alternativ können Sie die Datei Animate.css herunterladen . Es ist eine beliebte Datei, die die Keyframes und CSS-Klassen für unzählige beliebte Animationsdesigns enthält. Darüber hinaus wird die Verwendung der Datei Ihre Mühe beim Codieren der komplexen Animation verringern.

Der obige Code animiert den Text Ihres h1-Tags ' MyAnimation '. Sie können die Dauer der Animation ändern, indem Sie die „3s“ auf einen anderen Wert ändern . 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, Sie können 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 Arbeit an der Datei fertig sind, laden Sie sie in das Verzeichnis Ihres Designs hoch. Wir haben den gesamten Prozess in drei Schritte unterteilt,

Schritt 1

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

Schritt 2

Greifen Sie auf Ihr Verzeichnis public_html zu -> Navigieren Sie zu wp-content – ​​> Themen -> Wählen Sie den Ordner des aktiven oder untergeordneten Themas aus

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 den Unterverzeichnisordner nicht haben, können Sie einfach 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 via functions.php auf

Sie finden die Datei functions.php im Ordner Ihres aktiven Designs. Jetzt müssen Sie dieses Code-Snippet 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'); }

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

Wenden Sie Animationen mit CSS-Klassen an

Jetzt ist es also möglich, jede gewünschte Klasse in der Datei animate.css anzuwenden, um verschiedene Animationseffekte in Posts und Seiten zu sehen. Auch die Animate.css-Datei ermöglicht es Ihnen, auf eine vollständige Liste aller zu verweisen.

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

Dies sind zwei effektive Techniken, um Ihrer Website animierten Text hinzuzufügen, und sie können dazu beitragen, Ihre Website ansprechender und visuell ansprechender zu gestalten . Indem Sie eine dieser Techniken anwenden, können Sie Ihren Seiten Bewegung und Interesse verleihen.

Die Anwendung von CSS kann jedoch etwas schwierig sein, wenn Sie keine Ahnung vom Programmieren haben. Daher wird empfohlen, sich für die Erstellung von CSS-Animationen in WordPress Expertenhilfe zu holen. Alternativ ist ElementsKit ausgefallener animierter Text ein intelligentes Widget, das Sie dabei unterstützt, jede stilvolle Animation schnell zu entwerfen. Mit dem Widget verwandeln Sie Ihre ausgewählten Texte in ausgefallene Animationen.