cabecera fija con elementor

Crear cabecera fija con Elementor (sticky header) + VIDEO

Cómo crear cabecera fija con Elementor, que sea transparente, que se cambie el logo y sin utilizar otros plugin mas que Elementor PRO.

Nota Rápida

para que funcione correctamente, necesitarás Elementor Pro . si aún no lo has actualizado, usa mi enlace de Afiliado , esta comisión no tiene costo adicional para ti, pero me ayudara a mantener mi blog y a seguir publicando contenido.

Esta es una de las preguntas más comunes que he encontrado en los grupos oficiales de Elementor  sobre  como crear una cabecera fijate o sticky header con Elementor Page Builder, vi varios tutoriales, hice varias pruebas hasta que logre el efecto que necesitaba y por el que tanto preguntaban.

Ahora lo comparto contigo!

Se puede hacer si prefiere usar plugins de terceros o plugins como  Sticky Header Effects para Elementor  ( funciona solo si tiene instalado Elementor Pro ).

Aunque este post tiene mas que ver con CSS personalizado sin necesidad de otros plugins o bien puedes ir hasta el final y ver el video y hacerlo todo con Elementor sin tocar el CSS.

Si eres como yo y no quieres depender demasiado de plugins adicionales, esta publicación es para ti y te mostraré paso a paso cómo se hace.

NOTA : Todos los símbolos “/” son ruta. y “-” es la ruta secundaria.

Contenido del articulo

También te puede ayudar:  Cómo instalar Google Analitycs en WordPress + Incluye Video + BONUS

Crear plantilla de encabezado

Crear cabecera fija con Elementor (sticky header) + VIDEO 1

Mini curso GRATIS

5 consejos
para acelerar
tu WordPress

Reduce su tiempo de carga incluso en un 50-80% con solo seguir simples consejos.

 

Elementor / Mis plantillas / Encabezado / Agregar nuevo / Dar un nombre para referencia futura (Encabezado principal) / Crear plantilla

Crear cabecera fija con Elementor (sticky header) + VIDEO 2

Crear sección adhesiva con fondo transparente

 

Para habilitar el Encabezado fijo, debes ir a la Sección / Efectos de movimiento / Fijo.

Sección / Efectos de movimiento / permanente / Activar permanente – Superior – Seleccione los dispositivos – escritorio o móvil o tableta para activar permanente o Desactivar – Desplazar a “0” – Desplazamiento de efecto: 20 píxeles o más y

Crear cabecera fija con Elementor (sticky header) + VIDEO 3

No olvides agregar clases de estilos a esa sección

Crear cabecera fija con Elementor (sticky header) + VIDEO 4

Arrastra y suelta el widget de logo del sitio y menú de navegación

 

El siguiente paso es arrastrar y soltar el widget del logo del sitio y no agregues ningún estilo a tu logotipo porque agregaremos manualmente CSS para el logotipo. Puedes diseñar el elemento de menú pero no el TAMAÑO DE FUENTE (porque agregaremos CSS). Puedes ajustar el ancho de columna.

Crear cabecera fija con Elementor (sticky header) + VIDEO 5

Crea un encabezado fijo con cambio de color de fondo cuando el usuario se desplace hacia abajo y reduzca la altura mínima.

 

Para ser considerado:

Elementor Pro
Web Hosting
  • Debes agregar min-height que estará debajo de la Sección, luego altura min-height configúrelo en: 90px
  • Ajusta tu estructura correctamente para una mejor visualización, pero NO LO ESTILICES, lo haremos con CSS.
Cuando se produce el efecto sticky, el color de fondo cambiará a negro.
* —– Reducir el contenedor, si la altura mínima es mayor 40px —— * /
selector.elementor-sticky--effects >.elementor-container{
min-height: 40px;
}


selector > .elementor-container{
transition: min-height 2s ease !important;
}

Reducir el logotipo y el elemento del menú Nav con CSS

  • Para el logotipo del sitio Widget

Crear cabecera fija con Elementor (sticky header) + VIDEO 6
Site logo/Section/Advanced/Custom CSS
/*Logo before sticky enable & .logo is our CSS Classes*/
.logo .elementor-image img{
width:60%;
transition:width .3s ease-in;
}

Ahora tienes que agregar CSS personalizado para el widget del logo del sitio para reducir el tamaño del logo cuando  se aplica “Elementor Sticky Effect” .

/ * Logo cuando Elementor Sticky Effect Applied & .logo es nuestras clases CSS * /

