Cambiar el color de un elemento del menú en WordPress

En ocasiones nos puede interesar cambiar el color de un elemento del menú en WordPress para resaltarlo y hacerlos más vistosos para el usuario.

También los podemos usar para animarles a realizar alguna acción como registrarse, llamar o reservar algún producto.

El menú de navegación es uno de los elementos más importantes de una web.

Ya que todo en un diseño web debe estar bien estructurado para mejorar la experiencia del usuario y sobre todo hacerme la vida más fácil.

Por ese motivo te voy a enseñar cómo cambiar el color de un elemento del menú en WordPress, Así que vamos a ello.

1. Añadir CSS adicional

Vamos a cambiar el color a un elemento del menú añadiendo clases CSS y añadiremos un icono para hacer nuestra web más profesional y vistosa y de esta manera conseguir que el usuario fije inmediatamente la vista a las pestañas del menú que nos interesa de una forma fácil y sencilla.

Una vez dentro de esta sección vamos a ir a la CSS adicional, donde vamos a añadir el siguiente código.

2. Vamos a crear un bonito botón con fondo verde.

.boton-verde {
text-decoration:none;
background-color:#dd9933;
}

3. Ahora vamos a hacer que al pasar por encima con el ratón cambie de color.

.boton-verde:hover {
background-color:#333333;
}

Una vez hecho esto vamos también dentro de personalizar a la sección menús.
Y seleccionamos el elemento de menú al que vamos a cambiar el color para desplegar sus opciones.

Una vez hemos desplegado las opciones del elemento podemos rellenar las casillas “etiqueta de navegación”, “atributos del título” y si lo hemos habilitado desde las opciones de pantalla “clases CSS”.
En esta casilla vamos a añadir la clase que acabamos de crear que deberá quedar así:

Para dar un color personalizado al texto del botón seleccionado sin afectar al resto del menú, vamos a añadir en la casilla de Etiqueta de navegación el siguiente código y guardamos.

<span style=”color: #ffffff;”>Contacto</span>

Ahora cuando refresquemos la página principal de nuestro sitio web la pestaña habrá cambiado de color,
y cuando pasemos el ratón por encima se volverá negro.

Si hemos añadido todo el código correctamente debe de verse así:

4. Añadir un icono desde la librería Font Awesome Icons:

Una librería de iconos que podemos insertar en cualquier lugar de nuestra página web con un sencillo código.
Simplemente tenemos que seleccionar el icono que queramos entre su larga lista de iconos y copiar y pegar su código en la casilla de etiqueta de navegación en el menú de WordPress antes del texto.

Si no sabes como hacerlo, aquí te dejo mi artículo sobre fuentes de iconos CSS

Tiene que quedar así:

5. Guardamos el menú

Y una vez hecho al refrescar la página veremos que se ha añadido el icono antes del texto del menú.

De esta manera tan sencilla podemos añadir estilos personalizados a todos los elementos que queramos del menú para hacerlos más vistosos.
y  conseguir así una página web personalizada y con un aspecto totalmente profesional.

Si deseas contratar diseño web profesional y a medida para tu empresa no dudes en ponerte en contacto conmigo a través de mi formulario de contacto, WhatsApp o mis redes sociales.
Facebook, Linkedin o Instagram.
Estaré encantado de ayudarte!