En el diseño de una pagina web el menú de navegación es uno de los elementos más importantes, debe ser legible ordenado y sencillo huyendo de fuentes estrambóticas y border-radius exagerados, todo en un desarrollo web debe estar estructurado para mejorar la experiencia del usuario y sobre todo hacerme la vida más fácil.
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.
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 menú entre las opciones laterales del panel.
Una vez dentro de la sección de menús seleccionamos el menú que queremos personalizar buscamos el elemento de menú al que vamos a cambiar el color y desplegamos 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”.
Para dar un estilo CSS personalizado al elemento del menú seleccionado añadimos en la casilla de Etiqueta de navegación el siguiente código:
<span style=”background: #48b24b; padding: 10px; font-size: 14px; color: #ffffff;”>Contacto</span>
Debe de quedar así:
Guardamos el menú.
Ahora cuando refresquemos la página principal de nuestro sitio web la pestaña habrá cambiado de color, para hacerla más vistosa hemos añadido en la línea código un padding de 10px a cada borde del botón y con la propiedad font-size hemos agrandado el tamaño de la fuente a 14px.
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. También podemos insertar este icono desde una imagen previamente descargada o desde otras fuentes de iconos CSS con las que tunear y acelerar tu página web como os enseñamos en este otro artículo.
Tiene que quedar como en la imagen relacionada:
<i class=”fa fa-envelope-o” aria-hidden=”true”></i> Contacto
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 todos los elementos que queramos del menú de nuestro WordPress para hacerlos más vistosos y conseguir así una página web personalizada y con un aspecto totalmente profesional.
Fuente: WebTegrity