Excelente semana queridos lectores!
La semana pasada estuve revisando varias plantillas de diferentes temas para inspirarme, y me soprendió ver que uno de los efectos más comunes era el que hacía que la cabecera se quede fija al desplazarse a través de la página.
Con Divi y sus fantáticas Sticky options, podemos lograr una cabecera fija de forma relativamente sencilla. Peeero…
Lo que vi en varios temas premium, lo que hoy vamos a conseguir, es que una vez hagamos scroll, cuando el encabezado desaparezca de la pantalla (osea del viewport) vuelva a entrar en escena con un slide down (deslizamiento hacia abajo) para recién quedarse fijo. Es un detalle que parece menor, pero que hace ver a la página mucho más dinámica.
“Lo que hoy vamos a conseguir es que al hacer scroll, cuando el encabezado desaparezca de la pantalla, vuelva a entrar en escena con un deslizamiento hacia abajo para recién quedarse fijo”
Entiendo que algunos utilizan la cabecera nativa de Divi, mientras que otros adoran crear sus propias cabeceras con el generador de temas. Así que voy a enseñarles a hacer el efecto para cada caso.
Y si aún no cuentas con una web, recuerda que tenemos un plan para cada necesidad en nuestro servicio de diseño de páginas web, en la cual utilizamos (obviamente) el tema Divi (Psst con una fantástica licencia de por vida).
Como es costumbre en mis tutoriales, trataré que la explicación tenga la menor cantidad de pasos posible para que sea lo más fácil de implementar.
Antes de empezar, ¿Ya tienes el tema Divi con licencia?
Divi es sin lugar a dudas el mejor tema para WordPress y la mejor inversión que puedes hacer para tu web. Si deseas adquirir licencias de Divi para sitios ilimitados y con el soporte de Elegant Themes, puedes obtenerlo desde la web oficial con un 20% de descuento desde aquí.
Por otro lado, si sólo necesitas una licencia para 1 sitio web, puedes adquirirla desde Rapihosting, la web de nuestro servicio de Hosting para WordPress, que también ofrece el servicio de activaciones del tema Divi para 1 sitio web con una licencia original de por vida, a un precio accesible para todos. Así que si deseas el tema Divi con actualizaciones automáticas de por vida, acceso a las plantillas Premium y todas las funciones desbloqueadas, sigue éste enlace.
Efecto Deslizar hacia abajo la cabecera al hacer scroll
PARTE 1: Procedimiento si usas la cabecera por defecto de Divi
En líneas generales definiremos una clase que tiene la posición fixed y la animación css de slide down. Por cierto todos esos estilos están, como siempre, listos para copiar y pegar aquí debajo.
Asi que, PASO 1: Copiar el código de más abajo.
Para que puedan visualizar el snippet de código de éste tutorial, solo dejen su correo en el formulario de abajo y hagan click al botón: «Ver códigos».
Y automáticamente serán visibles.
Adicionalmente, se te enviará a tu bandeja de entrada un mail de confirmación para ser añadido a mi lista de correos. Es opcional, pero déjame decirte que con la comunidad de mi lista comparto nuevos trucos, códigos, tutoriales, promociones y sorteos de productos de mi Tienda de elementos y layouts para Divi. Además que tenemos una comunicación más directa para compartir y resolver dudas. 🙂
Gracias por solicitar suscribirte, pero aún falta un paso…
IMPORTANTE – ¡Aún no estás suscrito a mi lista!
Revisa tu bandeja de entrada, se te ha enviado un correo de confirmación. Confirma tu correo para ser parte de la comunidad de mi lista y compartirte nuevos tutoriales, artículos, códigos, recursos, promociones y comunicarnos directamente 🙂
Pdta: Ya puedes ver los códigos del tutorial debajo de éste mensaje
.menu-fixed-vic {
position:fixed !important;
animation-name:fdown;
animation-duration: 500ms;
animation-delay: 0ms;
animation-timing-function: ease-in-out;
}
#main-header {
top:0px;
}
@keyframes fdown {
0% {
transform:translatey(-100%);
}
100% {
transform:translatey(0%);
}
}
¿Dónde pegamos éste código CSS?
Como puede verse en la imagen de abajo, hay una sección para agregar CSS personalizado en la sección de Opciones del tema de Divi. Pues bien, allí lo pegamos No olvidar Guardar cambios.
Un poco de Javascript
Con el código CSS de arriba, ya hemos definido los estilos que queremos. Las cuales están asociadas a la clase .menu-fixed-vic. Lo que queremos conseguir ahora es que esa clase se agregue a la cabecera cuando hayamos hecho scroll y ésta desaparezca de la pantalla. Pra ello usaremos una poca de Javascript.
Así que copiamos el código de abajo.
Gracias por solicitar suscribirte, pero aún falta un paso…
IMPORTANTE – ¡Aún no estás suscrito a mi lista!
Revisa tu bandeja de entrada, se te ha enviado un correo de confirmación. Confirma tu correo para ser parte de la comunidad de mi lista y compartirte nuevos tutoriales, artículos, códigos, recursos, promociones y comunicarnos directamente 🙂
Pdta: Ya puedes ver los códigos del tutorial debajo de éste mensaje
<script>
(function( $ ) {
$(document).ready(function(){
var pageHeader = $('#main-header');
var targetScroll = (pageHeader.offset().top + pageHeader.outerHeight());
window.addEventListener('scroll', () => {
const scrollY = window.scrollY;
if (scrollY > targetScroll) {
pageHeader.addClass('menu-fixed-vic');
} else {
pageHeader.removeClass('menu-fixed-vic');
}
}
,{passive: true});
});
})( jQuery );
</script>
¿Dónde pegamos éste código Javascript?
Nuevamene nos vamos a Divi> Opciones del tema. Pero ahora nos dirigiremos a la pestaña Integración. Una vez allí buscamos la sección: Agregar código al Head de su Blog. Y allí es dónde vamos a pegar el código. Nuevamente no olvidar guardar cambios.
Un pequeño e importante detalle
Llegado a éste punto, hemos terminado y el efecto ya tiene todo lo necesario para funcionar. Pero, para que lo haga de manera correcta es necesario desactivar el efecto fijo por defecto de Divi. Ésto lo haces desde el mismo menú de opciones del tema, como puede verse en la imagen de abajo. Debe estar desactivada la opción.
Si te parece Interesante lo que estamos haciendo…
Éstos otros artículos te volarán la cabeza…
Agregar selector de fecha en formulario de contacto Divi WordPress
Aprende cómo agregar un selector de fecha (date picker) interactivo, en el módulo formulario de contacto del tema Divi
Cómo crear una animación de texto desplazándose tipo Banner (Text Marquee) con Divi
¿Alguna vez quisiste realizar un banner con texto en movimiento, cómo el que aparece en la parte inferior de los programas de noticias?
Cómo crear formularios de contacto en Divi y TRUCO para saber desde qué url se envía
Aprende cómo crear, configurar y rastrear desde dónde se envía (con un súper bonus) formularios de contacto creados en Divi
Módulo Blog Divi: Mejorando la paginación por defecto
Descubre cómo cambiar la poco intuitiva paginación de Wordpress/Divi por una practica paginación numérica con estilos personalizados
Cómo cambiar el tamaño de las imágenes de las entradas del módulo Blog Divi
¿No sabes qué proporciones tienen las imágenes del Módulo Blog de Divi? Descubre cómo configurar la que tú quieras + HERRAMIENTA GRATUITA
Crea un carrusel de publicaciones con el módulo Blog de Divi y sin Plugins
Hoy aprenderemos a utilizar un truco para crear un carrusel de publicaciones en Divi. ¡Muestra tus publicaciones de una manera elegante!
Crear carrusel de productos Woocommerce en Divi sin plugins
¿Será posible crear un carrusel de productos en Divi, sin plugins y en tan sólo tres pasos? Veamos…
Mostrar texto animado sobre imágenes en Divi al pasar el Mouse – Text Overlay Hover
¿Haz visto esos diseños en donde al pasar el mouse sobre una imagen, aparece un texto con un movimiento animado?
Efecto CSS Hover Zoom en Imágenes de cualquier módulo Divi en dos pasos
Hoy crearemos un hermoso efecto hover Zoom que podrás aplicar a cualquier módulo que tenga Imagen…
Cómo y dónde añadir CSS personalizado el tema Divi
¿Cuáles son las formas de agregar CSS personalizado al tema Divi? Hoy repasaremos cada una de ellas…
Agregar elegante animación a los elementos del Menú Móvil Divi
Crearemos una animación para que los elementos del menú móvil aparezcan en cascada uno detrás de otro
Cómo añadir íconos de Font Awesome a Divi
Aprende cómo sincronizar tu web con la Biblioteca Font Awesome para utilizar sus cientos de íconos…
Cómo añadir íconos DIVI a menús y cualquier parte de la página
Hoy aprenderemos cómo insertar los íconos de DIVI en menús y en cualquier parte que queramos fácilmente
Cómo añadir Botón CTA en Menu DIVI
Aprende cómo añadir un botón CTA (llamada a la acción) en cualquier menú DIVI de una forma muy fácil…
Efecto Deslizar hacia abajo el header al hacer scroll | Menú Fijo Divi
PARTE 2: Procedimiento para una cabecera creada con el generador de temas
Creo que ésta es la parte más esperada por la mayoría. Ya que muchos prefieren personalizar al máximo sus cabeceras con el generador de temas de Divi.
Para empezar, debo decir que en éste caso pueden elegir exactamente qué elemento de la cabecera desean que tenga el efecto y se vuelva fijo.
Por ejemplo, como se ve en la imagen de abajo, la cabecera de mi web consta de una sección con una fila para los íconos sociales y una fila para el menú.
Puedo decidir si quiero que, al desplazarme, se vuelva fija sólo la primera fila, sólo la segunda o toda la sección. En tu caso será como gustes. Para éste ejemplo quiero que sólo se vuelva fija la fila del menú.
La cuestión es que el PASO 1 es agregarle la clase vic-slidedown al elemento que queremos que se vuelva fijo. Como dije anteriormente, será la segunda fila.
Hasta éste punto ya deben saber de memoria cómo agregar clases a un elemento en Divi. Pero por si no lo recuerdas:
Estando en el generador de temas, en el constructor de cabecera global, vamos a la configuración del elemento al que queremos aplicarle el efecto (en mi caso la segunda fila ) y en la pestaña avanzado, en la sección de Clase CSS escribimos vic-slidedown.
¿Puedes creer que esto ya es el 50% del procedimiento?
Añadiendo los estilos y el Javascript de una sola vez
Cómo se explicó en la primera parte, para que el efecto requerido funcione necesitamos definir una clase que contenga los estilos de posición fija y la animación de slide down. Además utilizamos un poco de Javascript para añadirle esa clase a nuestro elemento elegido una vez que, al hacer scroll, éste desaparezca de la pantalla. El código sabrá a qué elemento aplicarle la nueva clase porque en el paso anterior lo marcamos con la clase vic-slidedown.
Entonces, en síntesis el PASO 2 es copiar el siguiente código, que contiene tanto los estilos como el javascript:
Gracias por solicitar suscribirte, pero aún falta un paso…
IMPORTANTE – ¡Aún no estás suscrito a mi lista!
Revisa tu bandeja de entrada, se te ha enviado un correo de confirmación. Confirma tu correo para ser parte de la comunidad de mi lista y compartirte nuevos tutoriales, artículos, códigos, recursos, promociones y comunicarnos directamente 🙂
Pdta: Ya puedes ver los códigos del tutorial debajo de éste mensaje
<script>
(function( $ ) {
$(document).ready(function(){
var pageHeader = $('.vic-slidedown');
var targetScroll = (pageHeader.offset().top + pageHeader.outerHeight());
window.addEventListener('scroll', () => {
const scrollY = window.scrollY;
if (scrollY > targetScroll) {
pageHeader.addClass('menu-fixed-vic');
} else {
pageHeader.removeClass('menu-fixed-vic');
}
}
,{passive: true});
});
})( jQuery );
</script>
<style>
.menu-fixed-vic {
position:fixed !important;
animation-name:fdown;
animation-duration: 500ms;
animation-delay: 0ms;
animation-timing-function: ease-in-out;
top:0;
}
@keyframes fdown {
0% {
transform:translatey(-100%);
}
100% {
transform:translatey(0%);
}
}
</style>
¿Dónde pegamos éste código?
Vamos a agregar, en cualquier parte del diseño de cabecera, el módulo código.
Y dentro lo pegamos. No olvidar guardar cambios. Y listo. Ya podrá observarse el efecto en el elemento elegido.
Como ves, pueden hacerse cosas muy interesantes con Divi. Con ésta herramienta es más fácil sacarle todo el jugo a una página web. Por cierto, ¿sabes cuáles son todos los beneficios de las páginas web, y cuáles de ellas las estás aprovechando?
Si deseas saber más al respecto, éste artículo te va a encantar:
Conoce los Beneficios de las paginas web
Muchísimas gracias Victor. Lo he realizado en mi web y me encanta como queda. ¡Genial, como todo lo que nos compartes!