Cómo agregar y estilizar un botón en WordPress (4 maneras fáciles)

¿Quieres aprender a crear y estilizar botones para tu sitio de WordPress?

Los botones son poderosos y se pueden usar para llamar a los usuarios a la acción para que se suscriban a tu lista de correo electrónico, te sigan en redes sociales y compren tu producto.

Para crear botones personalizados, puedes usar un fragmento de código o simplemente descargar un plugin que haga todo por ti.

En este tutorial, te mostraremos cómo agregar y estilizar un botón en tu página web e incluso agregar efectos de animación. ¡Empecemos!

Aquí tienes una tabla de contenido que puedes usar para saltar al método que más te interese:

• Agregar un botón en el Editor de Bloques
• Agregar un botón usando SeedProd
• Agregar un botón usando Thrive Themes
• Agregar un botón usando código

Antes de empezar, quizás quieras ver esta guía detallada sobre cómo crear un botón perfecto para tu sitio web.

Agregar botones a tus publicaciones y páginas anima a tus usuarios a hacer lo que quieres que hagan. Sin un botón o CTA, tu sitio web carece de una estrategia optimizada y deja tus tasas de conversión al azar.

Como dice el experto en marketing Neil Patel, un botón o CTA es el "puente entre marketing y ventas". Puedes usar botones en WordPress para dar tu CTA final a tus usuarios como Comprar ahora, Contáctanos, Descargar, u otros.

Sin embargo, es importante que sepas cómo usar estos botones para maximizar tus conversiones. Hay varios factores que hacen que algunos botones sean mejores que otros.

Estos incluyen:

• Conocer tu objetivo de conversión
• Mantener el texto de tu botón corto y pegadizo
• Usar palabras de acción
• Ofrecer un incentivo

Ahora, veamos cómo crear botones potentes de WordPress para tu sitio web sin necesidad de codificación.

Agregar un botón en WordPress con el Editor de Bloques

Por defecto, el editor de bloques de WordPress te permite añadir un botón simple a tu sitio. Esto es gratuito y cualquiera puede usarlo.

Primero, crea o edita cualquier página o publicación en WordPress. Luego puedes usar el botón de ‘+’ para añadir un nuevo bloque. Busca 'botón' y añade el widget a tu página.

Ahora deberías ver un botón añadido a tu publicación. Vamos a personalizarlo. Haz clic en el botón para abrir la configuración de los botones.

Verás un menú que aparece justo encima del botón. Puedes explorar estas configuraciones para cambiar la alineación, añadir un enlace, editar el texto y la fuente, y más.

En el panel derecho, puedes cambiar el ancho, añadir un enlace y una ancla HTML. Si cambias a la pestaña Estilos, obtendrás más opciones para personalizar el botón.

Puedes cambiar el botón de un fondo sólido a un contorno. Hay opciones para cambiar el tamaño, el relleno y el borde.

Ahora, este método es fácil pero limitado en opciones de personalización. Si quieres estilizar el botón y añadir efectos de animación, entonces necesitarás usar un constructor de páginas de WordPress. A continuación, te mostraremos cómo usar 2 constructores muy populares: SeedProd y Thrive.

Añadir un botón en WordPress usando SeedProd

Hay muchos plugins constructores de páginas que te permiten personalizar tu página y añadir botones con facilidad. Nuestra elección #1 es SeedProd.

SeedProd es un creador de sitios web y páginas de destino para WordPress. Viene con temas prediseñados que ya tienen botones colocados estratégicamente para ti. Simplemente necesitas elegir un tema y editarlo para que se ajuste a tus necesidades.

Con SeedProd, puedes agregar todo tipo de elementos potentes como:

• Perfiles sociales
• Botones para compartir en redes sociales (Me gusta, Tweet, Seguir)
• Tabla de precios y botón de pago
• Temporizador de cuenta regresiva
• Menú de navegación
• Reseñas y testimonios
• Galería de imágenes
• Google Maps

...y mucho más.

Hay un constructor de arrastrar y soltar con una interfaz visual. Esto significa que editarás el front-end de tu sitio web. Simplemente haz clic y edita lo que necesites, y arrastra y suelta nuevos elementos donde quieras.

Nunca hay necesidad de codificar. Mira cómo cambiamos el texto en nuestro diseño de muestra aquí:

En cuanto a las opciones de personalización avanzada para botones, SeedProd incluye:

• Estilos de botones prediseñados
• Tamaño, forma y color personalizables
• Fuentes y tipografía personalizadas
• Iconos para el botón
• Efectos de animación
• Función de duplicar para aplicar el estilo del botón a otros bloques
• Guardar el diseño como una plantilla personalizada
• Mostrar/ocultar en dispositivos
• Vista previa en móvil y tableta
• Elementos optimizados para SEO como etiquetas no-follow y abrir en nueva pestaña

Con SeedProd, tendrás todo lo que necesitas para diseñar un botón impresionante que haga que los usuarios hagan clic y tomen acción en tu sitio.

Lo primero que necesitarás hacer es descargar e instalar SeedProd en tu sitio.

Una vez que hayas activado el plugin, dirígete al panel de administración de WordPress y abre SeedProd. Si estás creando un sitio web nuevo, puedes seleccionar un kit de temas listo para usar y personalizarlo. Esto creará todas las páginas y publicaciones que tu sitio pueda necesitar.

Para este tutorial, te mostraremos cómo agregar un botón a una página de destino. Navega a la pestaña SeedProd » Landing Pages. Aquí, puedes agregar una nueva página de destino.

Elige una plantilla y agrega un nombre para tu página, luego se abrirá el constructor. Verás una vista previa en vivo de tu diseño con un panel de edición a la izquierda.

