Comment créer un en-tête collant

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

Vous allez apprendre à:

• Haz que tu encabezado adhesivo être 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: Este CSS tendrá efecto cuando el Nom d'utilisateur se haya desplazado el número de píxeles especificado en las opciones de Desplazamiento.