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

Sergio Kolomiychuk

Diseñador web especializado en WordPress. Me encantan las webs limpias con buena usabilidad y es lo que ofrezco a mis clientes. Contacta conmigo si te quieres ahorrar la parte técnica y centrarte en lo que sabes.

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.

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

  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.

Deja un comentario

Protección de datos
  • Responsable: Serhiy Kolomiychuk
  • Finalidad: Poder responder a tu comentario.
  • Legitimación: Tu consentimiento.
  • Destinatarios: Tus datos se guardan en FastComet, mi proveedor de alojamiento web que cumple con el RGPD.
  • Derechos: Tienes, entre otros, derecho a acceder, rectificar y suprimir tus datos cuando quieras.