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.
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 deseas activar la licencia en un sitio web, puedes utilizar nuestro servicio de activación de licencias para que tu sitio cuente con una licencia lifetime, a un excelente precio.
Si eres miembro premium tienes, además, un descuento adicional.
¡Vuélvete un miembro VIP!
Accede a la descarga de Plugins Premium, 20% de descuento en activación de licencias y acceso a los tutoriales premium, volviéndote un miembro VIP
Efecto Deslizar hacia abajo la cabecera al hacer scroll
PARTE 1: Procedimiento si usas la cabecera por defecto de Divi
Para lograr el fecto deseado, vamos a necesitar aplicar un poco de código. Pero tranquilos, todo se los voy a dar listo para sólo copiar y pegar.
Paso 1: Agregando el código CSS
Aquí tienes el código para copiar y pegar:
Si eres usuario premium, no será necesario que ingreses tu correo
Contenido Gratuito bloqueado
Para desbloquear el contenido oculto de los tutoriales gratuitos, simplemente inicia sesión. Si no tienes una cuenta, solicita el enlace de registro desde el botón de abajo:
¿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.
Paso 2: Agregando un poco de Javascript
Con el código CSS de arriba, ya hemos definido los estilos que queremos. Las cuales están asociadas a una clase css específica. Lo que queremos conseguir ahora es que esa clase se agregue a la cabecera cuando hayamos hecho scroll . Para ello usaremos un poco de Javascript.
Así que copiamos el código de abajo.
Contenido Gratuito bloqueado
Para desbloquear el contenido oculto de los tutoriales gratuitos, simplemente inicia sesión. Si no tienes una cuenta, solicita el enlace de registro desde el botón de abajo:
Mira nuestros otros artículos relacionados a cabeceras y menús:
¿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 está gustando el artículo, éstos otros te van a encantar:
Efecto Deslizar hacia abajo el header al hacer scroll | Menú Fijo Divi
PARTE 2: Procedimiento para el caso que esté usando una cabecera personalizada
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.
En éste caso, podemos elegir exactamente qué elemento de la cabecera tendrá 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 que tiene una fila para los íconos sociales y otra fila para el menú.
Podemos elegir si, al desplazarnos, se volverá fija sólo la primera fila, sólo la segunda o toda la sección. Para éste ejemplo quiero que sólo se vuelva fija la fila del menú.
Paso 1: Agregando la clase al elemento que estará fijo
Una vez elegido el elemento que deseas que sea fijo, debemos agregarle la clase vic-slidedown.
Hasta éste punto ya deben saber de memoria cómo agregar clases a un elemento en Divi. Pero por si no lo recuerdas:
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.
Paso 2: 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. Todo eso lo hará el siguiente código:
Contenido Gratuito bloqueado
Para desbloquear el contenido oculto de los tutoriales gratuitos, simplemente inicia sesión. Si no tienes una cuenta, solicita el enlace de registro desde el botón de abajo:
Te puede Interesar:
Cómo añadir Íconos Divi donde quieras, incluso en los items de tu menú principal
¿Dónde pegamos éste código?
Vamos a agregar, en cualquier parte del diseño de cabecera, el módulo código.
Y dentro, pegamos el código anterior. 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.
Si te gusta éste tipo de artículos, visita mi blog, hay muchos tutoriales gratuitos y premium que te encantarán.
Muchísimas gracias Victor. Lo he realizado en mi web y me encanta como queda. ¡Genial, como todo lo que nos compartes!