Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo resaltar un elemento / artículo del menú en WordPress

Resaltar un elemento / artículo del menú en WordPress puede atraer la atención de sus visitantes hacia páginas importantes u ofertas especiales. Esto puede ayudar a mejorar la navegación y la participación de los usuarios.

Si quiere destacar una nueva característica, una oferta o una actualización esencial, hacer que ciertos elementos del menú destaquen puede aumentar la eficacia de su sitio.

Por ejemplo, hemos destacado la página de precios en el menú de navegación principal de muchas de nuestras marcas asociadas para llamar la atención de los usuarios. Este enfoque ha animado a más visitantes a explorar los precios de nuestros productos y se ha traducido en un aumento de las conversiones.

En este artículo, le mostraremos cómo resaltar fácilmente un elemento / artículo del menú en WordPress utilizando código CSS.

How to Highlight a Menu Item in WordPress

¿Por qué resaltar un elemento / artículo del menú en WordPress?

Un menú de navegación es una lista de enlaces que apuntan a áreas importantes de su sitio. Suelen presentarse como una barra horizontal en la cabecera de cada página de un sitio web WordPress.

Al resaltar un elemento / artículo en su menú de navegación, puede dirigir fácilmente la atención del usuario a su llamada a la acción más destacada.

Por ejemplo, si desea que los usuarios visiten la página de precios o una entrada concreta de su blog de WordPress, puede resaltar ese elemento en el menú de navegación. Esto puede aumentar el tráfico en esa página e impulsar las ofertas.

Highlighted menu item in WPForms

Dicho esto, veamos cómo resaltar un elemento / artículo del menú en WordPress utilizando CSS:

Método 1: Resaltar un elemento / artículo del menú con el editor de sitio completo

Si utiliza un tema activado / activo por bloques, dispondrá del Editor del sitio completo en lugar del antiguo Personalizador de temas. También puede resaltar fácilmente un elemento / artículo del menú actual.

Primero, diríjase a la página Apariencia ” Editor desde el escritorio de administrador de WordPress. Esto le dirigirá al editor completo del sitio.

Para ello, haga doble clic en el elemento / artículo del menú que desee resaltar y, a continuación, haga clic en el icono “Ajustes” de la parte superior. Esto abrirá inmediatamente los ajustes de ese elemento / artículo de menú específico en el panel de bloque.

Ahora, simplemente desplácese hacia abajo hasta la pestaña “Avanzado” y haga clic en el icono de la flecha situado a su lado para ampliarla.

Esto abrirá un campo ‘Additional CSS Class’ donde tienes que escribir highlighted-menu.

Add CSS class to menu item

A continuación, haz clic en el botón “Guardar” de la parte superior de la página para guardar los cambios.

Después de eso, usted tendrá que añadir un poco de CSS a tu tema para el efecto de resaltado. Puede corregir la falta de Personalizador de temas, o puede utilizar un plugin de fragmento de código para añadir código CSS.

Cómo añadir fragmentos de código CSS con WPCode

Para añadir CSS a WordPress, recomendamos usar WPCode porque es el mejor plugin de fragmentos de código para WordPress del mercado que hace que sea seguro y fácil añadir código personalizado.

Primero, necesitas instalar y activar el plugin WPCode. Para más instrucciones, marca / comprobar nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Nota: WPCode también tiene una versión gratuita. Sin embargo, también puedes obtener el plan premium para desbloquear la biblioteca en la nube de fragmentos de código, lógica condicional inteligente y mucho más.

Una vez activado, vaya a la página Fragmentos de código ” + Añadir fragmento desde su panel de administrador de WordPress.

Aquí, pase el cursor por encima de la opción “Añadir su código personalizado (nuevo fragmento)” y haga clic en el botón “Usar fragmento” situado debajo.

Add new snippet

Esto le llevará a la página “Crear fragmento de código personalizado”, donde puede empezar por elegir un nombre para su fragmento de código.

A continuación, seleccione “Fragmento de código CSS” como tipo de código en el menú desplegable de la esquina derecha de la pantalla.

Choose CSS snippet for highlighting menu item

A continuación, copie y pegue el siguiente código CSS en el cuadro “Vista previa del código”:

