Cómo estilizar menús de navegación de WordPress (Actualizado)

Un menú bien estilizado puede marcar una gran diferencia. Puede mejorar la apariencia general de tu sitio, facilitar que los visitantes encuentren lo que buscan e incluso animarlos a hacer clic en ciertas páginas.

Aquí en WPBeginner, hemos visto todo tipo de formas creativas de estilizar menús. También hemos experimentado con el estilo de nuestro propio menú de navegación varias veces a lo largo de los años. Por lo tanto, queremos compartir lo que funciona mejor para diferentes situaciones.

En este artículo, te mostraremos cómo estilizar tu menú de navegación de WordPress de 5 maneras diferentes.

¿Por qué estilizar tu menú de navegación de WordPress?

Tu menú de navegación de WordPress es el mapa de tu sitio web, guiando a los visitantes a las páginas más importantes. Aparece en la parte superior de la mayoría de los sitios web, lo que lo convierte en un lugar privilegiado para captar la atención e influir en cómo los usuarios exploran tu contenido.

Estilizar tu menú de navegación va más allá de hacerlo lucir bonito. Puede mejorar significativamente la experiencia de usuario de tu sitio web y, a su vez, impulsar tu optimización de motores de búsqueda (SEO).

Si el diseño de tu menú es difícil de usar, los visitantes podrían tener problemas para encontrar lo que buscan y sentirse frustrados. Por otro lado, un menú claro y visualmente atractivo puede animarlos a hacer clic en diferentes secciones y pasar más tiempo en tu sitio.

Como resultado, puedes aumentar las visitas a tu sitio y reducir su tasa de rebote.

Esta guía detallará diferentes métodos para estilizar tu menú de navegación, dependiendo de tu tema de WordPress y tu nivel de comodidad. Puedes usar los enlaces rápidos a continuación para navegar por este tutorial y encontrar el método que mejor te funcione:

• Método 1: Personaliza tu menú de navegación con el Editor de Sitio Completo (Temas de Bloques)
• Método 2: Personaliza tu menú de navegación con el Personalizador de Temas (Temas Clásicos)
• Método 3: Personaliza tu menú de navegación con un plugin Page Builder (Recomendado)
• Método 4: Personaliza tu menú de navegación con el Editor CSS Visual (Más personalizable)
• Method 5: Customize Your Navigation Menu With Code (Advanced)

Método 1: Personaliza tu menú de navegación con el Editor de Sitio Completo (Temas de Bloques)

Si estás usando un tema de bloques y quieres estilizar el menú de navegación de tu sitio usando el Editor de Sitio Completo, este es el método para ti.

Primero, dirígete a tu panel de WordPress y navega a Apariencia » Editor.

Aquí verás opciones para personalizar diferentes partes de tu tema de bloques.

Haz clic en 'Navegación'.

En la siguiente página, haz clic en el ícono de lápiz 'Editar'.

Esto abrirá el editor de bloques, donde puedes editar tu bloque de Navegación.

Una vez que estés en el editor de bloques, haz clic en el bloque 'Lista de Páginas' que muestra las páginas de tu sitio web de WordPress como elementos del menú de navegación.

Luego, haz clic en 'Editar'.

Ahora aparecerá una ventana emergente, indicándote que puedes editar el bloque Lista de Páginas. Puedes editar, eliminar, reordenar y agregar nuevos elementos al menú del bloque.

Haz clic en 'Editar' para continuar.

El editor de bloques para el menú de navegación funciona como cuando editas una página o una entrada. Siéntete libre de agregar otros elementos al menú como enlaces personalizados, un botón de llamada a la acción, un formulario de búsqueda, un logotipo del sitio y muchos más.

Si deseas profundizar en la gestión de menús con el Editor de Sitio Completo, consulta la sección sobre cómo editar tu menú de navegación en nuestra guía de Edición de Sitio Completo. Esa sección también habla sobre la creación de submenús.

Ahora, pasemos al estilo. Haz clic en cualquier bloque para comenzar.

