RESUMEN: Cómo añadir un botón a la cabecera de tu WordPress
Hay 3 maneras de añadir un botón a la cabecera de tu WordPress, desde totalmente visual hasta solo con CSS.
- SeedProd – Arrastra un bloque de Botón a la plantilla de tu cabecera en el constructor visual. No se necesita código.
- Método de clase CSS – Asigna una clase CSS a un elemento del menú en Apariencia > Menús y pega una regla CSS corta. Funciona con cualquier tema clásico.
- Editor de Sitio Completo – Añade un bloque de Botón dentro del bloque de Navegación en el editor de sitio integrado de WordPress. No se necesita plugin para temas de bloques.
Cuando intenté por primera vez añadir un botón en mi cabecera de WordPress, quería algo que destacara, una llamada a la acción clara justo donde la gente lo vería primero.
Ya sea que enlaces a una página de registro, un regalo gratuito o un formulario de reserva, un botón en tu menú de WordPress puede guiar a los visitantes exactamente a donde quieres que vayan. En mis pruebas, añadir un botón a una cabecera de WordPress con SeedProd lleva menos de 5 minutos y no requiere tocar los archivos de tu tema.
En este tutorial, te mostraré cómo añadir un botón a tu cabecera de WordPress de 3 maneras diferentes, paso a paso.
¿Por qué añadir un botón al menú de cabecera de tu WordPress?
Los menús de navegación en los sitios web de WordPress suelen ser enlaces de texto que todos se ven similares. Como tales, cada elemento del menú tiene la misma importancia, peso y urgencia.
Si fueras a añadir una URL a un formulario de pedido importante, o a una página de registro, se vería igual que los otros enlaces de tu menú. No destacaría ni parecería lo suficientemente urgente como para que los usuarios hicieran clic primero.
Sin embargo, convertir ese enlace importante en un botón en WordPress lo hará instantáneamente más notable. Un botón en tu cabecera de WordPress mejorará la experiencia de usuario y la interacción de los visitantes con tu sitio web de WordPress.
A pesar de tener bloques de botones para publicaciones y páginas, WordPress no ofrece actualmente botones de menú por defecto. Afortunadamente, hay algunas maneras de añadir botones a tu menú, y son relativamente fáciles de implementar.
Teniendo esto en cuenta, veamos 3 maneras de añadir un botón a tu menú de cabecera de WordPress.
SeedProd es la mejor opción si quieres control visual y planeas personalizar el diseño completo de tu cabecera. El método de clase CSS funciona con cualquier tema clásico y tarda unos 3 minutos si te sientes cómodo pegando CSS. El Editor de Sitio Completo de WordPress está integrado en los temas de bloques y no requiere plugins adicionales.
¿Cómo añadir un botón a la cabecera de WordPress con SeedProd?
Con SeedProd, puedes a ilde{adir un bot ilde{o}n de llamada a la acci ilde{o}n con estilo a tu encabezado de WordPress en unos 5 minutos arrastrando un bloque de Bot ilde{o}n a tu plantilla de encabezado, sin necesidad de c ilde{o}digo.
Recomendamos este m ilde{e}todo primero porque ofrece las m ilde{a}s opciones de personalizaci ilde{o}n y te permite construir tu men ilde{u} de encabezado de WordPress visualmente con arrastrar y soltar.
SeedProd es uno de los mejores creadores de p ilde{a}ginas de destino y sitios web para WordPress. Te permite crear temas de WordPress flexibles y optimizados para SEO, p ilde{a}ginas de destino y sitios web completos sin necesidad de contratar a un desarrollador ni a ilde{adir c ilde{o}digos cortos a tu sitio.
El constructor de arrastrar y soltar de SeedProd te permite crear un encabezado, pie de p ilde{a}gina o barra lateral personalizados, y a ilde{adir un bot ilde{o}n donde tenga sentido.
Tambi ilde{e}n puedes a ilde{adir temporizadores de cuenta atr ilde{a}s, formularios de suscripci ilde{o}n, galer ilde{i}as y deslizadores de antes y despu ilde{e}s al mismo dise ilde{o} de encabezado.
As ilde{i} que sigue los pasos a continuaci ilde{o}n para a ilde{adir botones a tu encabezado de WordPress con SeedProd.
Paso 1. Instalar y Activar SeedProd
En primer lugar, necesitar ilde{a}s obtener una copia del plugin SeedProd y descargarlo a tu ordenador. Usaremos SeedProd Pro para este tutorial porque incluye la funci ilde{o}n Theme Builder.
En el panel de tu cuenta, ver ilde{a}s un bot ilde{o}n de descarga grande para guardar el archivo .zip del plugin. Tambi ilde{e}n es una buena idea copiar tu clave de licencia en esta etapa porque la necesitar ilde{a}s en breve.
Despu ilde{e}s de descargar el plugin, dir ilde{i}gete a tu panel de WordPress y sube los archivos del plugin. Siempre puedes seguir esta gu ilde{i}a sobre c ilde{o}mo instalar y activar un plugin de WordPress si necesitas ayuda.
Una vez que lo hayas hecho, ve a la p ilde{a}gina SeedProd » Ajustes y pega tu clave de licencia.
A continuaci ilde{o}n, haz clic en el bot ilde{o}n Verificar clave para desbloquear tus funciones Pro.
Paso 2. Elegir una Plantilla Prediseñada
Con tu clave de licencia activa, ahora puedes decidir qu ilde{e} dise ilde{o} quieres crear con SeedProd. Hay 2 enfoques diferentes que puedes tomar, que son los siguientes:
- Tema de WordPress: crea un tema de WordPress personalizado para reemplazar el dise ilde{o} actual de tu sitio web con una plantilla de encabezado personalizada. (sin necesidad de c ilde{o}digo).
- P ilde{a}gina de destino: crea una ilde{u}nica p ilde{a}gina y a ilde{adir un encabezado personalizado solo a esa p ilde{a}gina, manteniendo tu tema existente.
Para esta gu ilde{i}a, te explicaremos la opci ilde{o}n 1 porque reemplazar ilde{a} el men ilde{u} de navegaci ilde{o}n en todo tu sitio web. Pero si prefieres la opci ilde{o}n 2, puedes seguir esta gu ilde{i}a para crear una p ilde{a}gina de destino en WordPress, y luego volver a este tutorial desde el paso 4.
Dado que elegimos la opci ilde{o}n de tema de WordPress, deber ilde{a}s ir a SeedProd » Theme Builder y hacer clic en el bot ilde{o}n Temas.
Esto mostrar ilde{a} una biblioteca de kits de sitios web pre-dise ilde{n}ados que puedes importar con un solo clic.
Puedes filtrar las plantillas por WooCommerce, popularidad, de m ilde{a}s nuevo a m ilde{a}s antiguo, y viceversa. Cuando hayas encontrado un tema que te guste, haz clic en el icono de la marca para lanzarlo.
Una vez que tu tema haya terminado de importarse, ver ilde{a}s autom ilde{a}ticamente una p ilde{a}gina como esta:
Incluye una lista de las plantillas que componen tu tema de WordPress, y puedes editar cada una con el constructor visual de arrastrar y soltar de SeedProd.
Paso 3. Personalizar tu Cabecera
Como quieres añadir un botón a tu encabezado, vamos a editar la plantilla Encabezado. Desplázate hacia abajo hasta encontrarla en la lista y haz clic en el enlace Editar diseño.
Cuando abras la plantilla del encabezado, verás un diseño de 2 columnas como este:
Como puedes ver, hay varios bloques de WordPress a la izquierda y una vista previa de tu diseño a la derecha. Podrás hacer clic en cualquier lugar de tu diseño para cambiar el contenido y arrastrar bloques desde el panel izquierdo para añadir más funcionalidades a tu página.
Cuando mires el diseño actual del encabezado, verás una columna con un bloque de Imagen y una columna con el bloque de Menú de WordPress.
Para añadir un botón al encabezado, necesitarás añadir una tercera columna, lo cual te mostraremos cómo hacer ahora.
Primero, pasa el ratón por encima de tu sección de encabezado hasta que tenga un contorno morado, luego haz clic en el icono Duplicar sección.
Al hacer eso, se añadirá una copia de tu encabezado debajo de la primera.
A continuación, pasa el ratón por encima de la columna en tu primera sección hasta que tenga un contorno azul, luego haz clic en el icono Papelera para eliminarla.
Ahora tendrás una sección vacía con la opción de elegir un nuevo diseño de columnas. Haz clic en el diseño de 3 columnas.
Ahora puedes pasar el ratón por encima del icono Mover en tu sección duplicada y mover los bloques de imagen y menú de navegación a tu nueva sección.
Esto te dejará una columna vacía donde podrás añadir un bloque de Botón.
Antes de pasar al siguiente paso, asegúrate de eliminar la sección de encabezado antigua haciendo clic en el icono Papelera.
Ahora estás listo para crear un botón para tu menú de encabezado de WordPress.
Paso 4. Añadir un Botón a tu Cabecera
Añadir un botón a tu encabezado con SeedProd es fácil. Encuentra el bloque Botón en la barra lateral izquierda y arrástralo a la columna vacía en tu área de encabezado.
Una vez que el botón esté en su lugar, puedes hacer clic en él para personalizar el texto del enlace del botón, el subtexto del botón, el enlace, la alineación en móvil y escritorio, y el tamaño del botón.
Incluso puedes añadir iconos personalizados antes y después del texto del botón eligiendo de la biblioteca de iconos de Font Awesome.
Para aún más opciones de personalización, haz clic en la pestaña de configuración Avanzado. Aquí es donde puedes editar el color y la tipografía del texto, cambiar el color de fondo, añadir una sombra de caja, radio del borde, espaciado, clases CSS personalizadas e incluso ocultar el botón en dispositivos específicos.
Además, la opción de Animación es una forma fantástica de hacer que tu botón destaque más.
En la pestaña Avanzado, el interruptor Ocultar en móvil controla si el botón aparece en tu navegación móvil. Por defecto, se muestra en todos los dispositivos.
Cuando estés satisfecho con el aspecto de tu botón de menú, asegúrate de hacer clic en el botón Guardar.
Ahora puedes continuar personalizando el resto de tu tema de WordPress. Por ejemplo, puedes editar la página de tu blog, las plantillas de página individual y la barra lateral o cambiar el pie de página de tu WordPress.
Paso 5. Publicar tus Cambios
Después de personalizar el resto de tu sitio web, el último paso es hacer que esos cambios se publiquen. Para ello, primero vuelve a la página SeedProd » Theme Builder.
A continuación, busca el interruptor Enable SeedProd Theme en la esquina superior derecha y actívalo en la posición Sí.
Ahora puedes previsualizar tu tema de WordPress y ver tu botón de encabezado en acción.
Cómo añadir un botón a la cabecera de WordPress usando una clase CSS
El método de la clase CSS funciona con cualquier tema clásico de WordPress y no requiere un plugin. He utilizado este enfoque cuando no se necesitaba un constructor visual completo.
Primero, ve a Apariencia » Menús en tu panel de WordPress. Selecciona el menú que deseas editar en el menú desplegable en la parte superior de la pantalla.
A continuación, haz clic en la pestaña Opciones de pantalla en la esquina superior derecha de la pantalla. Marca la casilla junto a Clases CSS. Esto añade un nuevo campo a cada elemento del menú.
Ahora expande el elemento del menú que deseas estilizar como un botón. Escribe un nombre de clase en el campo Clases CSS. Yo uso header-button, pero cualquier nombre funciona siempre que no tenga espacios. Haz clic en Guardar menú cuando hayas terminado.
Ahora necesitas añadir CSS que convierta esa clase en un botón. La forma más fácil es a través de WPCode, que te permite añadir fragmentos de código sin editar directamente los archivos de tu tema. Ve a Fragmentos de código » Añadir fragmento, elige CSS como tipo de fragmento y pega esto:
li.header-button > a {
display: inline-block !important;
background-color: #0073aa !important;
color: #ffffff !important;
padding: 12px 28px !important;
border-radius: 4px !important;
text-decoration: none !important;
line-height: normal !important;
}
li.header-button > a:hover {
background-color: #005177 !important;
color: #ffffff !important;
}
Guarda y activa el fragmento. Tu elemento de menú se mostrará ahora como un botón estilizado en el encabezado de tu WordPress.
Cambia background-color para que coincida con los colores de tu marca. Ajusta los valores de padding para controlar el tamaño del botón. Si prefieres no instalar WPCode, el mismo CSS funciona en Apariencia » Personalizar » CSS adicional.
Ten en cuenta que este enfoque solo funciona con temas clásicos de WordPress que utilizan Apariencia » Menús. Si tu sitio utiliza un tema de bloques con el Editor de Sitio Completo, utiliza el método de la siguiente sección.
¿Cómo añadir un botón a la cabecera de WordPress sin un plugin?
Si tu tema de WordPress utiliza el Editor de Sitio Completo, puedes añadir un botón de encabezado sin ningún plugin. Este método solo funciona con temas de bloques.
Primero, ve a Apariencia » Editor desde tu panel de WordPress. Esto abrirá el Editor de Sitio Completo de WordPress, que utiliza bloques para construir tu sitio web.
A continuación, abre la barra lateral, haz clic en el encabezado Partes de plantilla y selecciona la opción Encabezado en el lado derecho.
Una vez que lo hayas hecho, verás una representación visual de tu encabezado de WordPress. Dentro del editor, haz clic en el encabezado Navegación.
Verás la configuración del diseño de navegación en la barra lateral derecha, pero primero, haz clic en el icono (+) para empezar a añadir los elementos de tu menú.
Puedes hacer clic y buscar cualquier página para añadirla a tu menú en WordPress.
Con los enlaces de tu menú en su lugar, haz clic de nuevo en el icono (+) para a tilde;adir un nuevo bloque de WordPress. Esta vez, busca el bloque Botón y a tilde;adelo a tu encabezado.
Ahora introduce el texto del bot ilde;n y haz clic en el icono del enlace para a tilde;adir el enlace en el que quieres que hagan clic los visitantes. En nuestro caso, a tilde;adiremos un enlace a nuestro informe gratuito.
En las opciones de pantalla del bloque de la derecha, puedes personalizar el bot ilde;n de tu men ilde; de encabezado cambiando los siguientes ajustes:
- Estilo de bot ilde;n relleno o contorneado
- Porcentaje de anchura
- Color del texto y del fondo
- Tama tilde;o de la tipograf ilde;a
- Relleno
- Radio del borde
- CSS adicional y nombre de clase
- Y m ilde;s.
El bot ilde;n aparecer ilde; en tu encabezado tanto en escritorio como en m ilde;vil. Dentro del bloque de navegaci ilde;n, tambi ilde;n puedes controlar c ilde;mo se muestra cuando el men ilde; se colapsa en pantallas m ilde;s peque tilde;as.
Cuando hayas terminado de personalizar tu bot ilde;n, haz clic en el bot ilde;n de men ilde; Guardar en la esquina superior derecha.
Ahora cualquier p ilde;gina que utilice la parte de plantilla de Encabezado mostrar ilde; tu bot ilde;n de men ilde; y los enlaces de navegaci ilde;n.
Si est ilde;s utilizando un tema que no incluye funcionalidad para el editor del sitio, puedes seguir esta gu ilde;a sobre c ilde;mo a tilde;adir un bot ilde;n a tu men ilde; utilizando el personalizador de men ilde;s anterior.
Personalmente, he descubierto que el constructor de arrastrar y soltar de SeedProd es la forma m ilde;s sencilla de hacerlo, especialmente si quieres m ilde;s control sin tocar el c ilde;digo.
Preguntas Frecuentes
"
Tienes tres opciones: usar SeedProd para arrastrar un bloque de Bot ilde;n a tu plantilla de encabezado visualmente, usar el Editor Completo del Sitio de WordPress para a tilde;adir un bloque de Bot ilde;n dentro de tu bloque de Navegaci ilde;n si tienes un tema de bloques, o asignar una clase CSS a un elemento del men ilde; y darle estilo como un bot ilde;n con una regla CSS corta. SeedProd es la opci ilde;n m ilde;s r ilde;pida si quieres control de estilo sin escribir c ilde;digo.
"
En SeedProd, abre los ajustes del bloque Bot ilde;n y ve a la pesta tilde;a Avanzado. El interruptor Ocultar en m ilde;vil est ilde; desactivado por defecto, lo que significa que tu bot ilde;n se muestra en todos los dispositivos. En el Editor Completo del Sitio de WordPress, el bot ilde;n hereda el comportamiento responsivo del bloque de Navegaci ilde;n, por lo que se colapsa con tu men ilde; en m ilde;vil a menos que lo configures por separado.
"
S ilde;. Con SeedProd, puedes arrastrar m ilde;ltiples bloques de Bot ilde;n a tu plantilla de encabezado y dar estilo a cada uno de forma diferente. En el Editor Completo del Sitio, puedes a tilde;adir m ilde;s de un bloque de Bot ilde;n dentro del bloque de Navegaci ilde;n. Para el m ilde;todo de clase CSS, asigna nombres de clase diferentes a diferentes elementos del men ilde; y da estilo a cada clase por separado.
"
Depende del m ilde;todo. SeedProd reemplaza completamente el encabezado de tu tema, por lo que funciona independientemente de tu tema actual. El m ilde;todo de clase CSS funciona con temas cl ilde;sicos que usan Apariencia
Espero que hayas encontrado útil este tutorial sobre cómo agregar un botón en los menús de encabezado de WordPress. También te pueden interesar los siguientes tutoriales para personalizar tu sitio web de WordPress:
- Cómo agregar horarios comerciales a WordPress
- Cómo crear fácilmente un Lightbox de imágenes en WordPress
- Cómo atenuar una imagen de fondo en WordPress sin CSS
¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.
