Últimas noticias de SeedProd

Tutoriales, consejos y recursos de WordPress para hacer crecer tu negocio

Cómo personalizar el menú de WordPress

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

Escrito por: imagen de autor Stacey Corrin
imagen de autor Stacey Corrin
Stacey lleva más de 10 años escribiendo sobre WordPress y marketing digital, y mucho más tiempo sobre otros temas. Además, le fascinan el diseño web, la experiencia de usuario y el SEO.
     Revisado por: John Turner
imagen del revisor John Turner
John Turner es el cofundador de SeedProd. Cuenta con más de 20 años de experiencia empresarial y de desarrollo y sus plugins se han descargado más de 25 millones de veces.

¿Quieres aprender a personalizar los estilos de menú de WordPress?

Los menús de WordPress ayudan a organizar el contenido de tu sitio web y facilitan que los visitantes encuentren lo que buscan. Pero el menú predeterminado de WordPress puede ser un poco simple, lo que dificulta que destaque.

En esta guía, le mostraremos cómo personalizar los menús de WordPress para facilitar la navegación por el sitio web.

¿Por qué personalizar el menú de WordPress?

Su menú es una de las partes más esenciales de su sitio web WordPress. Es lo primero que ven los visitantes cuando llegan a su sitio y lo que utilizarán para navegar por él. Por eso es importante que el menú esté bien diseñado y sea fácil de usar.

He aquí algunas razones por las que debería personalizar su menú de navegación de WordPress:

  • Mejore el aspecto de su sitio web. Su menú es una parte importante del diseño general de su sitio. Al personalizarlo, puedes adaptarlo al aspecto de tu página de inicio y otras páginas de nivel superior y hacerlo más atractivo visualmente.
  • Haga que su sitio web sea más fácil de usar. Un menú bien diseñado puede ayudar a los visitantes a encontrar lo que buscan de forma rápida y sencilla. Si personalizas tu menú, facilitarás a los visitantes la navegación por tu sitio web y la búsqueda de la información que necesitan.
  • Mejore el SEO de su sitio web. La estructura de su menú también puede afectar al SEO de su sitio. Si personalizas tu menú, los motores de búsqueda podrán indexar más fácilmente tu sitio y posicionarlo mejor en los resultados de búsqueda.

Hay muchas formas de personalizar el menú de WordPress. Puedes cambiar el orden de los elementos del menú, añadir nuevos elementos e incluso cambiar el diseño del propio menú.

También hay muchos plugins disponibles para ayudar a personalizar aún más las cosas. En la guía paso a paso a continuación, compartimos 3 maneras de añadir menús personalizados a su sitio de WordPress con y sin el uso de un plugin de WordPress.

Cómo personalizar el menú de WordPress con un plugin Page Builder

En primer lugar, le mostraremos cómo personalizar su menú de WordPress utilizando un plugin constructor de páginas. Usaremos SeedProd en este ejemplo, pero principios similares se aplican a cualquier otro constructor de páginas.

SeedProd Arrastrar y soltar WordPress constructor de sitios web

SeedProd es un potente constructor de páginas de WordPress que permite crear páginas y menús personalizados en WordPress sin necesidad de escribir código. Es fácil de usar y ofrece una amplia gama de características, incluyendo:

  • Constructor de páginas de arrastrar y soltar
  • Creador de temas de WordPress
  • Plantillas prefabricadas
  • Menús personalizables
  • Integración en las redes sociales
  • Y mucho más.

Incluso puede utilizarlo para añadir menús personalizados al pie de página, la cabecera, la barra lateral y el contenido de la página. 

Este método le permite personalizar los menús sin importar su tema de WordPress. Para empezar, sigue estos sencillos pasos.

Paso 1. Instalar SeedProd Instalar SeedProd Page Builder

En primer lugar, descargue el plugin SeedProd e instálelo y actívelo en su sitio de WordPress.

Si necesita ayuda con este paso, puede seguir nuestra guía sobre cómo instalar SeedProd.

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

