Menú Cerrar

Cambiar el color de un elemento del menú en WordPress

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.

DISEÑO WEB A MEDIDA PARA TU NEGOCIO

Consúltame sin compromiso y consigue la web que siempre has deseado tener para tu empresa.

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.

Páginas entradas productos

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”.

cambiar color etiqueta de navegacion

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í:

modificar color menu wordpress

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

icono en menu de wordpress

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ú.

modificar menu wordpress

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.

Fuente: WebTegrity

Deja un comentario

WhatsApp Chatear
A %d blogueros les gusta esto: