Cómo agregar botones al menú de encabezado de WordPress
¿Desea agregar un botón a su menú de encabezado de WordPress?
Agregar un botón al menú de navegación del encabezado le permite crear una llamada a la acción más visible. Ayuda a sus visitantes a tomar medidas para obtener más clics en sus páginas más importantes y crear una mejor experiencia de usuario.
En este artículo, le mostraremos cómo agregar fácilmente botones a su menú de encabezado de WordPress.
¿Por qué agregar un botón al 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.
¿Qué sucede si desea agregar un enlace a un pedido en línea, un enlace a la página de inicio de sesión o registro, o un enlace de comprar ahora? Estas importantes llamadas a la acción se ven como el resto de los enlaces en el menú del encabezado.
Cambiar enlaces importantes en los menús de navegación de WordPress a botones los hará más notorios. Esto ayuda a los usuarios a encontrarlos fácilmente, aumentando su participación y experiencia en su sitio.
De forma predeterminada, WordPress tiene la opción de agregar botones en las publicaciones y páginas de WordPress usando bloques de botones. Sin embargo, no tiene una opción integrada para agregar botones al menú de navegación.
Afortunadamente, existe un truco fácil para convertir cualquier enlace en el menú de navegación de WordPress en un botón.
Dicho esto, veamos cómo agregar botones a su menú de encabezado de WordPress sin instalar un complemento.
videotutorial
Suscríbete a WPBeginner
Si prefiere instrucciones escritas, siga leyendo.
Agregue un botón a su 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.
solo ve a Apariencia » Menú páginas en el tablero de WordPress y agregue enlaces al menú de navegación.
Después de eso, debe hacer clic en el botón “Opciones de pantalla” en la parte superior. Esto abrirá un menú rápido con muchas opciones. Debe marcar la casilla junto a la opción Clases de CSS.
Ahora, desplácese hacia abajo hasta su menú y haga clic para expandir el elemento del menú que desea convertir en un botón.
Notará una nueva opción de clase CSS en la configuración del elemento del menú. Aquí, debe ingresar un nombre de clase. Puede nombrar esta clase de CSS como desee, pero para los fines de este tutorial, lo llamaremos botón de menú.
Después de ingresar un 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ñarlo agregando nuestro propio código CSS personalizado.
solo ve a Apariencia » Personalizar Inicie 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 temas en la columna izquierda.
Ahora debe hacer clic en la pestaña CSS adicional para expandirla. Esto mostrará un cuadro donde puede agregar un 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;
}
Después de agregar el código CSS, el personalizador de temas 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 tendrán efecto en su sitio web hasta que haga clic en el botón “Publicar”.
Usa CSS como quieras. Puede cambiar el color de fondo, vincular el color del texto, agregar bordes y más.
No olvide hacer clic en el botón “Publicar” para guardar los cambios.
¿No es fácil?
No solo puede usar este truco 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 botones a su menú de encabezado de WordPress. ¿Quiere saber cómo interactúan los usuarios con sus botones? Consulte nuestra guía sobre cómo realizar un seguimiento de las conversiones en WordPress. A continuación, consulte nuestra lista del mejor software de chat en vivo para pequeñas empresas.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para videos tutoriales de WordPress.También puedes encontrarnos en Gorjeo y Facebook.
Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.
