Cómo fijar un módulo en cualquier página con Divi Builder

Desde hace unos meses vengo usando la que, desde mi punto de vista, es sin duda la mejor plantilla para WordPress que he manejado hasta la fecha (y ya llevo unos cuantos años). Os hablo de DIVI, del desarrollador ElegantThemes, y si sois usuarios asiduos de WordPress seguro que ya habéis leído más de un artículo-recomendación hablando de este espectacular theme. Además, en conjunto con Divi Builder (su maquetador visual) se convierte en una potente herramienta para diseño de páginas WordPress de manera rápida, sencilla y con unos resultados espectaculares (a la par que optimizados).

Así que en diversos artículos os iré hablando de algunas mejoras/personalizaciones que, por defecto, no vienen en las opciones de Divi pero que le aportan valor añadido a vuestros proyectos WordPress. Todas estas mejoras realmente ya existen y son detalladas (casi siempre) por los propios desarrolladores de Divi, pero trataré de explicarlas de una manera sencilla y, por supuesto, en español ;)

Fijar un módulo con Divi Builder

La función “sticky” (o “sticker)” permite que, al hacer scroll en una página, alguno de los módulos siempre esté visible. Seguro que ya lo habéis visto esto en funcionamiento en muchos menús de páginas Web, que siempre quedan visibles en la parte superior, pero aplicarlo a un módulo puede dar un plus de imagen a la página en cuestión y favorecer la usabilidad. En Divi Builder, por defecto, esta función no existe, por lo que hay que hacer unos sencillos pasos para lograrlo. ¿Vamos a ello? :)

  • Descargar el siguiente fichero: “Garand-sticky-1.0.4
  • Descomprimir el fichero ZIP
  • Subir mediante FTP el fichero “jquery.sticky.js” a la carpeta “/js” del tema Divi (por defecto “/wp-content/themes/Divi/js/
  • En el panel de administración de WordPress, acceder a “Divi > Opciones del tema > Integration
  • En la caja de texto “Agregar código al <head> de su blog” copiar-pegar el siguiente código (¡edita primero donde pone AQUITUWEB!):

<script src=”https://www.AQUITUWEB.com/wp-content/themes/Divi/js/jquery.sticky.js”></script> <script>jQuery(document).ready(function(){ jQuery(“#sticker”).sticky({topSpacing:200});});</script>

Con esto, ya estará todo listo para fijar un módulo de Divi Builder en la página que queramos. Para llevarlo a cabo, deberemos:

  • Abrir la página que queramos editar y que esté previamente maquetada con Divi Builder
  • Hacer click en “Ajustes del módulo” del módulo que queramos fijar (icono de 3 rayas horizontales)
  • Pestaña “Avanzado” y en “Identificador CSS” debemos escribir: sticker
  • Guardar y salir

¡Listo!. Si recargáis la página editada de vuestra Web, veréis que el módulo en concreto siempre está visible mientras se hace scroll. Podéis ver el efecto en funcionamiento aquí.

Espero haberos ayudado y, sobre todo, que consigáis resultados espectaculares en vuestros proyectos WordPress con Divi.

Cómo fijar un módulo en cualquier página con Divi Builder
5 2 votos

Temas

Dedico muchas horas de mi día a día al marketing online, pero aquí también os hablaré de mis hobbies, tecnología y todo aquello que forma parte de mi día a día (y que merece la pena compartir).

5 comentarios

  • Hola Nacho he seguido todos los pasos y no me funciona. Tienes idea que puedo haber hecho mal?. Lo quiero activar en un menú que he puesto en un menú deslizante de anchura completa. Gracias!!

  • Hola!!
    En un futuro post, podrías abordar lo pertinente a la desactivación de módulos según el dispositivo?
    Tengo el problema que solo consigo esa desactivación en el móvil, pero no en la tablet. Esta, aunque esté desactivado el módulo “escritorio”, siempre se empeña en mostrar el mismo contenido del PC.

    Gracias por tu atención!!

    Jose

    • ¡Hola Jose!. Claro, a inicios de año me pongo a investigar sobre ello y publico en cuanto pueda :)

    • Imagino que el identificador funcionará en tantos módulos como se inserte, pero entiendo que el funcionamiento de la Web con varios módulos fijados… no será muy “amigable”. De todos modos, no lo he llegado a probar. Saludos!

¿Algún comentario? :)