Cómo personalizar los estilos del menú de WordPress de 3 maneras sencillas 

He personalizado muchos menús de WordPress a lo largo de los años, y algo que siempre noto es cuánto el estilo predeterminado se mezcla con el fondo. Funciona, pero realmente no coincide con tu marca ni ayuda a que tu sitio destaque.

Unos pocos cambios pequeños en tu menú pueden hacer que todo tu sitio se sienta más pulido y fácil de navegar.

En esta guía, te mostraré 4 maneras de personalizar tu menú de WordPress paso a paso, sin necesidad de código.

La forma más rápida de personalizar tu menú de WordPress es a través de Apariencia → Menús en tu panel de control. Añade elementos, establece una ubicación de visualización y guarda. Para un control total del diseño sobre fuentes, colores y disposición, usa el constructor de arrastrar y soltar de SeedProd. Para temas de bloques, usa el Editor de Sitios de WordPress.

¿Cómo personalizo un menú de WordPress usando el editor predeterminado?

La forma más fácil de empezar es con el editor de menús integrado en Apariencia → Menús. Funciona con temas clásicos y la mayoría de temas no de bloques, y no necesitas plugins adicionales.

He usado este editor durante años, y sigue siendo la forma más rápida de construir una estructura de navegación básica.

Paso 1. Crear un nuevo menú

Ve a Apariencia → Menús desde tu panel de control de WordPress. Introduce un nombre para el menú en la parte superior, como "Menú Principal", y haz clic en Crear Menú.

Paso 2. Añadir páginas, entradas o enlaces personalizados

A la izquierda, marca las páginas o entradas que quieras añadir y haz clic en Añadir al Menú. Usa el panel de Enlaces Personalizados para añadir cualquier URL con texto de enlace personalizado.

Paso 3. Asignar una ubicación de visualización

Desplázate hacia abajo hasta Ajustes del Menú y marca una ubicación de visualización, como Menú Principal. Las ubicaciones disponibles dependen de tu tema.

También puedes arrastrar y soltar elementos para reordenarlos, o anidarlos para crear submenús desplegables.

Paso 4. Guardar el menú

Haz clic en Guardar Menú y tu menú aparecerá en la ubicación que seleccionaste.

Este método maneja la estructura y el orden básicos, pero ofrece un control de estilo limitado. Para un control total del diseño sobre fuentes, colores y disposición, prueba el método de SeedProd a continuación.

¿Cómo personalizo mi menú de WordPress con un constructor de páginas?

Para un mayor control sobre la apariencia de tu menú, un constructor de páginas es el camino a seguir. Usaré SeedProd en este ejemplo, pero principios similares se aplican a cualquier otro constructor de páginas.

SeedProd es un creador de sitios web de arrastrar y soltar para WordPress que te permite crear páginas personalizadas, menús y temas completos sin escribir código. Las características incluyen:

• Constructor de páginas de arrastrar y soltar
• Constructor de temas de WordPress
• Plantillas predefinidas
• Menús personalizables
• Integración con redes sociales
• Y m ilde;s.

Incluso puedes usarlo para añadir menús personalizados al pie de página de tu sitio web, encabezado, barra lateral y contenido de la página. 

Este método te permite personalizar menús sin importar tu tema de WordPress. Para empezar, sigue los sencillos pasos a continuación.

Paso 1. Instalar SeedProd

Primero, descarga el plugin de SeedProd e instálalo y actívalo en tu sitio de WordPress.

Para obtener ayuda con este paso, puedes seguir nuestra guía sobre cómo instalar SeedProd.

Paso 2. Elige una plantilla de página de destino

Una vez activado el plugin, navega a SeedProd » Páginas de destino desde tu panel de WordPress y haz clic en el botón Añadir nueva página de destino.

Esto mostrará una biblioteca de plantillas de páginas de destino que puedes usar para crear una página personalizada rápidamente. 

Cada plantilla es totalmente personalizable para adaptarse a diferentes nichos de sitios web. Por ejemplo, al hacer clic en la pestaña "Lead Squeeze" en la parte superior se muestran plantillas más adecuadas para crear páginas de captura.

