Ein bewegliches Wort in einer Überschrift zieht das Auge dort, wo eine statische Linie nicht ist Das freie Animiertes Headline-Widget In Master-Addons für Elementor Teilt Ihre Überschrift in einen festen Teil und einen animierten Teil auf und durchläuft dann den animierten Teil durch eine Liste von Wörtern mit Effekten wie Dreh- und Ladebalken sowie Tippen, Folien und Clips in Pro.
Sie schreiben die erste Überschrift, fügen die Wörter hinzu, die sich drehen, wählen eine Animationsvoreinstellung aus und stilisieren dann beide Teile. Diese Anleitung durchläuft jede Einstellung im Widget.
Was das Widget Animated Headline bewirkt #
Das Widget baut eine Überschrift aus zwei Teilen auf Die Erste Überschrift Bleibt stehen, und die Zweite Überschrift Drehungen durch eine Liste von Wörtern mit der gewählten Animation “Master Addons” kann also neben einem Wort sitzen, das von Ultimate Addons über Unique Design zu Unlimited Variations in einer Schleife wechselt.
Es hat drei Laschen. Inhalt Hält den Text, die Wortliste, die Voreinstellung und das Timing. Stil Farben und Größen jeder Überschrift. Fortgeschritten Die üblichen Elementorabstände und Sichtbarkeitsoptionen trägt.
Bevor Sie beginnen #
- WordPress Mit Elementor Installiert und aktiv.
- Master-Addons für Elementor Installiert und aktiv Neu im Plugin? siehe die Installationsführung.
- Ihr fester Überschriftstext und die Liste der Wörter, durch die Sie rotieren möchten.
So fügen Sie das Widget Animierte Überschrift hinzu #
Öffnen Sie im Elementor-Editor die Elemente Panel und suchen nach Animierte Schlagzeilen, oder scrollen Sie zum Abschnitt Master Addons (die Widgets tragen ein lila MA-Abzeichen) Ziehen Sie es auf Ihre Seite und es wird mit einer bearbeitungsbereiten Beispielüberschrift geladen.
Legen Sie die Überschriften und die Wortliste fest #
Öffnen Sie die Inhalt Tab. Die Erste Überschrift ist der statische Text, und Zweite Überschriften Wiederholer von Wörtern ist, die rotieren.
- Stilvoreinstellung: Die für das rotierende Wort verwendete Animation.
- Erste Überschrift: Der feste Teil der Zeile, mit einer Write with AI Option.
- Zweite Überschriften: Ein Element pro rotierendem Wort Verwenden Sie Element hinzufügen, um Wörter hinzuzufügen, das Kopiersymbol zu duplizieren und das X zu entfernen.
- Ausrichtung und HTML-Tag: Richten Sie die Überschrift aus und setzen Sie ihr Tag (H1 bis H6, div, span oder p).
- Animationsverzögerung: Wie lange jedes Wort vor dem nächsten anzeigt, in Millisekunden (standardmäßig 2500, 3800 für Ladeleiste) Drehen Sie 2, Tippen und Clip fügen Sie zusätzlichen Buchstaben hinzu oder zeigen Sie Zeitfelder auf.
Wählen Sie eine Animationsvoreinstellung aus #
Die Stilvoreinstellung Dropdown setzt, wie das rotierende Wort ein - und aussteigt Vier Voreinstellungen sind kostenlos und sechs benötigen Master Addons Pro. In der kostenlosen Version sind die Pro-Voreinstellungen markiert (Pro) und bleiben statisch, wenn Sie sie auswählen.
- 1, 2, 3 drehen (kostenlos): Das Wort umdrehen oder an seinen Platz drehen.
- Tippen (Pro): Geben Sie das Wort Zeichen für Zeichen ein, wie bei einer Schreibmaschine.
- Ladestange (kostenlos), Slide and Clip (Pro): Enthüllen Sie das Wort mit einem Balken, einer Folie oder einer beweglichen Kante.
- Zoom, Skalieren, Drücken (Pro): Skalieren oder das Wort ein - und ausschieben.
Die Ladestange Voreingestellt wischt beispielsweise jedes Wort hinter einer beweglichen Leiste ein, bevor das nächste geladen wird.
Stil die erste Überschrift #
Die Stil Tab-Aufteilungen in Erste Überschrift, Zweite Überschrift, und Muster (eine Pro-Option). Öffnen Erste Überschrift Feststehenden Text zu stylen.
- Textfarbe und Hintergrund: Die feste Wortfarbe und ein optionales Highlight dahinter.
- Typografie: Schriftart, Größe und Gewicht.
- Polsterung, Rand, Rand, Kastenschatten: Die Box um den Text.
Stil das animierte Wort #
Offen Zweite Überschrift Drehwort von selbst zu stylen, ihm eine Kontrastfarbe oder einen Highlight-Hintergrund zu geben und die Animation sticht heraus, anstatt sich in den festen Text einzufügen.
Es verfügt über die gleichen Steuerelemente wie die erste Überschrift, sodass Sie eine andere Textfarbe, einen Hervorhebungshintergrund, eine Typografie und einen Rand für den Teil festlegen können, der sich bewegt.
Häufige Anwendungsfälle #
- Heldenschlagzeilen Die sich durch Ihre Hauptverkaufsstellen drehen.
- Landing-seiten Radsportpublikum oder Anwendungsfälle (für Blogger, für Geschäfte, für Agenturen).
- Feature-abschnitte Hervorheben, was ein Produkt tut, in ein paar rotierenden Worten.
- Portfolio-intros Mit Typisierungseffekt auf Ihre Rolle oder Fähigkeiten.
- Ankündigungsbalken Zeichnen Sie den Blick mit einem einzigen animierten Wort.
Tipps für die Arbeit mit dem Widget Animated Headline #
- Drehen Sie Wörter mit ähnlicher Länge weiter. Große Längensprünge bewirken eine Verschiebung der Linie, während sie animiert wird.
- Stellen Sie die Verzögerung auf die Lesegeschwindigkeit ein. Etwa 2000 bis 3000 ms lassen die Menschen jedes Wort lesen.
- Kontrastieren Sie das animierte Wort. Eine andere Farbe oder ein anderes Highlight sagt den Besuchern, welcher Teil sich bewegt.
- Passen Sie die Voreinstellung an den Ton an. Tippen passt zu einer persönlichen Website; Drehen und Folieren passen zu einem mutigen Helden.
- Legen Sie das richtige HTML-Tag fest. Verwenden Sie H1 für die Hauptüberschrift einer Seite, damit sie für SEO korrekt bleibt.
Sehen Sie sich das Video-Tutorial an #
Folgen Sie lieber auf dem Bildschirm? Das Video-Tutorial unten durchläuft das Element Animated Headline von Anfang bis Ende und zeigt, wie jede Voreinstellung, Wortliste und Stiloption im Elementor-Editor funktioniert.
Häufig gestellte Fragen #
Was ist das Animierte Headline-Widget in Master Addons?
Es handelt sich um ein Elementor-Widget, das aus einem festen ersten Teil und einem animierten zweiten Teil eine Überschrift aufbaut, der zweite Teil dreht sich durch eine Liste von Wörtern mit Effekten wie Dreh - und Ladebalken (frei) oder Tippen und Schieben (Pro), alle gesetzt aus dem Elementor-Panel ohne Code.
Welche Animationsstile enthält das Widget Animated Headline?
Zehn Voreinstellungen. Drehen 1, Drehen 2, Drehen 3 und Ladestange sind frei, und Tippen, Schieben, Clip, Zoom, Skalieren und Drücken benötigen Master-Addons Pro. Jedes ändert, wie das rotierende Wort ein- und ausgeht, von einem Schreibmaschineneffekt zu einer Stangenfreigabe oder einem Spin.
Wie füge ich die rotierenden Wörter hinzu oder ändere sie?
Öffnen Sie die Registerkarte Inhalt und verwenden Sie den Repeater Zweite Überschriften Jedes Element ist ein rotierendes Wort Verwenden Sie Element hinzufügen, um Wörter hinzuzufügen, das Kopiersymbol, um eines zu duplizieren, und das X, um es zu entfernen Das Widget durchläuft sie der Reihe nach.
Kann ich steuern, wie schnell sich die Wörter ändern?
Ja. Das Feld Animation Delay im Reiter Inhalt legt fest, wie lange jedes Wort vor dem nächsten anzeigt, in Millisekunden Ein Wert um 2000 bis 3000 gibt Besuchern Zeit, jedes Wort zu lesen, bevor es sich dreht.
Kann ich in Elementor eine Schlagzeile für den Typisierungseffekt erstellen?
Ja, mit Master Addons Pro. Setzen Sie das Style Preset auf Tippen und die rotierenden Wörter tippen Zeichen für Zeichen aus, wie bei einer Schreibmaschine, dann löschen und tippen Sie das nächste Wort Es passt gut zu persönlichen Seiten und Portfolio-Intros.
Warum funktioniert meine animierte Überschrift nicht?
Fügen Sie mindestens zwei Elemente in Zweite Überschriften hinzu, denn ein einzelnes Wort hat nichts, worauf es sich drehen kann Voreinstellungen, die mit (Pro) gekennzeichnet sind, bleiben statisch, es sei denn, Master Addons Pro ist aktiv Wenn sich die Überschrift im Editor, aber nicht auf der Live-Seite bewegt, schließen Sie die Master Addons-Skripte aus JavaScript-Einstellungen in Ihrem Cache-Plugin kombinieren oder verzögern, dann löschen Sie den Cache.
Einwickelnd #
Die Animiertes Headline-Widget Verschiebt eine flache Überschrift in eine bewegliche: Schreiben Sie den festen Teil, listen Sie die Wörter auf, die gedreht werden sollen, wählen Sie eine Voreinstellung wie Drehen oder Laden der Leiste aus und stylen Sie dann beide Hälften. Weitere Überschriften-Widgets finden Sie in der Dual Heading-Widget und die Gradient Headline-WidgetDurchsuchen Sie das Ganze Master Addons Widgets und Erweiterungen& überprüfen Sie die Preisseite Für das, was jeder Plan beinhaltet.
