¿Quieres agregar un mega menú en tu sitio de WordPress?
Los megamenús le permiten organizar docenas o incluso cientos de enlaces en columnas y filas intuitivas. Luego puedes agregar contenido enriquecido, como imágenes y videos, para que tus mega menús sean aún más útiles.
En este artÃculo le mostraremos paso a paso cómo agregar un mega menú a su sitio de WordPress.
WordPress viene con un generador de arrastrar y soltar que puede usar para crear todo tipo de menús, incluidos menús desplegables, menús de encabezado y más. Incluso hay complementos que le permiten crear menús de navegación personalizados en temas de WordPress.
Sin embargo, si su sitio tiene mucho contenido, es posible que necesite crear un mega menú. Esto le permite agregar menús desplegables de varias columnas a su menú estándar de WordPress.
Puede utilizar mega menús para organizar su contenido en diferentes tÃtulos y subtÃtulos, de modo que los visitantes puedan encontrar rápidamente lo que buscan. Por ejemplo, si crea un mercado en lÃnea, puede organizar todas sus categorÃas y subcategorÃas de productos en un mega menú.
Los mega menús también pueden mostrar contenido enriquecido a sus visitantes, como videos, texto, búsquedas y publicaciones recientes.
También puedes agregar imágenes, lo que hace que los megamenús sean más fáciles de escanear.
Dicho esto, veamos cómo puedes agregar fácilmente un mega menú a tu sitio web de WordPress.
La forma más sencilla de agregar un mega menú en su sitio de WordPress es usar Mega Mega menú. Este complemento le permite agregar contenido enriquecido a sus mega menús, incluidos videos, galerÃas de imágenes, búsqueda y más.
De esta manera, puede crear menús más atractivos y útiles.
También puedes diseñar cada parte del mega menú agregando diferentes colores, cambiando el tamaño de fuente y usando diferentes Ãconos.
Primero, deberá instalar y activar el complemento. Si necesita ayuda, consulte nuestra guÃa sobre cómo instalar un complemento de WordPress.
Habilite mega menús en su sitio de WordPress
Después de la activación, vaya a Mega Menú » Ubicaciones del menú para ver todas las diferentes áreas donde puedes agregar un mega menú.
Es posible que veas diferentes opciones dependiendo de tu tema de WordPress.
Para comenzar, deberá habilitar mega menús en cada ubicación donde desee usarlos.
Para hacer esto, simplemente haga clic para expandir una ubicación y luego marque la casilla “Habilitado”.
Después de eso, puedes editar el “Evento” que abrirá el mega menú.
La configuración predeterminada es “Hover Intent”, lo que significa que el visitante debe pasar el cursor sobre el mega menú durante unos segundos para activarlo. Esto funciona bien para la mayorÃa de los sitios web de WordPress, pero también puedes abrir el menú desplegable “Efecto” y elegir “Desplazar el cursor” o “Hacer clic”.
Si elige “Hacer clic”, el visitante deberá hacer clic para explorar el mega menú. Esto puede resultar útil si le preocupa que los visitantes activen el menú por accidente, lo que puede resultar frustrante.
Mientras tanto, 'Hover' abrirá su mega menú tan pronto como el visitante mueva el mouse sobre él. Esto puede animar a los visitantes a explorar diferentes áreas de su sitio, por lo que es posible que desee utilizar el desplazamiento sobre las páginas de destino o la página de inicio de su sitio web.
Una vez que haya tomado esta decisión, puede cambiar cómo se abre el menú usando la configuración de “Efecto”.
Max Mega Menu tiene varias animaciones que puedes probar, incluido el desvanecimiento y el desplazamiento hacia arriba. También puedes cambiar la velocidad de la animación. Al probar diferentes animaciones, puedes crear un mega menú que capte la atención del visitante.
Si no desea utilizar ninguna animación, simplemente abra el primer menú desplegable y seleccione “Ninguno”.
De forma predeterminada, Mega Menu no utiliza animaciones en dispositivos móviles, ya que los teléfonos inteligentes y las tabletas suelen tener menos potencia de procesamiento. Sin embargo, si desea crear una animación única para los visitantes móviles, puede utilizar la configuración en el área “Efecto (móvil)”.
Si desea probar sus mega menús en dispositivos móviles, consulte nuestra guÃa sobre cómo ver la versión móvil de los sitios de WordPress desde el escritorio.
Si elige “Hacer clic” en el menú desplegable “Evento”, asegúrese de seleccionar la pestaña “Avanzado” a continuación.
Aquà puede utilizar “Comportamiento del evento de clic” para definir qué sucede cuando el visitante hace clic en su mega menú. Por ejemplo, el segundo clic podrÃa cerrar el menú o abrir un nuevo enlace.
Hay más configuraciones que puedes ver, pero esto deberÃa ser suficiente para la mayorÃa de los blogs y sitios web de WordPress.
Cuando esté satisfecho con la configuración del complemento, haga clic en “Guardar cambios”.
Para habilitar mega menús para múltiples ubicaciones, simplemente siga los mismos pasos anteriores.
Personaliza el aspecto de los mega menús en tu sitio web
El siguiente paso es configurar cómo aparecerán los mega menús en su sitio web.
Puede hacerlo seleccionando la pestaña “Temas de menú” a la izquierda de la pantalla.
En esta pantalla puedes cambiar la dirección de los Ãconos de flecha, usar una altura de lÃnea diferente, agregar una sombra y más.
Cuando esté satisfecho con su configuración, no olvide hacer clic en “Guardar cambios”.
Si desea eliminar estos cambios en cualquier momento, simplemente marque la casilla “Restablecer estilo del widget” y luego haga clic en “Guardar cambios”.
A continuación, puede personalizar la barra de menú, que es la barra que ven los visitantes cuando el menú está en su estado contraÃdo predeterminado.
Para realizar estos cambios, haga clic en la pestaña “Barra de menú” y luego use la configuración para cambiar el color de fondo, el relleno, el radio del borde y más.
También puedes crear un degradado de color seleccionando dos colores diferentes en la sección “Fondo del menú”.
Si se desplaza hacia abajo, puede cambiar el aspecto del menú de nivel superior.
Esta es la primera fila de elementos, visible cuando el mega menú está contraÃdo.
Dado que son tan importantes, es posible que desees resaltar los elementos del menú de nivel superior.
Por ejemplo, en la siguiente imagen utilizamos un color de fondo diferente.
En la sección “Estado de desplazamiento” puede resaltar el elemento del menú de nivel superior seleccionado actualmente.
Por ejemplo, en la siguiente imagen, utilizamos un efecto de subrayado.
Esto puede ayudar al visitante a ver dónde se encuentra en el menú, lo que lo hace especialmente útil para sitios que necesitan megamenús grandes.
Si agrega un estado de desplazamiento, desplácese hasta la parte inferior de la pantalla y marque la casilla “Resaltar elemento actual”.
A continuación, puede cambiar la apariencia del submenú.
Este es el menú que aparece debajo de un padre de nivel superior, como puedes ver en la siguiente imagen.
Para personalizar el submenú, haga clic en la pestaña “Mega Menú”.
Ahora puede usar estas configuraciones para cambiar el color de fondo del submenú, aumentar el radio para crear esquinas curvas, agregar relleno y más.
Agregue contenido a sus mega menús usando widgets. Por ejemplo, puede agregar un widget de GalerÃa y mostrar sus productos WooCommerce más populares o incrustar una nube de etiquetas en su mega menú. Estos widgets pueden proporcionar información adicional o alentar a los visitantes a hacer clic en ciertos elementos del menú.
Puede personalizar el aspecto de estos widgets desplazándose hasta la sección “Widgets”. Por ejemplo, puede cambiar el color del tÃtulo del widget, aumentar el tamaño de fuente, agregar relleno y ajustar la alineación.
En esta pantalla, también puede personalizar la apariencia de los elementos del menú de segundo y tercer nivel en su sitio web, blog o mercado en lÃnea. Estos son los elementos secundarios de los elementos del menú de nivel superior.
Al crear sus menús, puede agregar cuatro o incluso más capas para crear un mega menú anidado. Si hace esto, WordPress simplemente usará el estilo de tercer nivel para todos los niveles posteriores.
Puedes verlo en acción en la siguiente imagen. El segundo nivel tiene texto rojo y tanto el tercer como el cuarto nivel usan el mismo texto azul.
Una vez que esté satisfecho con la configuración de su menú, no olvide hacer clic en “Guardar cambios”.
Una vez que haya terminado de personalizar su mega menú, es hora de agregarlo a su sitio web.
solo ve a Apariencia » Menú.
Si desea convertir un menú existente en un mega menú, abra el menú desplegable “Seleccione un menú para editar” y selecciónelo de la lista. Tenga en cuenta que el menú que elija debe estar asignado a una ubicación donde haya habilitado la función de mega menú.
Si desea comenzar desde cero, haga clic en “Crear un nuevo menú” y escriba un tÃtulo para su nuevo mega menú.
Luego puede seleccionar la ubicación que desea usar y hacer clic en “Crear menú”. Nuevamente, esta debe ser una ubicación donde tengas mega menús habilitados.
Añade contenido a tu menú de WordPress
A continuación, agregue todas las páginas, publicaciones, productos y cualquier otro contenido de WooCommerce que desee incluir en el mega menú. Para obtener instrucciones detalladas, consulte nuestra guÃa para principiantes sobre cómo agregar un menú de navegación en WordPress.
A continuación, deberá organizar sus elementos en los principales y submenús que desea usar en el mega menú. Para crear un submenú, arrastre un elemento debajo del principal, luego arrástrelo ligeramente hacia la derecha antes de soltarlo.
Para crear varias capas, simplemente continúe arrastrando los elementos hacia la derecha para que aparezcan sangrados uno debajo del otro. Esto es similar a crear un menú desplegable en WordPress.
Habilitar la función Mega Menú
Una vez hecho esto, haga clic para expandir “Configuración Max Mega Menu” y marque la casilla junto a “Activar”.
En este cuadro también puede anular la configuración predeterminada del mega menú. Esto le permite crear mega menús únicos para diferentes áreas de su sitio web de WordPress, asà que continúe y realice los cambios que desee.
A continuación, haga clic en “Guardar”.
Crear diseño de mega menú
Ahora pasa el cursor sobre el primer elemento de nivel superior y verás un nuevo botón “Mega Menú”. Continúe y haga clic en el botón.
Ahora verá todas las configuraciones para este elemento de nivel superior.
De forma predeterminada, Max Mega Menu utilizará el estilo desplegable, donde los submenús se abren desde el lateral. Para crear un mega menú, abra el menú desplegable “Modo de visualización del submenú” y elija “Diseño estándar” o “Diseño de cuadrÃcula”.
El diseño estándar muestra todos los submenús en columnas.
Mientras tanto, el diseño de cuadrÃcula le permite organizar los elementos del submenú en columnas y filas.
Esto es ideal si deseas mostrar una gran cantidad de contenido, como todos los productos digitales de tu tienda en lÃnea, o si tienes un diseño muy especÃfico en mente.
Después de seleccionar el diseño estándar o de cuadrÃcula, verá todos los submenús asignados a este padre.
Ahora puedes continuar y cambiar la forma en que se organizan estos elementos en el mega menú.
Si está utilizando el diseño estándar, puede cambiar la cantidad de columnas usando el menú desplegable en la esquina superior derecha.
Si está utilizando un diseño de cuadrÃcula, puede agregar columnas y filas usando los botones “+Columna” y “+Fila”.
Una vez que esté satisfecho con el diseño, puede organizar los elementos del submenú en diferentes columnas y filas usando la función de arrastrar y soltar.
A continuación, es hora de cambiar la cantidad de espacio que ocupa cada elemento en la columna. El menú Max Mega muestra el tamaño actual como una fracción del ancho total disponible.
Por ejemplo, en la siguiente imagen ambas columnas ocupan la mitad del espacio disponible.
Para cambiar el tamaño de un elemento, simplemente haga clic en los botones de flecha para acercar o alejar.
Cree un mega menú compatible con dispositivos móviles (solo diseño de cuadrÃcula)
De forma predeterminada, Max Mega Menu mostrará el mismo contenido en dispositivos móviles y de escritorio. Esto puede ser un problema con los diseños de cuadrÃcula, ya que los teléfonos inteligentes y las tabletas suelen tener pantallas más pequeñas y el desplazamiento horizontal puede resultar difÃcil.
Si utiliza el diseño de cuadrÃcula, puede crear varios mega menús para dispositivos móviles. Por ejemplo, podrÃa utilizar menos columnas para que los usuarios no tengan que desplazarse horizontalmente. De esta manera, puede crear un menú de WordPress listo para dispositivos móviles.
Puedes ocultar columnas o filas enteras usando el Ãcono “Oculto en el móvil”, que parece un pequeño teléfono celular.
Simplemente active y desactive el Ãcono para ocultar y mostrar contenido diferente en dispositivos móviles y de escritorio.
Agregue contenido enriquecido con widgets de mega menú
Una vez hecho esto, puedes comenzar a agregar widgets al mega menú. Esto le permite mostrar contenido adicional en el submenú, como comentarios recientes, videos, galerÃas y más.
Por ejemplo, podrÃa utilizar imágenes para promocionar una oferta en su tienda en lÃnea o para destacar sus últimos productos.
Para agregar un widget, simplemente haga clic para abrir la sección “Seleccione un widget…”. desplegable.
Ahora puedes elegir un widget de la lista.
WordPress agregará automáticamente el widget a una columna o fila, pero puedes moverlo a una nueva ubicación arrastrando y soltando.
Para configurar el widget, continúa y haz clic en su pequeño Ãcono de llave inglesa.
Se abre una ventana emergente donde puede agregar contenido al widget y cambiar su configuración.
Verás diferentes opciones según el tipo de widget que estés creando. Por ejemplo, si agrega un widget de reproductor de música al mega menú, verá configuraciones donde puede cargar una pista de audio.
Todos los widgets tienen un campo “TÃtulo” donde puede agregar texto que aparecerá encima del widget.
Una vez que haya terminado, haga clic en “Guardar” para almacenar sus cambios, luego seleccione “Cerrar”. Para agregar más widgets al mega menú, simplemente siga los mismos pasos anteriores.
Revisar la configuración predeterminada del menú Mega
A continuación, simplemente haga clic en la pestaña “Configuración”.
Aquà puede utilizar las casillas de verificación para ocultar o mostrar diferentes contenidos en el submenú.
También puede ocultar o mostrar el submenú en dispositivos móviles y de escritorio, y cambiar la alineación para que el submenú se abra a la izquierda o derecha del nivel superior.
Si realiza cambios en la configuración predeterminada, no olvide hacer clic en “Guardar cambios”.
Agregue Ãconos de imágenes al mega menú de WordPress
Los Ãconos de imagen ayudan a los visitantes a comprender de qué se trata un elemento del menú, sin siquiera tener que leer la etiqueta de navegación. Esto es especialmente útil para menús grandes donde un visitante podrÃa preferir escanear rápidamente el contenido en lugar de leer cada etiqueta de navegación.
Puede utilizar iconos para resaltar el contenido más importante. Por ejemplo, puede alentar a los visitantes a completar su compra agregando un Ãcono de carrito de compras al menú “Pagar”.
Para agregar Ãconos de imágenes al menú de navegación, haga clic en la pestaña “Icono”.
Ahora puedes elegir cualquier Dashicon de la biblioteca incorporada o usar tu propia imagen. Si actualiza a Max Mega Menu pro, también tendrá acceso a otras fuentes de Ãconos, Genericons y FontAwesome.
Complete la configuración del mega menú en su sitio de WordPress
Después de revisar todas estas configuraciones, puede cerrar la ventana emergente para volver a la principal Apariencia » Menú página.
Ahora puede repetir este proceso para cada padre de nivel superior.
Cuando esté satisfecho con la configuración del mega menú, haga clic en el botón Guardar menú para activarlo.
Ahora simplemente visite su sitio web para ver el mega menú en acción.
Esperamos que este artÃculo le haya ayudado a aprender cómo agregar un mega menú en su sitio de WordPress. También puede consultar nuestra guÃa sobre los mejores creadores de páginas de arrastrar y soltar de WordPress y cómo aumentar el tráfico de su blog.