Cómo Agregar un Botón que Desplaza a una Sección
Usa un Botón cuando los visitantes deban saltar desde un CTA del hero hasta precios, un formulario, FAQ u otra sección de oferta sin salir de la página.
Antes de Empezar
Asegúrate de tener:
- Una página abierta en el Constructor de Páginas.
- Una sección de destino clara ya en la página (formulario, precios, bloque de oferta).
- El Navegador abierto para leer IDs de sección/elemento con precisión.
Paso 1: Preparar la Sección Objetivo
- Selecciona la sección o contenedor de destino en el canvas (o en el Navegador).
- Anota o configura un ID (o clase) estable que referenciarás desde el botón.
- Evita IDs duplicados — IDs incorrectos o repetidos hacen que scroll/revelación parezca roto.
Mantén la sección objetivo visible en la página publicada (no oculta en todos los dispositivos) a menos que uses intencionalmente una acción de revelación.
Paso 2: Agregar el Botón
- Arrastra un Botón arriba del pliegue donde se espera el CTA.
- Configura una etiqueta breve como Ver precios, Empezar o Reclamar oferta.
- Abre los ajustes del evento de clic del botón.
Consulta Elemento Botón (referencia).
Paso 3: Configurar Comportamiento de Scroll o Revelación
Según las acciones disponibles en la lista de eventos de clic de tu botón, usa uno de estos enfoques:
| Enfoque | Cuándo usar |
|---|---|
| Mostrar ítem por ID / clase | Revelar una sección retrasada u oculta, o salto de interacción vinculado a ese ID/clase. |
| Enlace con hash de sección | Navegar a #tu-id-de-seccion cuando los IDs de tu página admiten scroll por hash. |
- Elige el evento de clic que apunte al ID o clase de la sección.
- Ingresa el ID/clase exacto del Paso 1 — ortografía y mayúsculas deben coincidir.
- Guarda los ajustes del botón.
Si la sección solo debe aparecer después de un delay de video, combina esto con cuidado con los ajustes de delay para que el objetivo exista cuando el visitante haga clic. Consulta Ajustes de retraso.
Paso 4: Estilizar y Ubicar el CTA
- Estiliza el botón para contraste claro y un área táctil lo suficientemente grande.
- Usa vista previa responsive para confirmar que el CTA sigue siendo fácil de tocar en mobile.
- Mantén el botón enfocado en una sola función — solo scroll/revelación; pon la explicación en el texto cercano.
Paso 5: Publicar y Probar
- Save y Publish la página.
- Abre la URL en vivo en desktop y haz clic en el botón.
- Confirma que la página se desplaza (o revela) la sección correcta.
- Repite en viewport de teléfono — el auto-scroll puede aterrizar en un punto visual distinto que en desktop.
Solución de Problemas
| Problema | Qué intentar |
|---|---|
| No pasa nada | Confirma que el evento de clic y el ID/clase coincidan exactamente. |
| Se desplaza al lugar incorrecto | Corrige IDs duplicados; selecciona la sección prevista en el Navegador. |
| Falta el objetivo | La sección puede seguir retrasada/oculta — espera el delay o ajusta la visibilidad. |
| Aterriza mal en mobile | Reduce headers sticky/overlays y vuelve a probar el padding de la sección objetivo. |
Resultado
Los visitantes pueden moverse desde tu CTA hasta la sección prevista en la página con un solo clic sin salir de la página del embudo.
Documentación Relacionada
FAQ
¿Puede un botón abrir otra página en lugar de desplazarse?
Sí. Usa un evento de clic de enlace normal con una URL. Consulta Cómo agregar un enlace a un botón.
¿Qué pasa si mi sección está detrás de un delay?
El destino debe existir cuando el visitante hace clic. Si el delay aún oculta la sección, espera la revelación o reduce el delay antes de enviar tráfico.
¿Debo usar ScrollUp para esto?
No. ScrollUp es un control a nivel de página que devuelve visitantes al inicio. Usa un Botón (o acción hash/ID) para saltar hacia abajo a una sección específica.