Crea un efecto de encabezado transparente pegajoso genial usando la clase CSS de Elementor.
Aprenderá a:
- Haz que tu encabezado adhesivo sea transparente
- Usa CSS para crear una transición de animación
- Cambiar la altura mínima al desplazarse
- Ir Plantillas> Creador de temas> Encabezado y edita tu plantilla de encabezado.
- Haga clic con el botón derecho en el identificador de sección del encabezado para editar la sección.
- En el panel, vaya a Avanzado> Efectos de movimiento.
Avanzado
Efectos de movimiento
- Pegajoso: Haga clic en Superior para elegir pegar el encabezado en la parte superior. Otras opciones incluyen Inferior o Ninguno.
- Pegajoso: Elija los dispositivos para pegar el encabezado, incluidos el escritorio, la tableta y el móvil.
- Compensar: Establece el número de píxeles que se desplazan antes de que el encabezado se vuelva pegajoso.
- Compensación de efectos: Establece el número de píxeles que se desplazan antes de que se produzcan los efectos del encabezado.
Nota: Las opciones de Efectos de compensación solo funcionan cuando se aplica CSS personalizado.
CSS personalizado
Agregue su propio CSS personalizado aquí. A continuación se muestra un ejemplo de CSS que cambia el color de fondo, la transparencia y la altura del encabezado, con un efecto de animación de suavizado.
selector.elementor-sticky--effects{ background-color: rgba(133,130,255,0.5) !important }
selector{ transition: background-color 4s ease !important; }
selector.elementor-sticky--effects >.elementor-container{ min-height: 80px; }
selector > .elementor-container{ transition: min-height 1s ease !important; }
Nota: Este CSS tendrá efecto cuando el usuario se haya desplazado el número de píxeles especificado en las opciones de Desplazamiento.
