Hoy os traigo, gracias a uno de los suscriptores de los Cursos de Marketing Online de MiguelValero.com (al cual le ha surgido la duda y he dicho, ¿por qué no crear un post por si le sirve a más gente?), un tutorial para aprender a crear un mega menú en el Theme Premium Avada para WordPress.

El Theme Avada es uno de los más utilizados por los usuarios de WordPress y uno de los mejor valorados dentro de la comunidad WordPress, ya que es un theme sencillo de utilizar y nos ofrece una gran cantidad de opciones de configuración y customización y además, trae incluido un editor visual bastante potente, lo que lo hace aún ser un theme más competitivo. Si quieres aprender a utilizar el Theme Avada Premium para WordPress, te invito al curso de Avada para WordPress, de mis cursos de marketing online, serás un hacha a partir de entonces con este theme.

Comencemos pues con los pasos a seguir para llegar a crear un mega menú en el Theme Avada para WordPress.

1. Crear el menú y elegir su ubicación

En primer lugar, debemos crear (si todavía no lo tenemos) un menú y ubicarlo en la zona del menú principal de nuestro sitio. Para ello, nos dirigimos a Apariencia > Menús. Una vez dentro, asignamos un nombre al nuevo menú y le indicamos la ubicación Main Navigation. Una vez creado el menú, ya podemos integrar dentro de éste los diferentes ítems que deseemos, páginas, enlaces personalizados, etc.

Es muy importante que sepamos que el mega menú aparecerá en el submenú, es decir, en los ítems que haya por debajo de los ítems padre o elementos principales del menú. Por lo que, a la hora de introducir los diferentes elementos a nuestro menú, es imprescindible crear al menos una jerarquía de ELEMENTO PRINCIPAL (ítem del menú) > ELEMENTOS SECUNDARIOS (ítems del submenú). A continuación veremos cómo se hace todo esto.

Como crear un mega menu en Avada WordPress 1

2. Habilitar la opción de ‘mega menú’ en el ítem padre

Una vez tenemos nuestro menú creado y configurado, es hora de habilitar en el/los elemento/s que vaya/n a ser el/los ítem/s padre (es decir, el elemento del menú que vaya a contener los ítems del submenú que queremos que formen parte del mega menú) la opción de mega menú. Para ello, abrimos el elemento padre en cuestión y activamos la casilla Enable Fusion Mega Menu (only for main menu) y listo, ya tendremos ese elemento del menú listo para agregarle elementos del submenú en forma de mega menú.

Como crear un mega menu en Avada WordPress 2

3. Configurar los ítems del submenú

Ahora es el momento de darle forma a esos elementos que queremos que estén dentro del mega menú, para ello, tenemos varias opciones de configuración. Primero, abrimos las opciones de uno de los elementos del submenú en cuestión y como podemos ver en la imagen siguiente, podemos elegir por un lado, el porcentaje de ancho de la columna de ese elemento, por otro lado, desactivar el título de ese elemento y por último y más interesante, elegir el área de widget destinado a este ítem. En el siguiente paso vamos a ver cómo se configura esto.

Como crear un mega menu en Avada WordPress 3

4. Crear los widgets para los ítems del submenú

Es importante que sepamos que los mega menús en Avada funcionan de la siguiente manera…, para que aparezca un contenido dentro de un submenú, en lugar del texto simple del ítem en cuestión, hay que crear un área de widget específico para ello y luego asignarle su sitio dentro del elemento del submenú en cuestión, ¿queda claro? Vamos a ello.

Nos dirigimos a Apariencia > Widgets y una vez dentro, nos damos cuenta de que Avada nos permite crear nuevas áreas de widgets. Pues bien, creamos una nueva y le asignamos por ejemplo el nombre Submenú 1, para saber que lo que insertemos en ese área de widget, será lo que aparecerá luego en el elemento del submenú que elijamos para ello.

Así que, una vez creado el área de widget, añadimos el widget o los widgets que queramos al mismo, una imagen, un texto, etc. Hasta aquí, todo hecho y de manera correcta. Seguimos…

Como crear un mega menu en Avada WordPress 4

Por último, sólo nos queda irnos al elemento del submenú que queremos elegir para mostrar el contenido de este widget y en la opción Mega Menu Widget Area elegimos el área que acabamos de crear. ¡Listo! Ya lo tenemos.

Para configurar los demás elementos, sólo tenemos que seguir los mismos pasos para cada uno de ellos.

5. Aplicar los diferentes estilos al mega menú

Si lo dejamos todo tal cual, ya tendremos nuestro mega menú listo en Avada y tendrá el siguiente aspecto:

Como crear un mega menu en Avada WordPress 5

Cómo veis, ya hemos conseguido crear un mega menú en Avada y hemos conseguido lo que queríamos, insertar diferente contenido dentro de cada ítem de nuestro submenú; pero si os fijáis, todavía no queda bien del todo (aunque tened en cuenta que esto que yo he hecho es con contenido de prueba y sin tener mucho sentido, simplemente lo he hecho para que veáis que se puede hacer cualquier cosa que deseemos). Ahora, vamos a tocar ‘una tecla’ para otorgar una mejor visibilidad y aspecto a nuestro mega menú.

Si nos vamos de nuevo a nuestro menú y abrimos la configuración del elemento padre, es decir, en mi caso el ítem Mega Menú, veremos que hay una opción que dice Full Width Mega Menu (overrides column width), pues bien, si la activamos, vamos a ver que nuestro mega menú cambia por completo y ahora ocupa la pantalla completa, quedando mucho mejor que antes. Es más, esta opción nos permite también elegir el número de columnas del mega menú, en mi caso, lo he dejado en auto.

Como crear un mega menu en Avada WordPress 6

Ahora, éste es el aspecto que tiene mi mega menú creado para el Theme Avada para WordPress, ya a pantalla completa:

Como crear un mega menu en Avada WordPress 7

Conclusión

Mucho mejor que antes, ¿verdad? Ahora ya sabemos crear un mega menú para el Theme Avada para WordPress y ya habéis visto lo fácil que es y la cantidad de cositas interesantes que podemos hacer, podemos insertar cualquier cosa que deseemos dentro de cada elemento del menú, desde una imagen, hasta texto, enlaces sociales, etc., pasando por un listado de últimos artículos, un buscador, en fin, cualquier cosa que se nos ocurra.

Si queréis dominar el Theme Avada Premium para WordPress, no olvidéis que podéis suscribiros a los Cursos de MiguelValero.com, donde encontraréis el curso sobre este theme y otros interesantes cursos sobre marketing online.

Por mi parte, esto es todo, nos vemos mañana por aquí con más contenido interesante y con más artículos y tutoriales sobre marketing online. ¡Hasta la próxima!