Scrolling-Blöcke

Füge einen sich horizontal bewegenden Text zu deiner Seite hinzu, um die Aufmerksamkeit der Besucher zu gewinnen.

Zuletzt aktualisiert: 10. April 2024

Verwende Scrolling-Blöcke, um Text hinzuzufügen, der horizontal über die Seite scrollt, ähnlich wie bei einem Geschäftsschild eines Kinos oder einem Nachrichtenticker. Dies ist eine großartige Option, um deinen Text optisch hervorzuheben oder die Aufmerksamkeit der Besucher auf wichtige Informationen zu lenken.

Video ansehen

Einen Scrolling-Block hinzufügen

So fügst du einen Scrolling-Block hinzu:

  1. Bearbeite eine Seite oder einen Beitrag, klicke auf Block hinzufügen oder auf eine Einfügemarke und klicke dann auf Scrollen. Weitere Informationen findest du unter Inhalte mithilfe von Blöcken hinzufügen.
  2. Öffne den Block-Editor, indem du auf das Bleistiftsymbol auf dem Block klickst.
  3. Füge im Tab Inhalt Textelemente hinzu oder bearbeite sie.
  4. Um den Scrolling-Block in einen anklickbaren Link zu verwandeln, füge eine Webadresse in das Feld Link ein, oder klicke auf „das, um verschiedene Arten von Links hinzuzufügen. Wenn Besucher auf den Scrolling-Block klicken, gelangen sie zu dem Link, den du hinzugefügt hast.
  5. Klicke auf Design, um den Block anzupassen.
A_scrolling_block_with_the_text_Dream_It.gif

Hinweis

Auf iOS-Geräten werden Scrolling-Blöcke nicht gescrollt, wenn der Besucher die Barrierefreiheitsfunktion „Bewegung reduzieren“ aktiviert hat.

Textelemente hinzufügen oder bearbeiten

Wenn du einen Scrolling-Block hinzufügst, enthält dieser standardmäßig zwei Elemente. Eine enthält den Text Träumen und die andere enthält ein „Wellenlinien“-Emoji, das als Trennlinie dient.

Du kannst neue Elemente hinzufügen oder vorhandene Elemente mit deinem eigenen Text bearbeiten.

Neue Elemente hinzufügen

So fügst du ein neues Element hinzu:

  1. Klicke auf der Seite mit dem Scrolling-block auf Bearbeiten, klicke auf den Block und dann auf das Bleistiftsymbol oder auf Bearbeiten.
  2. Klicke im Tab Inhalt auf Element hinzufügen.
  3. Dadurch wird ein neues Element mit Standardtext erstellt. Um den Text zu bearbeiten, klicke auf das Element in der Liste und dann in das Feld Text.

Vorhandene Elemente bearbeiten

Um vorhandene Elemente zu bearbeiten, zu duplizieren oder zu löschen, klicke auf das Element im Tab Inhalt des Block-Editors. Bearbeite den Text im Feld oder klicke auf Duplizieren oder Löschen.

Du kannst Elemente auch direkt über den Tab Inhalt löschen, indem du auf das Papierkorb-Symbol klickst.

Elemente neu anordnen

Die Elementliste im Tab Inhalt legt die Reihenfolge des Lauftextes fest. So ordnest du Elemente neu an:

  1. Klicke auf der Seite mit dem Scrolling-block auf Bearbeiten, klicke auf den Block und dann auf das Bleistiftsymbol.
  2. Klicke im Tab Inhalt auf das Symbol :: links neben dem Elementtitel und halte es gedrückt.
  3. Ziehe das Element an die Stelle, an der es in der Liste erscheinen soll.
  4. Wiederhole den Vorgang für andere Elemente, bis die Liste in der gewünschten Reihenfolge ist.

Das Design anpassen

Im Tab Design des Block-Editors kannst du das Aussehen des Scrolling-Blocks auf verschiedene Weise anpassen. Wir empfehlen, die verschiedenen Einstellungen auszuprobieren, bis du eine Kombination gefunden hast, die dir gefällt.

Jeder Scrolling-Block hat seine eigenen Design-Einstellungen. Du kannst Einstellungen nicht automatisch auf alle Scrolling-Blöcke auf deiner Website anwenden.

Textwelle

