Un menú atractivo y fácil de navegar puede mejorar mucho la experiencia del usuario y animarle a seguir navegando por el contenido de su sitio. Ajustar los colores del menú puede hacer que el dise?o de tu sitio web sea más personal.

Este artículo le explicará en detalle cómo cambiar los colores de los menús en WordPress, le ense?ará a utilizar la función Personalizador de WordPressyplug-in (componente de software)O porCSS personalizado Escribir código de estilo.

I. ?Cómo cambiar el color del menú en WordPress?

Hay varias formas de cambiar los colores del menú en WordPress, dependiendo del grado de personalización que desee. Estas son algunas formas comunes de hacerlo:

1. A través del Personalizador de WordPress
2. Uso del plugin de WordPress
3. Escribir código CSS personalizado

Cambiar los colores del menú con el personalizador de WordPress

Personalizador de WordPress es una potente herramienta para previsualizar y cambiar la apariencia de un sitio web en tiempo real sin escribir código. El personalizador suele incluir la opción de cambiar el color del menú en los siguientes pasos:

Paso 1: Inicie sesión en el panel de WordPress

Paso 2: Vaya a Apariencia > Personalizar

En la barra lateral izquierda, haga clic en Apariencia > PersonalizaciónPara ello, vaya a la pantalla del Personalizador de WordPress. En este punto, verá una ventana de vista previa en vivo de su sitio web y varios paneles de configuración de personalización a la izquierda.

Paso 3: Localizar la configuración del menú o título

El dise?o exacto y las opciones del personalizador pueden variar en función de lo que busque.Temas utilizadosy varía. La mayoría de los temas serán en menúynavegador tal vez tipoEsta sección ofrece opciones personalizadas para editar el color de los menús. Haga clic para ir al panel correspondiente.

Paso 4: Cambiar el color del menú

Dependiendo del tema utilizado, suelen aparecer las siguientes opciones de colores personalizados:

• Color de fondo del menúAjusta el color de fondo de todo el menú.
• Colores de los menús: Fija el color del texto de los elementos de menú.
• Color del cursor: Fija el color que se muestra cuando el ratón pasa por encima de un elemento del menú.
• Colores activos: Define el color del elemento de menú activo en ese momento (por ejemplo, la página que se está visualizando).
• Submenú ColorSi su menú tiene submenús desplegables, personalice su fondo, texto y color al pasar por encima.

Paso 5: Guardar cambios

Una vez que haya ajustado los colores, haga clic en la parte superior de la página escriba a tal vez guardar (un archivo, etc.) (informática) y los cambios surtirán efecto.

2. Cambiar los colores del menú con el plugin de WordPress

Si no quieres cambiar el código manualmente, puedes usar un plugin para cambiar el color del menú fácilmente. Existen múltiples plugins que pueden ayudarte - a conseguir esta característica. Aquí están los pasos para hacer cambios usando plugins:

Paso 1: Instalar el plug-in

Visite el repositorio de plugins de WordPress para buscar e instalar el plugin de menú adecuado, como por ejemplo Mega Menú Max.

Paso 2: Activar e introducir la configuración del plugin

Después de instalar y activar el plugin, vaya a la página de configuración del plugin, que normalmente se encuentra en la sección Apariencia > Menú o plugins que se encuentran en la sección dedicada.

Paso 3: Ajustar los colores del menú

Los plugins suelen ofrecer un selector de color intuitivo que se puede configurar:

• Color de fondo del menú
• Color del texto del menú
• Colores de los estados activo y flotante
• Colores de fondo y texto de los submenús

La ventaja de un plugin es que suele incluir una función de vista previa en directo, lo que facilita ver el efecto de los cambios en cualquier momento.

3. Uso de CSS personalizado para cambiar los colores del menú

Si quieres tener el máximo control y tienes algunos conocimientos de codificación, entonces escribirCSS personalizado es una opción ideal. Al escribir CSS personalizado, se puede controlar con precisión cada detalle del menú.

Paso 1: Encontrar el selector CSS para el menú

Para escribir CSS, primero necesita encontrar el selector HTML para el menú. Haga clic con el botón derecho en el área del menú y seleccione Elementos de control(u otra opción similar), que abre las herramientas de desarrollo del navegador. Aquí puedes ver la estructura HTML del menú y el nombre o ID de la clase correspondiente.

Paso 2: Escribir código CSS personalizado