/* Highlighted menu */
.highlighted-menu
{
background: #d3d3d3;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}

Una vez hecho esto, desplácese hasta la sección “Inserción”.

Aquí, sólo tienes que elegir el modo ‘Auto Insertar’ para que el código se ejecute automáticamente en todo tu sitio web.

Choose an insertion method

Ahora, ve a la parte superior de la página y activa el conmutador de “Inactivo” a “Activo”.

A continuación, basta con hacer clic en el botón “Guardar fragmento de código” para establecer los ajustes.

Save highlighted menu item snippet

Ahora ha resaltado correctamente un elemento / artículo del menú en WordPress utilizando un editor de sitio completo.

Este es el aspecto que tendrá el elemento / artículo después de añadir el código CSS.

Highlighted menu item preview

Cómo acceder al Personalizador de temas con un tema en bloque

Si desea utilizar el Personalizador de temas y un tema de FSE, sólo tiene que copiar y pegar la URL siguiente en su navegador. Asegúrese de sustituir ‘example.com’ por el nombre de dominio de su sitio:

https://example.com/wp-admin/customize.php

Esto abrirá el Personalizador de temas para tu tema en bloque, donde tienes que desplegar la pestaña ‘CSS adicional’.

Expand the additional CSS tab

A continuación, copie y pegue el fragmento de código CSS en el cuadro “CSS adicional”:

/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}

Después, basta con hacer clic en el botón “Publicar” de la parte superior para almacenar los ajustes.

Add CSS code in theme customizer

Método 2: Resaltar un elemento del menú utilizando un Personalizador de temas

Si está utilizando un tema antiguo de WordPress, entonces es probable que tenga un personalizador de temas activado por defecto. Resaltar un elemento del menú en un Personalizador de temas es un proceso bastante sencillo.

En primer lugar, simplemente vaya a Apariencia ” Personalizar en su escritorio de WordPress para iniciar el personalizador de temas. Una vez abierto, haz clic en la pestaña “Menús” de la barra lateral izquierda.

Expand the Menu tab in the theme customizer

Desde aquí, haga clic en el icono de engranaje de la parte superior derecha para mostrar las propiedades avanzadas.

Ahora, sigue adelante y marca la casilla ‘Clases CSS’.

Check the CSS classes option

A continuación, desplácese hasta la sección “Menús”.

Si tiene varios menús de WordPress, simplemente haga clic en el menú con los elementos de menú que desea resaltar.

Choose a menu to customize

Se abrirá una nueva pestaña en la que podrá seleccionar el elemento / artículo del menú que desee destacar. Puede ser “Contacte con nosotros”, como en nuestro ejemplo, o puede ser su página de precios o el enlace a su tienda online.

Simplemente haga clic en el elemento / artículo de su elección para ampliar algunos ajustes. Aquí, haz clic en el campo ‘Clases CSS’.

Todo lo que tienes que hacer es escribir 'highlighted-menu' en el campo. Puedes añadir esta clase CSS a varios elementos del menú y todos ellos aparecerán resaltados.

Add CSS class to menu tab

A continuación, vaya a la pestaña “CSS adicional” del Personalizador de temas.

A continuación, copia y pega el siguiente código CSS:

/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}

Enhorabuena. Ha marcado correctamente un elemento / artículo del menú.

Nota: Puede que tu tema no tenga un campo ‘CSS adicional’ en el Personalizador de temas. Si no es así, comprueba los ajustes del tema para saber cómo añadir CSS personalizado. Si no lo encuentras, puedes ponerte en contacto con el desarrollador o añadirlo mediante WPCode.

Por último, no olvides hacer clic en el botón “Publicar” de la parte superior para guardar tus ajustes.

Add CSS code

Personalizar el elemento destacado del menú

Ahora que ha resaltado el elemento del menú, puede retocar el código CSS para personalizar el elemento del menú como desee.

Por ejemplo, puede cambiar el color de fondo de su elemento / artículo de menú.

Pink highlighted menu item

Simplemente busque el siguiente código en el fragmento de código CSS que acaba de pegar:

background: #FFB6C1

Después de localizarlo, sólo tiene que sustituir el número del código de color rosa por el código hexadecimal de cualquier color de su elección:

background: #7FFFD4;

Arriba está el código hexadecimal de aguamarina.

Blue highlighted menu item

Puede comprobar nuestra guía para añadir fácilmente CSS personalizado para obtener otras ideas sobre cómo personalizar el elemento de menú resaltado.

Cuando esté satisfecho con sus elecciones, sólo tiene que hacer clic en el botón “Publicar” del Personalizador de temas o en “Guardar fragmento de código” en WPCode para guardar los cambios.

Esperamos que este artículo te haya ayudado a aprender cómo resaltar un icono de menú en WordPress. Puede que también quieras comprobar nuestra guía para principiantes sobre cómo dar estilo a los menús de navegación de WordPress o nuestro tutorial sobre cómo añadir iconos de imagen con menús de navegación en WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

1 comentarioDeja una respuesta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.