¿Desea agregar un botón en su 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, a todos los enlaces se les da la misma importancia y peso.
¿Qué sucede si desea agregar un enlace a un formulario de pedido en línea, un enlace de inicio de sesión o página de registro, o un enlace de comprar ahora? Estos importantes llamados a la acción se verán como el resto de los enlaces en el menú de encabezado.
Cambiar enlaces importantes en su menú de navegación de WordPress en botones los hará más notorios. Esto ayuda a los usuarios a encontrarlos fácilmente, mejorando su participación y experiencia en su sitio web.
De forma predeterminada, WordPress tiene opciones para agregar botones en las publicaciones y páginas de WordPress usando el bloque Botones. Sin embargo, no tiene una opción integrada para agregar botones en los menús de navegación.
Afortunadamente, hay 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ú del encabezado de WordPress sin instalar un complemento.
Videotutorial
Si prefiere instrucciones escritas, siga leyendo.
Agregar un botón en 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.
Simplemente ve a la Apariencia » Menús página en su tablero de WordPress y agregue el enlace a su menú de navegación.
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’.
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 de 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 temas en la columna izquierda.
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 cómo se aplican los cambios.
No se preocupe, los cambios no estarán activos en su sitio web hasta que haga clic en el botón Publicar.
Siéntete libre de jugar con el CSS tanto como quieras. Puede cambiar el color de fondo, vincular el color del texto, agregar un borde y más.
No olvide hacer clic en el botón Publicar para guardar los cambios.
¿No fue esto 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 los usuarios interactúan 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.
.