¿Quiere resaltar un elemento del menú en su sitio de WordPress?
Resaltar un elemento del menú realmente puede ayudarlo a llamar la atención del usuario hacia un área específica de su menú. Esto puede ser excelente si desea resaltar la página Precios o Contáctenos en su sitio web.
En este artículo, le mostraremos cómo resaltar fácilmente un elemento de menú en WordPress usando código CSS.
¿Por qué destacarías un elemento del menú?
Un menú de navegación es una lista de enlaces que apuntan a áreas importantes de su sitio web. Por lo general, se muestran como una barra horizontal en la parte superior de cada página en un sitio web de WordPress.
Este menú de navegación se crea agregando varios elementos de menú. Para más detalles, puede leer nuestro artículo sobre cómo agregar un menú de navegación en WordPress.
Un elemento de menú resaltado puede ser una excelente manera de atraer la atención del usuario hacia su llamada a la acción más destacada. Los ojos de los visitantes se dirigen automáticamente al elemento del menú cuando visitan su sitio web.
Al agregar esta función, puede crear un sitio web fácil de usar y resaltar los elementos importantes del menú que desea que vean sus usuarios.
Dicho esto, veamos cómo puede resaltar un elemento de menú en WordPress usando CSS.
Si está utilizando un tema compatible con bloques, tendrá el editor de sitio completo en lugar del personalizador de temas anterior. También puede resaltar fácilmente un elemento de menú en él.
ir a primero Apariencia » Redactor desde el panel de administración de WordPress. Esto lo llevará al editor completo del sitio.
Aquí, simplemente haga doble clic en el elemento del menú que desea resaltar y luego haga clic en el ícono de ajustes en la parte superior. Esto abrirá inmediatamente el bloque «Configuración» de ese elemento de menú en particular.
Simplemente desplácese hacia abajo en el bloque «Configuración» hasta la pestaña «Avanzado» y haga clic en el ícono de flecha al lado para expandir la pestaña.
Esto abrirá un campo de ‘Clase CSS adicional’ donde solo necesita escribir highlighted-menu en el campo.
Luego haga clic en el botón «Guardar» en la parte superior de la página para guardar los cambios.
Después de eso, debe agregar un poco de CSS a su tema para obtener el efecto de resaltado. Puede corregir el personalizador de tema que falta o puede usar un complemento de fragmento de código para agregar código CSS.
Agregue fragmentos de CSS con WPCode
Para agregar CSS en WordPress, recomendamos usar Código WP porque es la forma más fácil de agregar código personalizado a WordPress.
Primero necesitas instalarlo y activarlo. Complemento WPCode gratuito. Para obtener más instrucciones, consulte nuestra guía sobre cómo instalar un complemento de WordPress.
Después de la activación, navegue hasta Fragmentos de código » Agregar fragmento desde su panel de administración de WordPress. Ahora haga clic en el botón ‘Agregar nuevo’.
Esto lo llevará a la página ‘Agregar fragmento’.
Aquí, pase el mouse sobre la opción «Agregar su código personalizado (nuevo fragmento)» y simplemente haga clic en el botón «Usar fragmento» debajo de él.
Ahora que está en la página «Crear fragmento personalizado», comience eligiendo un nombre y un «Tipo de código» para su fragmento CSS.
Puedes elegir el nombre que quieras.
A continuación, haga clic en el menú desplegable junto a la opción «Tipo de código» a la derecha, luego elija la opción «Fragmento universal».
Luego copie y pegue el siguiente código CSS en la ‘Vista previa del código’.
<style type="text/css">
/* Highlighted menu */
.highlighted-menu
{
background: #d3d3d3;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}
</style>
Asegúrese de incluir las etiquetas de estilo como se muestra en las líneas 1 y 10 a continuación.
Después de pegar el código, vaya a la sección «Insertar» desplazándose hacia abajo.
Simplemente elija el modo ‘Inserción automática’ aquí para que el código pueda ejecutarse automáticamente en todo su sitio web.
Ahora vaya a la parte superior de la página y cambie el interruptor de ‘Inactivo’ a ‘Activo’.
Luego simplemente haga clic en el botón ‘Guardar fragmento’.
Ahora ha resaltado con éxito un elemento de menú en WordPress utilizando un editor de sitio completo.
Así es como se verá su elemento de menú después de agregar el código CSS.
Acceda al personalizador de temas usando un tema de bloque
Para usar el personalizador de temas y usar un tema FSE, simplemente copie y pegue la siguiente URL en su navegador. Asegúrese de reemplazar «example.com» con el nombre de dominio de su propio sitio.
https://example.com/wp-admin/customize.php
Aquí solo necesita hacer clic en la pestaña «CSS adicional».
Ahora expanda el campo «CSS adicional» y copie y pegue el siguiente fragmento de código.
/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}
Después de eso, simplemente haga clic en el botón ‘Publicar’ en la parte superior.
Eso es todo lo que se necesita para resaltar un elemento del menú.
Debería verse algo como esto en su sitio web cuando haya terminado:
Si está utilizando un tema habilitado para no bloquear, probablemente tenga un personalizador de temas habilitado de forma predeterminada. Resaltar un elemento de menú en un personalizador de temas es un proceso bastante simple.
Solo ve a la primera Apariencia » Personalizar en su tablero de WordPress para iniciar el personalizador de temas. Una vez que se abra el personalizador de temas, simplemente haga clic en la pestaña ‘Menús’.
Una vez que esté en la sección «Menús», simplemente haga clic en el ícono de ajustes en la esquina superior derecha para ver las propiedades avanzadas.
Ahora simplemente marque la casilla ‘Clases CSS’.
Luego desplácese hacia abajo hasta la sección «Menús».
Si tiene varios menús en su sitio web, simplemente haga clic en el menú cuyos elementos de menú desea resaltar.
Esto abrirá una nueva pestaña donde puede seleccionar el elemento del menú que desea resaltar. Podría ser «Primeros pasos» como en nuestro ejemplo, o podría ser la página de su formulario de contacto o el enlace a su tienda en línea.
Simplemente haga clic en el elemento del menú de su elección para expandirlo y mostrar algunas opciones. Haz clic en el campo «Clases CSS».
Todo lo que tienes que hacer es escribir 'highlighted-menu' en el campo. Puede agregar esta clase CSS a varios elementos del menú y todos se resaltarán.
A continuación, vaya a la pestaña «CSS adicional» en el personalizador de temas.
Ahora simplemente copie y pegue el siguiente código CSS.
/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}
¡Felicidades! Has marcado con éxito un elemento del menú.
Observación: Es posible que su tema no tenga un campo ‘CSS adicional’ en el personalizador de temas. De lo contrario, verifique la configuración del tema para averiguar cómo agregar CSS personalizado. Si no puede encontrarlo, puede ponerse en contacto con el desarrollador o agregarlo usando WPCode.
Ahora que ha resaltado el elemento del menú, puede modificar el código CSS para personalizar el elemento del menú a su gusto.
Por ejemplo, puede cambiar el color de fondo de su elemento de menú.
Simplemente busque el siguiente código en el fragmento de CSS que acaba de pegar.
Una vez que lo haya encontrado, simplemente puede reemplazar el número de código de color rosa con el código hexadecimal de cualquier color que desee:
Arriba está el código hexadecimal para aguamarina.
Puede consultar nuestra guía para agregar fácilmente CSS personalizado para obtener otras ideas sobre cómo personalizar el elemento de menú resaltado.
Una vez que esté satisfecho con sus elecciones, simplemente haga clic en el botón ‘Publicar’ en el personalizador de temas o ‘Guardar fragmento’ en WPCode para guardar sus cambios.
Esperamos que este artículo le haya ayudado a aprender cómo resaltar un ícono de menú en WordPress. También puede consultar nuestra guía para principiantes sobre cómo diseñar los menús de navegación de WordPress o nuestras selecciones expertas de los complementos de WordPress imprescindibles para hacer crecer su sitio.
Si te ha gustado este artículo, suscríbete a nuestro Canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo y Facebook.