Así que utilizó Divi para crear un sitio web magnífico, lo llenó con contenido de primer nivel y revisó todas las casillas de verificación para garantizar una buena optimización del motor de búsqueda. Sin embargo, después de un tiempo, sus conversiones no son exactamente las que esperaba. Ahora quizás te estés preguntando: «¿Hice algo mal?»
No hay necesidad de entrar en pánico y presionar el botón de reinicio todavía. A veces, pequeños cambios pueden tener un gran impacto en sus conversiones, y una de las mejores cosas que puede hacer en términos de recompensa es optimizar sus llamadas a la acción.
En el transcurso de este artículo, cubriremos exactamente qué hace que un llamado a la acción sea bueno, parte de la psicología detrás de su funcionamiento, le mostraremos algunos ejemplos excelentes y, finalmente, le enseñaremos cómo implementar un CTA fijo en su sitio web Divi.
No es exagerado decir que hay toda una ciencia detrás de las llamadas a la acción. Casi todos los aspectos de ellos (copia, colores, tamaño, ancho, etc.) se pueden desglosar y analizar hasta el agotamiento, pero algunos de ellos se destacan por su importancia.
Color
La mayoría de la gente asocia el amarillo con el optimismo, el rojo con la energía, el azul con la confianza, el verde con la riqueza y la relajación, el naranja con la agresividad, el rosa con el lado femenino, el negro con el poder , etc. Esto es simplemente un análisis superficial, pero dependiendo del tipo de servicio o producto que vendas, algunos colores específicos serán más efectivos que otros.
Copiar
El color por sí solo no es suficiente para convencer a menos que esté acompañado de las palabras correctas . Según una investigación, es más probable que el 52% de los clientes ingresen a una tienda si simplemente se les pide que lo hagan, ya sea un letrero en la calle o un volante. El problema, sin embargo, es que los usuarios están tan acostumbrados a ser bombardeados constantemente con anuncios donde quiera que vayan, que se vuelven bastante buenos ignorando este tipo de mensajes .
Dado este hecho, su copia debe ser sólida y concisa cuando se trata de CTA. Por ejemplo, el uso de verbos activos es preferible al texto de relleno como «Haga clic aquí», que no hace nada en cuanto a atraer a un cliente. “¡Regístrese para obtener una copia gratuita!” podría obtener mejores resultados si el usuario considera que el contenido es lo suficientemente interesante para una apariencia sin ataduras.
Construir
Además del texto de la CTA en sí, la acumulación también puede influir en su tasa de conversiones. Tome como ejemplo las páginas de destino creadas para el canal de ventas: están diseñadas específicamente para atraer a los clientes a comprar un producto o servicio y, a menudo, siguen una estructura similar: presente un problema usando una persona como ejemplo y luego pase a decir cómo funciona su producto. logró ayudarlos donde todas las demás opciones fallaron, y luego finalmente ofrecerle la oportunidad de aplicar sus enseñanzas a sus propios problemas (nunca es una venta, siempre es una oportunidad ).
Una gran llamada a la acción es, por lo tanto, una combinación de simplemente sugerir una acción en el momento adecuado, crear una sensación de anticipación y luego usar un diseño convincente y las palabras correctas para atraer a sus clientes a tomar una decisión inicial. Parece mucho para procesar, pero el camino para crear un buen CTA está bien recorrido y hay muchos recursos disponibles para aquellos que quieren profundizar en el tema.
Echemos un vistazo a un ejemplo simple creado con Divi, que no hace mucho uso de una acumulación para su llamado a la acción principal.
Toda la página principal está repleta de llamadas a la acción diseñadas de manera convincente, pero la principal no se anda con rodeos. “Nos encanta mantenerte activo, saludable y feliz. Haga una cita.» es breve, conciso y da un sentido de urgencia al poner la decisión en tus manos.
El módulo de llamada a la acción de Divi
Para hacer tu vida más fácil, Divi viene con un módulo CTA incorporado. Esto le permite implementar CTA con solo hacer clic en un botón usando el constructor Divi y disfrutar del mismo nivel de personalización disponible con todos sus módulos.
El módulo incluye todas las opciones que puedas imaginar, como colores, orientación del texto, etiquetas personalizables, ID y clases, configuraciones de diseño avanzadas y la opción de agregar cambios a través de CSS.
Un ejemplo de una llamada a la acción creada con Divi.
Si bien el módulo tiene muchas opciones, hacer que una llamada a la acción permanezca fija mientras se desplaza por una página no es una de ellas de forma predeterminada. Afortunadamente, Divi hace que sea muy fácil jugar con algunos ajustes avanzados a través de una combinación de uso de temas secundarios y algunos CSS simples. Así que arremángate y prepárate para jugar con un poco de código. (¡Será indoloro, lo prometemos!)
Creando un CTA fijo con Divi
Un CTA pegajoso en acción usando una de las páginas de demostración de Divi.
Una llamada a la acción fija puede ser una solución simple para aumentar las conversiones, siempre que no sea demasiado intrusiva o interrumpa el flujo del diseño de su sitio web. Idealmente, desea que se fusione con el diseño pero que aún sirva como un recordatorio potencial para los clientes de que pueden optar por sus servicios en cualquier momento.
Como mencionamos anteriormente, esta no es una opción predeterminada en el módulo CTA, pero afortunadamente, la gente de Elegant Tweaks ideó un método simple para implementar esta función.
En primer lugar, deberá copiar su archivo header.php en un tema secundario y encontrar las siguientes líneas de código:
<body <?php body_class(); ?>>
<div id="page-container">
En el siguiente fragmento de código, estamos creando una nueva identificación única llamada top-cta , cuyo nombre se explica por sí mismo. Si desea cambiar el texto de la CTA, reemplace las líneas de código necesarias después de pegar.
<div id="top-cta">
<a href="#">This is an<span class="cta_gray">
example</span>of a sticky</a>
<span class="blurb_button">
<a class="et_pb_promo_button cta" href="#">
CTA
</a>
</span>
</div>Ahora deberá profundizar en algunos CSS para personalizar su nuevo CTA adhesivo, que puede implementar utilizando el campo CSS personalizado en la parte inferior del ePanel.
El campo CSS personalizado incluido dentro del Divi ePanel.
Gran parte de este código ya debería resultarle familiar, e incluso si no está tan acostumbrado a manejar CSS, es bastante fácil de navegar. Vamos a repasarlo paso a paso.
La primera sección cubre el diseño general de la barra de CTA, incluido el fondo, la alineación del texto, el relleno, forzar el texto en mayúsculas, indicar que la barra debe ocupar todo el ancho del navegador y el índice z (que se establece en un alto valor para reemplazar a todos los demás).
Cada sección sucesiva trata sobre las clases que describimos anteriormente en header.php e incluye detalles estilísticos menores que puede modificar a su antojo.
Finalmente, tenemos algunas consultas de medios que redimensionan de manera útil la barra de CTA para resoluciones más pequeñas para que no ocupe más de la mitad de la pantalla y asuste a todos sus visitantes (confíe en nosotros, no quiere omitir esa parte).
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
sesenta y cinco
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
#top-cta {background-color: #Insert your preferred color here;background-color: rgba(57, 178, 235, .9);text-align: center;padding: 5px 0 5px;text-transform: uppercase;position: fixed;top: 0;width: 100%;z-index: 9997;}#top-cta a {color: #fff;font-size: 28px;font-weight: 700;display: inline-block;}#top-cta a span.cta_gray {color: #dfdfdf;text-shadow: 1px 1px 1px #5a5a5a;}#top-cta .blurb_button {padding-left: 20px;}#top-cta a.cta {background-color: #ff9900;}#top-cta a.cta:hover {background-color:#FFAD33;}/*-------------------[768px]------------------*/@media only screen and ( max-width: 980px ) {#top-cta {padding: 10px 0 10px;}#top-cta a {font-size: 20px;}}/*-------------------[480px]------------------*/@media only screen and ( max-width: 767px ) {#top-cta {padding: 7px 0 7px;}#top-cta a {font-size: 18px;}#top-cta .et_pb_promo_button {padding: 4px 15px;}}/*-------------------[320px]------------------*/@media only screen and ( max-width: 479px ) {#top-cta {padding: 5px 0 5px;line-height: 1.2em;}#top-cta a {font-size: 16px;}#top-cta .et_pb_promo_button {padding: 2px 10px;}} |
¡Es hora de las pruebas divididas!
Como habrás notado en nuestra sección anterior, incluso con una barra tan simple, hay un montón de opciones de personalización disponibles para que realmente la personalices. Por supuesto, podrías simplemente elegir un estilo agradable, subir tu CTA y cruzar los dedos, o podríamos llevar las cosas un paso más allá.
Es una simple verdad que los visitantes responderán mejor a algunos diseños que a otros, y aunque puedes seguir las últimas tendencias, siempre habrá espacio para la optimización. La forma inteligente de elegir qué cambios implementar es usar análisis para guiarse.
Por ejemplo, si tiene dos diseños disponibles para su CTA fijo, debe proceder a probar cómo cada uno afecta sus métricas durante un período de tiempo específico y luego quedarse con el claro ganador. Esto le permite aprovechar el conocimiento de lo que funciona para sus espectadores específicos y realmente adaptar su contenido tanto como sea posible.
Las pruebas divididas se vuelven un poco más complicadas cuando tiene una amplia variedad de opciones disponibles. Si incluye diseños muy diferentes dentro de las mismas pruebas, es probable que obtenga resultados sesgados. Por lo tanto, si tiene el tiempo y la paciencia para hacerlo, debe tratar de basarse en los resultados de las pruebas anteriores (usando cada fragmento de conocimiento para mejorar sus diseños) hasta que esté satisfecho con sus métricas.
Sin embargo, no se asuste: esto es mucho más fácil de lo que parece. Sus pruebas pueden ser tan largas o cortas como desee (siempre que haya recibido suficiente tráfico para tomar una decisión informada) y las métricas no son difíciles de leer. ¿Estás recibiendo más clics? ¿ Tu tasa de rebote está cayendo? Lo más importante, ¿estás obteniendo más ventas? Si es así, relájate y disfrútalo, te lo has ganado.
Conclusión
Puede tener todos los visitantes del mundo o los productos más populares, pero a veces las personas simplemente necesitan un pequeño empujón antes de que decidan suscribirse a sus servicios o abrir su billetera. Ese empujón puede ser tan simple como un llamado a la acción efectivo.
Encuentre inspiración en nuestros ejemplos de excelentes CTA creados con Divi, siga los pasos descritos anteriormente para crear sus propios llamados a la acción fijos y recuerde usar pruebas divididas para optimizar sus conversiones.
¿Has tenido éxito con las llamadas a la acción? ¡Comparta sus experiencias con nosotros en la sección de comentarios a continuación!
Imagen en miniatura del artículo de Bplanet / shutterstock.com