Comment créer un en-tête collant

Crea un efecto de encabezado transparente pegajoso genial usando la clase CSSConcepto de CSS¿Qué es el CSS?CSS es un lenguaje de programación que se usa para definir el estilo y el aspecto de un documento que se ha escrito mediante de un lenguaje de etiquetas, como HTML. Conocido además como hojas de estilo en cascada, es el que se emplea para dar colores, indicar tipos de letra o inclusive resaltar aspectos como el espacio entre items para dotar de estilo a Suite de Elementor.

Vous allez apprendre à:

• Rendez votre en-tête collant transparent
• Utilisez CSS pour créer une transition d'animation
• Changer la hauteur minimale lors du défilement

1. Aller Modèles> Générateur de thèmes> En-tête et modifiez votre modèle d'en-tête.
2. Cliquez avec le bouton droit sur l'identificateur de section dans l'en-tête pour modifier la section.
3. Sur le tableau de bord, accédez à Avancé> Effets de mouvement.

Avancée

Effets de mouvement

1. Collant: Cliquez sur Haut pour choisir de coller l'en-tête en haut. Les autres options incluent Inférieur ou Aucun.
2. Collant: Choisissez les appareils sur lesquels coller l'en-tête, y compris les ordinateurs de bureau, les tablettes et les mobiles.
3. Compenser: Définit le nombre de pixels à décaler avant que l'en-tête ne devienne collant.
4. Compensation des effets: Définit le nombre de pixels à décaler avant que les effets d'en-tête ne se produisent.

Noter: Les options des effets de décalage ne fonctionnent que lorsque le CSS personnalisé est appliqué.

CSS personnalisé

Ajoutez votre propre CSS personnalisé ici. Voici un exemple de CSS qui modifie la couleur d'arrière-plan, la transparence et la hauteur de l'en-tête, avec un effet d'animation anti-alias.

selector.elementor-sticky - effets {background-color: rgba (133,130,255,0.5)! important}

selector {transition: background-color 4s facilité! important; }

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

selector> .elementor-container {transition: min-height 1s facilité! important; }

Noter: Ce CSS entrera en vigueur lorsque l'utilisateur aura fait défiler le nombre de pixels spécifié dans les options de défilement.