Una vez activado el plugin, navegue hasta SeedProd " Páginas de Aterrizaje desde su panel de control de WordPress, y haga clic en el botón Añadir Nueva Página de Aterrizaje.

Añadir una nueva página de destino con SeedProd

Aparecerá una biblioteca de plantillas de páginas de destino que puede utilizar para crear rápidamente una página personalizada. 

plantillas de páginas de destino

Cada plantilla es totalmente personalizable para adaptarse a diferentes nichos de sitios web. Por ejemplo, si haces clic en la pestaña "Lead Squeeze" de la parte superior, verás las plantillas más adecuadas para crear páginas de captación.

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

Elija una plantilla de página de destino

Ahora aparecerá una ventana que le permitirá introducir un nombre de página y una URL. Una vez introducidos estos datos, haga clic en el botón Guardar y empezar a editar la página.

información de la página de destino

Paso 3. Personalizar el contenido de su página Personalice el contenido de su página

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

Interfaz de creación de páginas de destino

Cualquier cambio que hagas en tu página aparecerá automáticamente en tiempo real. De esta forma, puedes asegurarte de que queda bien antes de publicar los cambios.

Personalizar el contenido de la plantilla es tan sencillo como señalar y hacer clic. Por ejemplo, para cambiar cualquier contenido de texto, haz clic en él, borra el texto existente y sustitúyelo por el tuyo.

personalizar el contenido de la página

Para añadir nuevos elementos 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.

personalizar imágenes

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

Paso 4. Personalizar el menú de WordPress Personalizar el menú de WordPress

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

Para ello, busque el bloque Columna y arrástrelo a la parte superior de su página.

Bloque de columnas SeedProd

A continuación, elige un diseño. En este caso, vamos a utilizar un diseño de 3 columnas.

Elija un diseño de columnas

Ahora vamos a configurar el área de cabecera con un bloque de imagen para mostrar el logotipo de su sitio web.

Añadir un bloque de imágenes al menú

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

Cargue un logotipo personalizado para su menú

A continuación, busque el bloque Menú de navegación y arrástrelo a otra columna de la cabecera. Aquí es donde puedes añadir elementos de menú para que los usuarios hagan clic y visiten otras páginas de tu sitio.

Añadir el bloque de menú nav

En la configuración del bloque, hay dos formas de mostrar el menú.

El tipo de menú Simple le permite añadir enlaces de menú individuales sin salir del constructor de páginas. Solo tienes que añadir un nombre de menú y pegar tu enlace personalizado.

Menú sencillo de WordPress

También puede hacer que el enlace no sea follow y abrirlo en una nueva pestaña.

El tipo Menú WordPress le permite mostrar los menús que ya ha 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ú principal.

Opción de menú avanzado de WordPress

Basta con seleccionar los menús para que aparezcan en la cabecera.

SeedProd tiene opciones avanzadas de personalización para ambos tipos de menú. En la pestaña Avanzado, puede cambiar los colores del menú, las fuentes, las sombras de texto, los colores hover y mucho más.

Personalizaciones avanzadas del menú de WordPress

Incluso puede mostrar sus 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 menú de pie de página.

Para gestionar sus menús, haga clic en el enlace Pantalla de menús o vaya a Apariencia " Menús desde el administrador de WordPress.

Gestionar la apariencia del menú

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

No olvide pulsar el botón Guardar menú para guardar las funciones del menú.

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

Simplemente busque el bloque de botones y añádalo a su área de cabecera.

Botón de menú WordPres

A continuación, en la configuración del bloque, puede añadir su enlace de menú y personalizar el estilo del botón.

Ajustes de personalización de los botones de menú

Paso 5. Publique su página personalizada Publique su página personalizada

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

Publicar el menú de WordPress

Desde ahí, puede visitar la página para ver su menú personalizado de WordPress en acción.

Ejemplo de menú personalizado de WordPress

Cómo personalizar el menú de WordPress con el Editor de Sitios de WordPress

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

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

Para abrir el editor del sitio, vaya a Apariencia " Editor desde el panel de control de WordPress.

Editor de sitios de WordPress

