¿Cómo utilizar Llamados a la acción (CTA) en el Editor de bloques de Waclis?
Los Llamados a la acción, también conocidos como CTA por las siglas de Call to Action, son secciones diseñadas para invitar al visitante a realizar una acción concreta dentro de tu Página web.
Puedes utilizarlos para acciones como:
comprar;
consultar;
solicitar presupuesto;
contactar;
conocer productos;
explorar una categoría;
reservar;
registrarse;
descargar información;
leer un contenido;
conocer un servicio;
avanzar hacia otra página.
Dentro del Editor de bloques encontrarás diferentes diseños en:
Secciones → Llamados a la acción (Call to Action)
Puedes seleccionar una composición prediseñada y posteriormente personalizar:
título;
texto;
botón;
enlace;
fondo;
colores;
imagen;
Overlay;
espacios;
alineación;
comportamiento responsive.
¿Qué es un llamado a la acción?
Un CTA es una sección cuyo objetivo principal consiste en responder:
¿Qué quiero que haga el visitante después de leer este contenido?
Por ejemplo:
¿NECESITAS UN PRESUPUESTO?
Cuéntanos qué estás buscando y nuestro equipo podrá asesorarte.
[ SOLICITAR PRESUPUESTO ]
La sección tiene:
un mensaje;
una breve explicación;
una acción clara.
Otro ejemplo
DESCUBRE NUESTRA COLECCIÓN
Conoce todos los productos disponibles.
[ VER PRODUCTOS ]
Otro ejemplo
¿TIENES ALGUNA CONSULTA?
Nuestro equipo está disponible para ayudarte.
[ CONTACTAR ]
El CTA no es solamente un botón
El Button es una parte importante, pero la sección completa debe explicar por qué el visitante debería realizar esa acción.
Por ejemplo:
[ CONTACTAR ]
sin ningún contexto puede resultar demasiado genérico.
Mientras:
¿NECESITAS AYUDA PARA ELEGIR?
Nuestro equipo puede orientarte según tus necesidades.
[ CONTACTAR ]
explica mejor el motivo de la acción.
CTA, Banner y Beneficios no son lo mismo
Estas secciones pueden tener elementos similares, pero tienen objetivos distintos.
CTA
Responde principalmente:
¿Qué quiero que haga el visitante ahora?
Ejemplos:
Comprar.
Contactar.
Solicitar presupuesto.
Ver productos.
Banner
Responde principalmente:
¿Qué mensaje quiero destacar visualmente?
Por ejemplo:
NUEVA COLECCIÓN
Puede contener un CTA, pero su protagonismo suele ser más visual.
Beneficios
Responde:
¿Qué obtiene el cliente?
Por ejemplo:
Envíos rápidos
Atención personalizada
Compra segura
Ejemplo comparativo
Beneficio
Atención personalizada
Nuestro equipo puede ayudarte a encontrar la opción adecuada.
CTA
¿NECESITAS ASESORAMIENTO?
Habla con nuestro equipo.
[ CONTACTAR ]
El primero comunica una ventaja.
El segundo propone una acción.
CTA y Formularios tampoco son lo mismo
Un CTA puede dirigir al visitante hacia un formulario.
Por ejemplo:
SOLICITA INFORMACIÓN
[ CONTACTAR ]
El botón puede llevar hacia una página o sección donde se encuentra el formulario.
Un formulario puede ser el siguiente paso
Conceptualmente:
CTA
↓
Formulario
Pero no necesariamente tienes que colocar todo el formulario dentro de la misma composición.
¿Cuándo conviene utilizar un CTA?
Puede ser especialmente útil:
después de explicar un servicio;
después de mostrar beneficios;
después de testimonios;
después de una sección de Preguntas frecuentes;
al final de una landing page;
entre bloques extensos;
antes del Footer;
cerca de una decisión importante.
Ejemplo de recorrido
BANNER
↓
BENEFICIOS
↓
SERVICIOS
↓
TESTIMONIOS
↓
PREGUNTAS FRECUENTES
↓
CTA
¿LISTO PARA COMENZAR?
[ SOLICITAR INFORMACIÓN ]
El CTA aparece después de que el visitante ya recibió suficiente información.
No necesitas esperar siempre hasta el final
También puedes utilizar un CTA antes.
Por ejemplo:
BANNER PRINCIPAL
[ CONOCER PRODUCTOS ]
↓
resto del contenido
y posteriormente otro CTA relacionado al final.
CTA principal y CTA secundario
Una página puede tener varias llamadas a la acción, pero conviene establecer jerarquías.
CTA principal
Representa la acción más importante.
Por ejemplo:
SOLICITAR PRESUPUESTO
CTA secundario
Puede permitir otra acción relacionada.
Por ejemplo:
VER PRODUCTOS
No hagas competir cinco acciones principales
Una sección como:
[ COMPRAR ]
[ CONTACTAR ]
[ VER BLOG ]
[ SEGUIRNOS ]
[ CONOCER EMPRESA ]
obliga al visitante a procesar demasiadas opciones.
Prioriza
Si el objetivo de la sección es conseguir consultas:
[ SOLICITAR PRESUPUESTO ]
debería ser el CTA principal.
Puede existir una acción secundaria si realmente aporta valor:
[ SOLICITAR PRESUPUESTO ]
Ver nuestros trabajos
Pero la jerarquía debería ser evidente.
¿Cómo agregar un CTA?
Ingresa al Editor de bloques de la página o área editable donde quieras incorporarlo.
Después abre:
Secciones
y selecciona:
Llamados a la acción (Call to Action)
Paso 1: elige la composición
Waclis mostrará diferentes alternativas.
Puedes encontrar diseños orientados a:
título + botón;
título + texto + botón;
imagen + contenido;
fondo visual;
composición centrada;
distribución en columnas.
Elige según:
importancia del CTA;
contenido disponible;
espacio;
Página web donde lo utilizarás.
Paso 2: agrega la sección
Selecciona el diseño deseado.
Después podrás modificar individualmente sus componentes.
Paso 3: utiliza Navigator si necesitas identificar la estructura
Un CTA puede tener una jerarquía similar a:
Section
└── Container
├── Heading
├── Paragraph
└── Link / Button
O:
Section
└── Grid Row
├── Grid Column
│ ├── Heading
│ └── Paragraph
│
└── Grid Column
└── Button / Link
O:
Section
├── Background Image
├── Overlay
└── Content
├── Heading
├── Paragraph
└── CTA
La estructura exacta dependerá del diseño seleccionado.
Paso 4: define primero cuál será la acción
Antes de redactar el título, decide:
¿Qué quiero que haga el visitante?
Por ejemplo:
Solicitar presupuesto
Entonces toda la sección debería apoyar esa acción.
Ejemplo
Objetivo:
Contactar al equipo comercial
Título:
¿Necesitas asesoramiento?
Texto:
Cuéntanos qué estás buscando y nuestro equipo podrá orientarte.
Acción:
Contactar
Todo apunta en la misma dirección.
Ejemplo incoherente
Título:
Conoce nuestra historia
Texto:
Descubre cómo comenzó nuestra empresa.
Button:
Comprar ahora
La acción no coincide con el contenido.
Mensaje y CTA deben estar relacionados
Si el mensaje es:
Descubre nuestra línea de productos
una acción coherente puede ser:
Ver productos
Si el mensaje es
¿Necesitas una propuesta personalizada?
puede ser:
Solicitar presupuesto
Si el mensaje es
Conoce cómo trabajamos
puede ser:
Ver servicios
Paso 5: redacta el Heading
El título debería:
captar atención;
comunicar un objetivo;
ser breve;
preparar la acción.
Ejemplos
¿Listo para comenzar?
Encuentra la solución que necesitas
Solicita tu presupuesto
Conoce todos nuestros productos
¿Necesitas asesoramiento?
Lleva tu proyecto al siguiente nivel
Evita títulos innecesariamente largos
Por ejemplo:
Si todavía tienes alguna duda sobre cuál de nuestras diferentes soluciones disponibles podría resultar más apropiada para tu empresa
puede simplificarse:
¿No sabes qué solución elegir?
Paso 6: redacta una explicación breve
El Paragraph debería reforzar la acción.
Por ejemplo:
Cuéntanos las características de tu proyecto y nuestro equipo podrá ayudarte.
Otro ejemplo
Explora el catálogo y encuentra las opciones disponibles para tu empresa.
No repitas exactamente el Heading
Título:
Solicita tu presupuesto
Texto poco útil:
Solicita tu presupuesto con nosotros.
Mejor
Cuéntanos qué producto necesitas, cantidad estimada y plazo para que podamos orientarte.
Paso 7: configura la acción
Dependiendo de la estructura prediseñada, la acción puede estar representada por:
Button;
Link;
Button dentro de una estructura enlazada;
otro elemento interactivo.
Utiliza Navigator para seleccionar el componente correcto.
Importante sobre Button y Link
No asumas que modificar el texto visible del botón también cambia automáticamente su destino.
Según la estructura puede existir un:
Link
└── Button
o alguna composición equivalente.
Si necesitas cambiar el destino:
selecciona el elemento que contiene la URL.
Utiliza Navigator
Por ejemplo:
Link
└── Html Button
puede requerir:
Link → URL;
Html Button → Text.
Esto te permite modificar cada propiedad en el lugar correcto.
Texto del botón
Utiliza verbos claros.
Por ejemplo:
Comprar
Ver productos
Solicitar presupuesto
Contactar
Reservar
Descargar
Conocer más
Evita botones excesivamente largos
Por ejemplo:
Haz clic aquí para comunicarte con nuestro equipo comercial y solicitar más información
puede simplificarse:
Solicitar información
Evita “Haz clic aquí”
No describe la acción.
Es preferible:
Ver catálogo
que:
Haz clic aquí
Un CTA debe reducir la incertidumbre
El visitante debería saber qué ocurrirá después.
Por ejemplo:
Solicitar presupuesto
es claro.
Mientras:
Continuar
puede resultar ambiguo si el visitante no sabe hacia dónde irá.
Paso 8: configura la URL
Selecciona el Link correspondiente y utiliza:
Contenido → Url
para indicar el destino cuando la estructura lo utilice.
Por ejemplo:
/contacto
o la página correspondiente.
Verifica el destino real
Después de guardar utiliza:
Ver página
y haz clic sobre la acción.
Un CTA visualmente perfecto con un enlace incorrecto no cumple su función
Siempre prueba:
Button;
Link;
Card clicable;
si existe.
Enlaces internos
Puedes utilizar CTA para dirigir hacia:
Productos;
Servicios;
Contacto;
Blog;
categorías;
páginas personalizadas;
otras secciones.
Enlaces externos
También puede dirigir hacia un recurso externo cuando corresponda.
Revisa siempre que el destino sea el previsto.
Más de un CTA en la misma sección
Puede existir:
[ COMPRAR AHORA ]
[ VER MÁS ]
Esto puede funcionar si existe una clara diferencia entre:
acción principal
y
acción secundaria.
Diseña jerarquía visual
Por ejemplo:
[ SOLICITAR PRESUPUESTO ] ← principal
Ver trabajos realizados ← secundaria
La acción principal puede utilizar:
mayor contraste;
Button sólido.
La secundaria puede ser:
Link;
Button secundario;
estilo menos dominante.
Evita dos botones visualmente idénticos si uno es claramente prioritario
Por ejemplo:
[ COMPRAR ]
[ VER BLOG ]
ambos con el mismo protagonismo pueden generar dudas si el objetivo comercial es comprar.
Una acción principal suele ser suficiente
Especialmente en CTA pequeños.
Ubicación del CTA
La posición influye en su efectividad.
CTA después de explicar un servicio
SERVICIO
↓
Características
↓
Beneficios
↓
CTA
¿QUIERES IMPLEMENTARLO?
[ SOLICITAR INFORMACIÓN ]
CTA después de Testimonios
TESTIMONIOS
↓
¿QUIERES OBTENER MÁS INFORMACIÓN?
[ CONTACTAR ]
La experiencia de otros clientes prepara la acción.
CTA después de FAQ
PREGUNTAS FRECUENTES
↓
¿TIENES OTRA CONSULTA?
[ CONTACTAR ]
Es una ubicación muy natural.
CTA cerca de Productos
Por ejemplo:
PRODUCTOS
↓
¿NECESITAS AYUDA PARA ELEGIR?
[ SOLICITAR ASESORAMIENTO ]
No agregues un CTA después de cada pequeño párrafo
Una página con:
contenido
[ COMPRAR ]
contenido
[ COMPRAR ]
contenido
[ COMPRAR ]
contenido
[ COMPRAR ]
puede sentirse repetitiva o agresiva.
Repetir el CTA puede ser válido en páginas largas
Por ejemplo:
CTA inicial
↓
contenido extenso
↓
CTA final
Esto puede facilitar que el visitante actúe sin volver al comienzo.
Mantén coherencia entre CTA repetidos
Si ambos persiguen el mismo objetivo:
Solicitar presupuesto
es conveniente utilizar una denominación consistente.
Evita:
Arriba → Empezar
Abajo → Hablar
Otro → Más información
si todos dirigen exactamente al mismo proceso.
CTA principal de una landing page
Una landing suele tener un objetivo especialmente claro.
Por ejemplo:
Objetivo:
Solicitar una demostración
En ese caso muchos elementos pueden reforzar:
[ SOLICITAR DEMOSTRACIÓN ]
sin introducir acciones secundarias innecesarias.
CTA y jerarquía de página
Antes de agregar uno pregúntate:
¿Cuál es el objetivo de esta página?
Ejemplo: página de Producto
Puede ser:
Comprar
Página de servicio
Puede ser:
Solicitar presupuesto
Página institucional
Puede ser:
Conocer servicios
o:
Contactar
Blog
Puede ser:
Explorar artículos
o suscripción, según el objetivo.
No todos los CTA deben vender directamente
Un CTA también puede ayudar al visitante a continuar su recorrido.
Por ejemplo:
Conoce cómo trabajamos
[ VER SERVICIOS ]
CTA con imagen
Un CTA puede incluir una fotografía.
Por ejemplo:
┌─────────────────────────────────────────┐
│ [ IMAGEN ] │ ¿NECESITAS ASESORAMIENTO? │
│ │ Nuestro equipo puede... │
│ │ [ CONTACTAR ] │
└─────────────────────────────────────────┘
¿La imagen aporta algo?
Antes de incorporarla pregunta:
¿Ayuda a reforzar la acción?
Puede mostrar:
equipo;
producto;
servicio;
resultado.
Si solo ocupa espacio, un CTA sin imagen puede ser más efectivo.
CTA sin imagen
Por ejemplo:
██████████████████████████████████████
¿LISTO PARA COMENZAR?
Cuéntanos qué necesitas.
[ CONTACTAR ]
██████████████████████████████████████
Puede ser:
simple;
rápido;
claro;
fácil de mantener.
El CTA no necesita ser visualmente complejo
La claridad es más importante que la cantidad de elementos.
CTA con Background Image
También puedes utilizar:
imagen de fondo;
Overlay;
texto.
En ese caso aplican buenas prácticas similares a Banners:
contraste;
recorte;
zonas seguras;
legibilidad móvil.
Overlay
Si el texto aparece sobre una fotografía y pierde contraste, utiliza Overlay cuando la estructura lo permita.
Por ejemplo:
FOTOGRAFÍA
+
OVERLAY
+
¿LISTO PARA COMENZAR?
+
[ CONTACTAR ]
No conviertas un CTA sencillo en un Banner enorme sin necesidad
Si el objetivo es solamente:
¿Necesitas ayuda?
[ Contactar ]
puede funcionar perfectamente con:
fondo de color;
buen Padding;
Button destacado.
Fondo de color
Es una excelente alternativa.
Por ejemplo:
██████████████████████████████████
HABLEMOS DE TU PROYECTO
Nuestro equipo puede ayudarte.
[ CONTACTAR ]
██████████████████████████████████
Utiliza contraste
Si el fondo es oscuro:
texto claro;
Button visible.
Si el fondo es claro:
texto oscuro;
CTA con contraste suficiente.
No utilices demasiados colores fuertes
El CTA debería destacar, pero seguir formando parte de la identidad visual de la Página web.
Tipografía
La jerarquía puede ser:
Heading
↓
Paragraph
↓
Button
El Heading debe tener mayor protagonismo.
No conviertas el Paragraph en otro Heading
El texto secundario debería complementar.
Tamaño responsive
Un Heading grande en desktop puede necesitar reducirse en celular.
Por ejemplo:
Desktop
48 px
Mobile
30/32 px
como referencia conceptual.
Los valores dependerán del diseño.
No reduzcas el Button demasiado en celular
Debe seguir siendo fácil de utilizar en pantalla táctil.
Espacio alrededor del Button
Evita colocarlo demasiado cerca de:
texto;
bordes;
otros controles.
Debe ser claramente identificable.
Padding de la Section
Un CTA necesita suficiente espacio para destacar.
Por ejemplo:
██████████████████████████████
TÍTULO
Texto
[ BOTÓN ]
██████████████████████████████
Demasiado poco Padding
Puede generar:
TÍTULO
Texto
[Botón]
pegado a otras secciones.
Demasiado Padding
Puede generar una sección enorme para muy poco contenido.
Busca equilibrio.
CTA centrado
Es una composición muy habitual.
¿LISTO PARA COMENZAR?
Nuestro equipo puede ayudarte.
[ CONTACTAR ]
Funciona especialmente bien con:
Heading breve;
Paragraph corto;
una acción.
CTA alineado a izquierda
También puede resultar efectivo:
¿NECESITAS UN PRESUPUESTO?
Cuéntanos qué necesitas.
[ SOLICITAR PRESUPUESTO ]
Puede integrarse mejor en determinados diseños.
CTA en dos columnas
Desktop:
┌────────────────────────────────────────┐
│ ¿LISTO PARA COMENZAR? │ [ CONTACTAR ] │
└────────────────────────────────────────┘
Responsive
Puede convertirse en:
┌───────────────────┐
│ ¿LISTO PARA │
│ COMENZAR? │
│ │
│ [ CONTACTAR ] │
└───────────────────┘
Utiliza Grid Row cuando corresponda
Si la composición utiliza columnas, revisa:
Direction;
alineación;
tamaños responsive;
Wrap.
No posiciones el Button manualmente mediante grandes márgenes.
CTA Full vs Boxed
Una Section puede utilizar:
Container width → Full
o:
Boxed
Full
Puede funcionar para un CTA importante:
██████████████████████████████████████████
¿LISTO PARA COMENZAR?
[ CONTACTAR ]
██████████████████████████████████████████
Boxed
Puede funcionar como Card dentro del contenido:
┌─────────────────────────────┐
│ ¿NECESITAS AYUDA? │
│ [ CONTACTAR ] │
└─────────────────────────────┘
No todo CTA necesita ocupar el 100 %
El protagonismo debe corresponder a su importancia.
CTA principal vs secundario visualmente
Puedes establecer diferentes niveles.
Principal
mayor contraste;
mayor espacio;
Button sólido.
Secundario
fondo más neutro;
menor tamaño;
Link simple.
Evita que un CTA secundario compita con la acción principal de la página
Si la página intenta vender un producto y colocas un enorme CTA:
LEE NUESTRO BLOG
antes del botón de compra, puedes desviar la atención.
Mantén el CTA relacionado con la etapa del visitante
Por ejemplo:
Parte superior
Ver productos
Parte inferior
Solicitar asesoramiento
pueden tener sentido porque corresponden a momentos diferentes del recorrido.
CTA dentro de una página de Servicios
Ejemplo:
SERVICIO DE IMPLEMENTACIÓN
[ explicación ]
[ beneficios ]
[ proceso ]
¿QUIERES IMPLEMENTAR ESTA SOLUCIÓN?
[ SOLICITAR PRESUPUESTO ]
CTA dentro de Home
Puede aparecer:
después del Banner principal;
después de Productos;
después de Testimonios;
antes del área inferior.
Evita colocar CTA sin relación con el contenido circundante.
CTA en Productos
Por ejemplo, después del catálogo:
¿NO ENCONTRASTE LO QUE BUSCABAS?
Nuestro equipo puede ayudarte.
[ CONTACTAR ]
CTA en Blog
Por ejemplo:
¿QUIERES CONOCER NUESTRAS SOLUCIONES?
[ VER SERVICIOS ]
CTA en Contacto
Una página Contacto ya contiene una acción clara.
Agregar otro CTA idéntico puede resultar redundante.
En ese contexto evalúa si realmente aporta valor.
CTA después de Preguntas frecuentes
Puede ser especialmente útil:
¿NO ENCONTRASTE TU RESPUESTA?
Habla con nuestro equipo.
[ CONTACTAR ]
CTA después de Testimonios
Puede reforzar:
¿QUIERES SER NUESTRO PRÓXIMO PROYECTO?
[ SOLICITAR INFORMACIÓN ]
si el tono corresponde a la marca.
CTA después de Portafolio
¿TIENES UN PROYECTO EN MENTE?
[ SOLICITAR PRESUPUESTO ]
CTA después de Tabla de precios
¿NECESITAS AYUDA PARA ELEGIR?
[ CONTACTAR ]
puede complementar las opciones.
CTA para Newsletter
Una invitación a suscribirse también puede considerarse un llamado a la acción, aunque veremos Newsletters como sección específica.
Por ejemplo:
RECIBE NUESTRAS NOVEDADES
[ SUSCRIBIRME ]
Cuando existe un formulario de suscripción, la sección Newsletter puede ser más adecuada.
Una acción por objetivo
Esta es una de las reglas más útiles.
Si la sección existe para:
solicitar presupuesto
no agregues al mismo nivel:
seguir Instagram;
leer Blog;
descargar catálogo;
ver empresa;
comprar.
Cada una puede tener otro lugar.
Reducir fricción
Un CTA funciona mejor cuando el visitante entiende:
qué tiene que hacer;
qué ocurrirá;
por qué le conviene.
Ejemplo
¿NECESITAS UN PRESUPUESTO?
Cuéntanos el producto, cantidad y plazo que necesitas.
[ SOLICITAR PRESUPUESTO ]
Es bastante claro.
Ejemplo más ambiguo
DESCUBRE MÁS
Conoce todo lo que tenemos para ofrecerte.
[ CONTINUAR ]
No queda claro qué ocurrirá.
Redacta desde la necesidad del visitante
En lugar de:
Queremos que nos contactes
puedes utilizar:
¿Necesitas asesoramiento?
En lugar de
Queremos mostrarte nuestros productos
puedes utilizar:
Encuentra el producto que necesitas
No utilices urgencia falsa
Evita textos como:
¡ÚLTIMA OPORTUNIDAD!
si no existe realmente una condición temporal.
Si la campaña tiene urgencia real
Puedes informar:
Promoción válida hasta el 31 de agosto
si corresponde.
Mantén luego el contenido actualizado.
CTA temporal
Si utilizas:
INSCRÍBETE ANTES DEL 20 DE AGOSTO
revisa la sección cuando pase esa fecha.
Un CTA vencido puede dirigir a una acción inexistente
Comprueba periódicamente:
campañas;
formularios;
eventos;
promociones;
páginas de destino.
Estado del enlace
Si la página de destino fue eliminada o cambió, el CTA debe actualizarse.
Una revisión de contenido debería incluir también sus URLs.
Clonar un CTA
Si quieres reutilizar la estructura:
selecciona el contenedor completo mediante Navigator;
utiliza Clonar elemento;
reemplaza:
Heading;
Paragraph;
Button;
URL;
imagen;
IDs personalizados, si existen.
No clones solamente el Button si necesitas toda la sección
Selecciona la unidad correspondiente.
Revisa URLs después de clonar
Esta recomendación es especialmente importante.
Una copia mantiene frecuentemente los datos del elemento original hasta que los reemplazas.
Ejemplo
Original:
Ver productos
→ /productos
Copia:
Contactar
→ /productos
hasta que modifiques la URL.
Eliminar un CTA
Selecciona la estructura completa que quieras quitar.
Recuerda:
Waclis no solicita confirmación.
Si te equivocas utiliza:
Deshacer
inmediatamente.
Si el CTA está dentro de una Section con otros elementos
No elimines Section completa sin comprobar Navigator.
Podrías borrar contenido adicional.
Mover un CTA
Puedes reorganizar su ubicación utilizando las herramientas de movimiento.
Por ejemplo:
Antes:
FAQ
Footer próximo
CTA
Después:
FAQ
CTA
Footer próximo
si esa estructura comunica mejor el siguiente paso.
El CTA debería aparecer cerca del contenido que lo justifica
Esto mejora la continuidad.
Classes compartidas
Puedes utilizar una estructura conceptual como:
cta-section
cta-title
cta-text
cta-button
Esto facilita personalizaciones avanzadas.
Linked styles
Si varios CTA utilizan la misma Class visual, Waclis puede mostrar:
Linked styles
Puede ser conveniente para mantener:
mismo Button;
misma Typography;
mismo Border radius.
Pero varios CTA no necesariamente deben ser idénticos
Puedes tener:
cta-primary
y:
cta-secondary
cuando quieres establecer jerarquías.
No elimines la Class común si necesitas una excepción
Puedes utilizar:
class="cta-section cta-secondary"
manteniendo estilos base compartidos.
CSS personalizado
Si necesitas personalización avanzada, limita el alcance.
Por ejemplo:
.contacto-cta .cta-title {
font-size: 42px;
}
Hover del Button
.contacto-cta .cta-button {
transition: transform .2s ease;
}
.contacto-cta .cta-button:hover {
transform: translateY(-2px);
}
cuando corresponda.
Evita selectores globales
Por ejemplo:
button {
border-radius: 50px;
}
puede modificar Buttons de muchas áreas.
Utiliza una Class específica.
Responsive CSS
Si necesitas algo no disponible visualmente:
@media (max-width: 768px) {
.contacto-cta .cta-title {
font-size: 30px;
}
}
Pero comprueba primero las herramientas visuales del editor.
Button en ancho completo en celular
En determinados diseños puede resultar útil que el CTA ocupe más ancho.
Por ejemplo:
┌─────────────────────┐
│ SOLICITAR PRESUPUESTO│
└─────────────────────┘
Puede facilitar la interacción.
Pero no es obligatorio para todos los casos.
Evita Buttons excesivamente estrechos
Especialmente con textos como:
Solicitar presupuesto
Deja suficiente espacio interno.
Tampoco hagas todos los Buttons gigantes
La jerarquía debe permanecer equilibrada.
Border radius del CTA
Puede utilizar:
esquinas rectas;
redondeadas;
Button tipo píldora.
Mantén coherencia con el resto de la Página web.
Fondo y Border
Una Section CTA puede destacar mediante:
Background Color;
Border;
Border radius;
sombra.
No necesitas utilizar todos simultáneamente.
Ejemplo Card CTA
┌───────────────────────────────────┐
│ │
│ ¿NECESITAS AYUDA? │
│ │
│ [ CONTACTAR ] │
│ │
└───────────────────────────────────┘
Puede funcionar dentro de una página de contenido.
Ejemplo Full CTA
█████████████████████████████████████████
HABLEMOS DE TU PROYECTO
Cuéntanos qué estás buscando.
[ CONTACTAR ]
█████████████████████████████████████████
Mayor protagonismo.
CTA con dos acciones
Si realmente necesitas dos:
¿QUIERES CONOCER MÁS?
[ SOLICITAR INFORMACIÓN ]
Ver nuestros proyectos
La secundaria puede tener menos protagonismo.
CTA con número, correo o datos visibles
También puedes mostrar información de contacto, pero evita saturar.
Por ejemplo:
¿NECESITAS AYUDA?
[ CONTACTAR ]
puede ser suficiente si dirige al canal correspondiente.
Si muestras varios medios
Por ejemplo:
Formulario
Teléfono
pregúntate si el visitante necesita elegir entre todos en ese momento.
Tal vez sea mejor dirigir hacia:
Contacto
y centralizar allí las alternativas.
CTA y redes sociales
“Seguirnos” puede ser un CTA secundario, pero normalmente no debería competir con una acción comercial principal.
No confundas todos los enlaces con CTA
Un Link dentro de un Paragraph no necesita convertirse en una gran sección.
Utiliza CTA cuando quieres darle especial relevancia a una acción.
CTA y accesibilidad
Utiliza textos que indiquen claramente la acción.
Por ejemplo:
Descargar catálogo
es más descriptivo que:
Descargar
si existe más de un recurso.
No utilices solamente un ícono si la acción no es evidente
Un Button con texto suele ser más claro.
Contraste
Asegúrate de que:
texto;
Button;
Links;
puedan leerse correctamente sobre el fondo.
Hover no puede ser la única forma de distinguir el Button
En celular no existe el mismo comportamiento.
El control debe parecer interactivo en su estado normal.
Estado Active
Puedes personalizarlo si corresponde, pero no es necesario para crear un CTA básico.
Animaciones
Puedes utilizar:
Avanzado → Animate on scroll
sobre la Section o el CTA completo.
Evita animaciones excesivas
La acción debería ser clara sin depender del movimiento.
Una animación puede ayudar a llamar la atención
Pero no debería impedir:
leer;
localizar el Button;
interactuar inmediatamente.
No retrases demasiado la aparición del CTA
Especialmente si representa una acción importante.
CTA móvil
Comprueba:
Heading;
Paragraph;
Button;
Padding;
alineación;
imagen;
contraste.
Ejemplo desktop
┌──────────────────────────────────────────────┐
│ ¿LISTO PARA COMENZAR? [ CONTACTAR ] │
└──────────────────────────────────────────────┘
Ejemplo mobile
┌──────────────────────┐
│ ¿LISTO PARA │
│ COMENZAR? │
│ │
│ [ CONTACTAR ] │
└──────────────────────┘
No fuerces la composición horizontal en celular
Puede dejar:
texto comprimido;
Button pequeño.
Permite que se apile cuando corresponda.
No ocultes el CTA principal en móvil
Si la acción es importante también debe permanecer disponible.
Hide based on device screen width
Utilízalo únicamente cuando realmente tengas una composición alternativa para determinado dispositivo.
No para esconder una sección que no sabes cómo adaptar.
Versión desktop y mobile separadas
Puede justificarse en diseños muy diferentes, pero implica:
duplicar contenido;
mantener dos Buttons;
actualizar dos URLs;
revisar dos versiones.
Intenta primero adaptar una única estructura.
Si utilizas dos versiones
Identifica claramente:
cta-desktop
cta-mobile
y configura correctamente su visibilidad.
Revisa ambas después de cualquier cambio
Especialmente:
precio;
promoción;
texto;
enlace.
CTA y rendimiento
Normalmente una sección CTA puede ser liviana.
No agregues:
video;
imagen enorme;
biblioteca externa;
si una composición sencilla resuelve la necesidad.
Una buena conversión no depende de tener más efectos
Depende en gran medida de:
claridad;
relevancia;
confianza;
acción comprensible.
Ejemplo práctico: CTA de presupuesto
Queremos:
¿NECESITAS UN PRESUPUESTO?
Cuéntanos qué producto necesitas y nuestro equipo podrá ayudarte.
[ SOLICITAR PRESUPUESTO ]
Paso 1
Abre:
Secciones → Llamados a la acción (Call to Action)
Paso 2
Selecciona un diseño.
Paso 3
Modifica Heading.
Paso 4
Modifica Paragraph.
Paso 5
Selecciona el Button o componente de acción.
Paso 6
Modifica su texto.
Paso 7
Utiliza Navigator para localizar el Link si necesitas configurar URL.
Paso 8
Configura el destino correcto.
Paso 9
Personaliza:
fondo;
Typography;
Button;
Padding.
Paso 10
Revisa desktop.
Paso 11
Revisa tablet.
Paso 12
Revisa celular.
Paso 13
Guarda.
Paso 14
Utiliza:
Ver página
Paso 15
Haz clic en:
Solicitar presupuesto
y comprueba el destino.
Ejemplo práctico: CTA hacia Productos
ENCUENTRA EL PRODUCTO QUE NECESITAS
Explora nuestro catálogo completo.
[ VER PRODUCTOS ]
Puede utilizarse en:
Home;
Blog;
páginas institucionales.
Ejemplo práctico: CTA después de FAQ
¿NO ENCONTRASTE LA RESPUESTA?
Nuestro equipo puede ayudarte con tu consulta.
[ CONTACTAR ]
Ejemplo práctico: CTA después de Portafolio
¿TIENES UN PROYECTO EN MENTE?
Cuéntanos qué necesitas.
[ SOLICITAR PRESUPUESTO ]
Ejemplo práctico: CTA secundario
CONOCE MÁS SOBRE NUESTRA EMPRESA
Descubre cómo trabajamos.
[ QUIÉNES SOMOS ]
No todas las acciones necesitan estar directamente orientadas a comprar.
¿Qué hacer si nadie entiende qué hace el Button?
Revisa el texto.
En lugar de:
Continuar
utiliza:
Ver productos
¿Qué hacer si tienes demasiados Buttons?
Define:
¿Cuál es la acción más importante?
Mantén esa como principal y elimina o reduce las secundarias.
¿Qué hacer si el CTA pasa desapercibido?
Revisa:
posición;
contraste;
tamaño;
espacio;
mensaje.
No agregues inmediatamente una animación agresiva.
¿Qué hacer si el CTA compite demasiado con el Banner?
Reduce su protagonismo visual o cambia su ubicación.
La página necesita jerarquía.
¿Qué hacer si el Button no abre el destino correcto?
Utiliza Navigator para comprobar si la URL está en:
Link;
otro elemento envolvente.
Después actualiza el destino y prueba nuevamente.
¿Qué hacer si solo cambiaste el texto pero sigue enlazando al destino anterior?
Cambiar:
Text
no implica necesariamente cambiar:
URL
Revisa ambos elementos.
¿Qué hacer si clonaste un CTA y ambos van al mismo lugar?
Actualiza el Link de la copia.
¿Qué hacer si el Heading cambia de estilo en varios CTA?
Comprueba:
Linked styles
Puede existir una Class compartida.
Si quieres una excepción utiliza:
Class adicional;
ID único.
¿Qué hacer si el Button se corta en móvil?
Revisa:
Width;
Padding;
Font size;
texto demasiado largo.
Puede ser necesario permitir más ancho.
¿Qué hacer si el Button se sale del contenedor?
Revisa:
Width;
Margin;
Position;
Grid;
Padding.
No ocultes el overflow para esconder el problema.
¿Qué hacer si el CTA tiene demasiado alto?
Revisa:
Padding;
Min Height;
imagen;
Heading;
Paragraph.
Reduce el espacio donde realmente corresponda.
¿Qué hacer si queda demasiado pegado?
Aumenta:
Padding de Section;
separación respecto de las áreas vecinas.
¿Qué hacer si el fondo impide leer?
Utiliza:
contraste;
Overlay;
color de texto;
fondo más simple.
¿Qué hacer si la imagen distrae?
Puedes eliminarla.
Un CTA no necesita una fotografía obligatoriamente.
¿Qué hacer si el CTA parece un Banner pero quiero que la acción destaque más?
Reduce elementos decorativos y refuerza:
Heading;
Button;
contraste.
Utilizar IA para crear un CTA
ChatGPT, Claude o Gemini pueden ayudarte a redactarlo.
Por ejemplo:
Necesito un CTA para una Página web de [sector].
Objetivo principal:
Solicitar presupuesto.
Necesito:
- Heading máximo de 7 palabras.
- Descripción máxima de 20 palabras.
- Texto de botón máximo de 3 palabras.
El mensaje debe estar orientado a la necesidad del visitante.
Utiliza español neutro.
No inventes descuentos, plazos ni garantías.
IA para mejorar un CTA existente
Tengo este CTA:
Título:
[texto]
Descripción:
[texto]
Botón:
[texto]
El objetivo es conseguir que el visitante solicite presupuesto.
Hazlo más claro y directo.
No agregues promesas ni información comercial que no esté en el contenido original.
Devuélveme tres alternativas.
IA para revisar demasiadas acciones
Esta sección tiene estas acciones:
- Comprar.
- Contactar.
- Ver Blog.
- Descargar catálogo.
- Ver Instagram.
El objetivo principal de la página es generar solicitudes de presupuesto.
Indícame qué acción debería ser principal y cuáles conviene eliminar o presentar como secundarias.
No redactes código.
IA para personalizar CSS
Por ejemplo:
Estoy trabajando con un CTA dentro del Editor de bloques de Waclis.
La sección utiliza:
.contacto-cta
El título utiliza:
.cta-title
La acción utiliza:
.cta-button
Necesito:
- Padding vertical de 64 px en desktop;
- 36 px en celular;
- título de 42 px en desktop;
- 30 px en celular;
- Button con Border radius de 8 px;
- el Button debe poder ocupar más ancho en celular si el texto lo necesita.
No modifiques otros Buttons de la Página web.
No agregues JavaScript.
Devuélveme solamente el CSS necesario.
Buenas prácticas para CTA
Recomendamos:
definir una acción principal;
escribir el CTA pensando en la necesidad del visitante;
utilizar Heading breve;
agregar una explicación concisa;
utilizar Buttons claros;
comprobar la URL;
evitar demasiadas acciones compitiendo;
establecer jerarquía principal/secundaria;
colocar el CTA cerca del contenido que lo justifica;
mantener buen contraste;
adaptar la composición a móvil;
utilizar imágenes solo cuando aporten valor;
utilizar Navigator para identificar Button y Link;
revisar URLs después de clonar;
mantener IDs únicos;
limitar CSS a la sección;
probar siempre la acción mediante Ver página.
Errores frecuentes
Utilizar un CTA sin definir el objetivo
Decide primero qué acción quieres conseguir.
Colocar cinco Buttons con igual importancia
Prioriza.
Utilizar “Haz clic aquí”
Describe la acción.
Usar “Continuar” sin contexto
Indica qué ocurrirá.
Crear un Heading muy largo
Sé directo.
Repetir el Heading en el Paragraph
Agrega información útil.
Utilizar un CTA que no coincide con el contenido anterior
Mantén continuidad.
Agregar CTA después de cada sección
Evita saturar.
Utilizar una gran imagen cuando no aporta nada
Un CTA simple puede funcionar mejor.
Hacer que la imagen compita con el Button
La acción es el elemento principal.
Cambiar el texto del Button pero no su URL
Revisa Link y Button por separado.
Clonar CTA y olvidar actualizar la URL
Prueba todas las copias.
Repetir IDs personalizados
Mantén cada ID único.
Mantener dos Buttons idénticos cuando uno es principal
Crea jerarquía.
Diseñar únicamente para desktop
Comprueba móvil.
Mantener una estructura horizontal comprimida en celular
Permite que se apile.
Ocultar el CTA principal en móvil
La acción debería seguir accesible.
Usar Hover como única señal de interacción
El Button debe parecer interactivo normalmente.
Agregar animaciones excesivas
La claridad es prioritaria.
Utilizar CSS global sobre todos los Buttons
Limita el scope.
Mantener CTA de promociones vencidas
Actualiza contenido temporal.
No probar el enlace
La acción debe funcionar realmente.
Flujo recomendado
1. DEFINIR OBJETIVO
↓
2. DEFINIR ACCIÓN PRINCIPAL
↓
3. ELEGIR DISEÑO
↓
4. AGREGAR CTA
↓
5. REDACTAR HEADING
↓
6. REDACTAR TEXTO
↓
7. CONFIGURAR BUTTON
↓
8. LOCALIZAR LINK / URL
↓
9. CONFIGURAR DESTINO
↓
10. PERSONALIZAR ESTILO
↓
11. REVISAR JERARQUÍA DE ACCIONES
↓
12. ADAPTAR RESPONSIVE
↓
13. GUARDAR CAMBIOS
↓
14. VER PÁGINA
↓
15. PROBAR EL CTA
Checklist antes de publicar un CTA
Sé exactamente qué acción quiero que realice el visitante.
Existe una acción principal clara.
Las acciones secundarias no compiten innecesariamente.
El Heading es breve.
El Heading se relaciona con la acción.
El Paragraph aporta información.
El texto del Button describe lo que ocurrirá.
Evité “Haz clic aquí” cuando puede utilizarse una acción descriptiva.
El destino del Link es correcto.
Probé el Button.
La ubicación del CTA tiene sentido dentro del recorrido.
El CTA no se repite innecesariamente.
El fondo mantiene suficiente contraste.
La imagen aporta valor, si existe.
Overlay está correctamente configurado si corresponde.
El Button se distingue visualmente.
El Button es cómodo de utilizar en celular.
Desktop se ve correctamente.
Tablet se ve correctamente.
Celular se ve correctamente.
La composición se apila correctamente si es necesario.
No existe scroll horizontal inesperado.
Revisé Navigator.
Identifiqué correctamente Button y Link.
Revisé URLs después de clonar.
Los IDs personalizados son únicos.
Linked styles tiene el alcance esperado.
El CSS personalizado está limitado a esta sección.
Las promociones o fechas siguen vigentes, si existen.
No agregué animaciones innecesarias.
Guardé los cambios.
Probé la acción mediante Ver página.
En resumen
Los Llamados a la acción (CTA) están diseñados para conseguir que el visitante realice un siguiente paso concreto.
Puedes utilizarlos para:
comprar;
consultar;
contactar;
solicitar presupuesto;
explorar productos;
descargar;
registrarse;
continuar hacia otro contenido.
La pregunta principal antes de construir un CTA es:
¿Qué quiero que haga el visitante?
Después organiza toda la sección alrededor de esa respuesta:
HEADING
↓
EXPLICACIÓN
↓
ACCIÓN
Por ejemplo:
¿NECESITAS UN PRESUPUESTO?
Cuéntanos qué estás buscando.
[ SOLICITAR PRESUPUESTO ]
Evita colocar muchas acciones con el mismo protagonismo.
Cuando exista más de una:
define claramente cuál es principal y cuál es secundaria.
También recuerda que el texto visible del Button y la URL pueden pertenecer a elementos diferentes dentro de la jerarquía.
Por eso utiliza:
Navigator → Button / Link → configurar cada propiedad correspondiente.
No asumas que cambiar:
“Ver productos”
modifica automáticamente el destino del enlace.
Finalmente:
Guardar Cambios → Ver página → hacer clic en el CTA → comprobar destino.
Un buen CTA no necesita ser complejo.
Necesita ser:
claro;
relevante;
visible;
coherente;
fácil de utilizar.
Cuando el visitante entiende qué hacer y qué ocurrirá después, la sección está cumpliendo correctamente su función.
¿Necesitas más ayuda?
Si este artículo no resolvió tu consulta, nuestro equipo puede ayudarte personalmente.
Soporte por WhatsApp