Cuando encuentres un diseño que se ajuste a tus necesidades, pasa el ratón por encima y haz clic en el icono de marca de verificación naranja.

Ahora aparecerá una ventana que te permitirá introducir un nombre y una URL para la página. Después de introducir estos detalles, haz clic en el botón Guardar y empezar a editar la página.

Paso 3. Personaliza el contenido de tu página

La siguiente pantalla mostrará tu página de destino dentro del constructor visual de páginas de SeedProd. Tendrá bloques, secciones y ajustes en la izquierda y una vista previa de tu página en la derecha.

Cualquier cambio que realices en tu página aparecerá automáticamente en tiempo real. De esta manera, puedes asegurarte de que se vea bien antes de publicar los cambios.

Personalizar el contenido de la plantilla es tan simple como apuntar y hacer clic. Por ejemplo, para cambiar cualquier contenido de texto, haz clic en él, elimina el texto existente y reemplázalo por el tuyo.

Para añadir nuevas funcionalidades a tu página, como una imagen o un botón de llamada a la acción, busca el bloque en el panel izquierdo y arrástralo a la página.

Continúa reemplazando el contenido de la plantilla con el tuyo hasta que tengas un diseño con el que estés satisfecho. Para obtener más ayuda con la personalización, consulta nuestra guía sobre cómo crear una página de destino en WordPress.

Paso 4. Personaliza el menú de WordPress

Después de personalizar tu página, puedes crear menús y personalizarlos fácilmente. Mi plantilla no incluye un área de encabezado, así que tendré que crear una primero.

Para hacer esto, busca el bloque Columna y arrástralo a la parte superior de tu página.

A continuación, elige un diseño. En este caso, estamos usando un diseño de 3 columnas.

Ahora vamos a configurar el área del encabezado con un bloque de imagen para mostrar el logotipo de tu sitio web.

Para subir la imagen de tu logotipo, haz clic en el botón "Usar tu propia imagen" en el panel de ajustes del bloque. Esto te permite elegir una imagen de tu biblioteca de medios de WordPress o subir una desde tu ordenador.

A continuación, busca el bloque Nav Menu y arrástralo a otra columna de tu encabezado. Aquí es donde puedes añadir elementos de menú para que los usuarios hagan clic y visiten otras páginas de tu sitio.

En la configuración del bloque, hay 2 formas de mostrar tu menú.

El tipo de menú Simple te permite añadir enlaces de menú individuales sin salir del page builder. Simplemente añade un nombre de menú y pega tu enlace personalizado.

También puedes hacer que el enlace no siga y que se abra en una nueva pestaña.

El tipo de menú WordPress Menu te permite mostrar menús que ya has creado en WordPress. Al hacer clic en el menú desplegable, se mostrarán todos los menús disponibles en tu sitio, como el Menú Principal o el Menú Central.

Todo lo que tienes que hacer es seleccionar los menús para mostrarlos en tu encabezado.

SeedProd tiene opciones de personalización avanzadas para ambos tipos de menú. En la pestaña Avanzado, puedes cambiar los colores del menú, las fuentes, las sombras de texto, los colores al pasar el ratón por encima y mucho más.

Incluso puedes mostrar tus menús en un diseño vertical u horizontal. El diseño vertical es excelente para las áreas de widgets de la barra lateral y las ubicaciones de los menús del pie de página.

Para gestionar tus menús, haz clic en el enlace Pantalla de Menús o navega a Apariencia » Menús desde tu administrador de WordPress.

Aquí puedes editar la estructura de tu menú, añadir nuevos elementos de menú y submenús haciendo clic en las casillas de verificación, y gestionar las ubicaciones. Incluso puedes crear un nuevo menú en esta página.

Recuerda hacer clic en el botón Guardar Menú para guardar las funciones de tu menú.

Muchos sitios web utilizan botones en la navegación del sitio para promocionar una llamada a la acción específica. Con el bloque de botones de SeedProd, puedes crear un Botón de Menú en unos pocos clics.

Simplemente busca el bloque de botones y añádelo a tu área de encabezado.

Luego, en la configuración del bloque, puedes añadir el enlace de tu menú y personalizar el estilo del botón.

