Cómo resaltar un elemento de menú en WordPress (2 métodos)

¿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 que su página de precios o contáctenos se destaque 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é deberías resaltar 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 presentan 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 obtener más información, consulte nuestro artículo sobre cómo agregar un menú de navegación en WordPress.

Un elemento de menú destacado puede ser una excelente manera de llamar la atención del usuario sobre su llamado a la acción más importante. 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 sus usuarios revisen.

Veamos cómo marcar un elemento de menú en WordPress usando CSS.

Si está utilizando un tema bloqueable, 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 al primero Apariencia » Redactor desde tu panel de WordPress. Esto lo llevará al editor completo del sitio.

Desde 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 de Configuración de ese elemento de menú en particular.

Simplemente desplácese hacia abajo hasta la pestaña Avanzado en el bloque Configuración y haga clic en el ícono de flecha al lado para expandir la pestaña.

Esto abrirá un cuadro de "Clase CSS adicional" donde solo necesita escribir highlighted-menu en el área.

Luego haga clic en el botón "Guardar" en la parte superior de la página para guardar los cambios.

A continuación, debe agregar algo de CSS a su tema para obtener el efecto de resaltado. Puede corregir el personalizador de tema que falta o usar un complemento de fragmento de código para agregar código CSS.

Cómo agregar fragmentos de CSS con WPCode

Para agregar CSS a 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 de instalación del complemento de WordPress.

Una vez activado, vaya a 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 para agregar fragmentos.

Aquí, coloque el cursor sobre la opción 'Agregar código personalizado (nuevo fragmento)' y simplemente haga clic en el botón 'Usar fragmento' a continuación.

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 cualquier nombre.

Luego simplemente haga clic en el menú desplegable a la derecha de la opción "Tipo de código" y luego seleccione la opción "Fragmento universal".

A continuación, copie y pegue el siguiente código CSS en 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 ve en las líneas 1 y 10 a continuación.

Después de pegar el código, vaya a la sección Pegar desplazándose hacia abajo.

Simplemente seleccione el modo de inserción automática aquí para que el código se ejecute 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 etiquetado 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.

Cómo acceder al personalizador de temas de Block Theme

Si desea utilizar el personalizador de temas y el 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 web.

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

Todo lo que necesita hacer aquí es hacer clic en la pestaña "CSS adicional".

Ahora expanda el cuadro CSS adicional y luego simplemente copie y pegue el siguiente fragmento de código.

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

Luego 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ú.

Cuando haya terminado, su sitio web debería verse así:

Si está utilizando un tema no bloqueable, probablemente haya habilitado un personalizador de tema predeterminado. Resaltar un elemento de menú en un personalizador de temas es un proceso bastante simple.

Primero, solo ve a Apariencia » Personalización 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 en la pestaña Menús, simplemente haga clic en el ícono de ajustes en la esquina superior derecha para revelar 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. Esto podría ser "Primeros pasos" como en nuestro ejemplo, o la página del formulario de contacto o el enlace a su tienda en línea.

Simplemente haga clic en un elemento del menú de su elección, que se expande para revelar varias opciones. Haga clic en el cuadro Clases de CSS.

Todo lo que tienes que hacer es escribir 'highlighted-menu' en el área. Puede agregar esta clase css a varios elementos del menú y todos se resaltarán.

Luego solo ve a la pestaña "CSS adicional" en el personalizador de temas.

Ahora solo copie y pegue el siguiente código CSS.

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

¡Felicidades! Ha seleccionado correctamente un elemento del menú.

Nota: 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, debe comunicarse con el desarrollador o agregarlo con WPCode.

Después de marcar el elemento del menú, puede personalizar 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 encuentre, simplemente puede reemplazar el número de código de color rosa con el código hexadecimal de cualquier color de su elección:

Arriba está el código hexadecimal para aguamarina.

Puede agregar fácilmente CSS personalizado en nuestra guía para obtener más ideas sobre cómo personalizar el elemento de menú resaltado.

Una vez que esté satisfecho con su selección, 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 a etiquetar un icono de menú en WordPress. También puede consultar nuestra guía para principiantes sobre el diseño de menús de navegación de WordPress o nuestras selecciones expertas de complementos de WordPress imprescindibles para mejorar su sitio.

Si te ha gustado este artículo, suscríbete al nuestro. canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Closermarketing.es y Facebook.