Cómo crear una cabecera transparente fija en WordPress con Elementor

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

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on telegram
Telegram
Share on whatsapp
WhatsApp

Sergio Kolomiychuk

Hago webs con WordPress para emprendedores unipersonales que no quieren lidiar con la parte técnica y de diseño. Comparto lo aprendido sobre SEO, Marketing y WordPress en mi blog y canal de YouTube.

Suscríbete al blog

Es gratis y libre de spam.

Responsable: Serhiy Kolomiychuk (Sergio para los amigos). Finalidad: Gestionar y enviar información de boletines y promociones a través de correo electrónico. Legitimación: Tu consentimiento. Destinatarios: Tus datos se guardan en MailChimp. Derechos: Tienes, entre otros, derecho a acceder, rectificar y suprimir tus datos cuando quieras.

37 comentarios en «Cómo crear una cabecera transparente fija en WordPress con Elementor»

    • 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.

  1. 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!

    Responder
    • 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.

  2. 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

    Responder
    • 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, 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.

    • 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.

  3. 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

    Responder
  4. 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-

    Responder
    • 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.

  5. ¡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.

    Responder
    • 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.

  6. 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!

    Responder
    • Hola Alfredo, pues no sabría decirte la verdad. Habría que jugar bastante con el CSS para lograr eso.
      Un saludo.

    • 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.

  7. 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!

    Responder
    • 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.

  8. 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.

    Responder
    • 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.

  9. 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!

    Responder
    • 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.

  10. 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

    Responder
    • 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.

  11. 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

    Responder
    • Seguramente tengas que ajustar el valor «Z-Index» en los ajustes avanzados del elemento que se tapa. Ponlo a 10 o a 100.

Deja un comentario

Protección de datos