Seleccionar página

Tutorial Divi: Hacer Sticky una columna o el menú de Divi, fácil, rápido y sin plugins

En este tutorial de Divi aprenderás a hacer "Sticky" o fija una columna dentro de divi, o el menú hecho con el Theme Builder, de manera sencilla y agregando algunos…

Por Jefferson M.

Jul 8, 2020

En este tutorial de Divi aprenderás a hacer «Sticky» o fija una columna dentro de divi, o el menú hecho con el Theme Builder, de manera sencilla y agregando algunos cachos de código. Este es un tutorial muy demandado por la comunidad, y acá en UXDIVI nos encanta complacer a la comunidad, así que vamos a ello:

Tiempo de lectura estimado: 4 minutos

Índice

Aviso: este tutorial queda desactualizado con una de los últimos updates de Divi donde han integrado la opción de «Sticky Elements» dentro de Divi. Puedes verlo en este vídeo donde explicamos sobre esta nueva característica de Divi.

La propiedad CSS «position: sticky» básicamente es una especie de combinación entre la posición fija y la posición relativa donde el elemento se desplazará junto con su contenedor hasta que alcance una posición designada en la parte superior o inferior de la página (o el desplazamiento especificado).

Fijar o hacer sticky un elemento en una web permitirá que el usuario tenga ciertas opciones siempre a mano, lo cual contribuye en la experiencia de usuario. Esto mantiene a la vista los llamados a la acción sin ser tan invasivos como una pop-up.

Estos tutoriales serán súper útiles si los headers de tu tema de Divi tienen múltiples secciones.

Cómo fijar cualquier sección, fila o módulo en Divi

Este método es súper sencillo y perfecto para cualquier tipo de elemento que desees hacer sticky.

Entra en la configuración del módulo, sección o fila y selecciona la pestaña de Avanzado. En CSS personalizado debes pegar el código a continuación, en el Elemento principal.

position: sticky;
  top: 20px;
  z-index: 9999;

Cuando hagas scroll y este elemento alcance la parte superior de la página, se mantendrá allí. Cuando hagas scroll de regreso el mismo volverá a su posición original.

Tip: Si usas este método para el menú de un header, podrías añadir una sección hero con una imagen grande, luego, cuando se desplaza, el menú se desplaza hacia arriba y se vuelve sticky.

Cómo hacer sticky el menú del header en tu tema de Divi

Si tienes varias secciones en el header de tu tema de Divi, pero quieres fijar solo una de ellas mientras las demás se mueven con el scroll (en este caso, fijar solo el menú) presta atención.

En tu Escritorio de WordPress, entra en Divi y luego en el generador de temas de Divi o Theme Builder. Crea una nueva plantilla y asígnala donde necesites, si en todas las páginas, en una sola, lo que decidas.

Haz clic en «Añadir Encabezado Personalizado» (o Add custom header) y luego en «Construir Encabezado Personalizado» (o Build custom header).

Selecciona la sección que quieras hacer sticky o fijar cuando el usuario scrollee. Entra en Configuración y luego en la pestaña de Avanzado. Sitúate en añadir clase CSS personalizada y escribe:

pa-sticky-header

Si tienes más de una sección en el header personalizado que hiciste con el Theme Builder agrega una segunda clase:

pa-sticky-header-2

Ahora añadiremos un poco de jQuery. Copia el snippet a continuación y pégalo en la sección < head > de la pestaña «Integración» de las opciones de tema de Divi.

<script>
jQuery(function ($) {
	var headerHeight = $('header.et-l.et-l--header').outerHeight();
	$(window).bind('scroll', function () {
		var windowHeight = $(window).height();
		if ($(window).scrollTop() < windowHeight - headerHeight) {
			$('pa-header').removeClass('pa-sticky-header');
		}
		else {
			$('pa-header').addClass('pa-sticky-header');
		}
	});
});
</script>

Por último, añade este código a continuación en el CSS de tu página web. Al igual que el anterior, debes entrar a las opciones de tema de Divi y pegar el código en la caja de CSS personalizado.

/*set a specific element as fixed when scrolling*/

.pa-sticky-header {
	position: fixed!important;
	top: 0;
	width: 100%;
}

Y si tienes más de una sección en el menú de navegación hecho con el theme Builder, puedes usar este segundo código.

/*set a specific element as fixed when scrolling*/

.pa-sticky-header {
	position: fixed!important;
	top: 0;
	width: 100%;
}
.pa-sticky-header-2 {
	position: fixed!important;
	top: 100;
	width: 100%;
}

¡Listo! ¿Ves que es bastante fácil?

¡Nos leemos en la próxima!

¿AÚN NO PERTENECES A NUESTRA COMUNIDAD?

Suscríbete a nuestro contenido premium y accede a cientos de recursos para aprender a diseñar web’s fantásticas con Divi

APRENDE DIVI

Accede a más de 700 contenidos especializados en Diseño web con Divi por menos de $10 USD/mes

9 Comentarios

  1. Yordan Soares

    Excelente tutorial Jefferson. Creo que es el método más fácil que he visto para hacer que una columna, elemento o menú sea «sticky» o fijo en Divi. ¡Gracias por la información!

    Responder
    • Jefferson M.

      ¡Es un gusto poder ayudar!

      Responder
  2. Violet

    Gracias Jefferson gran tutorial. Me ayudo mucho!!
    Pero me surge un problema, puedo desactivarlo en la visión móvil?? ya que en el móvil me hace una cosa extraña… Se puede hacer?.
    Mil gracias

    Responder
  3. Nacho

    Muchas gracias Jefferson, muy buen tutorial. Me aclaró algunas dudas que tenía, pero alguna me queda. Te explico. Cuando en versiones anteriores de DIVI tocabas esto en el ‘Personalizador de Temas’, al hacer scroll, el logo al hacer la cabecera Sticky se reducía un tanto por ciento ¿Es posible hacer eso ahora en el ‘Generador de Temas’?
    Un saludo

    Responder
  4. Anibal

    Hola que tal. El ejemplo que usas en el video es lo que quiero lograr pero cuando uso tu codigo el css en divi me dice que no reconce «sticky» solo absolute | relative | static.

    Podrias ayudarme ?

    Responder

Enviar un comentario

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