De los bloques estándar disponibles, simplemente arrastra y suelta el bloque de botón en tu diseño. Al hacerlo, se abrirán más opciones para editar el botón a la izquierda. Puedes simplemente hacer clic en el texto del botón y agregar tu propia llamada a la acción. Mira cómo agregamos y editamos un botón en nuestra página fácilmente:

Cuando selecciones el botón, en el panel izquierdo, en la pestaña Contenido, puedes editar el texto, el tamaño, la alineación, agregar un enlace y más. Estas son las opciones predeterminadas disponibles también en el editor de bloques de WordPress.

Cuando agregues un enlace, obtendrás opciones para agregar elementos de SEO como 'no seguir' y 'abrir en una nueva ventana'.

Ahora hay más. No tienes que diseñar el botón por tu cuenta. Si cambias a la pestaña Plantillas, verás diseños de botones listos para elegir. Puedes elegir un diseño de botón plano o tipo píldora.

También hay muchísimos colores para elegir. Si quieres más control sobre el estilo de tu botón, dirígete a la pestaña Avanzado. Aquí, puedes ajustar el relleno, el radio, el ancho, el color y más.

En la pestaña Avanzado, desplázate hacia abajo y verás Efectos de Animación. Puedes hacer que tu botón rebote, pulse, tiemble y mucho más. Esto te ayudará a captar la atención de tu lector.

En la parte inferior del constructor de páginas, hay una opción para previsualizar en móvil y tableta para asegurarte de que el diseño de tu botón se vea bien en todos los dispositivos.

Así, puedes personalizar toda tu página de destino con SeedProd. Cuando estés listo, puedes guardar y publicar tu página.

Añadir un botón en WordPress usando Thrive

Thrive Themes tiene un potente constructor de temas y constructor de páginas de destino que puedes usar para personalizar tu sitio de WordPress.

Para este tutorial, te mostraremos cómo usar Thrive Architect, el constructor de páginas de destino. Los pasos para el constructor de temas siguen pasos similares.

Thrive Architect es fácil de usar para principiantes. Este plugin es una herramienta premium, por lo que primero deberás registrarte para obtener una cuenta de Thrive.

Luego puedes instalar este plugin en tu sitio. Aprende cómo hacerlo en nuestra Reseña de Thrive Architect.

Una vez instalado en tu sitio, comienza creando o editando cualquier página usando el constructor de Thrive Architect.

Cuando se abra el creador de páginas de Thrive, verás una vista previa de tu página junto con opciones de edición a la derecha e izquierda del creador.

En el panel izquierdo, haz clic en el ícono ‘+’ y se abrirá un menú de bloques. Aquí puedes seleccionar el bloque ‘Botón’ y arrastrarlo y soltarlo en tu diseño.

Al hacer eso, verás que el botón aparece en la vista previa junto con opciones de edición a la derecha. Puedes cambiar el color, tamaño, alineación y más. También puedes agregar un enlace y añadir etiquetas de ‘no follow’ o ‘abrir en una nueva pestaña’.

En el menú de la izquierda, hay una pestaña ‘Botón de Plantilla’. Al abrirla, verás diferentes estilos de botones para elegir. Hay tantas opciones aquí que nunca tendrás que diseñar un botón por tu cuenta.

Volviendo a la pestaña Opciones Principales, desplázate hacia abajo para encontrar más opciones.

Estas opciones incluyen:

• Tipografía
• Estilo de Fondo
• Diseño y Posición
• Animación y Acción
• Responsivo
• Atributos HTML

...y más.

Para que tu botón cobre vida, abre la pestaña Animación y Acción. Verás efectos de animación para que tu botón se deslice, amplíe, crezca, encoja, se desvanezca y más.

Cuando hayas personalizado toda tu página y estés listo para publicar, abre el ícono de configuración en la parte superior del creador. Aquí puedes publicar tu página para que esté activa en tu sitio.

¡Eso es todo! Has aprendido a crear un botón usando el editor de bloques y creadores de páginas de terceros. A continuación, también te mostraremos cómo usar código personalizado para agregar un botón.

Agregar un Botón usando Código

Si eres experto en código y quieres agregar/diseñar un botón por tu cuenta, entonces querrás echar un vistazo a WPCode.

WPCode te proporciona fragmentos de código prefabricados que puedes usar en tu sitio web. Hay una biblioteca de fragmentos gratuitos y pro a la que puedes acceder en su sitio.

Puedes previsualizar el fragmento y descargarlo para usarlo en tu sitio.

También puedes instalar el plugin en tu sitio y obtendrás fragmentos prefabricados junto con una opción para insertarlos automáticamente en tu página. También hay una opción de código corto que puedes usar para agregar fácilmente el botón donde quieras en tu sitio.

Con WPCode, nunca tendrás que pasar horas tratando de averiguar cómo crear/agregar nuevos elementos. Puedes encontrar rápidamente los fragmentos de código que necesitas y agregarlos a tu sitio.

Eso es todo lo que tenemos para ti. Esperamos que este tutorial te haya ayudado a agregar un botón a tu sitio. Si buscas agregar un botón personalizado a un popup en tu sitio, entonces OptinMonster es la herramienta para ti. Consulta nuestra Reseña de OptinMonster para más información.

A continuación, también puedes consultar nuestras otras guías útiles:

• Cómo Crear un Diseño Personalizado de WordPress
• Cómo personalizar un sitio web de WordPress
• Cómo Rastrear Clics en Enlaces y Botones en WordPress

Estos tutoriales te ayudarán a personalizar tu sitio de WordPress. El último te ayudará a rastrear el rendimiento de tus botones.