Un mega menú es un menú enriquecido que muestra una estructura formada por diferentes bloques o secciones. Este tipo de menú enriquecido ha ido evolucionando desde el menú desplegable sencillo compuesto por un solo bloque o sección.
Un mega menú debe permitir estructurar el contenido en bloques o secciones, añadir imágenes, títulos, pestañas, carrsules, productos (caso de tienda online) y otros elementos. Todo esto con la finalidad de poder estructurar el contenido y hacer más sencilla la navegación en sitios web con amplias estructuras de páginas internas.
En este post te voy a enseñar a crear un mega menú en tu WordPress. También hablaremos del caso concreto de la plantilla Divi, que como sabéis, es mi favorita.
ÍNDICE CREAR MEGA MENU WORDPRESS
El plugin «Quad Menu» nos va a permitir crear un mega menú con WordPress. Quad Menu es un plugin Freemium. Es decir, dispone de una versión gratuita más limitada y de una versión premium o de pago.
La versión gratuita la puedes descargar desde aquí: Quad Menú versión gratuita
La versión premium tiene un coste de 14 $, que equivale a unos 12 € (incluye soporte de 6 meses). Un precio muy asequible para poder implementar un mega menú en WordPress con todas las funcionalidades.
COMPRAR QUAD MENU
El plugin es compatible en mayor o menor medida con la mayoría de las plantillas de WordPress. Pero ahora, te voy a dar un listado de plantillas con las que se ha creado un plugin específico adicional para conseguir una perfecta integración. Lee con atención los detalles para cada plantilla.
Plantillas con las que se ha creado un plugin específico para una perfecta integración de Quad Menú :
a.- Plantilla Divi: El plugin Quad Menú es compatible con la plantilla Divi. Si utilizas la versión gratuita del plugin tendrás que utilizar también este plugin: Divi Mega Menú – Quad Menu (Es el plugin para conseguir una perfecta integración con Divi).
En el caso de utilizar la versión de pago del plugin Quad Menu, no tendrás que instalar ningún otro plugin para la compatibilidad con Divi, ya que la integra el mismo plugin Quad Menu.
Es decir, si utilizas el plugin Quad menu gratuito con Divi, también tendrás que instalar el plugin «Divi Mega Menu – Quad Menu». Si utilizas el plugin de pago Quad Menu, no tendrás que instalar ningún otro plugin.
b.- Plantilla Astra: para utilizar Quad Menu con la plantilla Astra, deberás instalar también el plugin: Astra Mega Menu – Quad Menu
c.- Plantilla Storefront: para utilizar Quad Menu con la plantilla Storefront, deberás instalar también el plugin: Storefront Mega Menu – Quad Menu
d.- Plantilla Avada: para utilizar Quad Menu con la plantilla Avada, deberás instalar también el plugin: Avada Mega Menu – Quad Menu
e.- Plantilla OceanWP: para utilizar Quad Menu con la plantilla OceanWP, deberás instalar también el plugin: OceanWP Mega Menu – Quad Menu
f.- Plantilla Twenty Seventeen: para utilizar Quad Menu con la plantilla Twenty Seventeen, deberás instalar también el plugin: Twenty Seventeen Mega Menu – Quad Menu
g.- Woocommerce: para integrar Quad Menu con el plugin Woocommerce, deberás instalar también el plugin: Woocommerce Mega Menu – Quad Menu
h.- Plantilla EXTRA: para utilizar Quad Menu con la plantilla Extra, deberás instalar también el plugin: Extra Mega Menu – Quad Menu
i.- Generate Press: para utilizar Quad Menu con la plantilla Generate Press, deberás instalar también el plugin: Generate Press Mega Menu – Quad Menu
El plugin Quad Menu, a aparte de permitir añadir elementos estructurados al menú, permite elegir entre diferente diseños, layouts o estructuras de menú:
a.- Collapse (Colapsable): Si elegimos este diseño de menú tendremos un mega menú horizontal en escritorio y un menú desplegable, colapsable o collapse en móviles. Los menús colapsables se caracterizan por no mostrar en un primer momento toda la estructura de subcategorías, sino que éstas se van mostrando conforme vamos haciendo clic en las categorías princiapales.
Este es layout o diseño que viene activado por defecto y también es el utilizado en la mayoría de sitios web.
b.- Offcanvas: con este layout tendremos un mega menú horizontal en escritorio y un menú vertical deslizante en móviles. El menú deslizante en móviles ocupará un 80% de la pantalla y aparecerá con un efecto tipo «sliding» o deslizamiento horizontal.
c.- Vertical: con este diseño tendremos un menú vertical oculto en escritorio y dispositivos móviles. En ambos casos, solo se mostrará un botón o icono tipo hamburguer o hamburguesa (3 rayas horizontales). Al hacer clic en dicho icono se desplegará el menú vertical, que se podrá mostrar en el lado izquierdo o derecho de la pantalla.
d.- Sidebar: con este diseño mostraremos un menú vertical fijo. Es decir, se mostrará desde el principio sin necesidad de hacer clic en ningún icono o botón.
Te voy a enseñar ahora cómo se construye un mega menú con Quad Menu:
a.- Crear menú: lo primero que debemos hacer es crear un menú, en caso de que no hayamos creado aún ninguno en WordPress. Para ello iremos a: «Apariencia > menús», pondremos nombre al menú y haremos clic en el botón «Crear menú».
A continuación, marcaremos en la parte inferior el lugar donde se visualizará el menú y guardaremos. Las zonas donde se ha activado el Quad Menú mostrarán un icono característico con forma de cuadrado negro con una punta de flecha naranja.
En este ejemplo observamos que el Quad Menú, solo está activado para la zona: «Menú Principal» de la plantilla (Divi en este caso), ya que es la única zona que muestra el cuadrado negro
NOTA: Para activar el Quad Menú en zonas de la plantilla iremos a: «Quad Menu pro > Opciones», pestaña «Configuración», elegiremos la zona y activaremos la integración. En el ejemplo anterior solo está activado el Quad Menú con la zona Menú Principal de Divi.
Activar Quad Menú en la zona «Menú Principal» de la plantilla Divi
b.- Añadir Mega Menú: en el lateral izquierdo veremos un bloque desplegable denominado: «QuadMenu Items», y dentro de el, varios elementos. Seleccionaremos el elemento: «Mega» y haremos clic en el botón: «Añadir al menú».
c.- Opciones Mega Menú: al poner el ratón sobre el elemento «Mega» verás que se muestra una especie de botón con un icono de engranaje y el texto QuadMenu PRO. Haz clic sobre este elemento y se desplegarán las opciones de personalización divididas en varias pestañas: Default, General, Icono, Background, Ancho y columnas.
En «Default > URL» pondremos la url de destino si se hace clic en el item de menú creado, y en «Default > Título» pondremos el nombre del item de menú (haremos clic con el botón izquierdo del ratón para un primer guardado)
Configurar mega menú
d.- Añadir columnas: para añadir columnas haz clic en la pestaña: «Columnas» y después haz clic en el botón: «Añadir Columna».
e.- Añadir elementos a la columna: Para añadir elementos a la columna haz clic en el botón: «+» y posteriormente desde el menú lateral podrás añadir o QuadMenu Widgets o QuadMenu items. Selecciona elementos y haz clic en el botón: «Add to Column»
Añadir widget o elemento a una columna del mega menú
Sigue el mismo procedimiento seguido en el apartado d) y e) para ir añadiendo más columnas y elementos a dichas columnas.
f.- Anchura de columnas: puedes especificar la anchura que tendrá cada columna haciendo clic en el icono en forma de «llave inglesa» que aparece en la parte superior de la columna.
La anchura la podrás especificar de manera independiente para cada tipo de dispositivo. Para un total de 12 puntos de anchura, tendrás que establecer el número de puntos que tendrá cada columna para cada dispositivo. (a estos puntos los llaman también columnas en el plugin)
g.- Opciones de diseño: esto puede variar dependiendo de la plantilla que se esté utilizando. En el caso de la plantilla Divi, que es la que yo utilizo, las opciones de diseño del mega menú se suman a las que vienen por defecto con Divi y se localizan en el mismo lugar. Es decir, para el menú principal las opciones de diseño las encontrarás en: «Divi > Personalizador de temas > Cabecera y navegación > Barra de menú principal»
COMPRAR QUAD MENU
Vamos a ver ahora que opciones tenemos para implementar un mega menú con WordPress y la plantilla Divi.
Tenemos diferentes opciones para implementar un mega menú con WordPress y la plantilla Divi:
a.- QuadMenú gratis: podemos utilizar el plugin QuadMenú en su versión gratuita, junto al plugin Divi Mega Menú – Quad Menú para que haya una correcta integración. Este plugin estará limitado con respecto al mismo plugin en su versión de pago.
DESCUENTOS PLANTILLA DIVI
b.- QuadMenú premium: podemos adquirir y utilizar el plugin de pago QuadMenú de 14$, que incluye todas las funcionalidades para el Mega Menú. En caso de utilizar este plugin no será necesario instalar el plugin de integración mencionado en el apartado anterior-> COMPRAR PLUGIN
c.- Opciones por defecto de Divi: La plantilla Divi incluye por defecto la posibilidad de crear un mega menú muy sencillo. No podremos utilizar imágenes y otros recursos. Simplemente podremos crear columnas con diferentes items o elementos de menú.
En el apartado 2, tienes la mecánica general para utilizar el plugin QuadMenú con la plantilla Divi. En el siguiente apartado te voy a mostrar cómo crear un mega menú muy sencillo con las opciones de que dispone Divi por defecto.
Para crear un mega menú en wordpress accederemos al panel de administración e iremos a: “Apariencia > Menús”.
Lo primero que debemos hacer es hacer clic en el botón “opciones de pantalla” situado en la parte superior y marcar la opción “Clase CSS”. Esto lo realizamos para que nos aparezca la casilla para poder definir la clase CSS que queremos asociar con el menú.
Definir clase CSS para crear el mega menú
A continuación añadiremos el mega menú. En el ejemplo que vamos a ver el mega menú partirá de un elemento denominado: “Recursos”.
Añadimos el item de menú “Recursos” e incluimos el texto: “mega-menu” en el campo “Clase CSS (opcional)”.
Establecemos la clase mega-menu en el item o elemento del menú
A continuación vamos a crear la siguiente estructura que se desplegará del ítem de menú “Recursos”. En el ejemplo seguiremos la siguiente estructura:
1.- Recursos
1.1.- CMS
1.1.1.- WordPress
1.1.2.- Prestashop
1.1.3.- Drupal
1.1.4.- Joomla
1.2.- Hosting
1.2.1.- Webempresa
1.2.2.- Loading
1.2.3.- Raiola
1.2.4.- 1&1
1.3.- E-commerce
1.3.1.- Prestashop
1.3.2.- Magento
1.3.3.- Woocommerce
1.3.4.- Opencart
1.4.- Plantillas
1.4.1.- Divi
1.4.2.- Avada
1.4.3.- CpoThemes
1.4.4.- Extra
En la siguiente imagen puedes ver cómo se va creando la estructura antes comentada en el mega menú de WordPress.
Creando la estructura del mega menú
Tras crear la estructura, seleccionamos la zona en la que queremos que aparezca el menú, en el apartado: “Ubicaciones del tema”.
En el caso de la plantilla Divi marcaremos la opción “Menú principal” que se corresponde con el menú superior (el del header).
A continuación guardamos.
El resultado será el que se ve en la siguiente imagen.
Apariencia del mega menú realizado con Divi
Seguro que te habrás preguntado, ¿y qué ocurre si introducimos 5 secciones en el mega menú en vez de 4? Lo que ocurre es que la quinta sección se coloca bajo la primera sección como te muestro en este ejemplo
Mega menú realizado con Divi con 5 secciones
Como puedes ver en la imagen la sección correspondiente al Máster de Recursos humanos se ha colocado bajo la sección correspondiente al MBA 2016.
Vamos a ver ahora cómo podemos modificar el diseño de los textos de encabezamiento de sección o textos de cabecera, así como la línea que aparece bajo dichos textos de encabezamiento con la plantilla Divi. Ya que en mi opinión tanto el texto de cabecera como la línea que aparece bajo él salen poco destacados.
Recuerda que lo que vamos a ver solo es válido si estás utilizando la plantilla Divi.
Añade el siguiente código al archivo style.css de tu tema hijo o child theme:
/* Modificar grosores cabezas mega menu */
#top-menu li.mega-menu > ul > li > a:first-child {
padding-top: 0 !important;
border-bottom: 3px solid rgba(0, 0, 0, 0.03);
font-weight: 700;
color:#326626;
}
/* Modificar grosores cabezas mega menu */
Puedes modificar el código anterior a tu gusto para personalizar el diseño. Ten en cuenta:
- Font-weight: nos da el grosor del texto de cabecera. Los valores posibles: 100,200,300,400,500,600,700,800, 900.
- Color: color html del texto de cabecera
- Border-bottom: línea que aparece bajo el texto de cabecera. El grosor se corresponde con el primer dato que aparece, en el ejemplo 3px.
En la siguiente imagen puedes ver un mega menú de divi personalizado. Se ha modificado el color y grosor de los textos de cabecera así como el grosor de la línea que aparece bajo ellos.
Mega menú con elementos de cabecera con diseño personalizado
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Hola, como están ustedes?
Actualmente estoy desarrollando una pagina Web con plantilla Astra y WooCommerce, en ambos casos Pro, debo instalar los dos plugins: Astra Mega Menu – Quad Menu WooCommerce Mega Menu – Quad Menu o para evitar mayores confusiones debo usar mejor Max Mega Menu Elementor Pro?
Gracias por su pronta respuesta.
Hola Julio,
En principio no te hace falta ningún plugin para crear un mega menu con Astra. Con el módulo «nav menú» de astra te debería valer
MÁS INFO-> https://wpastra.com/docs/nav-menu-addon/
Me gustaría también a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso diseñador web Freelance, Curso Copywriting, Cursos sobre Divi, curso SEO General, Curso SEO Análisis de clics e impresiones, Curso Woocommerce, Curso como crear una tienda online de éxito, Astra Pro, Elementor, Curso sobre idexación web y alta en google, Flatsome, sobre Mailchimp, blog WordPress, etc. etc.
Hola Joaquín, te felicito por esta entrada 👌🏻
Quiero solucionar lo siguiente, a ver si tu me pudedes orientar:
– Uno de mis clientes, quiere poner imagenes en el menú principal de la web (
esto lo he conseguido … buscando mucho … pero lo he conseguido ) creando un Custom Link y un código pareceido a este
El problema viene cuando vamos a los dispositivos móviles, aparece la misma imagen y al ser myu grande no queda bien en los móviles.
Mi duda es la siguiente:
¿ Se puede hacer que en los ordenadores de sobremesa aparezca un menú y en los dispositivos móviles y tabletas otro distinto ?
Mil gracias de antemano, 👍🏻
Joan
Buenas,
Eso va a depender de la plantilla que estés utilizando. Si te lo permite o no.
Estoy utilizando DIVI + DIVI Booster
No se si se puede hacer con el plugin del que hablas en este artículo.
Si DIVI no lo permite … ¿ Hay otra namera de cambiar el texto del menú por imágenes ? o usar menús distintos para Ordenadores de sobre mesa y dispositivos móviles ?
Mil gracias,
Joan
Buenas Joan,
1.- Con el plugin que se ve en el post es posible añadir imágenes a columnas del mega menú y luego hacer algunas pestañas no se muestren en dispositivos móviles. Pero no se si quedará como tu quieres. Puedes hacer alguna prueba con el plugin gratuito.
2.- Con Divi y Divi Booster, por defecto no es posible crear un menú diferente para móviles y escritorio. Es posible que tengas que buscar un plugin específico para creación de menú en móvil.
Muchas gracias, he conseguido cambiarlo con este plugin: https://es.wordpress.org/plugins/mobile-menu/
Gracias por todo,
Joan
Hola Joan,
Perfecto, me alegro que lo hayas solucionado con un plugin para menú en móvil.
Wow! gracias por compartir este plugin
Lo estoy usando en divi con la version free y se integra muy facil
Solo hay que instalar este plugin, no es necasario compra la version pro
https://wordpress.org/plugins/quadmenu-divi/
Saludos
Efectivamente, el plugin tiene una versión free con menos funcionalidades y una versión de pago con más funcionalidades
Gracias Joaquín. Para menús de pocos items en Divi ¿hay alguna forma de que el menú en móvil se vea tal cual en lugar de la dichosa hamburguesa? Gracias.
Hola Miguel.
No, no es posible, y aunque lo fuera no sería nada recomendable. No es posible mostrar los items de un menú en móvil, que no sea a través de un botón desplegable. La razón es que un menú en móvil con los items uno junto a otro sería un menú no optimizado para móviles, y eso tendría problemas negativos a nivel de experiencia de usuario y SEO. Utilizando una plantilla antigua no optimizada para móviles se podría conseguir, pero con una plantilla moderna seguramente no será posible.
Hola, buenisimo post muy esclarecedor.
Hace muy poco empece a usar divi y ahora se me ocurrió explorar lo del menu,
Por suerte me he encontrado con tu blog.
Muchas Gracias
Hola Joaquín, muy útil tu blog. Consulta rápida. cuando despliego mi menú transparente aun me aparece una pequeña sombra sobre la caja del submenu. Puedes decirme cómo sacarla? Puedes revisar mi web para darte una idea de lo que hablo. Mil gracias!
Hola Nico,
No hay ninguna opción en el panel de adminitración de Divi para quitar esa sombra del submenú que me comentas
Hola Joaquín,
Antes que nada felicitarte por tu labor divulgativa, muchas gracias.
He creado un mega-menu para una página web que me estoy haciendo, y quisiera que el menú se abrisese cuanco hago click sobre «productos» que es dónde residen las subcategorias.
Lo que me sucede es que al pasar el mouse por encima del apartado «productos» se abre el mega-menu y a la que el mouse sale de la zona del mega-menu desaparece.
¿Se puede hacer que tenga el mismo comportamiento que el menú desplegable convencional?, ¿que se abra cuando haces click sobre el elemento y que no desaparezca hasta que has seleccionado un subelemento?
Espero haber sabido exponer correctamente mi problema.
Muchas gracias Joaquín.
Hola David,
te has explicado perfectamente.
Lo cierto es que no sé cómo se podría implementar esa funcionalidad al menú. Están apareciendo una serie de plugins relacionados con el mega menú. Por ejemplo, aquí tienes este: Divi Mega Menu – QuadMenu
Aún no te puedo decir nada, porque estoy empezando con la preparación de un post sobre este plugin y aún no lo conozco lo necesario. Pero no descarto que tenga alguna opción al respecto.
Hola Joaquín,
Seguí tu tutorial y todo funcionó perfectamente; ahora quiero volver a la configuración inicial del menú desplegable por defecto. ¿Como lo haría?
Muchas gracias y un saludo
Hola Ruben,
El mega menú viene generado por la clase CSS que se pone en el menú. Quitando esa clase el menú tendría una configuración estándar.
Hola Joaquín. Muy buena toda la info que compartes, muchas gracias. Necesito saber si me puedes ayudar a resolver un problema. resulta que necesito copiar las descripciones de productos de la tienda de mi proveedor y pegarlas a los míos. el problema es que al momento de pegar no se mantiene el formato de texto.
en la pagina de mi proveedor se muestra de la siguiente manera http://pclifecr.com/wp-content/uploads/2018/03/descripcion-proveedor.jpg
y al momento de pegar en mi web queda de la siguiente manera http://pclifecr.com/wp-content/uploads/2018/03/descripcion-pclife.jpg
Agradecería alguien me pueda orientar en como mantener el formato ya que llevo dos semanas tratando de corregir esto y no he podido publicar productos por esa situacion
gracias
Hola Freisel,
1.- Tienes que utilizar las características o atributos que no se usen para crear variaciones, para que te salgan las características con eses formato de tabla. Aquí tienes un post que habla sobre los atributos y características en Woocommerce
2.- Una pregunta. ¿Que procedimiento has seguido para que el menú de Divi en Móviles te aparezca con las subcategorías plegadas?
gracias
Gracias amigo voy a ver como me va. en cuanto a lo del menú me guié con la siguiente información https://www.elegantthemes.com/blog/community/divi-mobile-menu-hack-collapsing-nested-sub-menu-items
OK,
gracias por el aporte
Hola amigo. ya revisé la información y creo que eso es de otro tema que no tienen que ver con mi problema. de todos modos gracias. el problema que tengo es que necesito copiar el texto de la pagina de mi proveedor y pegarlo en la descripción de producto en mi página. El problema es que lo pego y cambia el formato.
Buenas,
Esque ese formato está creado a través de «características» y no es un formato HTML, por lo que no vas a poder copiar y pegar. Tendrías que hacerlo también a través de características.
Hola Luis, He puesto el megamenu en mi web pero me aparece también en la versión móvil y no me gusta como se ve, existe la posibilidad de quitar el megamenu en la versión móvil??
Hola Gabriela,
Por cierto soy Joaquín no Luis,
En cuanto a tu consulta, lo cierto es que no conozco manera para que no aparezca el mega menú en móviles.
Pero he encontrado este post que a lo mejor te interesa. Es sobre como colapsar elementos del menú de Divi (que haya que hacer clic para que se desplieguen) en la versión móvil: Divi Mobile Menu Hack: Collapsing Nested Menu Items
Hola Joaquín,
el problema de mi megamenú es que al solo tener 2 submenús la separación entre ambos es enorme dentro de la pastilla de fondo de color que ocupa todo el ancho de la pantalla. ¿Se puede modificar para que los dos submenús se «aprieten un poco y la pastilla de fondo se adapte?
Hola Juanjo,
No he encontrado una solución para eso,
cuando me ha surgido a mí ese problema lo que he hecho ha sido distribuir el contenido de las 2 columnas en 4 columnas. Es decir, habrán cuatro columnas pero las dos primeras tendrán una misma cabecera y las otras dos otra cabecera.
Aquí te dejo algunos post relacionados con el tema por si te pueden ser de utilidad:
Compactar mega menú de Divi
Mega menú Divi con más de 4 columnas
Con CSS sería así
/*Modificar anchura mega menu*/
#top-menu li.mega-menu ul.sub-menu {
max-width: 50vw;
}
El 50VW significa Viewport width. osea el porcentaje sobre lo que hay de espacio en pantalla. con 50 la mitad, con 33 un tercio…
Buenos días, muchas gracias por explicación.
¿Hay posibilidad de que la 5º columna queda al lado de la 4º, en vez de debajo?
gracias
Hola Elisa,
desde las opciones que vienen por defecto en Divi no es posible,
pero parece que si lo es añadiendo algo de código CSS extra.
Te dejo enlace donde explica como añadir 5, 6, 7 u 8 columnas al mega menú de Divi
En cuanto pueda ampliaré este post para añadir un apartado indicando como añadir más columnas al mega menú de Divi
Un saludo
Hola Oscar,
Felicitarte por el tutorial que has hecho, me gustaría preguntarte algo que para ti será muy sencillo pero yo no he podido conseguirlo, como bien sabes Divi incluye como opción de cabecera, poder poner un icono hamburguesa (que es el menú) y al pinchar sobre él, se desliza el menú (sidebar). Debido a que hay mucha gente que navega por internet, y desconoce el significado del icono hamburguesa, me gustaría poder añadir junto a ese icono la palabra MENU, ¿me podrías ayudar? !!!Muchísimas gracias de antemano!!!
Un abrazo
Hola Agustín,
Pues no has podido añadir un texto junto al icono del menú tipo hamburguesa porque en Divi no hay ninguna opción para hacerlo. Te tendrías que meter con modificaciones del código fuente para conseguirlo.
Yo no me preocuparía por este tema, ten en cuenta que el icono tipo hamburguesa es el que muestra cualquier página web responsive (optimiazada para móviles) cuando se visualiza en un teléfono móvil. Hoy en día, «todo el mundo» tiene móvil, la mayoría de webs ya son responsive y todo el mundo visita páginas web a través de este dispositivo y saben que el icono tipo hamburguesa corresponde a un menú desplegable. Por lo que las pocas personas que aun no sepan que ese icono se corresponde con un menú desplegable, seguro que lo aprenderán pronto.
Un saludo
Joaquín, gracias por la información que expones en tu blog.
Dos dudas. Uso una plantilla de DIVI para una página web. En la actualidad tengo un «megamenú». He leído acerca del problema de los bucles de enlaces en el SEO y también sobre el problema del duplicado de enlaces.
a) ¿Es posible quitar del menú la «página princial»? Ocupa espacio y además para esa función ya está el logo. Si el logo y el «botón» en el menú «página principal» son el mismo enlace no le veo la finalidad. No soy capáz de quitar del menú a la página principal en la plantilla DIVI. ¿Se puede o no se puede?
b) La otra pregunta. ¿El tener un megamenú no te crea bucles?
Hola Juan,
Claro que se puede quitar el item de menú correspondiente a la página de inicio o home. Esto no tiene que ver con la plantilla utilizada, da igual usar Divi u otra. Puedes hacerlo desde Apariencia > Menus.
En cuanto a los «bucles de enlaces» no se que significa, no he oido nada al respecto. En cuanto a duplicar enlaces, según tengo entendido realmente Google tiene encuenta el primero de ellos.
Usar un mega menú no tiene que suponer ningún problema para el SEO de tu página web.
Un saludo
Hola Juaquín, antes que nada felicitarte por este espacio porque es de gran ayuda y utilidad.
A continuación, me gustaría exponerte mi problema para poder hallar juntos una solución. Anticipo que como plataforma de gestión utilizo WordPress y como tema Divi.
En el blog que llevo entre manos he diseñado un menú principal con las siguientes páginas: Inicio / Artículos / Acerca de, etc.
Dentro de Artículos, he organizado esta página en subpáginas según la temática, como por ejemplo: Salud / Rendimiento / Nutrición etc.
Mi intención es que al escribir una entrada concreta, aparezca en la página de Inicio junto con otras entradas como «lo más reciente» (cosa que he conseguido por medio del módulo de Blog) pero que al mismo tiempo apareciera única y exclusivamente en la subpágina relacionada con su temática.
Esto no lo he conseguido ya que al colocar en cada subpágina de Artículos el módulo de Blog, hace que me aparezcan todos los posts. He intentado crear un menú principal con las mismas páginas y crear categorías como pestañas desplegables en Artículos en lugar de subpáginas pero me he dado cuenta que las categorías no se pueden editar con el Constructor Visual Divi como una página y aparece de esta forma únicamente el post sin dejarme agregar nada más.
Gracias de antemano y un saludo.
Hola Ferrán,
en el módulo blog del constructor tienes la opción de seleccionar de que categorías quieres que se muestren las entradas de blog. En el módulo pone «Incluir categorías» y puedes marcar las que quieres que muestren posts.
Un saludo
Muchas gracias Joaquin, problema solucinado.
Muchas gracias por el aporte, está todo muy bien explicado. Pero tengo una duda, como puedo poner una página en el sub menú sin enlace, por ejemplo la principal de tu ejemplo «Control de Peso», o los sub menús interiores.
Muchas gracias y un saludo.
Hola Luis Miguel,
Para poner un item de menú sin enlace has de añadir un «Enlace personalizado» y en la url de destino poner una almohadilla #
Un saludo