Dependiendo del bloque, la barra de herramientas puede ofrecer algunas opciones de personalización. Por ejemplo, si seleccionas un Enlace de Página, puedes ponerlo en negrita, cursiva, tacharlo y reordenarlo si es necesario.

Puedes usar estas herramientas para resaltar un solo elemento del menú del resto.

En el panel de configuración de la derecha, cambia a la pestaña ‘Bloque’ y, debajo de ella, navega a la pestaña ‘Estilos’.

Aquí, puedes personalizar el color, la tipografía, las dimensiones, los bordes y las sombras de tu bloque.

Los bloques tienden a tener configuraciones de Estilos predeterminadas. Por ejemplo, si estás editando un Enlace de Página, es posible que solo veas opciones como ‘Tamaño de fuente’ y ‘Ancho’.

Pero no te preocupes. Simplemente haz clic en el menú de tres puntos junto a estas opciones para habilitar más posibilidades de personalización, como cambiar la familia de fuentes y el espaciado entre letras.

De manera similar, si tienes un bloque de Botón en tu menú de navegación, hacer clic en él revelará opciones para personalizar su estilo, texto, color de fondo, tipografía, dimensiones, borde e incluso sombra.

Puedes leer nuestra guía sobre cómo agregar un botón de llamada a la acción para más información.

Si deseas cambiar el color de fondo de tu menú de navegación, tendrás que hacerlo editando la plantilla de encabezado de tu tema.

Para abrirlo, simplemente haz clic en el campo de búsqueda de comandos en la parte superior que dice ‘Navegación’. Luego, escribe ‘Encabezado’ y presiona la tecla Enter.

Ahora, abre la Vista de Lista y selecciona Grupo.

Este grupo consta del título del sitio y el menú de navegación de tu encabezado.

Luego, abre la pestaña ‘Estilos’ en la barra lateral de configuración del Bloque y haz clic en ‘Fondo’ en la sección Color.

Después de eso, simplemente elige un color de fondo para tu plantilla de encabezado.

Una vez que estés satisfecho con el estilo de tu menú de navegación, simplemente haz clic en el botón 'Guardar', y tu nuevo menú y encabezado estarán en vivo en tu blog de WordPress o sitio.

Así es como se ve nuestro menú de navegación en nuestro sitio de demostración:

Ten en cuenta que las opciones de estilo que tendrás dependerán de las opciones de estilo generales de tu tema específico.

Si deseas personalizar los estilos globales de tu tema, entonces necesitas hacer clic en el botón 'Estilos' en la esquina superior derecha.

Desde aquí, puedes cambiar la tipografía, los colores y el diseño de todo el sitio web.

Para obtener más información, consulta la sección sobre cómo cambiar los estilos globales de tu sitio web en la guía de Edición de Sitio Completo.

Método 2: Personaliza tu menú de navegación con el Personalizador de Temas (Temas Clásicos)

Este método es para usuarios con temas clásicos de WordPress que desean estilizar su menú de navegación utilizando el Personalizador de Temas incorporado.

Al igual que con el método anterior, nos centraremos en estilizar la apariencia del menú en lugar de administrar los elementos del menú en sí.

Si te gustaría aprender a crear menús y administrarlos en temas clásicos, consulta nuestra guía sobre cómo agregar un menú de navegación en WordPress. Cubre la creación de menús con el Personalizador, asignarlos a diferentes ubicaciones de menú y agregar menús como widgets.

Para usar el Personalizador de Temas, ve a tu panel de WordPress y navega a Apariencia » Personalizar. Luego, haz clic en el botón 'Personalizar' junto a tu tema activo.

Aquí, verás opciones para personalizar varios aspectos de tu tema, lo que dependerá del tema que estés usando. En la mayoría de los casos, los temas de WordPress tienen una opción de 'Menús', pero los desarrolladores de terceros pueden agregar otras configuraciones también.

Por ejemplo, el tema Sydney tiene un Constructor de Encabezado dedicado para la personalización de menús. Asegúrate de consultar la documentación de tu tema para ver si agregan configuraciones especiales de menú.

Si tu tema no tiene tales opciones de personalización, no te preocupes. Podemos estilizar fácilmente el menú usando CSS personalizado.

