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…
Índice del artículo
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.
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?
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.
*** 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.
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.
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ú.
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;
}
Y este es el resultado:
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.
Si te ha gustado aprender código css, te dejo también unos conceptos básicos de código html.
¿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.
Hola
Me parece muy bueno lo que comentas.
Tengo una plantilla gratuita de WordPress y no me deja programar el CSS.
Hay alguna forma de hacerlo?
¡Hola Cristian! Muchas gracias por tu comentario. Sí que lo puedes hacer en una plantilla gratuita, pero es un poco más complicado y arriesgado.
Debes buscar las hojas de estilos que haya de tu plantilla y editarlas directamente. Puedes buscar estos archivos con Filezilla, por ejemplo, dentro de la carpeta de tu plantilla. Serán los archivos .css.
Pero ten mucho cuidado y haz una copia de seguridad antes, porque aquí estás tocando directamente el código de tu página web. También recuerda que nunca debes borrar nada de lo que ya haya escrito en estas hojas de estilos, solo escribir debajo lo que necesites.
¡Espero haberte ayudado! Un saludo.
Gracias Leonor!
Buenas Leonor…he usado tu código..y fantástico. ¿Cómo puedo hacer para que al encogerse el menú no cambie de color?
Gracias
Gracias me ayudo mucho!
¡Mil gracias, me alegro mucho! 🙂
Muchas gracias por el post! es justo lo que andaba buscando, aunque mi intención era hacer el cambio desde el tema hijo. Cuál sería el procedimiento en ese caso? Mil gracias!!!
Hola Andrea! Muchas gracias, me alegro que te haya sido útil. El código es el mismo, lo único diferente es que lo tendrías que poner en el editor de tu tema hijo. Puedes dirigirte a Apariencia > Editor de temas, ahí seleccionas la hoja de estilos de tu tema hijo «style.css» y pegas el código al final de todo lo que ya haya escrito. Un saludo!
Me has ayudado muchísimo, es justo lo que había estado buscando, la verdad pensé que seria mas complicado.
Fácil y sencillo, excelente post, mil gracias.
¡Me alegro mucho de que te haya servido! 🙂 Muchas gracias.
Leonor, muchas gracias, muy claro tu paso a paso. Te hago una consulta bastante puntual a ver si me podés ayudar. Se puede añadir una clase al elemento del menú desde otro lugar? No me muestra el campo de CSS y el link «opciones de pantalla» (solo cuando estoy dentro de APARIENCIA > MENU) está bloquedo/grisado. Es un error raro, pero no se como solucionarlo.
Hola Cecilia, muchas gracias por comentar! Pues sí que es raro lo que me comentas, puede que haya alguna incompatibilidad con algún plugin o con tu tema. Prueba a ir desactivando los plugins de tu sitio a ver si se desbloquea en algún momento, y si es así, ver si puedes prescindir de ese plugin… Un saludo! 🙂
Muchas gracias, Leonor, no soy programador y me funcionó mucho tu post. 😀
Muchas gracias, Edgar! Me alegra que te haya sido útil 🙂
Gracias Leonor, me ayudó mucho el tip !
Saludos
¡Gracias Manuel! Me alegro que te haya servido 🙂
Excelente tu explicación Leonor!!! Conseguí lo que me pedía mi clienta.
Un favor más: ¿Cómo le podría poner un ícono a ese ítem destacado?
Hola Óscar! Gracias, me alegro que te haya servido el post!
Para colocar un icono, puedes probar instalando la tipografía de Font Awesome. También hay plugins que puedes instalar para colocar iconos en el menú o en cualquier otra parte de tu web.
Un saludo! 🙂