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.

Tabla de contenido

Crear plantilla de encabezado

 

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

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

No olvides agregar clases de estilos a esa sección

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.

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

 

Web Hosting

Para ser considerado:

  • 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

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*/
}
  • 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;
}

¿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

Agregua este HTML a tu widget HTML: sigue la imagen

  1. Agrega CSS para cambiar o cambiar el logotipo

.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;
}
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");
}
.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

Crea una cabecera fija con Elementor

 

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

Deja un comentario

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

1 Compartir
Compartir1
Twittear