¿Quieres agregar un botón en tu menú de encabezado de WordPress?

Agregar un botón en el menú de navegación del encabezado le permite crear una llamada a la acción más notable. Puede obtener más clics en sus páginas más importantes y crear una mejor experiencia de usuario al ayudar a sus visitantes a tomar medidas.

En este artículo, le mostraremos cómo agregar fácilmente un botón a su menú de encabezado de WordPress.

¿Por qué agregar un botón en el menú de encabezado de WordPress?

Los menús de navegación de WordPress suelen ser enlaces de texto sin formato que tienen el mismo aspecto. En términos de diseño, todos los enlaces tienen la misma importancia y peso.

Menú de navegación de encabezado con enlaces simples

¿Qué sucede si desea agregar un enlace a un formulario de pedido en línea, un enlace de página de inicio de sesión o registro o un enlace de comprar ahora? Estas importantes llamadas a la acción se verán como el resto de los enlaces en el menú del encabezado.

Cambiar enlaces importantes en su menú de navegación de WordPress en botones los hará más visibles. Esto ayuda a los usuarios a encontrarlos fácilmente, mejorando su participación y experiencia en su sitio web.

Menú de navegación con un botón

De forma predeterminada, WordPress tiene opciones para agregar botones en publicaciones y páginas de WordPress usando el bloque Botones. Sin embargo, no tiene una opción incorporada para agregar botones en los menús de navegación.

Afortunadamente, existe un truco fácil para convertir cualquier enlace en su menú de navegación de WordPress en un botón.

Dicho esto, echemos un vistazo a cómo agregar un botón en el menú de encabezado de WordPress sin instalar un plugin.

Agregar un botón en el menú de encabezado de WordPress

Primero, debe agregar el enlace que desea convertir en un botón en su menú de navegación de WordPress.

Simplemente ve al Apariencia »Menús página en su panel de WordPress y agregue el enlace a su menú de navegación.

Agregar un enlace al menú de WordPress

Después de eso, debe hacer clic en el botón Opciones de pantalla en la parte superior. Esto revelará un menú desplegable con un montón de opciones. Debe marcar la casilla junto a la opción ‘Clases CSS’.

Mostrar clases CSS en Opciones de pantalla

Ahora, desplácese hacia abajo hasta su menú y haga clic para expandir el elemento del menú que desea convertir en un botón.

Agregar una clase CSS personalizada a un enlace

Notará una nueva opción de clase CSS en la configuración del elemento del menú. Aquí, debe ingresar un nombre de clase. Puede llamar a esta clase CSS con el nombre único que desee, pero por el bien de este tutorial lo llamaremos botón de menú.

Después de ingresar un nombre, haga clic en el botón ‘Guardar menú’ para almacenar sus cambios.

Ahora que hemos agregado nuestra propia clase CSS personalizada al elemento del menú, podemos diseñarla agregando nuestro propio código CSS personalizado.

Simplemente ve a Apariencia »Personalizar para iniciar el personalizador de temas de WordPress.

Ahora verá una vista previa en vivo de su sitio web a la derecha y un montón de configuraciones de tema en la columna de la izquierda.

Opción CSS adicional en el personalizador de temas de WordPress

Ahora debe hacer clic en la pestaña CSS adicional para expandirla. Esto le mostrará un cuadro donde puede agregar su código CSS personalizado.

Aquí, puede copiar y pegar el siguiente código CSS como punto de partida.

.menu-button { 
background-color:#eb5e28;
border:1px;
border-radius:3px;
-webkit-box-shadow:1px 1px 0px 0px #2f2f2f;
-moz-box-shadow:1px 1px 0px 0px #2f2f2f;
box-shadow:1px 1px 0px 0px #2f2f2f;
}
.menu-button a,  .menu-button a:hover, .menu-button a:active { 
color:#fff !important;
}

Tan pronto como agregue el código CSS, el personalizador de temas lo aplicará automáticamente a la vista previa de su sitio web y podrá ver que los cambios surtan efecto.

No se preocupe, los cambios no estarán disponibles en su sitio web hasta que haga clic en el botón Publicar.

Vista previa del botón de menú

Siéntete libre de jugar con el CSS tanto como quieras. Puede cambiar el color de fondo, el color del texto del enlace, agregar un borde y más.

No olvide hacer clic en el botón Publicar para guardar sus cambios.

¿No fue tan fácil?

Puede usar este truco no solo para agregar botones a su menú de encabezado, sino que también puede usarlo para resaltar cualquier enlace en su menú de navegación de WordPress.

Esperamos que este artículo le haya ayudado a aprender cómo agregar un botón en su menú de encabezado de WordPress. ¿Quiere ver cómo interactúan los usuarios con sus botones? Consulte nuestra guía sobre cómo realizar un seguimiento de la tasa de conversión en WordPress. A continuación, consulte nuestra lista del mejor software de chat en vivo para pequeñas empresas.

Si le gustó este artículo, suscríbase a nuestro Canal de Youtube . También puedes encontrarnos en Twitter y Facebook.

Cómo agregar un botón en el menú de encabezado de WordPress .

Deja una respuesta

Tu dirección de correo electrónico no será publicada.