Paso 5. Publica tu Página Personalizada

Una vez que estés satisfecho con el aspecto de tu página, haz clic en Guardar y Publicar en la esquina superior derecha de la pantalla.

Desde allí, puedes visitar la página para ver tu menú personalizado de WordPress en acción.

¿Cómo personalizo un menú usando el Editor de Sitios de WordPress?

El primer método es una excelente solución para cualquier sitio web, independientemente del tema que utilices. Sin embargo, si estás utilizando un tema de WordPress basado en bloques, como Twenty Twenty Three, es posible que prefieras usar el editor de sitios de WordPress para personalizar tu menú.

Ten en cuenta: este método no funciona con todos los temas ni te permite personalizar todas las partes del menú.

Para abrir el editor de sitios, navega a Apariencia » Editor desde tu panel de WordPress.

En la siguiente pantalla, haz clic en la pestaña Patrones. En WordPress 6.5 y versiones posteriores, busca en Patrones → Partes de Plantilla si no ves la opción Encabezado inmediatamente.

Desde allí, haz clic en la opción Encabezado y elige tu plantilla de Encabezado.

Aquí, puedes arrastrar y soltar para reorganizar la posición del menú o eliminar elementos del menú.

También puedes hacer clic en el icono del lápiz para editar el estilo del menú.

Por ejemplo, puedes ajustar el color de fondo del menú, las fuentes, el relleno, los márgenes, los bordes y más.

Si te desplazas hacia abajo hasta la pestaña Avanzado, puedes introducir clases CSS personalizadas.

Para añadir otra opción de menú, como un botón de encabezado, haz clic en el icono Añadir bloque.

Ahora puedes buscar un bloque y hacer clic en él para añadirlo a tu menú y personalizarlo como cualquier otro bloque de WordPress.

Cuando estés satisfecho con la configuración y personalización del menú, haz clic en el botón Guardar.

Ahora puedes visitar tu sitio para ver tu menú personalizado.

¿Cómo añado un menú personalizado en WordPress sin un plugin?

Si no quieres configurar un plugin de constructor de páginas y no tienes un tema de bloques de WordPress, siempre puedes usar código para añadir un menú de navegación personalizado.

Para ello, te recomiendo usar un plugin de fragmentos de código de WordPress como WPCode. Es la forma más segura y sencilla de añadir código personalizado a WordPress sin editar los archivos principales de WordPress, como tu archivo functions.php.

Para hacer esto, instala el plugin gratuito WPCode, luego ve a Fragmentos de código » Añadir fragmento desde tu panel de WordPress.

En esta página, verás fragmentos predefinidos que puedes añadir a tu sitio con unos pocos clics.

Para este tutorial, quiero crear nuestro propio fragmento, así que pasa el ratón por encima de 'Añadir tu código personalizado' y haz clic en el botón Usar fragmento.

Ahora introduce un título para tu fragmento, abre el menú desplegable "Tipo de código" y haz clic en Fragmento de PHP.

A continuación, pega el siguiente fragmento en el editor de código:

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

Este fragmento añade una nueva ubicación de menú a tu tema, "Mi Menú Personalizado".

Una vez que lo hayas hecho, desplázate hacia abajo hasta las opciones de inserción y elige el método "Insertar automáticamente" para añadir el fragmento en todo tu sitio.

Desde allí, abre el menú desplegable "Ubicación" y haz clic en Ejecutar en todas partes.

Ahora puedes desplazarte hasta la parte superior de la pantalla y hacer clic en el interruptor "Inactivo" para cambiarlo a "Activo".

Finalmente, haz clic en Guardar para activar el fragmento.

Ahora, ve a Apariencia » Menús y mira el área de "Ubicación de visualización".

Deberías ver una nueva opción "Mi Menú Personalizado" en esta área donde puedes añadir elementos de menú.

El siguiente paso es añadir tu menú personalizado a tu tema de WordPress.

Puedes mostrar un menú de navegación personalizado en cualquier lugar de tu sitio añadiendo código al archivo de plantilla de tu tema.

Simplemente ve a Apariencia » Editor de archivos de tema.

