Studio Editor: Scroll-Effekte zur Kopfzeile hinzufügen
6 Min. Lesezeit
Ändere das Aussehen deiner Kopfzeile beim Scrollen, indem du Übergangseffekte hinzufügst. Lass die Kopfzeile ausblenden oder sich aus dem Blickfeld bewegen, wenn Besucher auf der Seite nach unten scrollen. Du kannst auch die Füllfarbe und Deckkraft ändern, um sie sichtbar zu halten, ohne dass sie ablenkt.
In diesem Artikel erfährst du mehr über folgende Themen:
Einen Scroll-Effekt zur Kopfzeile hinzufügen und einrichten
Wähle das Verhalten der Kopfzeile, je nachdem, wie auffällig sie sein soll. Du kannst sie zum Beispiel fixieren, damit sie immer sichtbar ist, oder sie aus dem Blickfeld verschieben, damit Besucher sich auf den Inhalt der Seite konzentrieren können.
Tipp:
Der Scroll-Effekt gilt nur für die Seite, an der du gerade arbeitest.
Um einen Scroll-Effekt auf die Kopfzeile anzuwenden:
- Wähle die Kopfzeile aus.
- Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen
.
- Wähle unter Kopfzeileneinstellungen einen Scroll-Effekt aus und richte ihn ein:
Mit Website scrollen
Fixieren
Verschwinden
Ausblenden
Die Hintergrundfarbe der Kopfzeile beim Scrollen ändern
Neben dem Scroll-Effekt, den du für die Kopfzeile wählst, kannst du die Kopfzeile auch die Farbe ändern lassen, wenn Besucher nach unten scrollen. Dadurch lenkst du noch mehr Aufmerksamkeit auf die Kopfzeile und stellst sicher, dass Besucher sie nicht übersehen.
Tipp:
Diese Einstellung gilt für jede Seite, auf der die Kopfzeile angezeigt wird.
Um die Hintergrundfarbe der Kopfzeile beim Scrollen zu ändern:
- Wähle die Kopfzeile aus.
- Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
- Aktiviere unter Design den Schalter Farbe beim Scrollen.
- Klicke auf das Farbfeld, um eine andere Farbe auszuwählen.
- (Optional) Ziehe den Schieberegler, um die Deckkraft zu ändern.
Einen Scroll-Effekt entfernen
Du kannst den Scroll-Effekt, den du deiner Kopfzeile hinzugefügt hast, jederzeit wieder entfernen.
Um einen Scroll-Effekt zu entfernen:
- Wähle die Kopfzeile aus.
- Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
- Wähle aus, was du deaktivieren möchtest:
- Scroll-Effekt: Wähle aus dem Aufklappmenü die Option Scrollen mit Website aus.
- Farbe beim Scrollen: Deaktiviere den Schalter, um diesen Effekt zu entfernen.
Mit den erweiterten Einstellungen für die Kopfzeile arbeiten
Wenn du die erweiterten Einstellungen im Inspektor aktivierst, kannst du den Scroll-Effekt der Kopfzeile bis ins Detail steuern. In dieser Ansicht kannst du die Art der Position anpassen (z. B. Gepinnt, Sticky) und den Übergang (z. B. Move, Fade) separat hinzufügen und so deinen eigenen Effekt anstelle unserer Presets erstellen.
Um die erweiterten Einstellungen zu aktivieren:
- Wähle die Kopfzeile aus.
- Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
- Klicke neben Größe auf das Symbol für Weitere Aktionen
. - Aktiviere die Option Erweiterte Einstellungen aktivieren.
- Passe unter Kopfzeileneinstellungen den Scroll-Effekt der Kopfzeile an:
- Wähle eine Positionsart aus (z. B. gepinnt, sticky).
- Füge einen Randabstand hinzu, um etwas Abstand zwischen der Kopfzeile und dem oberen Rand der Seite herzustellen.
- Aktiviere den Schalter Übergang, um den Effekt Move oder Fade hinzuzufügen.
- Füge unter Design die Option Farbe beim Scrollen hinzu.
War das hilfreich?
|