¿Cómo hacer que cualquier elemento Divi sea pegajoso? (Guía paso por paso)

¿Quieres personalizar tu sitio y hacer elementos fijos? En esta guía, le mostraremos cómo hacer que cualquier elemento Divi sea fijo con y sin codificación.

Recientemente vimos cómo hacer que su encabezado sea fijo usando Divi para ayudar a los usuarios a navegar a través de su contenido. Ese es un buen primer paso, pero hay mucho más que puedes hacer. Divi es un tema altamente personalizable que le permite personalizar cada centímetro de su sitio de WordPress. Es por eso que, en este tutorial, veremos diferentes formas de hacer que cualquier elemento Divi sea pegajoso .

¿Por qué hacer que los elementos Divi sean pegajosos?

De forma predeterminada, los elementos de los sitios no son fijos, por lo que cuando un usuario se desplaza hacia abajo, esos elementos desaparecen de la pantalla y el usuario ve contenido nuevo. Sin embargo, es posible que desee que los elementos más importantes de su sitio estén siempre visibles para ayudar a sus clientes a encontrar lo que necesitan. Esto significa que el elemento siempre estará fijo en la pantalla, incluso si el usuario se desplaza hacia abajo. Por ejemplo, puede pegar su menú principal, formulario de registro o una columna con información clave que necesitan los usuarios.

La idea es hacer que esos elementos sean más visibles para ayudar a sus visitantes. Los elementos adhesivos también pueden ser muy útiles para aumentar las ventas y las conversiones. Por ejemplo, muchas tiendas en línea hacen que sus ofertas y la principal llamada a la acción (CTA) sean fijas para aumentar sus ventas.

¿Cómo hacer que cualquier elemento Divi sea pegajoso/arreglado?

Hay dos métodos principales para hacer que cualquier elemento Divi sea pegajoso:

1. Usando el complemento de construcción Divi incorporado
2. Con un poco de codificación

En esta guía, explicaremos cómo hacer que los elementos sean fijos con ambos métodos. Ambas opciones harán el trabajo, así que elija la que mejor se adapte a sus habilidades.

1) Usando el Divi Builder

El Divi Builder viene con Divi, por lo que, si ya está utilizando este tema, no necesita instalar nada. Para hacer que cualquier elemento sea fijo, primero debe crear una página y usar el generador visual para agregar o eliminar elementos, editarlos, etc. Para esta demostración, usaremos uno de sus paquetes de diseño prefabricados llamado Contador , pero también puede usar una página en vivo o una página completamente nueva.

Crear una pagina

Primero, en su tablero de WordPress, vaya a Páginas > Agregar nuevo y cree una nueva página.

De ahora en adelante, usaremos el constructor visual Divi, así que presione el botón Usar el constructor Divi y verá un constructor visual de arrastrar y soltar.

Importar plantilla preferida

Una vez que se abra el constructor, verá tres opciones:

• Construir desde cero
• Elija un diseño prefabricado
• Clonar una página existente

Si quieres crear un diseño personalizado, elige la primera opción. Usando el constructor Divi, será bastante simple crear un diseño de página único para su sitio. Alternativamente, puede clonar diseños de página existentes o elegir un diseño prefabricado. En nuestro caso, vamos a utilizar la plantilla de diseño prefabricada ( Contador) . Entonces, para importar la plantilla de Contador , seleccionamos la opción Elegir diseño prefabricado y luego seleccionamos el que te gusta de la lista.

Después de eso, como estamos usando el Editor clásico, verá algo como esto en su pantalla:

Sin embargo, es más fácil trabajar con el generador visual, así que vamos a cambiarlo.

Cambiar al constructor visual

En el encabezado, verá una opción para usar el generador visual llamado Build On the Front End . Presiónalo y verás cómo cambia la pantalla y te será más fácil ver los resultados de las modificaciones desde el frontend.

La plantilla Contador viene con una barra lateral derecha y un formulario de suscripción al boletín. Sin embargo, no está arreglado, así que a medida que nos desplazamos hacia abajo, desaparece. Entonces, veamos cómo hacer que el cuadro de suscripción al boletín sea fijo.

Instalar y activar el complemento de WordPress Sticky Menu

Para hacer que cualquier elemento Divi sea fijo, usaremos el complemento Sticky Menu. Por lo tanto, abra su panel de control de WordPress , vaya a Complementos> Agregar nuevo y busque el Menú fijo, Encabezado fijo en el desplazamiento . Luego, haga clic en Instalar y actívelo.

Con este sencillo complemento, podremos hacer que nuestros menús, encabezados o cualquier elemento sean pegajosos en muy poco tiempo. Para configurar el complemento, vaya a Configuración> Menú fijo (¡o cualquier cosa!) .