Luego, en el menú de la derecha, busca la plantilla donde quieres añadir el menú, como el encabezado de tu sitio web.

Ahora necesitarás añadir una función wp_nav_menu y especificar el nombre de tu menú personalizado. Por ejemplo, en el siguiente fragmento de código, estamos añadiendo Mi Menú Personalizado al encabezado del tema:

wp_nav_menu( array( 'theme_location'=>'my-custom-menu', 'container_class'=>'custom-menu-class' ) );

Después de añadir el código, haz clic en el botón Actualizar archivo para guardar tus cambios.

Ahora, si visitas tu sitio, verás el menú personalizado en acción, sin embargo, notarás que aparece en una simple lista con viñetas.

Puedes estilizar el menú para que coincida mejor con tu tema de WordPress o tu marca añadiendo código CSS personalizado a tu sitio.

Para hacer esto, ve a Apariencia » Personalizar y haz clic en CSS adicional en el personalizador de WordPress.

Esto abre un editor donde puedes escribir tu CSS personalizado.

Ahora puedes estilizar tu menú usando la clase CSS que añadiste a la plantilla de tu tema. En nuestro ejemplo, es .custom_menu_class.

En el siguiente código, estamos añadiendo márgenes y relleno, estableciendo el color del texto a negro y organizando el menú en un diseño horizontal:

div.custom-menu-class ul {
    margin:20px 0px 20px 0px;
    list-style-type: none;
    list-style: none;
    list-style-image: none;
    text-align:right;
    display:inline-block;
}
div.custom-menu-class li {
    padding: 0px 20px 0px 0px;
    display: inline-block;
} 
 
div.custom-menu-class a {
    color:#000;
}

El personalizador de WordPress se actualiza automáticamente para que puedas ver cómo queda el menú con el nuevo estilo. Si estás satisfecho con los cambios, entonces Publica para hacerlos efectivos.

Preguntas Frecuentes

¿Cómo personalizo mi menú de navegación de WordPress?

La forma más rápida es ir a Apariencia → Menús en tu panel de WordPress. Añade las páginas o publicaciones que quieras, asigna el menú a una ubicación de visualización como Menú principal y haz clic en Guardar menú. Para un mayor control de diseño sobre fuentes, colores y diseño, utiliza el constructor de arrastrar y soltar de SeedProd o el Editor de Sitios de WordPress para temas de bloques.

¿Cómo edito el menú de navegación en un sitio web de WordPress?

Ve a Apariencia → Menús en tu panel de WordPress y selecciona el menú que deseas editar. Añade o elimina elementos, reordénalos arrastrando y haz clic en Guardar menú. Si estás utilizando un tema de bloques, usa el Editor de Sitios de WordPress en Apariencia → Editor para editar el bloque de navegación directamente.

¿Puedo personalizar un menú de WordPress sin un plugin?

Sí. WordPress incluye un editor de menús integrado en Apariencia → Menús que funciona sin ningún plugin. Para temas de bloques, usa el Editor de Sitios de WordPress. Para añadir una ubicación de menú personalizada, usa un fragmento de PHP con un plugin de código como WPCode. No se necesita edición manual de archivos.

¿Cómo añado un menú desplegable en WordPress?

En Apariencia → Menús, arrastra un elemento del menú ligeramente hacia la derecha debajo de un elemento padre. WordPress lo indentará y lo tratará como un desplegable. Puedes anidar hasta tres niveles de profundidad. Para controlar el estilo visual del desplegable, el bloque de Menú de Navegación de SeedProd incluye efectos de pasar el ratón, colores y opciones de diseño integrados.

Más consejos de navegación en WordPress

Si deseas un control total del diseño de tu navegación de WordPress, SeedProd facilita la creación de menús, encabezados y diseños personalizados sin tocar código. Obtén SeedProd Ahora

• Cómo editar menús móviles en WordPress (Guía para principiantes)
• Cómo añadir un icono de carrito de compras de WooCommerce en los menús
• La navegación en las páginas de destino ha muerto: he aquí por qué
• Cómo editar la barra de navegación en WordPress paso a paso
• Cómo Crear una Página de Destino Sin Navegación (Forma Fácil)

¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.