Opt In Image
APÚNTATE Y DESCARGA GRATIS
1.- Guía para crear una Página web Profesional
2.- Vídeo Training, Mis Plugins Imprescindibles WordPress
3.- Taller SEO para WordPress
  • Recibe todos los domingos las últimas entradas del blog y contenidos exclusivos

Te puedes dar de baja en cualquier momento. Nada de Spam

 

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.

 

elementos del menú superior de 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.

DESCUENTOS DIVI QUIERO LA PLANTILLA AVADA

 

 

 

 

1.- Acceso a la gestión del menú en WordPress

 

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”.

 

 

2.- Herramientas para la gestión de menús en WordPress

 

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)

 

Aprende en este post a conocer todos los tipos de header wordpress de la plantilla Divi: Tipos de headers con wordpress y Divi

 

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ú.

 

pantalla de trabajo para crear menús con wordpress

Partes de la interface para crear y gestionar menús con WordPress

 

 

 

3.- Crear menú nuevo en 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 menú con wordpress

Crear un nuevo menu con WordPress

 

 

4.- Tipos de elementos o ítems a añadir al menú de 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.

 

No te desesperes!, éstas son las diferentes etapa en la creación de un blog: Crear un blog

 

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.

 

 

5.- Añadir elementos al menú de wordpress

 

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.

 

Aprende a crear un Mega Menú con wordpress y la plantilla Divi: Mega Menú Divi y WordPress

 

Añadir elementos al menú

Cómo añadir elementos o ítems al menú de wordpress

 

 

6.- Zonas en las que se muestra el menú (Divi y Avada)

 

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.

 

Elige entre la mejores plantillas para Wordpres: Mega guía plantillas WordPress

 

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

 

 

6.1.- Zonas para poner el menú en la plantilla Divi

 

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.

 

Zonas de menú superior de la plantilla Divi

Zona de menú principal y secundaria de la plantilla Divi WordPress

 

zona de footer para colocar el menú con Divi

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”

 

 

6.3.- Zonas para poner el menú en la plantilla Avada

 

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 de menú del header de Avada

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 encabezamiento o cabeceras web de avada

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.

 

cómo añadir enlaces a la página 404 con avada

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”.

 

 

Bloguer especializado en WordPress, Woocommerce, Divi y Prestashop. Apasionado por la formación y el diseño web. Me gustaría que este blog te sirviera para ayudarte en el desarrollo de tu proyecto online, ya sea un blog, una web corporativa, cursos online o cualquier otro proyecto. Mi otro blog, especializado en tiendas online: tiendaonlinemurcia.es

Uso de cookies

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y su experiencia de navegación. Si continua navegando, consideramos que acepta su uso. Puede cambiar la configuración u obtener más información AQUÍplugin cookies

ACEPTAR
Aviso de cookies