Vista previa y vistas receptivas
Los controles de vista previa y respuesta lo ayudan a revisar el aspecto de una página antes de publicarla.
Utilice el modo de vista previa para inspeccionar la página sin las distracciones habituales de edición. Utilice controles responsivos para comprobar los diseños de escritorio, tableta y dispositivos móviles mientras edita.
Modo de vista previa
El encabezado del generador incluye un interruptor de vista previa.
Cuando la vista previa está habilitada, la página se muestra más cerca de cómo la experimentarán los visitantes. Esto es útil para comprobar el espaciado, el flujo de las secciones, los botones, los medios y el pulido visual general.
Utilice el modo de vista previa antes:
- Guardar ediciones finales.
- Publicar una página.
- Probar un flujo de formulario o botón.
- Revisar una página con un compañero de equipo o cliente.
Vistas receptivas
Los controles responsivos le permiten revisar la página en diferentes anchos de dispositivo.
Úsalos para comprobar:
- Si las columnas se apilan correctamente en el móvil.
- Si los botones permanecen visibles y fáciles de tocar.
- Si el texto sigue siendo legible.
- Si los vídeos, imágenes, formularios y bloques de productos se ajustan a la pantalla.
- Si el espacio se siente equilibrado entre dispositivos.
Flujo de trabajo de revisión adaptable recomendado
- Cree el diseño principal en la vista de escritorio.
- Cambie a la vista de tableta y revise el ancho, el espaciado y la alineación de las secciones.
- Cambie a la vista móvil y verifique el apilamiento, la tipografía y la ubicación de los botones.
- Solucione cualquier problema de diseño, desde las secciones más grandes a las más pequeñas.
- Obtenga una vista previa nuevamente antes de guardar o publicar.
Problemas móviles comunes que se deben verificar
| Problema | Qué revisar |
|---|---|
| Texto demasiado grande o demasiado pequeño | Encabezados, párrafos, botones, etiquetas y campos de formulario. |
| Mal orden de apilamiento | Secciones de varias columnas, medios junto al texto y áreas de productos. |
| Desbordamiento horizontal | Imágenes anchas, HTML personalizados, tablas, contenido iframe o contenedores de ancho fijo. |
| Espaciado excesivo | Relleno y márgenes heredados del estilo del escritorio. |
| Botones difíciles de tocar | Tamaño, espaciado y posición de los botones. |
Mejores prácticas
- No asuma que los cambios en el escritorio se ven bien automáticamente en el móvil.
- Consulta cada sección de conversión en dispositivos móviles.
- Revisar los campos del formulario después de editar el espaciado o la tipografía.
- Obtenga una vista previa cuidadosa del contenido personalizado de HTML y iframe porque es posible que el contenido externo no cambie de tamaño automáticamente.
- Guardar después de completar las correcciones de respuesta.
Documentación relacionada
Preguntas frecuentes
¿Cuándo debo usar esta página sobre Vista previa y vistas receptivas?
Use esta página cuando necesite entender el flujo, la configuración o las decisiones relacionadas con Vista previa y vistas receptivas. Es especialmente útil antes de editar un recurso en producción, publicar cambios o revisar el comportamiento en un espacio de trabajo de Atomicat.
¿Qué debo revisar antes de cambiar Vista previa y vistas receptivas?
Confirme que está en el espacio de trabajo, proyecto, página, embudo, sitio o área de cuenta correcta. Revise permisos, cambios guardados, estado de publicación e integraciones conectadas antes de actualizar.
¿Cómo verifico que Vista previa y vistas receptivas funciona correctamente?
Previsualice la página o función afectada, pruebe el recorrido principal en una nueva sesión del navegador y confirme que formularios, redirecciones, seguimiento, productos, quizzes o publicación se comporten como espera.
¿Qué hago si Vista previa y vistas receptivas no funciona como esperaba?
Revise nuevamente la configuración descrita en esta página, guarde los cambios otra vez, limpie la caché del navegador si es necesario y pruebe una versión simple de la configuración. Si continúa, reúna la URL, detalles del espacio de trabajo y capturas antes de contactar soporte.