- Centro de ayuda
- Diseñar y editar
- Variantes responsive y por dispositivo
Variantes responsive y por dispositivo
Crea versiones móvil y escritorio de una pantalla y mantenlas sincronizadas.
Última actualización:
En esta página
Crear una variante
Pídela, o usa el control de dispositivo de la pantalla:
Haz una versión móvil de la landing page.
La variante es una pantalla nueva en el lienzo, adaptada al ancho de destino; no es un redimensionado fluido. Las maquetaciones se reorganizan de verdad: las secciones de varias columnas se apilan, la navegación se pliega, la tipografía baja de escala.
Coste
Convertir una pantalla a otro tamaño de dispositivo se cobra por pantalla a la misma tarifa que una regeneración, porque lo es. Convertir ocho pantallas cuesta ocho veces eso: conviene revisar antes tu saldo.
Mantener las variantes sincronizadas
Las variantes son pantallas separadas, así que una edición posterior en la versión de escritorio no pasa automáticamente a la de móvil. Dos opciones:
- Pide el cambio en ambas de forma explícita: «En la landing page de escritorio y en la de móvil, cambia el CTA a “Empieza gratis”».
- O termina primero el diseño de escritorio y genera las variantes de una vez al final. Suele ser el orden de operaciones más barato.
El tema es compartido
Ambas variantes usan el tema del proyecto, así que los cambios de color y tipografía se aplican a las dos automáticamente. Solo la maquetación es propia de cada variante.
Código exportado
El código exportado refleja la pantalla que has exportado. Si necesitas una única implementación realmente responsive en lugar de dos maquetaciones fijas, exporta la pantalla de escritorio y adáptala, o exporta ambas y fusiónalas en el breakpoint. Consulta Exportar código.
¿Te ha resultado útil este artículo?
Artículos relacionados
Editar una pantalla
Las tres formas de cambiar un diseño —chat, modo edición y temas— y cuándo cada una es la herramienta adecuada.
Temas y guías de estilo
Cómo funciona el tema del proyecto, cómo cambiarlo sin riesgo y por qué los colores no deben editarse pantalla por pantalla.
Exportar código (HTML, React, Tailwind)
Exporta una sola pantalla o un proyecto entero como código de front end listo para producción.