Cómo crear un botón CTA en Hubspot

[PEL] [BOTÓN] [IN-POST] [MÁS INFORMACIÓN] [ID ORDEN]

 

1. Click en Marketing

2. Click en Captación de leads

3. Click en CTA

4. Click en CTA (versión anterior)

5. Click en CTA BETA

También puedes clicar en el banner naranja que sale, te llevará al mismo sitio.

6. Click en Crear

Verás que hay alguno ya creado y también hay uno que se llama [PLANTILLA] BOTÓN, pero la diferencia entre crear uno de cero y coger la plantilla es nula, porque tendrás que cambiar texto, imágenes, colores y url.

7. Click en Empezar de cero

Así comienzas todo el proceso

8. Click en Incrustado

9. Aparecerá por defecto este botón que ves

10. Y podrás añadir módulos, como texto, imágenes o formularios, si hace falta.

Si solo quieres usar el botón, no te compliques, con que edites el que aparece, es suficiente.

11. Pon el ratón sobre el botón y aparecerán las opciones de edición

12. Click on Button (interactive) o directamente en el lápiz

13. Edita primero el contenido

Es decir la URL o acción que se consigue al pinchar en el botón

14. Puedes elegir entre varias opciones, según las necesidades de este CTA

15. Si es una URL, elige URL y pega el enlace de destino

Por defecto, está marcada la opción Abrir enlace en una nueva pestaña

16. Edita el Texto del botón

17. Click en Guardar y aplicar

18. Para editar color, tamaño, tipografía, etc... Click en Estilos

19. Click en Formato

Para añadir relleno y margen a todo el CTA. Esto se verá reflejado siempre en los bordes exteriores, no verás que aumente el tamaño del botón, solo el espacio que lo rodea.

20. Click en Texto para editar los estilos

21. Podrás elegir tipografía, tamaño de la misma, color...

22. Para editar el tamaño del botón, ve al Relleno del Texto

23. Click en Fondo para cambiar el color

24. Elige el color en el selector o, si tienes el código HEX, puedes incluirlo también

Y si necesitas tocar la transparencia, también puedes

25. Click en Borde si quieres añadirlo

Por norma, no usaremos borde en ninguno de los botones, así que puedes despreocuparte de esto.

26. Pero si lo necesitas, haz clic en Estilo

Se desplegarán las opciones para editarlo, tanto el ancho, como el color podrán ser modificados.

27. Click en Esquina para elegir la forma del botón

Con 8px será el redondeo suave que se lleva ahora. Para hacerlo más anguloso, deja los px a 0. Para que sea como una píldora, sube los px hasta que te dé la forma que buscas

28. Click en Cursrs encima

Puedes editar cambios en el Texto al pasar el ratón por encima, cambios en el Fondo al pasar o cambios en el borde. A estos cambios se les conoce como Hover (por si nos escucháis alguno hablar de esto)

Un cambio de color es una buena manera de llamar la atención del usuario con una microinteracción. Pensad en oscurecerlo o en aclararlo respecto del color inicial para que resulte más llamativo.

29. Antes de publicar, ve a Opciones

30. Y asigna el botón a su Campaña correspondiente

31. Y ahora sí, click en Revisar y publicar para que genere su código de incrustación

Este código se mete como bloque de HTML en cualquier entrada o página de Wordpress

Si no sabes cómo incrustar el código generado para el botón en una noticia dentro de Wordpress, te dejo aquí un vídeo que te puede ayudar.