Primero, haz clic en la sección 'Menús'.

En la siguiente página, haz clic en el engranaje de 'Configuración' y luego selecciona 'Clases CSS'.

Esto te permite asignar una clase CSS única a cada elemento del menú, lo que te permite estilizar cada uno individualmente más tarde.

A continuación, desplázate hacia abajo en el panel.

Luego, abre tu menú principal.

Lo que quieres hacer ahora es encontrar el elemento del menú que deseas modificar y hacer clic para expandirlo.

Verás una nueva opción para agregar una clase CSS personalizada. En el ejemplo a continuación, simplemente estamos agregando la clase CSS contact-us a nuestra página de Contacto.

Una vez que hayas asignado clases CSS a tus elementos del menú, regresa al menú principal en el Personalizador de Temas.

Luego, haz clic en 'CSS adicional'.

Aquí, puedes agregar código CSS personalizado para estilizar tu menú de navegación.

Exploremos algunos ejemplos, y siéntete libre de cambiar las clases CSS y el código de color hexadecimal:

Cambiar el color de fondo del elemento del menú

El siguiente fragmento de código cambia el color de fondo del elemento del menú con la clase CSS contact-us a verde (#E3FFA8) y agrega esquinas redondeadas (border-radius: 5px):

.contact-us {
  background-color: #E3FFA8;
  border-radius: 5px;
}

Cambiar el color predeterminado del enlace del menú

Este fragmento de código cambia el color de todos los enlaces del menú dentro de la lista del menú principal (#primary-menu-li a) a rojo (#ff0000):

.primary-menu li a {
    color: #ff0000; 
}

Ten en cuenta que la clase CSS para el menú principal de tu tema puede verse diferente al nuestro.

Para ver cuál es la clase CSS del menú principal de tu tema, puedes usar la herramienta de inspección alrededor del área de tu menú de navegación.

Luego, busca un código HTML que diga ‘menu’ o ‘navigation-menu’. Debería haber una clase CSS que lo defina junto a él.

Agrega efectos al pasar el cursor sobre los elementos del menú

Este fragmento de código se dirige a todos los elementos del menú dentro de la lista del menú principal (#primary-menu li) y agrega un efecto al pasar el cursor:

.primary-menu li a:hover {
  background-color: #a6e4a5;
	color: #666;
	border-radius: 5px;
	}

Cuando un usuario pasa el cursor sobre el elemento del menú, el color de fondo cambia a un verde claro (#a6e4a5), el color del texto cambia a un gris oscuro (#666) y se agregan esquinas redondeadas (border-radius: 5px).

Crea menús de navegación transparentes en WordPress

Este fragmento de código CSS puede hacer que tu menú de navegación sea transparente:

#site-navigation { 
background-color:transparent; 
}

Usar este efecto lo fusionará con la imagen de fondo para darle a tu sitio web un aspecto limpio y moderno.

Para más inspiración, puedes consultar nuestras guías a continuación:

• Cómo agregar la primera y última clase CSS a los elementos del menú de WordPress
• Cómo resaltar un elemento del menú en WordPress

Recuerda que estos son solo algunos ejemplos para empezar. Si deseas utilizar estos mismos métodos pero no encuentras la sección CSS adicional, consulta nuestra guía sobre cómo solucionar el problema del personalizador de temas faltante.

Método 3: Personaliza tu menú de navegación con un plugin Page Builder (Recomendado)

Este método es perfecto para aquellos que desean un mayor control sobre la apariencia de su menú de navegación, pero aún prefieren una experiencia amigable para principiantes. También es una excelente opción si aún te encuentras en las primeras etapas de construcción de tu sitio web y aún no lo has lanzado.

Un plugin de constructor de páginas te permite diseñar visualmente el diseño de tu sitio web utilizando funcionalidad de arrastrar y soltar sin necesidad de escribir código. Esto lo hace ideal para principiantes absolutos.

En esta sección, usaremos SeedProd como nuestro plugin constructor de páginas. SeedProd ofrece una interfaz fácil de usar e incluye bloques y funciones adicionales para que tu menú de navegación destaque.

Paso 1: Instalar y Activar SeedProd

Primero, instala y activa el plugin SeedProd en tu sitio web de WordPress. Puedes leer nuestra guía sobre cómo instalar un plugin de WordPress para más información.

Una vez activado, navega a SeedProd » Configuración desde tu panel de WordPress. Luego, ingresa tu clave de licencia de SeedProd y haz clic en el botón ‘Verificar clave’.

Paso 2: Elige un Kit de Plantillas de Tema de SeedProd

Ahora, dirígete a SeedProd » Theme Builder. Aquí es donde puedes crear un tema personalizado de WordPress desde cero.

Haz clic en el botón ‘Kits de Plantillas de Tema’ para explorar una galería de plantillas prediseñadas.

Para este tutorial, usaremos el Tema de Sitio Web Médico Smile Craft. Sin embargo, siéntete libre de elegir cualquier plantilla que se adapte a tu negocio.

Puedes previsualizar estos kits de plantillas de tema haciendo clic en el icono de la lupa para ver cuál se ajusta al estilo de tu sitio web.

Una vez que hayas encontrado una plantilla de tema que te guste, haz clic en el icono de la marca de verificación naranja para importar las partes de la plantilla.

SeedProd creará ahora las secciones esenciales del sitio web como el encabezado, pie de página, página de inicio, y así sucesivamente. Todas estas se pueden editar visualmente usando el constructor de arrastrar y soltar.

Paso 3: Personaliza el Diseño del Menú

Una vez que la plantilla de tema se haya instalado, regresarás a la página del Theme Builder.

En una plantilla de tema de SeedProd, el menú de navegación se encuentra en la parte del encabezado de la plantilla.

Para editar tu plantilla de encabezado, simplemente pasa el mouse sobre ella y haz clic en el enlace ‘Editar diseño’. Esto abrirá la plantilla en el editor de arrastrar y soltar.

Ahora verás una sección de encabezado que consta del bloque Menú de navegación (que es tu menú de navegación) y otros bloques, dependiendo del tema.

Para editar el menú, haz clic en el bloque Menú de navegación. La barra lateral izquierda te mostrará una lista de configuraciones del bloque.

Por defecto, SeedProd utiliza el menú ‘Simple’ para crear un menú basado en la plantilla de tema que utilizas. Sin embargo, también puedes optar por la opción ‘Menú de WordPress’ para usar un menú preexistente que ya creaste usando el editor de menús estándar de WordPress (Apariencia » Menús).

Analicemos la diferencia entre los dos. El método Simple te permite agregar, editar y eliminar enlaces directamente dentro de la interfaz del constructor de páginas.

Para crear un nuevo elemento de menú, haz clic en el botón ‘+ Agregar nuevo elemento’.

Aquí, puedes ingresar la etiqueta de texto y la URL del enlace.

Luego, elige abrir el enlace en una nueva ventana y agregar un atributo nofollow (si es necesario). Así:

También puedes reorganizar los elementos del menú haciendo clic en el botón de tres líneas junto a un elemento y arrastrándolo hacia arriba o hacia abajo.

Para eliminar un elemento del menú, simplemente pasa el mouse sobre él y haz clic en el ícono de la papelera junto a él.

La desventaja de esta opción es que no puedes crear menús desplegables. Por eso se llama ‘Simple’.

Por otro lado, la opción ‘Menú de WordPress’ no te permite administrar los elementos del menú directamente desde el editor de SeedProd. Tienes que hacerlo en el editor de menús.

La buena noticia es que si tu menú preexistente es un menú desplegable, puedes mostrarlo usando este método.

Cualquiera que sea el método que elijas, puedes personalizar el tamaño de fuente y el espaciado entre los elementos del menú, agregar un divisor de texto o ajustar la alineación.

La pestaña ‘Avanzado’ ofrece aún más opciones de personalización.

Puedes cambiar el diseño de la lista de horizontal a vertical, ajustar la tipografía, modificar los colores del texto y al pasar el cursor, e incluso agregar sombras al texto.

Si te desplazas hacia abajo, puedes controlar el relleno y los márgenes para dispositivos de escritorio, tabletas y móviles.

De esta manera, tu menú es fácil de navegar en cualquier tamaño de pantalla.

¿Quieres que tu menú destaque?

SeedProd te permite agregar animaciones para una experiencia de usuario más atractiva. Puedes leer nuestra guía paso a paso sobre cómo agregar animaciones CSS en WordPress para más información.

Si deseas agregar un nuevo botón de llamado a la acción en tu barra de navegación, puedes usar el bloque de Botón de SeedProd.

Simplemente abre el buscador de bloques en la barra lateral izquierda y encuentra el bloque de Botón en la barra lateral izquierda.

Luego, arrastra el bloque a donde quieras en tu encabezado.

Una vez hecho esto, simplemente personaliza el llamado a la acción del botón, el enlace, el estilo y otras configuraciones.

También puedes crear un menú fijo que permanezca en la parte superior de la página mientras el usuario se desplaza hacia abajo. De esta manera, no tendrán que subir cada vez que quieran ir a una página diferente.

Para hacer esto, simplemente pasa el cursor sobre la sección hasta que aparezca una línea morada, luego haz clic en el ícono de engranaje de 'Configuración'.

Ahora, cambia a la pestaña 'Avanzado'.

Luego, desplázate hacia abajo hasta el menú 'Posición'.

Aquí, elige 'Fijo'.

Después de eso, agrega un cero al desplazamiento superior y un número de índice z alto (como 999). Esto es para asegurarte de que el encabezado siempre aparezca justo encima de la página.

Una vez que estés satisfecho con tu menú de navegación personalizado, haz clic en el botón 'Guardar'.

Paso 4: Publica tu tema personalizado de WordPress

En esta etapa, estás listo para usar tu nuevo tema personalizado de WordPress. Para activarlo, regresa a la página 'Theme Builder' y activa el botón 'Habilitar tema de SeedProd'.

Todo lo que necesitas hacer ahora es ver tu sitio web y echar un vistazo a tu nuevo menú de navegación personalizado.

Así es como se ve nuestro menú de navegación en nuestro sitio de demostración:

Método 4: Personaliza tu menú de navegación con el Editor CSS Visual (Más personalizable)

Este método ofrece más opciones de personalización que las funciones integradas de WordPress, pero no es tan flexible como usar un plugin de constructor de páginas. Dicho esto, es una excelente solución si deseas hacer algunos ajustes de diseño en tu menú de navegación sin reemplazar completamente tu tema.

Este método también es una buena alternativa para quienes usan temas clásicos que carecen de opciones de estilo, pero no se sienten cómodos con la edición de CSS del Método 2.

Aquí, te guiaremos en el uso de un plugin premium de editor visual de CSS para WordPress llamado CSS Hero. Te permite diseñar visualmente tu sitio web sin escribir código. No se requieren conocimientos de HTML o CSS.

Primero, procede a instalar el plugin CSS Hero en WordPress. Puedes leer nuestra guía sobre cómo instalar un plugin de WordPress para más información.

Una vez que hayas activado el plugin CSS Hero, verás un nuevo botón llamado 'CSS Hero' en tu barra de administración de WordPress. Haz clic en este botón para iniciar el editor visual.

CSS Hero utiliza una interfaz WYSIWYG. Al hacer clic en el botón, se abrirá tu sitio web junto con el panel de CSS Hero en el lado izquierdo de tu pantalla.

Para editar tu menú de navegación, puedes mover el mouse sobre él. CSS Hero lo resaltará con un borde. Haz clic en el área resaltada para comenzar a personalizar el menú.

CSS Hero te permite editar varios aspectos del contenedor de tu menú de navegación, incluyendo fondo, tipografía, bordes, espaciado, listas e incluso efectos adicionales.

Por ejemplo, digamos que quieres modificar el color de fondo del menú. Al hacer clic en 'Fondo', se abrirá una interfaz fácil de usar donde puedes elegir un nuevo color, degradado o imagen.

A medida que realices cambios, los verás reflejados en vivo en la vista previa del sitio web a la derecha.

O, puedes agregar una sombra de caja a los elementos de tu menú para hacerlos más llamativos.

Para hacer esto, navega a la pestaña ‘Extra’.

Luego, haz clic en ‘Crear Sombra’.

Aquí, podrás editar la configuración de la sombra.

Ahora, puedes jugar con la apariencia de la sombra.

Siéntete libre de arrastrar la orientación, la calidad del desenfoque y la extensión, y la posición de la sombra.

Puedes cambiar lo que quieras con la interfaz de CSS Hero, así que puedes experimentar para encontrar lo que mejor funciona para tu sitio.

Una vez que estés satisfecho con tu menú personalizado, haz clic en el botón ‘Guardar’ para almacenar tus modificaciones.

Puedes leer estas guías para aprender más sobre lo que puedes hacer con CSS Hero:

• Cómo cambiar el tamaño de tu logo de WordPress (funciona con cualquier tema)
• Cómo agregar efectos de desplazamiento de imagen en WordPress (paso a paso)

Método 5: Personaliza tu menú de navegación con código (Avanzado)

Este método es más adecuado para usuarios que se sienten cómodos con el código. También te permite crear un menú personalizado si tu tema no incluye uno por defecto.

Agregar fragmentos de código personalizados puede parecer desalentador al principio, ya que implica editar archivos de temas como functions.php y header.php. Sin embargo, hay formas de hacerlo más fácil.

Recomendamos usar un plugin llamado WPCode. Proporciona una forma segura y fácil de usar para agregar código personalizado a tu sitio de WordPress sin modificar los archivos principales.

Nuestra guía sobre cómo agregar un menú de navegación personalizado en temas de WordPress puede guiarte a través de los pasos para crear un menú con WPCode.

Una vez que hayas creado el menú, puedes explorar estos tutoriales.

• Cómo Agregar Iconos de Imagen Con Menús de Navegación en WordPress
• Cómo agregar un botón a tu menú de encabezado de WordPress
• Cómo crear un menú de navegación flotante fijo en WordPress

Cada uno incluye un método para personalizar el menú usando WPCode.

Guías definitivas para personalizar el menú de navegación de WordPress

Ahora que has explorado los conceptos básicos para estilizar tu menú de navegación de WordPress, aquí tienes algunas guías más que puedes leer para llevar tu menú al siguiente nivel:

• Cómo agregar un mega menú en tu sitio de WordPress. Los mega menús te permiten incluir subcategorías, proporcionando una forma fácil de usar para organizar contenido extenso del sitio web.
• Cómo crear un menú de WordPress receptivo listo para dispositivos móviles. Esta guía te muestra cómo crear un menú receptivo que se adapta a diferentes tamaños de pantalla.
• Cómo agregar un menú receptivo de pantalla completa en WordPress. Este tutorial te enseñará cómo implementar un menú de pantalla completa que se expande por toda la pantalla cuando se activa, ofreciendo una experiencia de navegación audaz.
• Cómo agregar un menú de panel deslizante en temas de WordPress. Los menús de panel deslizante son una solución que ahorra espacio y oculta la navegación principal hasta que un usuario desliza o hace clic en un botón para revelarla.
• Cómo crear un menú de navegación vertical en WordPress. Los menús de navegación verticales pueden ser una excelente manera de mostrar una gran cantidad de elementos de menú en una barra lateral u otro espacio vertical en tu sitio web.
• Cómo agregar íconos de redes sociales a los menús de WordPress. Integra íconos de redes sociales directamente en tu menú de navegación para que a los visitantes les resulte fácil conectarse contigo.
• Cómo crear un menú de barra lateral colapsable en WordPress. ¿Tienes muchas páginas? Facilita la navegación de los usuarios en tu sitio web agregando un menú colapsable a tu barra lateral.

Esperamos que este artículo te haya ayudado a aprender cómo estilizar los menús de navegación de WordPress. También te puede interesar consultar nuestra guía definitiva sobre elementos de diseño de WordPress y nuestra guía para principiantes sobre cómo crear una página personalizada en WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.