Adding Buttons In Wordpress Navigation Menu

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

¿Quiere agregar un botón en 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. Puede generar 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 el mismo peso.

Menú De Navegación De Encabezado Con Enlaces Simples
¿Qué pasa si desea agregar un enlace a un formulario de pedido en línea, un enlace a una página de inicio de sesión o registro, o un enlace Cómpralo ahora? Estas importantes llamadas a la acción se verán como el resto de los enlaces del menú del encabezado. Cambiar enlaces importantes en su menú de navegación de WordPress a 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 a los menús de navegación. Afortunadamente, existe un truco sencillo para convertir cualquier enlace en el menú de navegación de WordPress en un botón. Dicho esto, veamos cómo agregar un botón al menú de encabezado de WordPress sin instalar un complemento.

Agregue 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 al Apariencia »Menús página en su panel de WordPress y agregue el enlace a su menú de navegación.
Agregue 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 De Css En Las 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ás 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 como quiera, pero para los propósitos 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ñarla agregando nuestro propio código CSS personalizado. Solo 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 {color de fondo: # eb5e28; borde: 1px; radio del borde: 3px; -webkit-box-shadow: 1px 1px 0px 0px # 2f2f2f; -moz-box-shadow: 1px 1px 0px 0px # 2f2f2f; caja de sombra: 1px 1px 0px 0px # 2f2f2f; }. botón de menú a, botón de menú a: desplazarse, botón de menú a: activo {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.
Descripción General Del Botón De Menú
Siéntete libre de jugar con CSS tanto como quieras. Puede cambiar el color de fondo, el color del texto del enlace, agregar un borde, etc. No olvide hacer clic en el botón Publicar para guardar sus cambios. ¿No fue 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 a 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 para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.

Leave a Reply