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
¡Funciona perfectamente!
Gracias por compartir.
Me alegro de que te sirva.
Saludos 🙂
Hola me servio mucho pero como podría hacer para que el texto cambie de color o oculte el logo ?
Pues tendrías que añadir algo de estilo CSS personalizado para cuando el usuario haga scroll cambie el texto o el logo.
Buenas! me encuentro con el mismo problema… podrias compartir css para cambiar las tipografias al hacer scroll? y donde pegarlo?
gracias!
Hola,
No lo he probado, pero en teoría insertado el estilo de la tipografía en este selector te debería de funcionar.
selector.elementor-sticky–effects >.elementor-container{
font-weight: 600;
}
Para el logo habrá que usar otro selector.
Un saludo.
Hola Sergio, excelente tuto y blog! podrias hacer uno que explqie del correcto etiquetado html en las diferentes secciones creadas en una pag con Elementor? como: footer, header, main, article, div, p, sub, etc… para que después este optimizada para seo.. no hallo informacion sobre eso especificamente en youtube.. te agradezco.. sigue asi!
Hola Daniela,
Te tienes que informar sobre la estructura básica HTML de una página web. De todas formas solo tienes que buscar el nombre de la etiqueta y te saldrá para cuando la debes de usar.
Un saludo.
Muchas gracias! Super bueno, ahora lo que me ocurre es que existe como una linea divisoria en el menú, no se ajusta al color de foto, es como si tuviera un color de fondo. ¿Sabes que puede ser? Gracias
Hola Astrix, pues no sabría decirte. Si has copiado el código CSS que he puesto en el post igual te refieres colo de fondo para que he puesto para que resalte más el texto. En ese caso solo tienes que quitar lo de «background-color».
Saludos.
Hola Te comento que el menu esta con background y ya no es transparente con el codigo css como soluciono esto
Hola, seguramente sea problema de estilo CSS. Revisa los estilos css que se aplican a la cabecera y mira si alguno impide que se muestre el background transparente.
Un saludo.
Era un problema de un plugin lo desactive funciono muy bien, muchas gracias por el tutorial es de gran ayuda
Hola Juan, ¿qué plugin desactivaste?
Hola! Se puede hacer lo mismo pero agregando que se cambie la imagen cuando se scrollee? Muy bueno!
Hola, seguramente se pueda hacer pero no sé decirte. Mira en los comentarios del vídeo, igual encuentras más info sobre el tema.
Un saludo.
Hola!
Muy buen post, me gustaría saber cómo puedo poner un formulario que tengo en el lateral izquierdo también con sticky y que no se superponga con el del header. Es posible?
Gracias
Así sin investigar cómo tienes eso hecho no sé decirte ☹.
Un saludo.
Saludos necesito ser pro, para poder usar las cabeceras
Sí, es la forma más fácil.
Hola sergio, el codigo css me funcionó a la perfección, quería añadir algo más como por ejemplo quisiera que el logo al hacer scroll se cambie a otro que he diseñado más pequeño y el menú se achique más para ganar más espacio de pantalla y en la versión móvil cuando se haga scroll hacia abajo todo contenido se desaparezca de pantalla y al hacer scroll hacia arriba me aparezca de nuevo, gracias.
Saludos-
Hola Marcos, eso ya son muchas cosas las que quieres implementar. Para eso habría que estar «jugando» un rato con CSS. La verdad es que Elementor no es la mejor opción para implementar esas efecto.
Hay temas para WordPress como GeneratePress o Astra Pro que ya incluyen esas opciones.
Saludos.
¡Hola, Sergio!
Buena plantilla. He aplicado el CSS propuesto en mi página pabloflores.org.
¿Cómo lo ajustas para que evitar el espacio en blanco en la versión móvil?
Infinitas gracias y un saludo.
Hola, tienes que cambiar con el inspector de elementos de Chrome cambia a la versión móvil y mira a ver qué clase css afecta al espacio en blanco. Modifica el estilo hasta que queda como tú quieres.
Un saludo.
Hola Sergio, gracias por el código me funcionó perfectamente pero ahora me gustaría hacer un menú con el mismo efecto que el de tu página, es decir, que sólo aparezca al hacer scroll hacia arriba y no hacia abajo. Cómo se hace ese efecto?
De antemano muchas gracias!
Hola Alfredo, pues no sabría decirte la verdad. Habría que jugar bastante con el CSS para lograr eso.
Un saludo.
Se puede hacer que en vez de ser un color sólido pueda ser un degradado de un color sólido a transparente?
Sí, con un poco de css personalizado puedes hacer que sea un degradado. Busca «degradado css» y verás que hay un montón de información.
Hola Sergio gracias porque me ha funcionado perfectamente, pero ¿ qué código puedo utilizar para que en vez de negro se me pase a azul marino? #001832. En la portada me sale transparente y queda bien pero cuando bajo el scroll me sale en negro y me gustaría poner el color corporativo azul que te indico.
¡Gracias!
Hola María, se puede hacer, pero para eso tienes que retocar el CSS. No te puedo decir qué código exactamente hay que meter sin ver la página.
Un saludo.
Hola Sergio, eres genial. He seguido tus pasos para insertar el menú transparente, pero al aplicar el negativo al margen de arriba para subir la imagen, se tapa el menú de debajo y no se ve. Porfa cuál puede ser el motivo. Gracias.
Hola Ángela, no sé decirte. Tendría que entrar a tu web para investigar a ver por qué pasa eso.
Puedes mirar con el «inspector de elementos» de Chrome para ver el estilo CSS que está causando eso.
Un saludo.
Hola Sergio, muchas gracias por tus tutoriales, están geniales. Tengo el problema de que toda la info que está por debajo de la cabecera la termina tapando cuando hago el scroll, como si estuviera por detras de las fotos, videos o textos que subo. Espero haber sido claro, un saludo!
Hola, Pablo. Eso en los ajustes de la cabecera tienes que cambiar el z-index y ponerlo a 10 o o más. Haciendo eso ya no te debería de pasar o no debería.
Un saludo.
Hola Sergio, gracias por el tutorial. Lo que me surge un problema cuando añado una pagina con imagen de fondo a pantalla completa, por alguna razón me suele tapar el icono del Header o el Menu. ¿ Hay alguna manera de indicar que la cabecera este siempre en primer plano?
Muchas Gracias
Sí, eso se hace cambiado el valor de Z-Index de la cabecera. Está en los ajustes avanzados si no me equivoco de cualquier widget de Elementor.
Un saludo.
lo hago como lo dice pero si subo la foto, el menu se ve pero el logo y un boton que tengo la imagen lo tapa. Eso a qué es debido?
gracias
Seguramente tengas que ajustar el valor «Z-Index» en los ajustes avanzados del elemento que se tapa. Ponlo a 10 o a 100.
me funciona perfecto, sos un crack, solo una cosa. No se nada de css, y quiero que al bajar el fondo sea blanco, lo hice, pero no se como poner la letra en negro al bajar.
No te puedo decir porque es algo que hay que mirar a ver cómo se podría hacer con CSS personalizado.
muchas gracias por el tutorial, pero en cuanto a poner un logo(imagen) como seria para que al hacer scroll el logo cambie de tamaño a uno mas chico?
gracias
Hola Ana,
No sé decirte porque tendría que ver cómo lo tienes hecho. Es algo personalizado y no te puedo decir un código exacto.
Un saludo.
muchas gracias por el tutorial , me funciono correctamente pero , cuando coloco un carrusel de imagenes o media carrusel , las imagenes se comen al menu se ponen encima del menu .. como podria arreglar eso ..
Hola Abraham, eso seguramente sea por valor de z-index.
Tienes que aumentar el valor del z-index de la cabecera para que no pase eso.