So ändern Sie die Farbe der Sticky-Header beim Scrollen in Elementor

Sticky-Header sind eine großartige Möglichkeit, das Navigationsmenü Ihrer Website jederzeit sichtbar zu halten und so einen einfachen Zugriff auf wichtige Links und Informationen zu gewährleisten. Eine statische Kopfzeile kann jedoch mit der Zeit eintönig werden, und Sie möchten möglicherweise ihre Farbe auf dem Bildlauf ändern, um ein dynamischeres und ansprechenderes Benutzererlebnis zu schaffen. In dieser Anleitung zeigen wir Ihnen, wie Sie mit einfachen und leicht verständlichen Schritten die Farbe eines Sticky-Headers beim Scrollen in Elementor ändern. Egal, ob Sie Anfänger oder erfahrener Elementor-Benutzer sind, Sie können diesen Effekt problemlos umsetzen und Ihrer Website ein frisches und modernes Aussehen verleihen.

Entwurfsmethode

Falls Sie dies noch nicht getan haben, müssen Sie den Theme Builder verwenden, um eine benutzerdefinierte Header-Vorlage zu erstellen. Beginnen Sie damit, Ihr Logo in einem Bild-Widget und einem Navigations-Widget in einem zweispaltigen Kopfbereich einzufügen.

Die Registerkarte „Erweitert“.

Für die folgenden Schritte wird die Registerkarte „Erweitert“ in den Abschnittssteuerelementen verwendet.

Randeinstellungen

Die gebräuchlichste Methode, eine Kopfzeile transparent zu machen, besteht darin, dem Abschnitt einen negativen Rand zu geben, der seiner Höhe entspricht. Entsperren Sie die Randsteuerelemente auf der Registerkarte „Erweitert“ und stellen Sie den unteren Wert auf einen negativen Wert ein (Beispiel: -125px). Dadurch wird der Abschnitt unter der Kopfzeile an den oberen Rand der Seite verschoben.

Der Z-Index

Sie müssen außerdem den Z-Index des Abschnitts erhöhen, um sicherzustellen, dass er immer oben im Inhalt steht. Sie können eine beliebige Zahl eingeben, die größer ist als der Rest des Inhalts Ihrer Website, viele Designer verwenden jedoch 1.000.

Sticky-Einstellungen

Wählen Sie im Motion Effects-Akkordeon die Option „Sticky“ und stellen Sie sie auf „Oben“.

Effekt hinzufügen

Nachdem wir nun einen einfachen transparenten Kopfbereich erstellt haben, fügen wir den Scrolleffekt hinzu.

Registerkarte „Stil“.

Für die folgenden Schritte wird die Registerkarte „Stil“ in den Abschnittssteuerelementen verwendet.

Endgültige Farbe

Legen Sie die Farbe des endgültigen Hintergrunds oder Farbverlaufs im Farbwähler fest.

Scrolleffekt

Schalten Sie die Scrolling-Effekte-Auswahl im Bedienfeld um.

Legen Sie die Werte fest

Wir müssen nun die Werte in den Ansichtsfenster-Schiebereglern anpassen, um den gewünschten Effekt zu erzielen. Scrollen Sie zu der Stelle auf Ihrer Seite, an der Sie die volle Deckkraft wünschen, und reduzieren Sie den Wert „Oben“, bis Ihre Überschrift vollständig undurchsichtig ist (Beispiel: 25 %). Sie können jetzt den Wert des Bodens erhöhen. Im vorherigen Beispiel möchten wir, dass der Effekt schnell eintritt, deshalb legen wir die Werte sehr nahe beieinander fest (Beispiel: 22 %). Dies führt dazu, dass der Effekt bei einem Seitenlauf von 3 % auftritt.

Zusammenfassung

Zusammenfassend lässt sich sagen, dass das Ändern der Sticky-Header-Farbe auf der Schriftrolle in Elementor die visuelle Attraktivität und das Benutzererlebnis Ihrer Website verbessern kann. Dies ist eine einfache und effektive Möglichkeit, Ihre Website hervorzuheben und bei Ihren Besuchern einen unvergesslichen Eindruck zu hinterlassen. Beachten Sie jedoch, dass Sie Mobil- und Tablet-Geräte anpassen oder berücksichtigen müssen, da das Header-Verhalten je nach Bildschirmgröße unterschiedlich sein kann. Um diesen idealen Punkt zu finden, sind einige Tests und Optimierungen erforderlich, aber das Endergebnis wird die Mühe auf jeden Fall wert sein. Probieren Sie diese Technik aus, um Ihrer Website ein frisches und modernes Aussehen zu verleihen.