Cómo crear un megamenú en WordPress con el tema OceanWP

El tema OceanWP es uno de los mejores que existen en el mercado para diseñar tu página web con WordPress.

Como ya he comentado en un montón de ocasiones (si me has leído alguna vez, lo sabrás), desde que descubrí este tema, no utilizo otro, gracias a su gran capacidad de personalización, su ligereza y su gran integración con Elementor Page Builder, el mejor maquetador visual para diseñar webs.

Si quieres saberlo todo sobre este fantástico tema o plantilla, te invito a que leas en mi blog el  tutorial completo de OceanWP que he realizado, con vídeo incluido.

Dicho esto, OceanWP tiene un sinfín de opciones de configuración y te aseguro que aprenderás a personalizarlo en muy poco tiempo.

Entre todas las opciones que te ofrece, hay una que llama mucho la atención, pues con OceanWP podrás crear mega menús en WordPress sin tener que instalarte un plugin extra.

Pero antes de contarte cómo hacerlo, por si tienes dudas sobre lo que es un mega menú, vayamos por partes, como dijo Jack El Destripador, y empecemos por el principio…

¿Qué es un mega menú?

Por norma general, los menús de WordPress de una web son bastante sencillos en lo que a aspecto visual se refiere.

De hecho, la gran mayoría suelen tener únicamente dos niveles jerárquicos: los links principales y algunos que cuelgan de estos, conformando lo que son los submenús, como te muestro en este ejemplo:

• Productos
  • Producto 1
  • Producto 2
  • Producto 3
• Servicios
  • Servicio 1
  • Servicio 2
  • Servicio 3

En este caso, Productos y Servicios serían elementos principales del menú, y cada ítem con número sería un subelemento que colgaría de Productos y Servicios respectivamente.

Aquí te muestro un ejemplo de cómo sería un menú estándar con un submenú de varios subelementos.

Como ves, no tiene nada de especial…

Pero un mega menú va mucho más allá…

En un mega menú podrás añadir diversos elementos visuales, como imágenes o vídeos, que harán que el contenido del menú pase a ser más una discoteca que otra cosa, pero es que hay casos en los que el cliente lo quiere, lo necesita o lo ha visto en otra web y se ha puesto cachond@.

Hay ocasiones en las que un mega menú es muy útil y funcional.

El caso es que si quieres hacer un mega menú en WordPress, no descartes utilizar esta opción de OceanWP, pues no te dejará indiferente.

Además, podrás personalizarlo a tope gracias a su combinación con Elementor, con el que podrás conseguir resultados grandiosos.

Ejemplos de mega menús

Como con todo (o casi todo) en la vida, una imagen vale más que mil palabras, quiero mostrarte algunos ejemplos de mega menús, algunos más mareantes que otros, pero que te darán una idea de lo que se puede conseguir:

Movistar: el mega menú de la web de Movistar contiene encabezados con imágenes de las que cuelgan los subelementos.

Amazon: en la web del gigante del retail podemos ver que más que opciones de menú, aparecen directamente los productos que ellos desean destacar; otra opción muy buena para potenciar ventas específicas.

Decathlon: aquí vemos un mega menú «mixto», en el que aparecen todas las opciones principales como subelementos y, además, un par de secciones con imagen a la derecha (Polares y Zapatillas) que han querido destacar a modo de «banner».

Cómo estructurar los contenidos del menú en WordPress

Para crear un menú en WordPress, sea estándar o sea mega menú, primero debemos tener clara la estructura de páginas que vamos a mostrar.

El ejemplo que te he puesto arriba de Productos y Servicios nos vale perfectamente para dar forma a lo que te quiero contar.

Entonces…

La estructura de nuestro menú inventado antes de diseñar su aspecto visual podría ser la siguiente, con tres niveles jerárquicos:

• Inicio
• Sobre nosotros
• Productos
  • Producto 1
  • Producto 2
  • Producto 3
• Servicios
  • Servicio 1
  • Servicio 2
  • Servicio 3
• Blog
• Contacto

¿Me sigues? ¡Bien!

Si dejamos este menú con el formato por defecto de un menú de toda la vida, lo veríamos así:

Pero no has leído hasta aquí para quedarte así…

Sigamos…

Organización de los elementos del menú en WordPress

