Der Animierter Schlagzeilen-Block ermöglicht es Ihnen, fesselnde animierte Schlagzeilen auf Ihren SeedProd-Seiten anzuzeigen. Dieser Block hilft Ihnen, auffällige Texte zu erstellen, die sich ändern, hervorheben oder drehen, um die Aufmerksamkeit der Besucher zu erregen und wichtige Botschaften hervorzuheben.
Animierte Schlagzeilen eignen sich perfekt für Hero-Bereiche, Landing Pages, Werbebanner oder überall dort, wo Sie mehrere Wertversprechen oder Kernbotschaften auf dynamische und ansprechende Weise präsentieren möchten. Mit einer Vielzahl von Animationsstilen und visuellen Effekten können Sie Schlagzeilen erstellen, die hervorstechen und die Besucher fesseln.
Hinzufügen des animierten Schlagzeilen-Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen animierten Schlagzeilen-Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter Design > Blöcke den Block Animierte Schlagzeile in den gewünschten Bereich Ihrer Seite.
Der Block „Animierte Schlagzeile“ erscheint im Block-Panel und kann in jeden Bereich Ihrer Seite gezogen werden.
Schritt 2: Inhaltseinstellungen konfigurieren
Klicken Sie nach dem Hinzufügen auf den Block „Animierte Schlagzeile“, um dessen Einstellungen zu öffnen. Im Tab Inhalt können Sie den Animationsstil, den Textinhalt und das Timing anpassen.
Schlagzeile:
- Stil: Wählen Sie zwischen zwei Animationsstilen – Hervorgehoben (betont Text mit visuellen Formen oder Unterstreichungen) oder Rotierend (wechselt durch mehrere Textvarianten)
- Form: Wenn Sie den Stil „Hervorgehoben“ verwenden, wählen Sie die Form, die um Ihren Text erscheint. Optionen sind Kreis, Geschwungen, Unterstrich, Doppel, Doppelunterstrich, Unterstrich Zickzack, Diagonal, Durchgestrichen und X. Jede erzeugt eine einzigartige visuelle Betonung.
- Text vor der Schlagzeile: Geben Sie den statischen Text ein, der vor Ihrem animierten Teil erscheint. Dieser Text bleibt konstant und leitet den animierten Teil ein (z. B. „Wir sind“).
- Nach der Schlagzeile: Geben Sie den Text ein, der animiert oder hervorgehoben werden soll. Für den Rotationsstil können Sie mehrere durch Kommas getrennte Wörter oder Phrasen hinzufügen, die durchwechseln (z. B. „Experten, Fachleute, Innovatoren“).
- Endlosschleife: Schalten Sie um, um die kontinuierliche Animation zu aktivieren oder zu deaktivieren. Wenn aktiviert, wiederholt sich die Animation unendlich. Wenn deaktiviert, wird sie einmal abgespielt und stoppt.
- Dauer (ms): Legen Sie fest, wie lange jedes Wort oder jeder Animationseffekt angezeigt wird, gemessen in Millisekunden. Höhere Werte verlangsamen die Animation, während niedrigere Werte sie beschleunigen (z. B. 2000 ms = 2 Sekunden).
- Verzögerung (ms): Steuern Sie die Pause zwischen den Animationszyklen, gemessen in Millisekunden. Dies schafft Freiraum zwischen den Textänderungen.
- Ausrichtung: Legen Sie die horizontale Ausrichtung Ihrer gesamten Schlagzeile fest (links, Mitte oder rechts).
- Schriftgröße: Passen Sie die Größe Ihres Schlagzeilentextes an, um sicherzustellen, dass er prominent und lesbar ist.
- Level: Wählen Sie die HTML-Überschriften-Tag für Ihre animierte Schlagzeile (h1, h2, h3 oder h4). Dies wirkt sich sowohl auf SEO als auch auf die visuelle Hierarchie auf Ihrer Seite aus.
Die Registerkarte "Inhalt" bietet Optionen zur Auswahl von Animationsstilen, zur Anpassung von Text und zur Steuerung von Animationstimer und -verhalten.
Schritt 3: Design anpassen
Auf der Registerkarte Erweitert können Sie das visuelle Erscheinungsbild Ihres Blocks "Animierte Überschrift" anpassen:
Stile:
- Typografie: Steuern Sie Schriftfamilie, -stärke, -stil und andere Texteigenschaften für Ihre Überschrift
- Strichfarbe: Legen Sie die Farbe für die animierte Form oder Hervorhebung fest, die um oder hinter Ihrem Text erscheint (bei Verwendung des Stils "Hervorgehoben")
- Farbe: Wählen Sie die Textfarbe für Ihre Überschrift, um einen guten Kontrast und gute Lesbarkeit zu gewährleisten
- Textschatten: Fügen Sie Ihren Überschriften Schatteneffekte für Tiefe und Betonung hinzu. Wählen Sie aus Keine, Haarfein, Klein, Mittel, Groß, X-Groß, 2X-Groß oder Benutzerdefiniert
Abstand:
- Abstand außen: Steuern Sie den äußeren Abstand um Ihren Überschriftenblock (oben, rechts, unten, links). Dies bestimmt, wie viel Platz zwischen der Überschrift und den umgebenden Elementen erscheint
- Abstand innen: Passen Sie den inneren Abstand innerhalb Ihres Überschriftenblocks an (oben, rechts, unten, links). Dies schafft Freiraum zwischen dem Text und den Blockrändern
Attribute:
- CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Überschriftenblock an. Diese ID wird automatisch von SeedProd für benutzerdefinierte Stile oder JavaScript-Ziele erstellt
- Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um bestimmte Stile aus Ihrem Theme oder benutzerdefinierten CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie dem Wrapper-Element der Überschrift beliebige HTML-Attribute hinzu. Geben Sie jedes Attribut in eine neue Zeile im Format ein: attributname|wert (z. B. data-animation|headline)
Gerätesichtbarkeit:
- Auf Desktop ausblenden: Blenden Sie den Überschriftenblock auf Desktop-Bildschirmen aus
- Auf Tablet ausblenden: Blenden Sie den Überschriftenblock auf Tablet-Geräten aus
- Auf Mobilgeräten ausblenden: Blenden Sie den Überschriftenblock auf Mobilgeräten aus
Animationseffekte:
- Erscheinungsanimation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn die Überschrift ins Sichtfeld gescrollt wird. Optionen sind Bounce, Fade In, Zoom In, Rotate In und viele mehr. Dies erzeugt einen mehrschichtigen Animationseffekt, bei dem zuerst die Eingangsanimation des Blocks und dann die eigene Textanimation der Überschrift abgespielt wird
Die Registerkarte "Erweitert" bietet Styling-Optionen, einschließlich Typografie, Farben, Textschatten, Abstände und Eingangsanimationen.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie mit der Konfiguration des Blocks Animierte Überschrift und der Anpassung seines Erscheinungsbilds fertig sind, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Block "Animierte Überschrift" zu Ihrer Seite hinzugefügt! Dieser dynamische Block hilft Ihnen, aufmerksamkeitsstarke Überschriften zu erstellen, die mehrere Nachrichten anzeigen oder wichtige Punkte mit ansprechenden Animationen hervorheben. Experimentieren Sie mit verschiedenen Animationsstilen, Formen und Timings, um Überschriften zu erstellen, die Ihr Publikum fesseln und Ihre Botschaft effektiv kommunizieren.