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.

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.

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

Deja un comentario

Protección de datos