En este tutorial vamos a crear un menú hamburguesa utilizando la nueva funcionalidad de Divi 5 llamada Divi Canvases.
Con Divi Canvases podemos crear lienzos de trabajo independientes que nos permiten construir cualquier sección de forma aislada y posteriormente agregar interacciones para mostrarla u ocultarla mediante clics, scroll o cualquier otro tipo de evento dentro de nuestra página creada con Divi.
Esta funcionalidad abre un abanico enorme de posibilidades, ya que podemos crear todo tipo de menús: hamburguesa, mega menús, menús móviles, laterales, fullpage, entre otros. En este caso, nos vamos a enfocar en la creación de un menú hamburguesa fullpage completamente adaptable a cualquier dispositivo.
¿Por qué este ejercicio es importante?
Si bien este ejercicio puede parecer sencillo, estoy seguro de que te ayudará a entender mejor esta nueva forma de trabajar y te abrirá la mente sobre lo que puedes lograr con Divi Canvases.
Más allá de aprender a crear un menú fullpage, lo importante es que comprendas la lógica detrás de esta funcionalidad, ya que después podrás aplicarla en muchos otros proyectos dentro de Divi 5.
¿Qué vamos a construir?
Durante el tutorial comenzaremos construyendo un header básico con un logotipo, el texto “Menú” y un icono hamburguesa. Aquí te enseñaré el nuevo enfoque para estructurar este tipo de elementos en Divi 5 utilizando Divi Flex y el nuevo módulo Grupos.
Posteriormente, trabajaremos con Divi Canvases para crear la sección del menú. Para esta parte retomaremos un ejercicio anterior donde te mostré cómo construir grillas avanzadas desde cero con CSS Grid (ver tutorial). Esto nos permitirá avanzar más rápido, aunque también puedes crear tu propia estructura desde cero con total libertad.
La parte interactiva del menú
Una vez que tengamos tanto el header como el canvas listos, pasaremos a la parte más interesante: la interactividad. Te mostraré cómo hacer que el menú se abra y se cierre al hacer clic en el icono hamburguesa y en el icono de cerrar.
Este punto es clave porque aquí es donde realmente empezamos a sacarle provecho a Divi Canvases como una herramienta dinámica y no solo como una simple sección de diseño.
El plus del tutorial
Y como cereza del pastel, fiel al estilo de OV DIVI, vamos a agregar un plus muy interesante: implementaremos una funcionalidad que actualmente Divi 5 aún no ofrece de forma nativa, el cierre del menú con la tecla ESC.
Esta funcionalidad es clave para mejorar la experiencia de usuario, ya que es un comportamiento estándar en modales, popups y menús fullpage. Lograremos esto con un pequeño fragmento de JavaScript que te compartiré paso a paso.
Conclusión
Con este ejercicio no solo aprenderás a crear un menú hamburguesa fullpage, sino que también entenderás cómo aprovechar al máximo Divi Canvases para construir interfaces mucho más dinámicas e interactivas.
Lo interesante aquí no es solo el resultado final, sino el enfoque. Una vez que comprendas esta lógica, podrás replicarla para crear modales, sidebars, overlays y cualquier tipo de elemento interactivo dentro de tus proyectos con Divi 5.
Ahora sí… vamos a poner manos a la obra 🚀
0 comentarios