Resaltar un elemento de menú en WordPress puede atraer la atención de sus visitantes a páginas importantes u ofertas especiales. Esto puede ayudar a mejorar la navegación y la participación del usuario.
Ya sea que desee enfatizar una nueva función, una oferta o una actualización esencial, hacer que ciertos elementos del menú destaquen puede aumentar la efectividad de su sitio.
Por ejemplo, hemos resaltado la página de precios en el menú de navegación principal en muchas de nuestras marcas asociadas para atraer la atención de los usuarios. Este enfoque ha animado a más visitantes a explorar los precios de nuestros productos y ha resultado en un aumento de las conversiones.
En este artículo, le mostraremos cómo resaltar fácilmente un elemento de menú en WordPress usando código CSS.
¿Por qué resaltar un elemento de menú en WordPress?
Un menú de navegación es una lista de enlaces que apuntan a áreas importantes de su sitio. Generalmente se presentan como una barra horizontal en la cabecera de cada página de un sitio web de WordPress.
Al resaltar un elemento de menú 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 publicación específica en su blog de WordPress, entonces puede resaltar ese elemento en su menú de navegación. Esto puede aumentar el tráfico en esa página y las ventas.
Dicho esto, veamos cómo puede resaltar un elemento de menú en WordPress usando CSS:
- Método 1: Resaltar un elemento del menú usando el Editor de Sitio Completo
- Método 2: Resaltar un elemento del menú usando un Personalizador de Tema
- Personalizar el resaltado de tu elemento de menú
Método 1: Resaltar un elemento del menú usando el Editor de Sitio Completo
Si estás utilizando un tema habilitado para bloques, entonces tendrás el Editor de Sitio Completo en lugar del antiguo Personalizador de Tema. También puedes resaltar fácilmente un elemento de menú actual en él.
Primero, dirígete a la página Apariencia » Editor desde el panel de administración de WordPress. Esto te llevará al editor de sitio completo.
Aquí, simplemente haz doble clic en el elemento del menú que deseas resaltar y luego haz clic en el ícono de 'Configuración' en la parte superior. Esto abrirá inmediatamente la configuración de ese elemento de menú específico en el panel de bloques.
Ahora, simplemente desplázate hacia abajo hasta la pestaña 'Avanzado' y haz clic en el ícono de flecha junto a ella para expandirla.
Esto abrirá un campo de 'Clase CSS adicional' donde debes escribir highlighted-menu.
A continuación, haz clic en el botón 'Guardar' en la parte superior de la página para almacenar tus cambios.
Después de eso, necesitarás agregar un pequeño fragmento de CSS a tu tema para el efecto de resaltado. Puedes solucionar la falta del Personalizador de Tema, o puedes usar un plugin de fragmentos de código para agregar código CSS.
Cómo agregar fragmentos de CSS usando WPCode
Para agregar 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 agregar código personalizado.
Primero, necesitas instalar y activar el plugin WPCode. Para más instrucciones, consulta 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 más.
Tras la activación, navega a la página Fragmentos de código » + Añadir fragmento desde tu panel de administración de WordPress.
Aquí, pasa el cursor sobre la opción ‘Añadir tu código personalizado (Nuevo fragmento)’ y haz clic en el botón ‘+ Añadir fragmento personalizado’ debajo de ella.
Luego, necesitas seleccionar ‘Fragmento CSS’ como tipo de código de la lista de opciones que aparecen.
Ahora serás dirigido a la página ‘Crear Fragmento Personalizado’, donde puedes comenzar eligiendo un nombre para tu fragmento.
A continuación, copia y pega 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;
}
Así es como debería verse:
Una vez que hayas hecho eso, desplázate hacia abajo hasta la sección ‘Inserción’.
Aquí, simplemente elige el modo ‘Inserción Automática’ para que el código se ejecute automáticamente en todo tu sitio web.
Ahora, ve a la parte superior de la página y cambia el interruptor de ‘Inactivo’ a ‘Activo’.
Luego, simplemente haz clic en el botón ‘Guardar Fragmento’ para almacenar tu configuración.
Ahora has resaltado con éxito un elemento del menú en WordPress utilizando un editor de sitio completo.
Así es como se verá tu elemento de menú después de agregar el código CSS.
Cómo Acceder al Personalizador de Temas Usando un Tema de Bloques
Si deseas usar el Personalizador de Temas y un tema FSE, simplemente copia y pega la siguiente URL en tu navegador. Asegúrate de reemplazar ‘example.com’ con el nombre de dominio de tu propio sitio:
https://example.com/wp-admin/customize.php
Esto abrirá el personalizador de temas para tu tema de bloques, donde deberás expandir la pestaña ‘CSS Adicional’.
Desde aquí, copia y pega el fragmento CSS en el cuadro ‘CSS Adicional’:
/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}
Después de eso, simplemente haz clic en el botón ‘Publicar’ en la parte superior para almacenar tu configuración.
Método 2: Resaltar un elemento del menú usando un Personalizador de Tema
Si estás utilizando un tema de WordPress más antiguo, probablemente tendrás un personalizador de temas habilitado por defecto. Resaltar un elemento del menú en un personalizador de temas es un proceso bastante sencillo.
Primero, simplemente ve a Apariencia » Personalizar en tu panel de WordPress para iniciar el personalizador de temas. Una vez que se abra, simplemente haz clic en la pestaña ‘Menús’ en la barra lateral izquierda.
Desde aquí, haz clic en el ícono de engranaje en la parte superior derecha para mostrar las propiedades avanzadas.
Ahora, procede a marcar la casilla de ‘Clases CSS’.
Después de eso, desplázate hacia abajo hasta la sección ‘Menús’.
Si tienes varios menús de WordPress, simplemente haz clic en el menú con los elementos de menú que deseas resaltar.
Esto abrirá una nueva pestaña donde puedes seleccionar el elemento de menú que deseas resaltar. Podría ser ‘Contáctanos’ como en nuestro ejemplo, o podría ser tu página de precios o el enlace a tu tienda en línea.
Simplemente haz clic en el elemento de menú de tu elección para expandir algunas configuraciones. Aquí, haz clic en el campo ‘Clases CSS’.
Todo lo que tienes que hacer es escribir 'highlighted-menu' en el campo. Puedes agregar esta Clase CSS a varios elementos de menú, y todos se resaltarán.
A continuación, simplemente ve a la pestaña ‘CSS Adicional’ en el personalizador del tema.
Después de eso, copia y pega el siguiente código CSS:
/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}
¡Felicitaciones! Has resaltado exitosamente un elemento de menú.
Nota: Es posible que tu tema no tenga un campo de ‘CSS Adicional’ en el personalizador del tema. Si no es así, revisa la configuración del tema para averiguar cómo agregar CSS personalizado. Si no lo encuentras, podrías querer contactar al desarrollador o agregarlo usando WPCode.
Finalmente, no olvides hacer clic en el botón ‘Publicar’ en la parte superior para guardar tu configuración.
Personalizar el resaltado de tu elemento de menú
Ahora que has resaltado el elemento de menú, puedes ajustar el código CSS para personalizar tu elemento de menú como desees.
Por ejemplo, puedes cambiar el color de fondo de tu elemento de menú.
Simplemente busca el siguiente código en el fragmento CSS que acabas de pegar:
background: #FFB6C1
Después de localizarlo, puedes simplemente reemplazar el número del código de color rosa con el código hexadecimal de cualquier color de tu elección:
background: #7FFFD4;
Arriba está el código hexadecimal para la aguamarina.
Puedes consultar nuestra guía para agregar fácilmente CSS personalizado para otras ideas sobre cómo personalizar el elemento de menú resaltado.
Una vez que estés satisfecho con tus elecciones, simplemente haz clic en el botón 'Publicar' en el personalizador de temas o en 'Guardar fragmento' en WPCode para guardar tus cambios.
Esperamos que este artículo te haya ayudado a aprender cómo resaltar un ícono de menú en WordPress. También puedes consultar nuestra guía para principiantes sobre cómo estilizar menús de navegación de WordPress o nuestro tutorial sobre cómo agregar íconos de imagen con menús de navegación en WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Dennis Muthomi
He usado técnicas similares para llamar la atención sobre páginas importantes. Otro consejo que agregaría es considerar el uso de animaciones CSS para un efecto sutil al pasar el ratón sobre el elemento del menú resaltado o un ligero pulso en el elemento resaltado para hacerlo aún más notorio. Esto puede ser atractivo sin ser demasiado.
¡Gran publicación, por cierto!
Jiří Vaněk
Gracias por el código CSS. Hizo mi búsqueda mucho más fácil. Funciona perfectamente con WPCode.