En este post quiero explicarte una manera muy útil y sencilla para poder hacer hincapié y resaltar un elemento del menú principal de tu página web. Por ejemplo, podrás poner una tipografía diferente para este elemento, cambiarlo de color, de tamaño, agregarle un color de fondo, etc. Puede servirte para darle más importancia y hacer llegar a tus usuarios a una página de tu sitio web, como por ejemplo tu página de servicios o de conversión, tu blog…

En este caso, te lo explico para que puedas realizarlo si tu sitio web está creado con WordPress. Si no es así, muy probablemente vas a poder extrapolar esta explicación a cualquier otro editor de contenidos.

Pues bien, comencemos…

 

¿Qué es el menú de una página web?

 

Probablemente ya sabes qué es el menú de una página web, pero por si acaso quiero explicarte brevemente qué es, cuántos menús hay y dónde suelen colocarse.

El menú de una página web no es más que un listado de enlaces de tu sitio. Si analizamos el código fuente, se trata de eso, una lista de elementos con enlaces a las diferentes páginas del sitio. La característica principal es que este menú está siempre (o casi siempre) presente en nuestro sitio web, acompañándonos en la navegación de cada una de las páginas. Puede que esté fijo y nos acompañe al hacer scroll o simplemente está en todas nuestras páginas del sitio, pero no continua al hacer scroll.

Existen diferentes tipos de menú: el más común, que aparece en la cabecera de la página web, el menú hamburguesa, que suele usarse en la navegación móvil, también hay menús en el pie de página, etc.

En este caso, te voy a explicar cómo destacar un elemento en un menú común en la cabecera de tu página web, pero como verás a continuación, la forma de realización en cualquier otro menú es la misma.

 

¿Dónde se edita o crea un menú en WordPress?

 

Si aún no tienes un menú en tu página web o lo tienes pero no sabes dónde se edita, accede a la administración de WordPress de tu página web. A continuación, a la izquierda, haz clic en Apariencia > Menús.

Ahí podrás ver tu menú, y si no lo tienes, ahí puedes crearlo. Añade las páginas que desees que haya en tu menú, ya sean las que hayas creado previamente, entradas, categorías, o links a otros sitios web.

Estupendo, pues vamos al “meollo” de la cuestión, ¿cómo edito un elemento del menú para darle un aspecto diferente y destacarlo?

 

Pasos a seguir para destacar un elemento del menú en WordPress:

 

1. Añadir una clase al elemento que quieres resaltar

 

A continuación lo que vamos a hacer es añadir una clase al elemento que quieres editar, la clase no es más que una palabra o palabras que luego vas a hacer mención cuando estés creando el código css.

Haz clic sobre el elemento en cuestión que quieres resaltar y escribe la palabra que quieras en el apartado de “Clases CSS (opcional)“. En mi ejemplo, yo he llamado a la clase destacado-menu.

 

Elemento menú

 

*** Un inciso, si no te aparece este apartado, es porque no tienes habilitada esta opción en las opciones de pantalla. Haz clic en Opciones de Pantalla, arriba a la izquierda y en Mostrar propiedades avanzadas de menú haz clic en Clases CSS.

 

Añadir clase menú

 

Perfecto, ¿ya le has creado una clase al elemento del menú que querías? Genial, pues no te olvides guardar los cambios y vamos a continuar.

 

2. Crear código css personalizado a ese elemento del menú

 

Ahora tienes varias opciones para crear el código CSS. Lo más probable es que tu theme tenga una sección de CSS personalizado en las opciones generales. Sino, puedes crear un tema hijo para poder crear y editar este código, o puedes editarlo con cuidado directamente en el editor de WordPress en Apariencia > Editor de Temas.

En mi caso, utilizo el theme Divi, y éste tiene en sus opciones generales del tema un apartado para crear fragmentos de código css personalizados. Si tu caso es como el mío, dirígete a Divi > Opciones del Tema. Baja hasta el final y en la sección de Código Personalizado vamos a personalizar el diseño de este elemento del menú.

 

CSS personalizado Divi

 

Lo que tienes que hacer es llamar a la clase que has creado antes, ojo a cómo la escribes, debes escribirla exactamente igual a como la creaste en el elemento del menú. A continuación, vamos a irle dando atributos a tu elemento: tamaño de texto, color, tipografía…

En mi caso, yo he realizado los siguientes ajustes:

.destacado-menu > a {
text-decoration: none !important;
padding: 10px !important;
color: #ffffff !important;
background-color: #69293a !important;
border-radius: 6px !important;
}

 

Código elemento destacado

 

Y este es el resultado:

 

Elemento resaltado menú

 

Para editar el elemento a tu gusto, debes conocer algunos aspectos básicos del código css. Recuerda también añadir !important tras el atributo que definas, para que prevalezca este diseño al que tu menú tiene por defecto.

 

¿Qué te ha parecido el post?

¿Ves qué sencillo es resaltar y destacar un elemento del menú de tu página web? Cuéntame en comentarios cómo lo has hecho tú. Y ya sabes, si tienes cualquier duda estaré encantada de ayudarte.

Pin It on Pinterest

Share This