En ocasiones nos puede interesar resaltar algunas pestañas en el menú de nuestra web para hacerlas más vistosas e invitar al usuario 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 desarrollo web debe estar estructurado para mejorar la experiencia del usuario y sobre todo hacerme la vida más fácil.
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.
Para ello tenemos que ir al panel de administración de WordPress y entrar en la pestaña Apariencia/personalizar entre las opciones laterales del panel.
Una vez dentro de esta sección vamos a ir a la CSS adicional, donde vamos a añadir el siguiente código.
Con este vamos a crear un bonito botón con fondo verde.
.boton-verde {
text-decoration:none;
background-color:#dd9933;
}
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:
<span style=”color: #ffffff;”>Contacto</span>
Guardamos el menú.
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í:
Ahora vamos a 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í:
Guardamos el menú y al refrescar la página principal de nuestra web 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!
¿En qué puedo ayudarte?, Escríbeme!