Cómo agregar un botón que se desplaza a una sección
Usa un Button cuando los visitantes deben saltar de un CTA hero a precios, 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 Page Builder.
- Una sección de destino clara ya en la página (formulario, precios, bloque de oferta).
- El Navigator abierto para leer IDs de sección/elemento con precisión.
Paso 1: Preparar la sección de destino
- Selecciona la sección o container de destino en el canvas (o en el Navigator).
- Anota o define un ID (o class) 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 de destino visible en la página publicada (no oculta en todos los dispositivos), salvo que uses intencionalmente una acción de revelación.
Paso 2: Añadir el Button
- Arrastra un Button above the fold donde se espera el CTA.
- Configura una etiqueta breve como See pricing, Get started o Claim offer.
- Abre la configuración de click event del botón.
Consulta Elemento Button (referencia).
Paso 3: Configurar scroll o revelación
Según las acciones disponibles en la lista de eventos de clic del botón, usa uno de estos enfoques:
| Enfoque | Cuándo usar |
|---|---|
| Show item by ID / class | Revelar sección retrasada u oculta, o interacción de salto ligada a ese ID/class. |
| Link with section hash | Navegar a #your-section-id cuando los IDs de la página admiten scroll por hash. |
- Elige el evento de clic que apunta al ID o class de la sección.
- Introduce el ID/class exacto del Paso 1 — ortografía y mayúsculas/minúsculas deben coincidir.
- Guarda la configuración del botón.
Si la sección solo debe aparecer tras video delay, combina esto con configuraciones de delay con cuidado para que el destino exista cuando el visitante haga clic. Consulta Configuración de delay.
Paso 4: Estilizar y colocar el CTA
- Estiliza el botón para contraste claro y área de toque suficientemente grande.
- Usa vista previa responsive para confirmar que el CTA sigue siendo fácil de tocar en móvil.
- Mantén la función del botón enfocada — 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 a (o revela) la sección correcta.
- Repite en viewport de ancho de teléfono — el auto-scroll puede aterrizar en un punto visual distinto al desktop.
Solución de problemas
| Problema | Qué probar |
|---|---|
| No pasa nada | Confirma que evento de clic e ID/class coinciden exactamente. |
| Se desplaza al lugar incorrecto | Corrige IDs duplicados; selecciona la sección prevista en Navigator. |
| Falta el destino | La sección puede seguir retrasada/oculta — espera el delay o ajusta visibilidad. |
| Móvil aterriza mal | Reduce cabeceras/overlays fijos y vuelve a probar el padding de la sección destino. |
Resultado
Los visitantes pueden ir del CTA a la sección prevista en la página con un clic sin salir de la página del embudo.
Documentación relacionada
Preguntas frecuentes
¿Un botón puede abrir otra página en lugar de desplazarse?
Sí. Usa un evento de clic link normal con 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 arriba. Usa un Button (o acción hash/ID) para saltar hacia abajo a una sección específica.