.elementor-sticky--effects .logo   .elementor-image img {
width: 55%;/* adjust your width*/
}
Crear cabecera fija con Elementor (sticky header) + VIDEO 7
  • Para el widget del menú de navegación

¿Alguna vez pensaste en habilitar el mismo efecto que el logo en el menú cuando el usuario se desplaza hacia abajo?

No te preocupes, lo hice por ti y también es muy simple. Es el mismo proceso de agregar clases CSS a Logo ahora agregar clases CSS al widget de navegación como “menú” , para que podamos agregar CSS y controlarlo.

 

NOTA: No estilices nada (tipografía) si lo haces, debes agregar ! Important  en cada CSS y eso no es bueno en absoluto.

 

sec  .elementor-nav-menu--main .elementor-item{
color:green;
font-size: 16px;
}
.elementor-sticky--effects  
.sec  .elementor-nav-menu--main .elementor-item{
color:red;
font-size: 14px;
transition:color .3s font-size .3s ease-in;
}
Crear cabecera fija con Elementor (sticky header) + VIDEO 8
Crear cabecera fija con Elementor (sticky header) + VIDEO 9

¿Cómo cambiar / cambiar el “logotipo” cuando el usuario se desplaza hacia abajo? (Compatible con Firefox)

 

 

Cosa a considerar

  • No vamos a utilizar el logotipo del sitio para esto.
  • Utilizaremos widgets HTML y CSS y HTML simples sin necesidad de JS. Así que no te preocupes por el CSS que te proporcionaré
  1. Arrastra y suelta el widget HTML

Crear cabecera fija con Elementor (sticky header) + VIDEO 10

Agregua este HTML a tu widget HTML: sigue la imagen

Crear cabecera fija con Elementor (sticky header) + VIDEO 11
  1. Agrega CSS para cambiar o cambiar el logotipo

Crear cabecera fija con Elementor (sticky header) + VIDEO 12
.header (Agregue el suyo) son las clases de CSS que agregamos anteriormente.
Este CSS le ayudará a ajustar el ancho de su logotipo y es anterior a los efectos adhesivos .
/ * header es la clase CSS que definimos anteriormente * /

.header{
/*Adjust your width as your requirement*/
width:60%;
transition: width .3s ease-in;
}
Crear cabecera fija con Elementor (sticky header) + VIDEO 13
Aquí están los CSS para cambiar el logotipo cuando el usuario se desplaza hacia abajo
.elementor-sticky--effects .header {
display: inline-block;

/*adjust your width*/
width:50%;
content: url("Your Image source");
}
Crear cabecera fija con Elementor (sticky header) + VIDEO 14
.sec son las clases de sección que ha agregado a sus clases CSS de encabezado * /
/* Elementor YouTube Channel*/
selector.elementor-sticky--effects{
background-color: rgba(133,130,255,0.5)!important
}
selector{
transition: background-color .4s ease !important;
}

selector.elementor-sticky--effects >.elementor-container{
min-height: 80px;
}
selector > .elementor-container{
transition: min-height .1s ease !important;
}
/* Shrink logo*/
.logo .elementor-image img{
width:60%;
transition:width .3s ease-in-out;
}

.elementor-sticky--effects .logo .elementor-image img {
width: 55%;
}
/* Shrink Nav Menu*/
.sec .elementor-nav-menu--main .elementor-item{
color:green;
font-size: 16px;
}

.elementor-sticky--effects  
.sec .elementor-nav-menu--main .elementor-item{
color:red;
font-size: 14px;
transition:color .3s font-size .3s ease-in;
}
/* Change logo when elementor sticky enable*/
/* header is the CSS class we defined*/
.header{
/*add your width adustment*/
width:60%;
transition: width .3s ease-in;
}

.elementor-sticky--effects .header {
display: inline-block;
width:50%;
content: url("add your image source here to change logo when scroll down");
}

Resultado

 

Si te gusta, no olvides compartir o comentar. Si cometí algún error, no olvides agregar tu comentario. Realmente lo apreciare

Crear cabecera fija con Elementor (sticky header) + VIDEO 15

Crea una cabecera fija con Elementor

 

Sino puedes realizarlo o necesitas una cabecera mas personalizada puedes contratarme … tan solo haz click aquí 

Si te gustó este artículo, suscríbete a mi canal de YouTube para ver videos tutoriales de WordPress.

Mini curso GRATIS

5 consejos
para acelerar
tu WordPress

Reduce su tiempo de carga incluso en un 50-80% con solo seguir simples consejos.

¿Quieres recibir mis articulos?

No te pierdas todos mis trucos y tutoriales para WordPress, Velocidad de carga, y Elementor Page Builder.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *