Widget Botón
Última actualización
Última actualización
El widget Botón es uno de los más importantes en cualquier embudo. Te permite guiar al usuario a realizar una acción como comprar, registrarse, ir al checkout o redirigir a una página externa.
Escribe el texto que se mostrará en el botón (ej: “Comprar ahora”, “Siguiente paso”, “Registrarse”).
Elige entre estilos preconfigurados como:
Botón primario
Botón secundario
Puedes editar el estilo global para mantener coherencia visual en todo tu embudo.
Alinea el texto dentro del botón: izquierda, centro o derecha.
Activa esta opción si quieres que el botón ocupe el 100% del ancho del contenedor.
Ideal para subtítulos como: “Envío gratis hoy” o “Sin tarjeta de crédito”.
Añade un ícono visual al lado del texto, útil para reforzar la acción (carrito, flecha, etc.).
Ajusta el padding (espacio interno) del botón en cada dirección (arriba, abajo, izquierda, derecha).
Conecta el botón a:
Otra sección de la página.
Página externa.
Checkout o producto específico.
Email, teléfono o enlace de WhatsApp.
Aquí puedes personalizar la apariencia en 3 estados distintos:
Normal (cómo se ve normalmente).
Hover (cuando el usuario pasa el cursor).
Presionado (cuando hacen clic).
Cada estado te permite editar:
General: color de fondo, bordes, radio del botón.
Texto: color, tamaño, tipografía.
Sombra: profundidad visual para destacar el botón.
Borde: grosor, color y estilo del borde.
Aplica animaciones de entrada como: deslizar, aparecer, desvanecer, rebote, etc.
Controla el margen exterior del botón y su colocación en el layout.
Para usuarios avanzados, puedes aplicar clases o reglas CSS específicas para modificar estilos al detalle.
Usa botones grandes, contrastantes y bien ubicados.
El texto debe ser claro y accionable: “Comprar”, “Ir al paso 2”, “Ver más”.
Usa diferentes estilos por función (primario para CTA principal, secundario para navegación).
Activa la segunda línea de texto para destacar beneficios adicionales.
