Cómo agregar un botón al menú de título de WordPress

¿Quiere agregar un botón al menú de inicio de WordPress?

Agregar botones al menú de navegación en el encabezado le permite crear llamadas de acción más visibles. Puede obtener más clics en las páginas más importantes y crear una mejor experiencia de usuario al ayudar a los visitantes a tomar medidas.

En este artículo, le mostraremos cómo agregar botones fácilmente al menú de inicio de WordPress.

¿Por qué agregar botones al menú de título 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, todas las conexiones son igualmente importantes y ponderadas.

Menú de navegación para títulos con enlaces simples

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

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

Menú de navegación de una tecla

De forma predeterminada, WordPress puede optar por utilizar bloques de botones para agregar botones a las publicaciones y páginas de WordPress. Sin embargo, no tiene una opción incorporada para agregar botones al menú de navegación.

Afortunadamente, existe un truco simple para convertir cualquier enlace en el menú de navegación de WordPress en un botón.

Con eso en mente, veamos cómo agregar un botón al menú de título de WordPress sin instalar un complemento.

Video tutorial

Suscríbete a WPBeginner

Si prefiere instrucciones escritas, continúe leyendo.

Agregar un botón al menú de inicio de WordPress

Primero, debe agregar un enlace para convertirlo en un botón en el menú de navegación de WordPress.

Solo vamos Apariencia »Menú Páginas en el panel de WordPress y agregue enlaces a su menú de navegación.

Agregue un enlace al menú de WordPress

Luego, debe hacer clic en el botón "Opciones de visualización" en la parte superior. Esto mostrará un menú desplegable con una gran cantidad de opciones. Debe marcar la casilla junto a "Clase CSS".

Mostrar clases de CSS en las opciones de visualización

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

Agregue una clase CSS personalizada al enlace

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

Después de ingresar el nombre, haga clic en el botón "Guardar menú" para guardar los cambios.

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

Solo vamos Apariencia »Personalizado Inicie la herramienta de personalización de temas de WordPress.

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

Opciones de CSS adicionales en la herramienta de personalización de temas de WordPress

Ahora debe hacer clic en la pestaña CSS avanzado para expandirla. Esto mostrará un campo donde puede agregar 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;
}

Una vez que haya agregado el código CSS, la herramienta de personalización del tema lo aplicará automáticamente a la vista previa de su sitio web y podrá ver cómo se aplican los cambios.

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

Botones del menú de vista previa

Siéntase libre de usar cualquier CSS que desee. Puede cambiar el color de fondo, el color del texto del enlace, agregar bordes y más.

Asegúrese de hacer clic en el botón "Publicar" para guardar los cambios.

¿No es fácil?

No solo puede usar esta técnica para agregar botones al menú de inicio, sino que también puede usarla para resaltar cualquier enlace en el menú de navegación de WordPress.

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

Si le gusta este artículo, suscríbase a nuestro canal de tutoriales en vídeo de YouTube para WordPress. También puede encontrarnos en Twitter y Facebook.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

https://cdn.megakontraktor.co.id/

Situs Bandar

Situs Togel Terpercaya

Togel Online Hadiah 4D 10 Juta

Bandar Togel

Togel Online