¿Quieres añadir un botón en el menú de cabecera de WordPress?
Al agregar un botón a su menú de navegación principal, puede hacer que la llamada a la acción de su sitio se destaque y atraer más tráfico a sus páginas más importantes. También es una manera fácil de agregar el mismo botón a cada página y publicación.
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, donde todo se ve igual y nada se destaca realmente.
Sin embargo, algunos enlaces son más importantes que otros. Por ejemplo, es posible que desee agregar un enlace a un formulario de pedido en línea o una página de registro de su sitio de membresía de WordPress.
De forma predeterminada, estos enlaces importantes tienen el mismo aspecto que el resto del menú del encabezado.
Puede hacer que estos enlaces sean más llamativos convirtiéndolos en botones. Esto puede generar más clics y conversiones.
De forma predeterminada, puede agregar botones a las publicaciones y páginas de WordPress usando el bloque Botones, pero no puede agregarlos a los menús de navegación.
Dicho esto, veamos cómo agregar un botón a su menú de encabezado de WordPress.
Tutoriales en vídeo
Si prefiere instrucciones escritas, siga leyendo.
Agregar un botón en el menú de encabezado de WordPress
Para comenzar, debe agregar el enlace que desea convertir en un botón.
solo ve a Apariencia » Menús página en su tablero de WordPress y agregue el enlace a su menú de navegación. Para obtener instrucciones detalladas, consulte nuestra guía sobre cómo agregar un menú de navegación en WordPress.
A continuación, debe hacer clic en el botón Opciones de pantalla en la parte superior de la pantalla.
Esto revelará un panel con muchas opciones nuevas. Simplemente marque la casilla junto a “Clases de CSS”.
Ahora, haga clic para expandir el elemento del menú que desea convertir en un botón.
Notará una nueva opción de clase CSS donde puede escribir un nombre de clase. Puedes llamar a la clase CSS como quieras, pero en esta guía usaremos menu-button.
Después de escribir un nombre, haga clic en el botón “Guardar menú” para almacenar sus cambios.
Ahora que ha agregado una clase CSS personalizada a su elemento de menú, puede cambiar su apariencia usando un código CSS personalizado. Puede agregar este código a través del personalizador de WordPress incorporado o usando un complemento de fragmentos.
Agregue un botón en el menú de encabezado de WordPress usando WPCode (recomendado)
La mejor manera de agregar código personalizado a WordPress es usar WPCode. WPCode es el mejor complemento de fragmentos que le permite agregar CSS, PHP, HTML y más personalizados.
Como no está editando los archivos del tema directamente, puede evitar muchos errores comunes de WordPress. También puede actualizar su tema o cambiar a un tema completamente diferente sin perder su código personalizado.
Si quieres eliminar el botón en cualquier momento, puedes desactivarlo con un solo clic.
Primero, deberá instalar y activar el complemento gratuito WPCode. Para obtener más información, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Una vez activado el complemento, vaya a Fragmentos de código » Agregar fragmento.
Aquí verá todos los fragmentos de WPCode listos para usar que puede agregar a su sitio. Estos incluyen un fragmento que le permite deshabilitar los comentarios por completo, cargar tipos de archivos que WordPress generalmente no admite, deshabilitar las páginas de archivos adjuntos y mucho más.
En la siguiente pantalla, pase el cursor sobre la opción “Agregar su propio código personalizado (nuevo fragmento)” y haga clic en el botón “Usar fragmento” cuando aparezca.
En la siguiente pantalla, debe escribir un título para el fragmento de código. Esto es solo para referencia, por lo que puede usar lo que quiera.
A continuación, abra el menú desplegable “Tipo de código” y elija “Fragmento de CSS”.
Una vez hecho esto, está listo para pegar un fragmento de código CSS en el editor de WPCode:
.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;Al agregar el fragmento de código anterior, asegúrese de reemplazar menu-button con su nombre de clase CSS.
El fragmento de capa de arriba crea un botón naranja con un efecto de sombra, como puede ver en la siguiente imagen.
Siéntase libre de jugar con el fragmento de CSS para ver qué efectos diferentes puede crear. Por ejemplo, puede cambiar el color de fondo, vincular el color del texto, agregar un borde y más.
Si desea utilizar un color diferente, debe conocer el código hexadecimal de ese color. Si no está seguro de qué códigos usar, puede usar un recurso como Color Hex.
Cuando esté satisfecho con el código, haga clic en el botón “Inactivo” para que cambie a “Activo”, luego haga clic en el botón “Guardar fragmento”.
Ahora, si visita su sitio web de WordPress, verá el nuevo botón de menú de encabezado en acción.
Agregue un botón a su menú de encabezado de WordPress usando el Personalizador
Si no desea utilizar un complemento, puede agregar código mediante el personalizador integrado.
solo ve a Apariencia » Personalizar, y verá una vista previa de su sitio a la derecha, así como una serie de configuraciones de tema en la columna izquierda.
Para comenzar, haga clic en la opción “CSS adicional”.
Ahora verá un cuadro donde puede agregar un código CSS personalizado.
Nuevamente, puede usar el fragmento de código anterior como punto de partida.
Cuando esté satisfecho con el aspecto del botón, haga clic en “Publicar” para aplicar los cambios.
Esperamos que este artículo le haya ayudado a aprender cómo agregar un botón en el menú de encabezado en WordPress. También puede consultar nuestra guía sobre cómo crear una página de destino con WordPress y los mejores servicios de marketing por correo electrónico para pequeñas empresas.
Si disfrutó de este artículo, suscríbase a nuestro canal de YouTube para videos tutoriales de WordPress. También puedes encontrarnos en chirrido y Facebook.
