Se me ha ocurrido este post porque hay mucha gente que me pregunta: “cómo puedo añadir los elementos esos que tienes en la parte superior de la web”.
Se refieren a los elementos que te señalo en la siguiente imagen.
Son solo elementos o ítems de menú pero que en vez de aparecer en la barra principal aparecen en la barra secundaria que se sitúa encima de la anterior en el caso de la plantilla Divi.
Ítems de menú en la barra secundaria de Divi
Hay mucha gente que no sabe que esos elementos pertenecen a un menú que se puede colocar en la parte superior. Por éste y otros motivos me he decidido a escribir esta guía para aprender a crear menús con wordpress y colocarlos en las diferentes zonas de que disponen las plantillas Divi y Avada.
ACCEDE A TODOS MIS CURSOS ONLINE POR SOLO 10€/MES
DESCUENTOS DIVI QUIERO LA PLANTILLA AVADA
ÍNDICE DEL POST
Para acceder a la interface de creación y gestión de menús con wordpress, deberás acceder a tu panel de administración de WordPress.
A continuación deberás ir a: “Apariencia > Menús”.
Un paso imprescindible para aprender a crear y gestionar menús con WordPress es conocer las diferentes partes de la interface:
a.- Selector para elegir menú: con este selector podremos elegir sobre qué menú queremos trabajar. Ten en cuenta que podemos tener creados todos los menús que queramos (otra cosa es que se muestren en algún sitio de la web, ya que las plantillas solo suelen disponer de 2 o 3 ubicaciones para mostrar menús)
b.- Elementos disponibles para añadir al menú: En este apartado podemos ver todos los posibles elementos que podremos añadir al menú. En caso de trabajar con Woocommerce también nos aparecerán categorías de la tienda y páginas específicas de Woocommerce.
c.- Zona de construcción del menú: Aquí es donde se van añadiendo los elementos de menú y se le va dando forma. Es la mesa de trabajo para construir un menú.
d.- Zonas de ubicación del menú: esta parte es fundamental ya que aquí seleccionaremos la ubicación o ubicaciones en las que queremos que se muestre el menú.
Partes de la interface para crear y gestionar menús con WordPress
Si aún no tienes ningún menú creado en tu wordpress, lo primero que deberás hacer será crear uno. Nada más acceder a la interface de gestión de menús verás una opción para crear un nuevo menú.
Deberás darle un nombre y hacer clic en el botón “Crear Menú”
Si ya tienes un menú pero quieres crear otro nuevo, verás que en la zona de selector para elegir menú tienes un enlace con nombre: “Crea nuevo menú”. Haz clic sobre el enlace, ponle nombre y dale al botón de “Crear Menú”
Crear un nuevo menu con WordPress
En la zona que hemos denominado de “Elementos disponibles para añadir al menú” tenemos diferentes tipos de ítems que podremos añadir al menú de wordpress que nos proponemos crear:
i.- Páginas: si desplegamos este apartado nos aparecerán páginas ya creadas y publicadas en nuestra web, que podremos añadir al menú.
ii.- Entradas: aquí podremos encontrar entradas del blog y añadirlas al menú. Algo que es poco común, pero podría ser interesante en algún caso.
ii.- Enlaces personalizados: este opción es muy interesante ya que nos permitirá añadir un texto para el ítem de menú y una URL
iii.- Categorías: Desde aquí podremos añadir categorías del blog.
iv.- Otros: dependiendo de la plantilla y plugins que utilices te podrán aparecer más tipos de elementos que se podrán añadir al menú. Con Woocommerce te aparecerán también categorías de productos, y con Divi también te aparecerán Proyectos.
Añadir elementos o ítems al menú es sumamente fácil. Simplemente tendrás que seleccionar elementos marcando el cuadradito que aparece a su izquierda y haciendo clic en “Añadir al menú”
Los ítems que vayas añadiendo siempre se colocarán al final (en la parte inferior).
Luego los podrás mover y colocar donde quieras, poniendo el ratón sobre uno de ellos, haciendo clic y arrastrando hasta su nueva posición.
Si colocas un ítem de menú “dentro de otro” (sangría hacia la derecha) ítem de menú, el primero solo aparecerá cuando pongamos el ratón sobre el segundo. Es decir, crearemos visualmente lo que sería una subcategoría del menú.
Recuerda hacer clic en el botón “guardar menú” para guardar.
Cómo añadir elementos o ítems al menú de wordpress
Ya sabemos cómo crear un menú y como ir añadiendo ítems para su construcción, pero aún no sabemos dónde va aparecer ese menú que estamos creando.
Las zonas en las cuales se puede mostrar un menú en wordpress dependen totalmente de la plantilla que estemos utilizando.
Habrá plantillas que permitan colocar el menú en muchas zonas y plantillas en las cuales solo se permita poner el menú en una zona.
Vamos a ver las zonas de las que para mí son las mejores plantillas para wordpress: La plantilla Divi y la plantilla Avada
La plantilla Divi dispone de 3 zonas en las que se pueden colocar los diferentes menús que vayamos creando.
Para ver las zonas de que dispone la plantilla debemos mirar en la parte inferior de la interface (Ajustes del menú) de gestión de menús:
a- Añadir páginas automáticamente: esta opción no te recomiendo que la marques. Sirve para que siempre que crees una página y la publiques, automáticamente se añada al menú. Como te podrás imaginar esto no tiene porque siempre ser tu intención.
b.- Donde se verá: a continuación aparecen las diferentes zonas en las que se puede mostrar los menús que vayamos creando con WordPress y Divi
b1.- Menú principal: Zona de menú principal, donde se sitúa el logo. Es la segunda fila del header de la plantilla Divi
b2.- Menú secundario: Zona de menú secundaria que se sitúa justo encima de la zona de menú principal. Es la fila superior del header.
b3.- Menú inferior: Zona situada en el footer entre la zona de widgets y la barra inferior del footer.
Zona de menú principal y secundaria de la plantilla Divi WordPress
Zona menú inferior de la plantilla Divi
6.2.- Cómo poner elementos en la parte superior del header
A estas alturas imagino que ya no tendrás problemas para saber cómo añadir un enlace o ítem de menú en la parte superior del header.
Sí, simplemente habría que crear un menú, añadir el ítem que queremos que se muestre y marcar la zona de Divi correspondiente al “Menú secundario”
Avada es otra plantilla archiconocida, de hecho es la plantilla para wordpress más vendida de la historia del market Theme Forest, y tiene un constructor personalizado.
La plantilla Avada dispone de las siguientes zonas para mostrar menús:
a.- Main Navigation: esta es la zona principal en la cual se puede colocar un menú con Avada. Es la zona principal del header y la zona principal de la plantilla Avada.
b.- Top Navigation: Esta es una zona situada en el header y por encima de la zona anterior que se denominaba Main Navigation.
Zonas Top Navigation y Main Navigation del menú con wordpress y Avada
Ojo, Avada dispone de 7 diseños diferentes de header. No todos los diseños de header disponen de la zona “Top Navigation”.
Para poder usar esta zona tendremos que elegir un diseño de header que disponga de esta zona.
Los diferentes diseños de header de Avada los puedes ver en: “Avada > Theme Options > Header > Header Content”
Tipos de header de la plantilla Avada
c.- Mobile Navigation: esta zona nos permite mostrar un menú específico que se visualice en dispositivos móviles.
Si no asignamos ningún menú a esta zona, cuando se muestre nuestra web en un dispositivo móvil, mostrará el menú principal.
Pero si asignamos un menú específico a esta zona, cuando se visualice el menú en dispositivos móviles, se mostrará este menú y no el que asignamos a la zona Main Navigation.
d.- 404 Useful pages: si asignamos un menú a esta zona, dicho menú aparecerá como una serie de enlaces de interés situados en la página 404. Es decir, la página que se muestra cuando no existe la página solicitada por el visitante.
Enlaces de menú en página 404 de Avada
e.- Sticky Header Navigation: con esta opción podremos elegir un menú específico que se mostrará cuando el header se queda fijo tras hacer scroll en la página.
En caso de que no haya ningún menú asignado a esta zona el menú que se mostrará como sticky o pegajoso será el menú asignado a la zona principal, es decir la zona: “Main Navigation”.
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, muy buena tu explicación..
Estoy teniendo el siguiente inconveniente.. me gustaria que del sub menu, se despliegue otro sub menu.. Ejmplo (menu>Submenu>submenu) :
productos>autos>Fiat y que ese Fiat me lleve a una url.. el asunto es que al agregar como subrmenu a fiat dentro de auto, en el despliegue me aparece en el mismo menu que autos… me explico? tenes idea comose puede resolver? gracias
Buenas.
Si usas el mega menú de Divi no es posible. Tendrías que usar un menú normal para que se muestren como comentas.
Hola, joaquin, capaz que puedas ayudarme a solucionar este inconveniente que tengo. Estoy haciendo una página web en divi, y me gustaria colocar una zona extra para crear otro menu en el header, que sea de la siguiente forma:
menu_secundario
menu_principal
menu_terciario
Seria posible generar un menu extra? Desde ya muchisimas gracias y saludos desde argentina.
Hola Cristian,
Lo siento, pero no conozco forma de añadir nuevas barras de menú al header de la plantilla Divi.
Lo único que se me ocurre sería usar el módulo Menú (de la sección de ancho completo) en las páginas de la web, para añadir otro menú.
Hola, estoy acabando mi página web con Avada y tengo una duda con mi menú principal, estoy usando el mega menú y mi intención es que se desplieguen las subcategorias al pasar el puntero por encima pero que al pinchar en la categoría principal (la que se mantiene siempre a la vista con el icono) no me mande a ninguna página. Cómo puedo hacer eso? la verdad es que no doy con la solución. Muchas gracias de antemano. Un saludo
Hola Jon,
Añade la categoría principal como un enlace personalizado (poniendo en la url de destino una almohadilla #).
Ejemplo:
URL:#
Etiqueta de Navegación: Categoría principal
Hola Joaquín muchas gracias por responder a mi consulta, he hecho lo que me dices y ahora me envía a una página en blanco, es posible que no me envíe a ningún lado? Gracias
Para que el item de menú no te lleve a ningún lado tiense que poner una almohadilla en el destino de la URL.
URL:#
genial, gracias Joaquín!
Hola, yo quisiera saber como me puedo cargar el menú principal ese que viene con el loguito de Divi a la izquierda y la spáginas creadas a la derecha. O, en cualquier caso, como poner el menú de forma mucho más estética sobre la imagen o video de fondo.
Puedes ayudarme? Gracias!!
Hola Guille,
En este post tienes todos los diseños de header posibles con la plantilla divi: Tipos cabeceras header con divi