En la siguiente pantalla, haga clic en la pestaña Patrones.

Patrones del editor del sitio

Desde allí, haga clic en la opción Encabezado y elija su plantilla de Encabezado.

Plantilla de cabecera del editor del sitio

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

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

Personalizar el menú en el editor del sitio

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

Personalizar el color de fondo del menú

Si se desplaza hasta la pestaña Avanzado, puede introducir clases CSS personalizadas.

Clases CSS de menú personalizadas

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

Añadir bloque de botones al menú de WordPress

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 los ajustes y personalizaciones del menú, haz clic en el botón Guardar.

Ahora puede visitar su sitio para ver su menú personalizado.

Ejemplo de menú personalizado de WordPress con editor de sitios

Cómo personalizar el menú de WordPress sin un plugin

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

Para ello, recomendamos utilizar 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 el archivo functions.php.

Para ello, instale el plugin gratuito WPCode y, a continuación, vaya a Fragmentos de código " Añadir fragmento desde el panel de control de WordPress.

WPCode Añadir fragmento

En esta página, verá fragmentos ya preparados que puede añadir a su sitio con unos pocos clics.

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

Utilizar fragmentos personalizados

Ahora introduzca un título para su fragmento, abra el menú desplegable "Tipo de código" y haga clic en Fragmento PHP.

Tipo de fragmento de código PHP

A continuación, pegue 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 su tema, "Mi menú personalizado".

Una vez hecho esto, desplácese hacia abajo hasta las opciones de inserción y elija el método "Inserción automática" para añadir el fragmento en todo su sitio.

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

Ejecutar la ubicación del fragmento en todas partes

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

Por último, haga clic en Guardar para activar el fragmento.

Guardar fragmento de código personalizado

Ahora, dirígete a Apariencia " Menús y mira el área 'Mostrar ubicación'.

Debería ver una nueva opción "Mi menú personalizado" en esta área donde puede añadir elementos de menú.

Menú personalizado en WordPress

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

Puede mostrar un menú de navegación personalizado en cualquier parte de su sitio añadiendo código al archivo de plantilla de su tema.

Simplemente vaya a Apariencia " Editor de archivos de temas.

A continuación, en el menú de la derecha, busque la plantilla en la que desea añadir el menú, como la cabecera de su sitio web.

Editor de archivos de temas de WordPress

Ahora tendrás que 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 a la cabecera del tema:

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

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

Actualizar el archivo del tema

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

Menú personalizado predeterminado de WordPress

Puedes personalizar el menú para que se adapte mejor a tu tema de WordPress o a tu marca añadiendo código CSS personalizado a tu sitio.

Para ello, vaya a Apariencia " Personalizar y haga clic en CSS adicional en el personalizador de WordPress.

Esto abre un editor donde puedes escribir tu CSS personalizado.

CSS adicional del personalizador de WordPress

Ahora puedes dar estilo a tu menú utilizando la clase CSS que has añadido a la plantilla de tu tema. En nuestro ejemplo, es .custom_menu_class.

En el código siguiente, añadimos márgenesy relleno, establecemos el color del texto en negro y organizamos 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, Publica para activarlos.

Cómo personalizar el menú de WordPress con CSS

Más consejos de navegación en WordPress

Esperamos que esta guía te haya ayudado a aprender a personalizar tu menú de WordPress. Si necesitas ayuda para sacar más partido a la navegación de WordPress, consulta los siguientes consejos y tutoriales:

Gracias por leernos. Nos encantaría conocer tu opinión, así que no dudes en dejarnos un comentario con tus preguntas y comentarios.

También puede seguirnos en YouTube, X (antes Twitter) y Facebook para obtener más contenidos útiles para hacer crecer su negocio.

avatar de autor
Stacey Corrin Escritor
Stacey lleva más de 10 años escribiendo sobre WordPress y marketing digital, y mucho más tiempo sobre otros temas. Además, le fascinan el diseño web, la experiencia de usuario y el SEO.

Divulgación: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, es posible que ganemos una comisión. Sólo recomendamos productos que creemos que aportarán valor a nuestros lectores.