Variantes responsivas e por dispositivo
Crie versões mobile e desktop de uma tela e mantenha-as em sintonia.
Última atualização:
Criar uma variante
Peça, ou use o controle de dispositivo na tela:
Faça uma versão mobile da landing page.
A variante é uma tela nova no canvas, adaptada à largura de destino — não é um redimensionamento fluido. Os layouts são de fato reorganizados: seções de várias colunas empilham, a navegação recolhe, a tipografia diminui de escala.
Custo
Converter uma tela para outro tamanho de dispositivo é cobrado por tela na mesma taxa de uma regeneração, porque é uma. Converter oito telas custa oito vezes isso — vale conferir seu saldo antes.
Manter as variantes em sintonia
Variantes são telas separadas, então uma edição posterior na versão desktop não desce automaticamente para a mobile. Duas opções:
- Peça a mudança nas duas explicitamente: “Nas landing pages desktop e mobile, mude o CTA para ‘Começar grátis’.”
- Ou termine primeiro o design desktop e gere as variantes de uma vez no fim. Costuma ser a ordem mais barata.
O tema é compartilhado
As duas variantes usam o tema do projeto, então mudanças de cor e fonte valem para ambas automaticamente. Só o layout é próprio de cada variante.
Código exportado
O código exportado reflete a tela exportada. Se você precisa de uma implementação realmente responsiva em vez de dois layouts fixos, exporte a tela desktop e adapte, ou exporte as duas e junte no breakpoint — veja Exportar código.
Este artigo foi útil?
Artigos relacionados
Editar uma tela
As três formas de mudar um design — chat, modo edição e tema — e quando cada uma é a ferramenta certa.
Temas e guias de estilo
Como funciona o tema do projeto, como mudá-lo com segurança, e por que cores nunca devem ser editadas tela por tela.
Exportar código (HTML, React, Tailwind)
Exporte uma tela sozinha ou um projeto inteiro como código de front-end pronto para produção.