Configurar menú fijo

Hay dos opciones principales de configuración de personalización:

• Básico
• Avanzado

Primero, veamos cómo personalizar la configuración básica. Deberá nombrar un elemento fijo. En nuestro caso, lo llamaremos #sticky y estableceremos un espacio entre la página superior y el elemento de 50px . No se preocupe si no está seguro del espaciado, puede cambiarlo más adelante.

Luego, guarde la configuración básica y vaya a la pestaña Configuración avanzada . Aquí refinaremos un poco más el elemento pegajoso. Por ejemplo, estableceremos el campo Z-Index en 99998 y agregaremos #stop en el campo del elemento push-up. El elemento push-up lo ayudará a detener el widget adhesivo flotante (más sobre esto más adelante).

Hay algunas otras opciones de personalización premium allí, pero no tocaremos eso por ahora. Entonces, una vez que agregue estos valores, guarde la configuración y estará listo para comenzar. Después de eso, abra la página que ha creado usando el generador visual Divi. Haremos que el widget de suscripción al boletín sea fijo al agregarle una clase CSS. Hay dos columnas. La columna de la izquierda muestra las publicaciones del blog y la de la derecha muestra la barra de registro del boletín. Entonces, necesitamos aplicar la ID de CSS a la columna de la derecha.

Agregar ID de CSS personalizado

Para hacer esto, abra la sección de configuración de Divi y elija la columna 2 . En la pestaña Avanzado , verá una sección para agregar ID de CSS, clase de CSS y códigos personalizados de CSS. Para hacer que este elemento sea fijo, simplemente necesita agregar el elemento fijo que configuró en la configuración básica. En nuestro caso, agregaremos adhesivo al campo ID de CSS y guardaremos la configuración.

Asegúrese de guardar toda la configuración del constructor Divi, de lo contrario no funcionará. Luego, puede obtener una vista previa de la página.

Como puede ver arriba, el formulario de registro del boletín ahora está arreglado. Sin embargo, se superpone con otros elementos del sitio, por lo que haremos algunos cambios. Aquí es cuando entra en juego la identificación del elemento push-up de la configuración avanzada. En nuestro caso, haremos que el widget del boletín se detenga justo antes del formulario de contacto.

Agregue el CSS de parada

Entonces, como hicimos anteriormente, debemos mencionar la ID de CSS push-up en la sección del formulario de contacto. Para hacer esto, abra la configuración de la Sección de boletín en Divi, vaya a la pestaña Avanzado, agregue stop a la ID de CSS y guarde los cambios.

Luego, actualice la página en la interfaz y verá que el cuadro de registro del boletín es fijo pero se detiene cuando llega al formulario de contacto y no se superpone con ningún otro widget en el sitio.

Del mismo modo, puede seguir los mismos pasos para hacer que cualquier elemento Divi sea fijo en su sitio . Veamos cómo puedes arreglar los íconos sociales usando Sticky Menu y Divi Builder.

Hacer que los íconos de las redes sociales sean pegajosos

El proceso para hacer que los íconos de las redes sociales sean pegajosos es muy similar. Sin embargo, antes de comenzar, tenga en cuenta que con la versión gratuita de Sticky Menu, solo puede hacer que un elemento sea fijo al mismo tiempo, así que recuerde eliminar el ID de CSS fijo de las columnas 2 .

Después de eso, deberá agregar la identificación de CSS adhesiva a su elemento de iconos de redes sociales. Al igual que hicimos anteriormente, haga clic en el elemento, vaya a la pestaña Avanzado y agregue la ID de CSS personalizada en el campo correspondiente.

Luego guarde la configuración y verifique los resultados en la interfaz.

Como puede ver, ¡acabamos de hacer que los íconos de las redes sociales sean fijos!

Si no desea instalar ningún complemento, puede hacer que los elementos se arreglen mediante programación. Veamos cómo hacerlo.

2) Haga que cualquier elemento Divi sea pegajoso con un poco de codificación

En esta sección, le mostraremos cómo puede hacer que cualquier elemento Divi sea fijo mediante programación . En este caso, en lugar de arreglar el widget de suscripción al boletín, le mostraremos cómo hacer que el encabezado sea fijo con un poco de codificación .

Crear un encabezado personalizado

Desde el generador de temas Divi, puede crear plantillas de sitios web personalizadas.

Para esta demostración, primero, vamos a crear un encabezado global.

Tendrás tres opciones:

• Construir desde cero
• Elija un diseño prefabricado
• Clonar una página existente

Para esta demostración, crearemos un encabezado desde cero.

