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:

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.

Mira un ejemplo aquí:

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!

¿Te gustó? ¡Compártelo en redes sociales!

¿Quieres aprender a usar Divi de manera profesional?

Conoce nuestro contenido premium y comienza hoy mismo a llevar tu sitio web o el de tus clientes a otro nivel

¿Te gustó este contenido?

Conoce nuestro contenido premium y aprende a crear sitios web geniales, modernos y potentes.

Post relacionados:

2 Comentarios

  1. Avatar

    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

Enviar un comentario

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

Shares