Ahora que tenemos preparada la estructura de nuestra web con sus elementos y subelementos, lo que tendremos que hacer es crear las páginas (Inicio, Sobre nosotros, etc.) y añadirlas al menú principal de nuestro WordPress en el apartado ‘Apariencia/Menús’.

Así se vería todo:

Configuración del mega menú

Una vez tenemos el menú estándar creado y organizado, vamos a configurarlo de manera que se muestre como un mega menú en OceanWP.

Para ello, tenemos que seleccionar cada elemento principal del menú (por ejemplo, ‘Productos’) y activar las siguientes opciones (hacer lo mismo para los demás elementos principales):

• Desactivar enlace: si alguno de los elementos principales del menú tiene enlace a una página, tendrás que desmarcar esta opción. De lo contrario, actívala.
• Activar mega menú: obligatorio activar esta opción para que el menú estándar coja el aspecto de un mega menú… aunque visualmente no nos hará mojar las bragas de momento.
• Mega menú, ¿ancho automático?: marcando esta opción, el ancho del submenú se adaptará a la longitud del texto más largo que esté en ese nivel jerárquico. Si deseas que el mega menú ocupe el ancho de la caja central del tema, déjalo desactivado.
• Mega menú – Columnas (1 a 6): OceanWP te permite crear hasta 6 columnas de submenús. Aquí debes poner la cantidad que te convenga. Para nuestro ejemplo pondremos dos columnas, una para ‘Productos’ y otra para ‘Servicios’.
• ¿Desea esconder el menú del encabezado?: las traducciones de plugins y temas de WordPress a veces dejan mucho que desear y, en este caso, he tenido que cambiar el idioma de WP a Inglés para saber cómo lo habían puesto en el idioma principal. ¡Y voilá!… la traducción está un poco mal y realmente es ¿Desea esconder el encabezado del menú?, lo que significa que esta opción ocultaría el texto del encabezado de esa columna en el mega menú. Yo lo dejaría desactivado.
• Icono: te permitirá seleccionar un icono para añadir a cada elemento o subelemento del menú.

Una vez tengamos todo esto configurado como, el aspecto que podríamos tener debería ser algo así, con los subelementos organizados por columnas, en vez de unos sobre otros:

Añadiendo el contenido visual al mega menú

Una vez tenemos activado el mega menú con sus opciones principales, ahora vamos a añadir contenido personalizado a las columnas.

Para hacer esto, abriremos cualquiera de las opciones del nivel 2 (Productos y Servicios) en el menú y configuraremos las siguientes opciones:

• Plantilla (Panel del tema / Mi biblioteca): como te comenté al comienzo del post, gracias a Elementor podrás crear plantillas con contenidos multimedia (imágenes, vídeos, links, etc.) y luego añadirlos a tu mega menú.

  Para conseguirlo, tendrás que diseñar el contenido a través de ‘Theme Panel / Mi biblioteca’ (apartado del menú de WordPress que se añade junto a OceanWP).

  Después de crear la plantilla, podrás seleccionarla directamente desde esta opción del menú.
  

• Mega menú – Área de widgets: OceanWP te da la posibilidad de habilitar hasta 7 zonas de widgets de WP (3 de sidebars y 4 columnas en el footer). Si tienes creada alguna de esas zonas de widgets, podrás seleccionarla aquí y te aparecerá en el mega menú:
  

Para ilustrar este ejemplo, yo he utilizado una plantilla de Elementor creada en el Theme Panel de OceanWP, y he añadido a cada uno una imagen de fondo con efecto hover, un par de textos y un botón.

Conclusión y opinión personal

La opción que ofrece OceanWP para crear un mega menú en WordPress no es que sea la mejor del mundo mundial pero si combinas sus funcionalidades y estructura con la potencia de Elementor, tienes una buena opción en tu mano para hacerte un menú completito sin tener que instalar más plugins.

¿Qué te ha parecido este contenido?

¿Sabías que OceanWP tenía estas posibilidades?

Cuéntame tus impresiones en los comentarios del blog y charlamos un rato.

Y si te apetece compartir este contenido en tus redes sociales y llegamos a 1.000 shares, prometo que me rapo la cabeza al cero 🙂 (no me jodas ahora y lo pongas en Forocoches, ¡eh!)

¡¡¡Hasta luego, Lucaaaaassss!!!