Animierte Überschrift einfach erstellen in Elementor

Die Gestaltung von Webseiten wird oft durch kreative Elemente bereichert, die die Aufmerksamkeit der Besucher fesseln. Ein fantastisches Werkzeug dafür ist die animierte Überschrift in Elementor. Diese Funktion erlaubt es dir, bestimmte Worte oder Passagen hervorzuheben und damit deine Inhalte lebendiger und ansprechender zu gestalten. In dieser Anleitung erfährst du, wie du mit Elementor eine animierte Überschrift einfügst und individuell anpasst.

Wichtigste Erkenntnisse

• Die animierte Überschrift bietet verschiedene Stiloptionen, einschließlich Text-Highlights, Rotationen und Animationen.
• Du kannst sowohl den animierten Text als auch die damit verbundene Überschrift individuell gestalten.
• Der Effekt der Überschrift kann durch unterschiedliche Animationstypen wie „Typing“, „Flip“ oder „Drop-in“ verstärkt werden.

Schritt-für-Schritt-Anleitung zur Erstellung animierter Überschriften

Schritt 1: Zugriff auf den Elementor Editor

Starte deinen WordPress-Adminbereich und gehe zu der Seite oder dem Beitrag, wo du die animierte Überschrift hinzufügen möchtest. Klicke auf „Mit Elementor bearbeiten“, um den Elementor-Editor zu öffnen.

Schritt 2: Auswahl des Widgets für die animierte Überschrift

In der linken Seitenleiste von Elementor suchst du nach dem Widget „Animierte Überschrift“. Ziehe es per Drag-and-Drop in den gewünschten Bereich deiner Seite.

Schritt 3: Eingabe deines statischen Textes

Nachdem du das Widget hinzugefügt hast, gib im Feld „Hauptüberschrift“ deinen statischen Text ein. Dies ist der Text, der fest bleibt, während der animierte Text wechselt. Zum Beispiel könntest du „Diese Website ist“ eingeben.

Schritt 4: Definition des animierten Textes

Gehe zur Sektion „Animierter Text“ und füge die Wörter oder Passagen ein, die du rotierend hervorheben möchtest. Das könnten Wörter wie „toll“, „super für“, „Anfänger“ und „deine Anlaufstelle Nummer 1“ sein.

Schritt 5: Anpassung des Styles

Unter dem Tab „Style“ kannst du die Gestaltung der Überschrift und des animierten Textes vornehmen. Hier kannst du die Farbe des Textes sowie die Form des Hintergrunds anpassen. Eine beliebte Wahl ist es, dem Hintergrund eine rote Farbe zu geben, aber du kannst auch Schwarz oder Grün wählen.

Schritt 6: Animationseffekt aktivieren

Im Bereich „Animationseffekte“ kannst du festlegen, wie die Animation wirken soll. Möchtest du, dass der animierte Text ein „Infinity Loop“ hat, damit er ständig wiederholt wird? Setze hierfür die entsprechenden Einstellungen für die Dauer und den Delay der Animation.

Schritt 7: Auswahl des Animationstyps

Wähle im Dropdown-Menü den gewünschten Animationstyp aus. Zu den verfügbaren Effekten gehören „Typing“, „Flip“ oder „Drop-in“. Der „Drop-in“-Effekt ist besonders ansprechend, aber auch der „Typing“-Effekt hat seinen eigenen Charme.

Schritt 8: Vorschau und Anpassungen

Nutze die Vorschaufunktion, um zu sehen, wie die animierte Überschrift in der Live-Ansicht der Webseite aussieht. Hier kannst du Anpassungen vornehmen wie die Änderung von Textgröße oder Abständen, um das Layout zu optimieren.

Schritt 9: Finale Anpassungen vor dem Veröffentlichen

Bevor du die Seite speicherst, überprüfe alle Einstellungen noch einmal. Achte darauf, dass die Schriftarten und Farben mit dem Rest der Webseite harmonieren. Wenn alles gut aussieht, klicke auf „Veröffentlichen“, um die Änderungen an deiner Website live zu schalten.

Zusammenfassung

Mit dieser Anleitung hast du die grundlegenden Schritte durchlaufen, um eine animierte Überschrift in Elementor zu erstellen. Du kannst die Funktionen und Anpassungsmöglichkeiten nutzen, um deiner Website eine dynamische Note zu verleihen und die Besucher aufmerksam zu machen.