Después de crear un menú y añadirle enlaces, puede que quieras personalizar su aspecto. En esta guía encontrarás los cambios más habituales que puedes hacer en el diseño del menú.
Los temas del Editor de sitio te permiten personalizar por completo el diseño del menú del sitio desde el Editor, en Apariencia, dentro de tu escritorio. Los temas clásicos ofrecen opciones de diseño del menú más limitadas, disponibles en el Personalizador, en Apariencia, dentro de tu escritorio.
Para saber qué sección de esta guía seguir, ve a tu escritorio de WordPress.com y comprueba qué hay en Apariencia en el lado izquierdo. Si ves Editor, sigue la sección del Editor de sitio de esta guía. De lo contrario, sigue las instrucciones del Personalizador .
Si tu tema usa el Editor de sitio (es decir, dispones de Apariencia → Editor en tu escritorio), puedes controlar el diseño del menú desde los ajustes del bloque Navegación siguiendo estos pasos:
- Desde el escritorio de tu sitio, ve a Apariencia → Editor.
- Elige Plantillas y selecciona una plantilla que incluya tu menú, como Inicio o Página de inicio.
- Abre la vista de lista en la esquina superior izquierda de la pantalla; es el icono con tres líneas horizontales una encima de otra.
- Elige el bloque Navegación en la vista de lista.
- Si no ves un bloque Navegación, puedes crear uno.
- Consulta los ajustes del bloque Navegación en la parte derecha de la pantalla.
- Personaliza los estilos del bloque Navegación desde el icono de ajustes o el icono de estilos.
- Haz clic en el botón Guardar para guardar tus cambios.
Descubre cómo usar cada ajuste en nuestra guía de ajustes del bloque Navegación, que incluye:
- Estilos del bloque Navegación, como color, tipografía y dimensiones.
- Ajustes de diseño del bloque Navegación, como justificación, orientación y visualización del menú.
Este vídeo muestra cómo acceder al bloque Navegación y cambiar sus ajustes y estilos. Esta funcionalidad está disponible en nuestros temas del Editor de sitio, totalmente personalizables. Puedes ralentizar o acelerar el vídeo con los controles de la esquina inferior derecha después de pulsar Reproducir.
Esta sección se aplica a sitios creados con el creador de sitios web con IA (todos los planes de pago) o a sitios que hayan activado el Agente de WordPress (todos los planes de pago). Abre el Agente de WordPress haciendo clic en el icono de IA (una estrella de cuatro puntas) en la parte inferior de la pantalla.
El Agente de WordPress puede hacer cambios directamente en el aspecto y el comportamiento de tu menú. Estas son algunas cosas que puedes pedirle:
- «Cambia el color de mi menú de navegación para que coincida con mi marca.»
- «Configura mis menús desplegables para que se abran al hacer clic en lugar de al pasar el cursor.»
- «Haz que mi menú se muestre como menú hamburguesa en todos los tamaños de pantalla.»
- «Añade una clase CSS llamada ‘featured-link’ al elemento del menú Contacto.»
Puedes cambiar la ubicación del menú en todos los temas del Editor de sitio. Estos temas usan el Editor en Apariencia para darte control total sobre el diseño, incluida la ubicación del menú de tu sitio.
Aunque en un tema del Editor de sitio puedes personalizar por completo la ubicación del menú, puede que prefieras empezar buscando un tema que muestre el menú en una posición que te guste. Más información sobre el cambio de temas.
Si ya has elegido un tema del Editor de sitio y quieres cambiar dónde aparece el menú, tienes varias opciones:
- Descubre cómo seleccionar y mover el bloque Navegación, o ve directamente al tutorial en vídeo.
- Añade un menú nuevo a tu plantilla.
- Añade navegación a una página o entrada individual con el bloque Lista de páginas.
- Añade navegación dentro de una página o entrada con el bloque Tabla de contenidos.
Si usas un tema que no dispone del Editor en Apariencia dentro de tu escritorio, echa un vistazo a nuestros temas del Editor de sitio, totalmente personalizables.
En las pantallas de ordenador, el menú suele aparecer como una lista de enlaces de texto en una sola línea. En las pantallas más pequeñas (tabletas y dispositivos móviles), puede que no haya espacio suficiente para mostrar todos los enlaces de texto de forma que los visitantes puedan pulsarlos fácilmente.
En su lugar, lo habitual es ocultar los elementos del menú detrás de un botón llamado menú «superpuesto» o «hamburguesa» (llamado así porque las tres líneas horizontales se parecen a una hamburguesa).
Desde los ajustes del bloque Navegación en el Editor de sitio, puedes ajustar la visualización del menú superpuesto. Sigue estos pasos para personalizar cómo se muestra el menú superpuesto:
- Desde el escritorio de tu sitio, ve a Apariencia → Editor.
- Elige Plantillas y selecciona una plantilla que incluya tu menú, como Inicio o Página de inicio.
- Abre la vista de lista en la esquina superior izquierda de tu pantalla; es el icono con tres líneas horizontales una encima de otra.
- Elige el bloque Navegación en la vista de lista.
- Consulta los ajustes del bloque Navegación en la parte derecha de la pantalla.
- Haz clic en el icono de Ajustes (el icono de engranaje).
- En Visualización, elige los ajustes del menú superpuesto:
- Móvil: el ajuste por defecto. El menú superpuesto solo aparecerá en pantallas de tamaño móvil.
- Desactivado: no mostrar ningún menú superpuesto.
- Siempre: muestra el menú superpuesto en todo momento, independientemente del tamaño de la pantalla.
- Con la plantilla de superposición, puedes personalizar el diseño de la superposición a pantalla completa que aparece en dispositivos móviles. Consulta nuestra guía sobre cómo personalizar la superposición de navegación.
- Haz clic en el botón «Guardar» para guardar tus cambios.
Los visitantes de tu web están acostumbrados a ver un icono o menú hamburguesa en los dispositivos móviles. Si muestras el menú de escritorio (es decir, desactivas el menú superpuesto), puede resultar difícil para tus visitantes navegar por tu sitio en dispositivos móviles.
Visita la guía del bloque Navegación para conocer todas las funciones del bloque.
Los temas clásicos y los temas de terceros pueden tener sus propios ajustes por defecto para cómo se muestra el menú en dispositivos móviles. Consulta la documentación del tema que hayas elegido para más información.
Puedes controlar si un menú desplegable se abre cuando un visitante pasa el cursor sobre un elemento del menú, hace clic en él o permanece visible en todo momento.
Para configurar la visibilidad de los submenús, sigue estos pasos:
- Desde el escritorio de tu sitio, ve a Apariencia → Editor.
- Elige Plantillas y selecciona una plantilla que incluya tu menú, como Inicio o Página de inicio.
- Abre la vista de lista en la esquina superior izquierda de tu pantalla.
- Elige tu bloque Navegación.
- En la barra lateral de ajustes del bloque, haz clic en el icono de Ajustes (el icono de engranaje).
- En Visualización, busca el ajuste «Visibilidad del submenú» y elige una de las siguientes opciones:
- Al pasar el cursor: el menú desplegable se abre cuando un visitante pasa el cursor sobre el elemento del menú principal. Opcionalmente, puedes desactivar el ajuste para mostrar una flecha junto al menú.
- Al hacer clic: el menú desplegable se abre cuando un visitante hace clic en el elemento del menú principal.
- Haz clic en el botón Guardar para guardar tus cambios.
Esta sección de la guía se aplica a sitios con los planes Personal, Premium, Business y Commerce de WordPress.com. Si tienes un sitio gratuito, mejora tu plan para acceder a esta función.
Las clases de CSS son una propiedad avanzada del menú que te permite aplicar una clase CSS a elementos individuales del menú.
Para saber qué sección de esta guía seguir, visita tu escritorio de WordPress.com y comprueba en el lado izquierdo, debajo de Apariencia. Si ves Editor, sigue la sección de temas del Editor de sitio de esta guía. De lo contrario, sigue las instrucciones para temas clásicos.
Para añadir una clase de CSS en el Editor de sitio, sigue estos pasos:
- Desde el escritorio de tu sitio, ve a Apariencia → Editor.
- Elige Plantillas y selecciona una plantilla que incluya tu menú, como Inicio o Página de inicio.
- Abre la vista de lista en la esquina superior izquierda de tu pantalla; es el icono con tres líneas horizontales una encima de otra.
- Elige el bloque Navegación en la vista de lista.
- Si no ves un bloque Navegación, puedes crear uno.
- Consulta los ajustes del bloque Navegación en la parte derecha de la pantalla.
- Haz clic en el icono de Ajustes (engranaje) ⚙️ y abre la sección «Avanzado».
- Añade tu clase de CSS.
También puedes asignar una clase de CSS a enlaces individuales dentro del bloque Navegación. Selecciona el enlace individual antes de ir a Avanzado.
Visita nuestra guía sobre el bloque Navegación para conocer todas las funciones del bloque.
Más información sobre cómo añadir CSS personalizado.
