Cómo agregar un botón personalizado a WordPress

Uno de los mayores activos de una página de destino es el botón de llamada a la acción (CTA). Es el elemento en el que los visitantes hacen clic para descargar un recurso, suscribirse a tu lista de correo o programar una consulta. Diséñalo bien e impulsará enormemente las conversiones; diséñalo mal y los usuarios podrían pasarlo de largo antes de abandonar tu página.

En definitiva, saber cómo agregar un botón en WordPress —uno que destaque de los genéricos de otras páginas— puede marcar la diferencia entre conseguir un nuevo cliente o perderlo. Pero es mucho más fácil decirlo que hacerlo. Aunque WordPress ofrece opciones de personalización de botones en su editor Gutenberg, son básicas. Los usuarios suelen tener problemas con la confusa configuración de colores y la falta de opciones de animación. Si quieres darle un toque sofisticado a tu botón CTA, el editor Gutenberg no te llevará muy lejos. 

Para evitar las limitaciones de los botones de WordPress, tienes dos opciones: instalar un bloque o complemento pesado de terceros, o usar un widget sin servidor gratuito y ligero que protege la velocidad de tu página y el código de tu tema. Esta guía explica cómo funciona cada opción para que puedas decidir cuál es la mejor para tu sitio web.

Watch on youtube

How to Add a Custom Button to Wordpress

Opción 1: Instala un complemento dedicado de botones para WordPress o usa CSS personalizado

Si estás aprendiendo cómo usar WordPress, es posible que recurras a complementos de terceros o a código CSS para personalizar los botones. Puedes encontrar los complementos disponibles a través del panel de administración de WordPress o agregar tu propio CSS usando el Editor de WordPress. 

Antes de explorar estas opciones, ten en cuenta posibles inconvenientes:

• Algunos complementos usan JavaScript y CSS en exceso, lo que puede ralentizar los tiempos de carga de la página y perjudicar tu puntuación de Core Web Vitals. 
• Los desarrolladores no siempre mantienen los complementos actualizados. Esto puede provocar problemas de rendimiento en el futuro. Además, te da una cosa más que vigilar.
• Un CSS personalizado incorrecto puede anular la configuración global actual de los botones de tu sitio web, lo que afecta la apariencia de otros botones en todo tu sitio. También puede afectar la capacidad de respuesta móvil de tu sitio.

Empecemos por la opción más sencilla: un complemento de terceros. Para encontrar e instalar uno en tu sitio, sigue estos pasos:

1. Haz clic en la opción Plugins en tu panel de administración de WordPress. Escribe la función que necesitas en la barra de búsqueda. En este ejemplo, escribimos “custom CTA button WordPress”.

2. Elige un complemento de la lista y haz clic en él para obtener más información sobre sus funciones. Los mejores complementos de WordPress están actualizados, son compatibles con tu tema de WordPress y tienen reseñas positivas de los usuarios. Haz clic en Instalar ahora cuando encuentres una opción que te guste.

3. Cuando el complemento termine de instalarse, haz clic en el botón Activar. Sigue las instrucciones del desarrollador para crear tu botón personalizado. 

Si dominas el CSS, puedes programar tu propio botón CTA personalizado. Para hacerlo, sigue estos pasos:

1. Haz clic en Apariencia > Editor en tu panel de administración de WordPress. Si usas un tema clásico o de terceros, haz clic en Apariencia > Personalizar. 

2. Haz clic en Estilos > ⋮ > CSS adicional. En temas clásicos y de terceros, haz clic en CSS adicional.

3. Escribe el código CSS personalizado de tu botón en el cuadro de texto.

En lugar de programar tu propio botón, puedes probar una alternativa de CSS personalizado para WordPress: el Widget de Botón de Jotform. Exploramos esa opción en la siguiente sección.

Opción 2: Agrega un widget de botón personalizable y gratuito (recomendado)

Con el Widget de Botón de Jotform, puedes crear un botón CTA con degradados, iconos y efectos al pasar el cursor únicos. Esta opción no afectará el CSS de tu sitio ni reducirá su velocidad de carga, ya que funciona a partir de un embed alojado y fiable.

Para usarlo, configurarás tu botón en Jotform e insertarás el botón personalizado en WordPress mediante un bloque HTML personalizado. Se actualiza de inmediato con un botón impecable, responsivo e independiente que se ajusta a tus necesidades. Sigue estos pasos para probarlo:

1. Dirígete al Widget de Botón de Jotform y completa la información básica sobre tu botón. Haz clic en Continuar.

2. Agrega colores, iconos y otras opciones de estilo. Puedes ajustar el estilo de las esquinas, el relleno, el tamaño del texto y las fuentes, o añadir una sombra paralela para dar más énfasis. Cuando hayas terminado, haz clic en Continuar.

3. Revisa y selecciona tus opciones de diseño, luego haz clic en Pruébalo en tu sitio web gratis.

4. Sigue las instrucciones para crear una cuenta gratuita en Jotform, luego copia el código de inserción y pégalo en un bloque HTML personalizado de tu sitio web de WordPress. Asegúrate de elegir la página y la sección donde quieres que aparezca el botón.

La alternativa de llamada a la acción para WordPress de Jotform, gratuita y sin código, te da control total sobre la apariencia y la funcionalidad de tu botón. Ya sea que quieras personalizar el texto, los colores y el radio de los bordes, o añadir una animación al pasar el cursor, Jotform está a la altura. 

Potencia tu sitio de WordPress con widgets inteligentes y sin servidor

Jotform ofrece mucho más que el diseño de botones personalizados. Explora nuestro directorio de widgets gratuitos para sitios web para encontrar otras herramientas que maximizan las conversiones, eliminan el exceso de carga de la página y mantienen la base de datos de tu sitio ligera para lograr velocidades de carga ultrarrápidas. Algunos de nuestros widgets más queridos incluyen

• Widget de Reseñas de Google: Muestra las reseñas de Google de tu marca según tus preferencias
• Widget de Temporizador de Cuenta Regresiva: Muestra a los visitantes cuánto tiempo les queda para realizar una determinada acción, como inscribirse en un evento
• Widget de Preguntas Frecuentes: Proporciona una herramienta de preguntas frecuentes con función de búsqueda, respuestas con contenido multimedia y estilos personalizados
• Formularios para WordPress: Te permite crear formularios personalizados e insertarlos en tu sitio web

Como creador, blogger o profesional del marketing, tu enfoque está en producir contenido excepcional y optimizar embudos, no en pelearte con CSS o complementos. Las herramientas gratuitas y externas al servidor de Jotform te permiten implementar funciones premium y de alta conversión en minutos, para que puedas volver a lo que mejor sabes hacer. Comienza hoy con Jotform.