Mit dem Block „Animierte Überschrift“ können Sie auf Ihren SeedProd-Seiten auffällige animierte Überschriften anzeigen. Dieser Block hilft Ihnen dabei, auffällige Texte zu erstellen, die sich ändern, hervorheben oder drehen, um die Aufmerksamkeit der Besucher auf sich zu ziehen und wichtige Botschaften hervorzuheben.
Animierte Überschriften eignen sich perfekt für Hero-Sequenzen, Landingpages, 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 Überschriften erstellen, die auffallen und die Aufmerksamkeit der Besucher auf sich ziehen.
Hinzufügen des animierten Überschriftenblocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen animierten Überschriftenblock zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter „Design“ > „Blöcke“ den Block „Animierte Überschrift“ per Drag & Drop in den gewünschten Abschnitt Ihrer Seite.
Der Block „Animierte Überschrift“ wird im Blockbereich angezeigt und kann in einen beliebigen Abschnitt Ihrer Seite gezogen werden.
Schritt 2: Inhaltseinstellungen konfigurieren
Klicken Sie nach dem Hinzufügen auf den Block „Animierte Überschrift“, um dessen Einstellungen zu öffnen. Auf der Registerkarte „Inhalt“ können Sie den Animationsstil, den Textinhalt und das Timing anpassen.
Überschrift:
- Stil: Wählen Sie zwischen zwei Animationsstilen – Hervorgehoben (betont Text mit visuellen Formen oder Unterstreichungen) oder Rotierend (wechselt zwischen mehreren Textvarianten).
- Form: Wenn Sie den Stil „Hervorgehoben“ verwenden, wählen Sie die Form aus, die um Ihren Text herum angezeigt wird. Zu den Optionen gehören Kreis, Geschwungen, Unterstrichen, Doppelt, Doppelt unterstrichen, Unterstrichen Zickzack, Diagonal, Durchgestrichen und X. Jede Option erzeugt eine einzigartige visuelle Hervorhebung.
- Vor dem Überschriften-Text: Geben Sie den statischen Text ein, der vor Ihrem animierten Teil erscheint. Dieser Text bleibt unverändert und leitet den animierten Teil ein (z. B. „Wir sind“).
- Nach der Überschrift: Geben Sie den Text ein, der animiert oder hervorgehoben werden soll. Für den Rotationsstil können Sie mehrere Wörter oder Ausdrücke hinzufügen, die durch Kommas getrennt sind und abwechselnd angezeigt werden (z. B. „Experten, Fachleute, Innovatoren“).
- Endlosschleife: Schalten Sie diese Option ein oder aus, um die kontinuierliche Animation zu aktivieren oder zu deaktivieren. Wenn diese Option aktiviert ist, wird die Animation unbegrenzt wiederholt. Wenn sie deaktiviert ist, wird sie einmal abgespielt und dann angehalten.
- 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): Steuert die Pause zwischen den Animationszyklen, gemessen in Millisekunden. Dadurch entsteht ein Atempause zwischen den Textänderungen.
- Ausrichten: Legen Sie die horizontale Ausrichtung für Ihre gesamte Überschrift fest (links, mittig oder rechts).
- Schriftgröße: Passen Sie die Größe Ihres Überschriftentexts an, um sicherzustellen, dass er gut sichtbar und lesbar ist.
- Ebene: Wählen Sie das HTML-Überschriften-Tag für Ihre animierte Überschrift (h1, h2, h3 oder h4). Dies wirkt sich sowohl auf die Suchmaschinenoptimierung (SEO) als auch auf die visuelle Hierarchie Ihrer Seite aus.
Auf der Registerkarte „Inhalt“ können Sie Animationsstile auswählen, Text anpassen und das Timing und Verhalten der Animation steuern.
Schritt 3: Design anpassen
Auf der Registerkarte „Erweitert“ können Sie das Erscheinungsbild Ihres Blocks „Animierte Überschrift“ anpassen:
Stile:
- Typografie: Steuern Sie die Schriftfamilie, Schriftstärke, Schriftart und andere Texteigenschaften Ihrer Überschrift.
- Strichfarbe: Legen Sie die Farbe für die animierte Form oder Hervorhebung fest, die um Ihren Text herum oder hinter ihm angezeigt wird (bei Verwendung des Stils „Hervorgehoben“).
- Farbe: Wählen Sie die Textfarbe für Ihre Überschrift, um einen guten Kontrast und eine gute Lesbarkeit zu gewährleisten.
- Textschatten: Fügen Sie Schatteneffekte zu Ihrem Überschriftentext hinzu, um Tiefe und Betonung zu erzielen. Wählen Sie zwischen „Keine“, „Haarfein“, „Klein“, „Mittel“, „Groß“, „X Groß“, „2X Groß“ oder „Benutzerdefiniert“.
Abstand:
- Rand: Steuert den äußeren Abstand um Ihren Überschriftenblock (oben, rechts, unten, links). Damit legen Sie fest, wie viel Platz zwischen der Überschrift und den umgebenden Elementen angezeigt wird.
- Abstand: Passen Sie den inneren Abstand innerhalb Ihres Überschriftenblocks an (oben, rechts, unten, links). Dadurch entsteht ein Luftraum zwischen dem Text und den Blockrändern.
Attribute:
- CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Überschriftenblock an. Diese ID wird von SeedProd automatisch für benutzerdefiniertes Styling oder JavaScript-Targeting erstellt.
- Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um bestimmte Stile aus Ihrem Theme oder benutzerdefiniertem CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie beliebige HTML-Attribute zum Headline-Wrapper-Element hinzu. Geben Sie jedes Attribut in einer neuen Zeile im folgenden Format ein: Attributname|Wert (z. B. data-animation|headline)
Geräte-Sichtbarkeit:
- Auf dem Desktop ausblenden: Den Kopfzeilenblock auf Desktop-Bildschirmen ausblenden
- 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:
- Eingangsanimation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn die Überschrift in den Blickbereich scrollt. Zu den Optionen gehören „Hüpfen“, „Einblenden“, „Vergrößern“, „Eindrehen“ und viele mehr. Dadurch entsteht ein mehrschichtiger Animationseffekt, bei dem zuerst die Block-Eingangsanimation und anschließend die Textanimation der Überschrift abgespielt wird.
Die Registerkarte „Erweitert“ bietet Gestaltungsoptionen wie Typografie, Farben, Textschatten, Abstände und Einstiegsanimationen.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Blocks „Animierte Überschrift“ abgeschlossen und dessen Erscheinungsbild angepasst haben, speichern Sie Ihre Arbeit.
Sie haben erfolgreich einen animierten Überschriftenblock zu Ihrer Seite hinzugefügt! Mit diesem dynamischen Block können Sie aufmerksamkeitsstarke Überschriften erstellen, die mehrere Botschaften präsentieren oder wichtige Punkte mit ansprechenden Animationen hervorheben. Experimentieren Sie mit verschiedenen Animationsstilen, Formen und Zeitabläufen, um Überschriften zu erstellen, die Ihr Publikum fesseln und Ihre Botschaft effektiv vermitteln.