En el siguiente paso, debe seleccionar la cantidad de filas que desea en el encabezado.

Para el tutorial, elegiremos un diseño de una sola fila. Como hemos visto anteriormente, después de crear su encabezado, podrá editarlo y agregar varios elementos, como menús, imágenes, enlaces personalizados y más. Con el Divi Builder de arrastrar y soltar, puede ajustar los tamaños y el relleno de su encabezado con unos pocos clics.

En nuestro caso, agregaremos un menú a nuestro encabezado.

Agregar una clase CSS

Antes de continuar, debe mencionar una clase de CSS para su encabezado. Desde la configuración del encabezado, vaya a la pestaña Avanzado y agregue una clase de CSS personalizada. Agregaremos pa-sticky-header como la clase CSS personalizada.

Después de eso, guarde los cambios y en las opciones del tema Divi, verá una sección para insertar el código en la configuración de Integración .

Agregar código JavaScript

Ahora empieza la parte divertida. Copie el siguiente código JavaScript:

 <script>
jQuery(función ($) {
var headerHeight = $('header.et-l.et-l--header').outerHeight();
$(ventana).bind('desplazamiento', función () {
var windowHeight = $(ventana).height();
if ($(ventana).scrollTop() < altura de la ventana - altura del encabezado) {
$('pa-header').removeClass('pa-sticky-header');
}
demás {
$('pa-header').addClass('pa-sticky-header');
}
});
});
</script>

Pégalo en el editor y guarda los cambios.

Agregar CSS adicional

Después de eso, estableceremos el elemento que queremos que sea fijo en el sitio. En nuestro caso, para que el encabezado quede fijo en la parte superior, copie el siguiente código CSS y péguelo en el editor de CSS y guarde los cambios.

 /*para hacer que un elemento específico sea pegajoso*/

.pa-sticky-header {
	posición: fijo!importante;
	superior: 0; /*Establece la distancia del encabezado desde la parte superior de la página*/
	ancho: 100%;
} 

Ahora, revisa la interfaz de tu sitio web y verás que el encabezado estará arreglado.

Además, puede personalizar el encabezado y cambiar su posición, tamaño, etc. Del mismo modo, puede usar el código como base y hacer que cualquier otro elemento sea fijo en Divi. Por ejemplo, puede usarlo para hacer que los formularios, los botones o las columnas sean fijos.

Recomendaciones

Ahora ya sabe cómo crear elementos adhesivos en su instalación de Divi, pero antes de concluir nuestra guía, echemos un vistazo a algunos consejos.

Sin animaciones

Con el complemento Divi builder, puede agregar efectos de desplazamiento a elementos, secciones y más. Sin embargo, no recomendamos usar los efectos de desplazamiento en sus elementos adhesivos porque podrían dañar su sitio. Si experimenta algún problema técnico en su instalación, simplemente desactive el efecto de animación flotante y todo volverá a la normalidad.

Vista previa de los cambios antes de publicar

Divi Builder te permite ver los cambios que realizas en la pantalla. Esto es muy útil para asegurarse de que la alineación sea correcta y que el elemento no se superponga con ningún otro widget en el sitio.

Elementos adhesivos limitados en versión gratuita

La versión gratuita de WP Sticky Menu solo le permite agregar un elemento fijo. Entonces, si desea agregar más elementos a su sitio web, puede considerar actualizar a la versión pro que comienza en 39 USD.

Conclusión

Con todo, corregir algunos elementos es una excelente opción cuando desea hacerlos más visibles para sus usuarios. En este tutorial, hemos visto dos opciones para hacer que cualquier elemento Divi sea pegajoso:

• Usando el complemento Divi Builder
• Programáticamente

Si no tiene habilidades de codificación, puede usar el complemento Divi Builder. Es la forma más sencilla y amigable para principiantes de hacerlo. Con el modo de vista previa en vivo, puede ver cada cambio al instante.

Por otro lado, si no desea instalar ningún complemento o simplemente le gusta codificar, puede hacer que cualquier elemento sea fijo mediante programación. Simplemente use el código JavaScript como base y personalícelo para hacer que cualquier elemento que desee sea pegajoso. Puedes agregar los códigos CSS al archivo style.css de tu tema o usar la sección CSS adicional en Divi. Antes de hacer eso, asegúrese de mencionar la clase CSS en su elemento.

¿Qué método usaste para hacer tus elementos pegajosos? ¿Conoces algún otro? Háganos saber en la sección de comentarios.

Si este tutorial fue útil, compártalo con sus amigos y compañeros bloggers en las redes sociales. Para más tutoriales, echa un vistazo a nuestro blog.