Una vez que haya encontrado el selector HTML para el menú, puede escribir reglas CSS para cambiar su estilo. He aquí un sencillo código de ejemplo:

/* Cambiar el color de fondo del elemento de menú desplegable */
.primary-menu .menu-item.dropdown {
  background-color: #f8f9fa; /* Fondo gris claro */
}

/* Cambiar el color del texto del menú desplegable */
.primary-menu .menu-item.dropdown a {
  color: #333; /* Texto negro */
}

/* Cambiar el color de fondo del menú desplegable al pasar el ratón por encima */
.primary-menu .menu-item.dropdown:hover {
  background-color: #007bff; /* Fondo azul al pasar el ratón por encima */
}

/* Cambiar el color del texto del menú desplegable al pasar el ratón por encima */
.primary-menu .menu-item.dropdown:hover a {
  color: white; /* texto blanco al pasar el cursor */
}

• .primary-menu .menu-item.dropdown: Este selector actúa sobre los elementos de menú desplegables, modificando su color de fondo.

• .primary-menu .menu-item.dropdown aModificar el color del texto de los enlaces (partes de texto) dentro de los elementos de menú.

• .primary-menu .menu-item.dropdown:hover: Cambia el color de fondo cuando el usuario pasa el ratón por encima de este elemento del menú.

• .primary-menu .menu-item.dropdown:hover a: Cambia el color del texto al pasar el ratón por encima.

Paso 3: A?adir CSS a WordPress

Para ello Apariencia > Personalización > CSS adicional A?adir códigos personalizados directamente en el personalizador de WordPress. También es posible a?adir estos códigos al tema hijo de style.css Documentación.

En segundo lugar, ?cómo se escriben las reglas CSS?

El núcleo de las reglas CSS consiste en recolector responder cantando bloque de declaración Componentes. El selector se utiliza para especificar el elemento HTML al que se aplicará el estilo, y el bloque de declaración contiene los atributos y valores de estilo que se aplicarán.

Los selectores más utilizados son:

• .main-navegación: Permite seleccionar el menú principal de navegación.
• .main-navigation ul li a: Se utiliza para seleccionar enlaces en los elementos del menú.
• .main-navigation li:hoverEstilo aplicado al pasar el ratón por encima del elemento del menú.

Propiedades CSS comunes a los menús

Algunas propiedades CSS comunes pueden utilizarse para controlar la apariencia de un menú:

• color de fondo: Establece el color de fondo.
• color: Establece el color del texto.
• tama?o de fuente: Ajusta el tama?o de la fuente.
• acolchado: Aumenta los márgenes interiores de los elementos del menú.
• margen: Establece el margen exterior del elemento de menú.
• frontera: A?ade bordes a los elementos del menú.

En tercer lugar, el impacto de los colores del menú en el dise?o del sitio web.

Los colores de los menús no sólo afectan al impacto visual, sino que también desempe?an un papel importante en la experiencia del usuario y la percepción de la marca. La elección del color adecuado puede mejorar la legibilidad del menú, ayudar a los usuarios a navegar con facilidad, aumentar la coherencia de la marca y mejorarla resaltando los botones importantes (como el botónCTA) Aumentar las tasas de conversión.

IV. Resumen

Ajustar los colores del menú es crucial en el dise?o de sitios web en WordPress, no sólo para mejorar el atractivo visual, sino también para mejorar la experiencia del usuario y la coherencia de la marca. Es fácil cambiar los colores del fondo, el texto y los estados activo y flotante del menú a través del personalizador de WordPress, plugins o CSS personalizado. Elegir la paleta de colores adecuada puede ayudar a mejorar la legibilidad, potenciar el reconocimiento de la marca y aumentar las conversiones al resaltar elementos clave como los botones CTA.

Preguntas frecuentes sobre cómo cambiar los colores del menú de WordPress

1. ?Puedo cambiar el color de algunos elementos del menú? Sí, es posible escribir estilos separados para cada elemento del menú, ya sea a través de un plugin o utilizando CSS.

2. ?Y si quiero utilizar un degradado o una imagen como fondo del menú? Puedes implementar un fondo degradado o establecer una imagen de fondo mediante CSS. Algunos plugins avanzados también ofrecen opciones de fondo degradado.

3. He cambiado accidentalmente el color del menú, ?cómo puedo restablecer la configuración predeterminada? El estilo predeterminado del menú puede restaurarse mediante la opción Deshacer del personalizador o restableciendo la configuración del tema.

Contacte con nosotros
?No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de peque?as empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres