Últimas noticias de SeedProd

Tutoriales, consejos y recursos de WordPress para hacer crecer tu negocio

cómo añadir un botón en la cabecera de WordPress

Cómo añadir fácilmente un botón a la cabecera de WordPress 

Escrito por: avatar de autor Stacey Corrin
avatar de autor Stacey Corrin
Stacey lleva más de 10 años escribiendo sobre WordPress y marketing digital, y mucho más tiempo sobre otros temas. Además, le fascinan el diseño web, la experiencia de usuario y el SEO.
     Revisado por: avatar del revisor Turner John
avatar del revisor Turner John
John Turner es el cofundador de SeedProd. Cuenta con más de 20 años de experiencia empresarial y de desarrollo y sus plugins se han descargado más de 25 millones de veces.

La primera vez que intenté añadir un botón en la cabecera de mi WordPress, quería algo que destacara, una llamada a la acción clara justo donde la gente la viera primero.

Ya se trate de un enlace a una página de registro, un regalo o un formulario de reserva, un botón en el menú de WordPress puede guiar a los visitantes exactamente hacia donde quieres que vayan. Es una de las formas más sencillas de aumentar los clics sin cambiar todo el diseño.

En este tutorial, te mostraré cómo añadir un botón en los menús de cabecera de WordPress, paso a paso.

Resumen rápido: Para añadir un botón en su cabecera de WordPress, puede utilizar un constructor visual como SeedProd para arrastrar un bloque Botón directamente en su diseño de navegación. Para los temas de bloques, también puede utilizar el Editor del sitio completo para colocar un botón al lado de su menú, sin necesidad de plugins adicionales.

¿Por qué añadir un botón al menú de cabecera de WordPress?

Los menús de navegación en los sitios web de WordPress suelen ser enlaces de texto con un aspecto similar. Como tal, cada elemento del menú tiene la misma importancia, peso y urgencia.

Si tuviera que añadir una URL a un formulario de pedido importante, o a una página de registro, tendría el mismo aspecto que los demás enlaces de su menú. No destacaría ni parecería lo suficientemente urgente como para que los usuarios hicieran clic primero.

WordPress cabecera sin botón

Sin embargo, convertir ese enlace importante en un botón en WordPress lo hará más visible al instante. Además de poder encontrarlo más fácilmente, un botón en la cabecera de WordPress mejorará la experiencia de usuario de los visitantes y el compromiso con su sitio web de WordPress.

Cabecera de WordPress con botón de menú

A pesar de tener bloques de botones para entradas y páginas, WordPress no ofrece botones de menú por defecto. Afortunadamente, hay algunas formas de añadir botones a tu menú, y son relativamente fáciles de implementar.

Con esto en mente, veamos 2 formas de añadir un botón en los menús de cabecera de WordPress sin escribir código HTML o CSS.

Cómo añadir un botón en el menú de cabecera de WordPress con SeedProd

En primer lugar, le mostraremos cómo añadir un botón a su menú de cabecera utilizando un potente plugin de WordPress llamado SeedProd. Recomendamos este método en primer lugar, ya que ofrece la mayoría de las opciones de personalización y le permite construir su menú de cabecera WordPrress visualmente con arrastrar y soltar.

SeedProd Creador de sitios web WordPress de arrastrar y soltar

SeedProd es uno de los mejores constructores de páginas de aterrizaje y sitios web para WordPress. Te permite crear temas de WordPress flexibles y SEO-friendly, páginas de destino y sitios web completos sin contratar a un desarrollador o añadir shortcodes a tu sitio.

El constructor de páginas de arrastrar y soltar de SeedProd le permite crear un encabezado, pie de página o barra lateral personalizados, y colocar un botón donde tenga sentido.

Además, existen innumerables bloques de WordPress que puede utilizar, como widgets de WordPress, temporizadores de cuenta atrás, formularios de suscripción, galerías, sliders de antes y después, y muchos más.

Así que sigue los siguientes pasos para añadir botones a la cabecera de tu WordPress con SeedProd.

Paso 1. Instalar y activar SeedProd Instale y active SeedProd

En primer lugar, tendrá que obtener una copia del plugin SeedProd y descargarlo en su ordenador. Vamos a utilizar SeedProd Pro para este tutorial, ya que incluye la función Theme Builder.

En el panel de control de tu cuenta, verás un botón de descarga grande para guardar el archivo .zip del plugin. También es una buena idea copiar tu clave de licencia en este momento porque la necesitarás en breve.

Encuentre su clave de licencia SeedProd

Después de descargar el plugin, dirígete a tu panel de WordPress y carga los archivos del plugin. Siempre puedes seguir esta guía sobre cómo instalar y activar un plugin de WordPress si necesitas ayuda.

Una vez hecho esto, dirígete a la página SeedProd " Configuración y pega tu clave de licencia.

introduzca su clave de licencia

A continuación, haz clic en el botón Verificar clave para desbloquear las funciones Pro.

Segundo paso Elija una plantilla prefabricada

Con su clave de licencia activa, ahora puede decidir qué diseño le gustaría hacer con SeedProd. Hay 2 enfoques diferentes que puede tomar, que son los siguientes:

  1. Tema de WordPress: crea un tema de WordPress personalizado para reemplazar el diseño actual de tu sitio web con una plantilla de cabecera personalizada.(no requiere código).
  2. Página de aterrizaje: crea una sola página y añade un encabezado personalizado sólo a esa página manteniendo tu tema existente.

Para esta guía, te guiaremos a través de la opción 1 porque reemplazará el menú de navegación en todo tu sitio web. Pero si prefieres la opción 2, puedes seguir esta guía para crear una página de aterrizaje en WordPress, y luego volver a este tutorial desde el paso 4.

Puesto que estamos eligiendo la opción de tema de WordPress, tendrá que ir a SeedProd " Theme Builder y haga clic en el botón Temas .

elija un kit de sitio web seedprod

Aparecerá una biblioteca de kits de sitios web prediseñados que puedes importar con un solo clic.

Puedes filtrar las plantillas por WooCommerce, popularidad, de la más nueva a la más antigua, y viceversa. Cuando hayas encontrado un tema que te guste, haz clic en el icono de la marca para iniciarlo.

Elija un kit de plantillas temáticas

Una vez que tu tema haya terminado de importarse, verás automáticamente una página como ésta:

Partes de la plantilla del creador de temas

Incluye una lista de las plantillas que componen tu tema de WordPress, y puedes editar cada una de ellas con el constructor visual de arrastrar y soltar de SeedProd.

Paso 3. Personalizar la cabecera Personalice su cabecera

Ya que quieres añadir un botón a tu cabecera, vamos a editar la plantilla Cabecera. Desplácese hacia abajo hasta que la encuentre en la lista y haga clic en el enlace Editar diseño.

Editar el encabezado de WordPress

Cuando abra la plantilla de cabecera, verá un diseño de 2 columnas como este:

Creador de cabeceras SeedProd

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 parte de tu diseño para cambiar el contenido y arrastrar bloques desde el panel izquierdo para añadir más funciones a tu página.

Si observa el diseño actual de la cabecera, verá una columna con un bloque Imagen y una columna con el bloque Menú de WordPress.

columnas de cabecera

Para añadir un botón a la cabecera, tendrá que añadir una 3ª columna, que le mostraremos cómo hacer ahora.

En primer lugar, sitúe el cursor sobre la sección de cabecera hasta que aparezca un contorno morado y, a continuación, haga clic en el icono Duplicar sección.

Sección de cabecera duplicada

Al hacerlo, se añadirá una copia de su cabecera debajo de la primera.

A continuación, pasa el ratón por encima de la columna de la primera sección hasta que aparezca un contorno azul y haz clic en el icono de la papelera para eliminarla.

Borrar la fila original

Ahora tendrás una sección vacía con la opción de elegir un nuevo diseño de columna. Así que adelante y haga clic en el diseño de 3 columnas.

Elija un diseño de filas de 3 columnas

Ahora puede pasar el ratón por encima del icono Mover de la sección duplicada y mover los bloques de imagen y elementos del menú de navegación a la nueva sección.

Mover bloques a las nuevas columnas

Esto le dejará una columna vacía en la que podrá añadir un bloque de botones.

Antes de pasar al siguiente paso, asegúrese de eliminar la antigua sección de cabecera haciendo clic en el icono de la papelera.

Eliminar la fila duplicada

Ahora está listo para crear un botón para su menú de cabecera de WordPress.

Paso 4. Añada un botón a la cabecera

Añadir un botón a su cabecera con SeedProd es fácil. Simplemente encuentre el bloque Botón en la barra lateral izquierda, y arrástrelo a la columna vacía en su área de cabecera.

Añade el bloque de botones SeedProd a tu cabecera

Una vez colocado el botón, puede 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.

Personalizar el bloque de botones

Incluso puedes añadir iconos personalizados antes y después del texto del botón eligiendo entre la biblioteca de iconos de Font Awesome.

Añadir iconos personalizados al bloque de botones

Para obtener aún más opciones de personalización, haz clic en la pestaña Configuración avanzada . Aquí es donde puedes editar el color del texto y la tipografía, cambiar el color de fondo, añadir una sombra de caja, radio de borde, espaciado, clases CSS personalizadas e incluso ocultar el botón en dispositivos específicos.

Opciones avanzadas de personalización de botones

Además, la opción Animación es una forma fantástica de hacer que su botón destaque más.

Configuración de la animación de los botones

Cuando estés satisfecho con el aspecto de tu botón de menú, asegúrate de hacer clic en el botón Guardar.

Guardar el encabezado de WordPress

Ahora puedes seguir personalizando el resto de tu tema de WordPress. Por ejemplo, puedes editar la página de tu blog, las plantillas de una sola página y la barra lateral o cambiar el pie de página de WordPress.

Paso 5. Publique sus cambios

Después de personalizar el resto de su sitio web, el último paso es hacer esos cambios en vivo. Para ello, primero vuelve a la página SeedProd " Theme Builder.

A continuación, busque el conmutador Activar tema SeedProd en la esquina superior derecha y gírelo a la posición Sí.

activar el tema seedprod

¡Genial! Ya puedes previsualizar tu tema de WordPress y ver tu botón de cabecera en acción.

Ejemplo de cómo añadir un botón en la cabecera de WordPress con SeedProd

Cómo añadir un botón al menú de cabecera de WordPress sin un plugin

Algunas personas no necesitarán toda la flexibilidad y opciones de personalización de un constructor de páginas, y otras prefieren limitar la adición de más plugins de WordPress a su sitio web. Si te encuentras en cualquiera de estas categorías, el siguiente método es para ti.

Le mostraremos cómo utilizar el editor de sitio completo por defecto de WordPress para añadir un botón a su menú de cabecera a continuación sin un plugin.

En primer lugar, vaya a Apariencia " Editor desde el panel de control de WordPress. Esto abrirá el editor completo de WordPress, que utiliza bloques para construir su sitio web.

A continuación, abra la barra lateral, haga clic en el encabezado Partes de plantilla y seleccione la opción Encabezado en el lado derecho.

WordPress tema editor de cabecera plantilla parte

Una vez hecho esto, verá un diseño visual de la cabecera de su WordPress. Dentro del editor, haz clic en el encabezado Navegación.

Haga clic en las opciones de 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 (+) más para empezar a añadir tus elementos de menú.

Añadir nuevos enlaces de menú

Puede hacer clic y buscar cualquier página para añadirla a su menú en WordPress.

Una vez colocados los enlaces del menú, vuelve a hacer clic en el icono (+) más para añadir un nuevo bloque de WordPress. Esta vez, busca el bloque Botón y añádelo a la cabecera.

Añadir bloque de botones de WordPress

Ahora introduce el texto del botón y haz clic en el icono del enlace para añadir el enlace en el que quieres que hagan clic los visitantes. En nuestro caso, añadiremos un enlace a nuestro informe gratuito.

Añadir texto y enlace al botón

En las opciones de la pantalla de bloque de la derecha, puede personalizar el botón del menú de cabecera cambiando los siguientes parámetros:

  • Estilo de botón de relleno o contorno
  • Porcentaje de anchura
  • Texto y color de fondo
  • Tamaño de la tipografía
  • Acolchado
  • Radio del borde
  • CSS adicional y nombre de clase
  • Y mucho más.
Personalizar el botón de menú

Cuando haya terminado de personalizar el botón, haga clic en el botón Guardar menú de la esquina superior derecha.

Ahora cualquier página que utilice la parte de la plantilla Cabecera mostrará su botón de menú y enlaces de navegación.

Cabecera de WordPress con botón de menú

Si estás utilizando un tema que no incluye la funcionalidad para el editor del sitio, puedes seguir esta guía para añadir un botón a tu menú utilizando el antiguo personalizador de menús.

Personalmente, he encontrado que el constructor de arrastrar y soltar de SeedProd es la forma más sencilla de hacerlo, especialmente si quieres más control sin tocar código.

Preguntas frecuentes

¿Puedo añadir un botón a mi menú de WordPress sin código?
¡Sí! Puede utilizar el Full Site Editor (FSE) o un constructor visual como SeedProd para añadir un bloque de botones directamente a su cabecera - sin necesidad de codificación.

¿Cómo puedo resaltar un enlace en la navegación de WordPress?
La mejor manera es convertirlo en un botón con estilo utilizando SeedProd o el bloque de botones de WordPress. Esto llama la atención y mejora la experiencia de usuario de su sitio.

Espero que te haya sido útil este tutorial sobre cómo añadir un botón en los menús de cabecera de WordPress. Puede que también te gusten los siguientes tutoriales para personalizar tu sitio web en WordPress:

Gracias por leernos. Nos encantaría conocer tu opinión, así que no dudes en dejarnos un comentario con tus preguntas y comentarios.

También puede seguirnos en YouTube, X (antes Twitter) y Facebook para obtener más contenidos útiles para hacer crecer su negocio.

avatar de autor
Stacey Corrin Escritor
Stacey lleva más de 10 años escribiendo sobre WordPress y marketing digital, y mucho más tiempo sobre otros temas. Además, le fascinan el diseño web, la experiencia de usuario y el SEO.

Divulgación: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, es posible que ganemos una comisión. Sólo recomendamos productos que creemos que aportarán valor a nuestros lectores.