Saltar al contenido principal

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


  1. Ir Plantillas> Creador de temas> Encabezado y edita tu plantilla de encabezado.
  2. Haga clic con el botón derecho en el identificador de sección del encabezado para editar la sección.
  3. En el panel, vaya a Avanzado> Efectos de movimiento.

file-pwb1nrewo2-8531004

Avanzado

Efectos de movimiento

  1. Pegajoso: Haga clic en Superior para elegir pegar el encabezado en la parte superior. Otras opciones incluyen Inferior o Ninguno.
  2. Pegajoso: Elija los dispositivos para pegar el encabezado, incluidos el escritorio, la tableta y el móvil.
  3. Compensar: Establece el número de píxeles que se desplazan antes de que el encabezado se vuelva pegajoso.
  4. 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; }

igraal_es-es

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

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

file-r4bigv0zqz-2412810

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