En este artículo te voy a explicar cómo crear una cabecera transparente fija con Elementor Pro. Me refiero al típico header con un menú fijo que se queda arriba cuando haces scroll.
Este tipo de headers son bastante visuales, pero tienes que tener cuidado con el fondo y el color del texto para que haya suficiente contraste y el texto del menú se pueda leer sin problema.
También te voy a dejar el código CSS que he utilizado para darle un poco de estilo a la cabecera.
Aquí tienes el vídeo en el cual explico paso a paso cómo crear una cabecera transparente fija con Elementor y también cómo añadirle algunos efectos al hacer scroll.
Cómo crear un header transparente con Elementor
En los comentarios del vídeo encontrarás más información sobre cómo darle diferentes efectos que no explico en en vídeo. Pásate por los comentarios para más info.
Hacer la cabecera más pequeña al hacer scroll
Con este código CSS puedes hacer que cuando el usuario haga scroll, la cabecera se oscurezca un poco para que el menú se lea bien aunque cambie el fondo. También hace que el header sea más pequeño al hacer scroll para ocupar menos espacio de pantalla.
El código lo tienes que añadir en los ajustes avanzados de la sección. En el vídeo lo explico.
selector.elementor-sticky--effects{
background-color:rgba(0, 0, 0, 0.9)!important;
}
selector{
transition: background-color 1.3s ease !important;
}
selector.elementor-sticky--effects >.elementor-container{
min-height: 80px;
}
selector> .elementor-container{
transition: min-height 1s ease !important;
}Si no quieres tocar CSS, puedes utilizar el plugin Sticky Header Effects for Elementor como alternativa. Este plugin te permite añadir diferentes efectos a tu menú fijo al hacer scroll.
Cómo retocar el estilo de la cabecera con CSS
Para modificar el estilo de la cabecera en la mayoría de los casos tendrás que añadir css personalizado.
No es algo muy complejo, pero requiere de un poco de conocimiento técnico sobre CSS.
Aquí te dejo un vídeo en que explico cómo hacerlo.
Es un vídeo que ya tiene su tiempo, pero creo que te puede servir igual para hacerte una idea de cómo cambiar el estilo de tu cabecera trasparente modificando el CSS.
Hasta aquí el artículo, espero que te haya sido útil para crear tu header transparente con Elementor.
Y si todavía no conoces el plugin Elementor Pro y todo lo que puedes hacer con él, te dejo el enlace a la review que tengo sobre él.
Artículo recomendado: Review y opinión sobre Elementor Pro
