So erstellen Sie einen klebrigen Header

Crea un efecto de encabezado transparente pegajoso genial usando la clase CSS de Elementor.

Du wirst lernen zu:

• Haz que tu encabezado adhesivo Sein transparent
• Verwenden Sie CSS, um einen Animationsübergang zu erstellen
• Ändern Sie die Mindesthöhe beim Scrollen

1. Gehen Vorlagen> Theme Builder> Header und bearbeiten Sie Ihre Header-Vorlage.
2. Klicken Sie mit der rechten Maustaste auf die Abschnittskennung in der Kopfzeile, um den Abschnitt zu bearbeiten.
3. Gehen Sie im Dashboard zu Erweitert> Bewegungseffekte.

Fortgeschrittene

Bewegungseffekte

1. Klebrig: Klicken Sie auf Oben, um die Überschrift oben einzufügen. Andere Optionen sind Niedriger oder Keine.
2. Klebrig: Wählen Sie die Geräte aus, auf denen der Header eingefügt werden soll, einschließlich Desktop, Tablet und Mobile.
3. Wieder gut machen: Legt die Anzahl der Pixel fest, die verschoben werden sollen, bevor der Header klebrig wird.
4. Effektkompensation: Legt die Anzahl der Pixel fest, die verschoben werden sollen, bevor Header-Effekte auftreten.

Hinweis: Die Optionen für Offset-Effekte funktionieren nur, wenn benutzerdefiniertes CSS angewendet wird.

Benutzerdefinierte CSS

Fügen Sie hier Ihr eigenes benutzerdefiniertes CSS hinzu. Hier ist ein Beispiel für CSS, das die Hintergrundfarbe, Transparenz und Höhe des Headers mit einem Anti-Aliasing-Animationseffekt ändert.

selector.elementor-sticky - Effekte {Hintergrundfarbe: rgba (133,130,255,0,5)! wichtig}

Selektor {Übergang: Hintergrundfarbe 4s Leichtigkeit! wichtig; }}

selector.elementor-sticky - Effekte> .elementor-container {min-height: 80px; }}

Selektor> .elementor-container {Übergang: Mindesthöhe 1s Leichtigkeit! wichtig; }}

Hinweis: Este CSS tendrá efecto cuando el Nutzername se haya desplazado el número de píxeles especificado en las opciones de Desplazamiento.