Wie kann ich meinen Website-Header beim Scrollen verkleinern?

Möchten Sie das Navigationserlebnis auf Ihrer Homepage-Baukasten-Website verbessern? Versuchen Sie, dem Header einen Verkleinerungseffekt hinzuzufügen. Wenn dieser Effekt angewendet wird, wird Ihr Header oben auf Ihrer Seite fixiert und beim Scrollen der Besucher verkleinert. Sobald sie zum Seitenanfang zurückkehren, wird der Header wieder in seiner vollen Größe angezeigt. 

Dies ist eine intelligente Funktion, die Sie anwenden können, wenn Sie sicherstellen möchten, dass Ihre Besucher so viel wie möglich von Ihrer Website sehen können, während sie scrollen, ohne sie von wichtigen Elementen wie Ihrem Menü im Header wegzuführen.


Schritt 1 - Gehen Sie zu den Header-Einstellungen in Ihrem Homepage-Baukasten-Editor

  1. Gehen Sie zu Ihrem Homepage-Baukasten-Editor und klicken Sie ganz oben auf der Seite auf Ihren Header.
  2. Klicken Sie auf die Registerkarte Header bearbeiten.
Screenshot des Homepage-Baukasten-Editors. Der Header-Abschnitt ist hervorgehoben und ein roter Pfeil zeigt auf die Registerkarte "Header bearbeiten".

Schritt 2 - Aktivieren Sie den Verkleinerungseffekt

  1. Sie sehen nun zwei Menüs für den Header: Ein Eigenschaftenfenster und ein schwebendes Menü. Suchen Sie nach Letzterem und wählen Sie unten Verkleinerungseffekt.
  2. Schieben Sie den Schalter für den Verkleinerungseffekt, um den Effekt zu aktivieren.
Screenshot des Homepage-Baukasten-Editors. Das schwebende Menü ist geöffnet, und ein roter Pfeil zeigt auf die gerahmte Option "Verkleinerungseffekt".

Schritt 3 - Den Verkleinerungseffekt anpassen

Ziehen Sie die Markierung auf der Leiste in eine beliebige Richtung, um festzulegen, um wie viel Ihr Logo verkleinert werden soll, wenn Besucher auf der Seite nach unten scrollen. Der minimale Verkleinerungsprozentsatz beträgt 10 % und der maximale 50 %.

Screenshot des geöffneten Menüs für den Verkleinerungseffekt. Ein roter Pfeil zeigt auf die Einstellung, in der Sie entscheiden können, wie stark das Logo schrumpfen soll.

Schritt 4 - Vorschau, Speichern und Veröffentlichen

Überprüfen Sie Ihre Vorschau, um den Effekt in Aktion zu sehen. Sobald Sie damit zufrieden sind, können Sie die Änderung speichern und veröffentlichen.

GIF zeigt den verkleinernden Header-Effekt in Aktion.

Verwandte Artikel:

War dieser Beitrag hilfreich?

Können Sie nicht finden, wonach Sie suchen?

Starten Sie einen Chat

Der schnellste Weg, mit uns in Kontakt zu treten – werktags von 09:00 bis 18:00 Uhr.