Mit den folgenden Anpassungen kannst du eine Welle zum Text hinzufügen, sodass der Text im Block vertikal steigt und fällt:

  • Wellenintensität – Stelle die vertikale Höhe der Welle ein. Die Einstellung ganz links erzeugt keine Welle und die ganz rechts erzeugt die höchste Wellenhöhe.
  • Wellenbreite – Wähle SML oder ... für eine benutzerdefinierte Einstellung aus. Bei einer kleineren Wellenbreite siehst du im Scrolling-Block den höchsten und niedrigsten Punkt der Welle häufiger. Bei einer größeren Wellenbreite kann die Welle wie eine lange Kurve erscheinen und ihr höchster Punkt ist möglicherweise nicht sichtbar.

Hier ist ein Beispiel für einen Scrolling-Block mit mittlerer Wellenintensität und kleiner Wellenbreite:

A_scrolling_block_with_the_text_Dream_It_that_goes_up_and_down_in_waves_.gif

Textstil und -größe

Lege den Textstil und die Textgröße mit diesen Anpassungen fest:

  • Textstil – Wähle Absatz oder Überschrift aus. Je nach deiner Wahl folgt der Text den globalen Absatz- oder Überschriften-Stilen. Dadurch werden die Schriftart und andere Stil-Einstellungen festgelegt, jedoch nicht die Größe.
  • Textgröße – Wähle SML oder... für eine benutzerdefinierte Einstellung aus.

Ändere die Textfarbe unter Website-Stile. Die Textfarbe folgt den Anpassungen der Absatzfarbe oder der Überschriftenfarbe unter Scrolling im Farbschema des Abschnitts, je nachdem, was du für den Textstil ausgewählt hast.

Wenn du eine Hintergrundfarbe zum Scrolling-Block hinzufügst, richtet sich der Text nach der Absatzfarbe auf Hintergrund oder der Überschriftenfarbe auf Hintergrund unter Scrolling.

Beachte, dass die „Wellenlinie“ ein Emoji mit einer festgelegten Farbe ist, das nicht angepasst werden kann.

Scroll-Stil

Passe das Verhalten und das Erscheinungsbild vom Scrollen mit diesen Anpassungen an:

  • Richtung – Richte den Block so ein, dass er nach links oder rechts scrollt.
  • Geschwindigkeit – Stelle die Scroll-Geschwindigkeit auf 0,5x, 1x oder 2x ein.
  • Pause beim Mouseover – Aktiviere diesen Schalter, damit das Scrollen angehalten wird, wenn Besucher den Mauszeiger über den Block bewegen.Die Animation wird nicht angehalten, wenn du dich im Bearbeitungsmodus befindest.
  • An Rändern verblassen – Aktiviere diesen Schalter, um den Text am linken und rechten Rand des Blocks halbtransparent zu machen.
  • Elementabstand – Lege den Abstand zwischen Textelementen beim Scrollen fest.

Weitere Stil-Optionen

Um das Erscheinungsbild des Scrolling-Blocks anzupassen:

  • Strich – Aktiviere eine durchgezogene oder gepunktete Linie, die den Block umranden soll. Lege sowohl für durchgezogene als auch für gepunktete Linien die Farbe und Stärke des Strichs fest. 
  • Mischmodus – Verwende das Drop-down-Menü, um eine Transparenzeinstellung auszuwählen. Diese Effekte sind ideal, wenn du einen Scrolling-Block vor einem Bild oder anderen visuellen Inhalten überlagerst.
  • Unschärfe – Aktiviere den Schalter, um entweder das Element oder den Hintergrund unscharf zu machen, und verwende den Schieberegler, um den Unschärfegrad anzupassen.

So erlangst du Zugriff auf diese Funktion

Die Anpassungen für Strich, Mischmodus und Unschärfe sind für die Abschnitte Kreativer Editor verfügbar. Für Abschnitte, die den Klassischen Editor verwenden, ist nur Strich verfügbar.

Footer Image
  • Hol dir Hilfe von der Community

  • Hol dir Hilfe von unserer Community zu erweiterten individuellen Anpassungen.

  • Beauftrage einen Squarespace-Experten

  • Hebe dich online von der Masse ab, indem du dir von einem erfahrenen Webdesigner oder Entwickler helfen lässt.