Cómo usar el widget de Botón en 3Pod
Aprende a usar el widget de botón en 3Pod para crear llamados a la acción efectivos. Descubre cómo personalizar el texto, colores, enlaces y estilos visuales.
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.
📍 1. Pestaña “General”
🖊️ Texto del botón
Escribe el texto que se mostrará en el botón (ej: “Comprar ahora”, “Siguiente paso”, “Registrarse”).
🎨 Seleccionar estilo
Elige entre estilos preconfigurados como:
Botón primario
Botón secundario
Puedes editar el estilo global para mantener coherencia visual en todo tu embudo.
📐 Alineación del texto
Alinea el texto dentro del botón: izquierda, centro o derecha.
↔️ Expandir botón al ancho total
Activa esta opción si quieres que el botón ocupe el 100% del ancho del contenedor.
➕ Agregar segunda línea de texto
Ideal para subtítulos como: “Envío gratis hoy” o “Sin tarjeta de crédito”.
🧩 Agregar ícono
Añade un ícono visual al lado del texto, útil para reforzar la acción (carrito, flecha, etc.).
🧷 Margen interno
Ajusta el padding (espacio interno) del botón en cada dirección (arriba, abajo, izquierda, derecha).
🔗 Insertar enlace
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.
🎨 2. Pestaña “Estilos”
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.
⚙️ 3. Pestaña “Avanzado”
✨ Animación
Aplica animaciones de entrada como: deslizar, aparecer, desvanecer, rebote, etc.
📍 Posición
Controla el margen exterior del botón y su colocación en el layout.
🧬 CSS Personalizado
Para usuarios avanzados, puedes aplicar clases o reglas CSS específicas para modificar estilos al detalle.
💡 Recomendaciones
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.
Te dejamos un paso a paso en un videotutorial en dónde puedes ver de forma visual y detallada cómo usar este widget. Solo haz clic aquí.
Última actualización