Altere o seu app
Pré-visualização
O app em execução ao lado do chat: a barra acima dele, editar uma palavra no lugar, o tema, navegar entre páginas e seções, e ver o app no tamanho de celular, tablet ou computador.
A pré-visualização é o seu app, em execução, à direita do chat. Tudo nela funciona como vai funcionar depois de publicado: os botões, os formulários, as páginas.
A barra acima dela
Da esquerda para a direita:
| O que faz | |
|---|---|
| Preview, o ícone de código, o ícone de pilha | O app, o seu código e a Visão geral. |
| Edit | Clique em uma palavra na pré-visualização e reescreva-a, ou em um elemento para mudar a aparência dele. O (i) ao lado diz como. Veja abaixo. |
| Theme | As cores e as fontes do app inteiro, em um só lugar. |
| A caixa no meio | A página ou seção que você está vendo. Abra-a para ir a qualquer outra. A seta à esquerda dela recarrega a pré-visualização. |
| O quadrado com uma seta | Abre o app publicado, depois que ele estiver publicado. |
| As setas para trás e para a frente | Desfazer e refazer. Elas aparecem depois da primeira alteração, e cada clique é um passo, até onde vai esta sessão. |
| O menu de tamanho | No frame, Desktop, Tablet ou Mobile. Veja abaixo. |
| Os quatro cantos | Tela cheia, e voltar. |
| × | Fecha a pré-visualização, para que o chat ocupe a largura toda. |
No celular
Um celular tem espaço para um painel de cada vez. Dois botões na parte de baixo, Chat e Preview, alternam entre a conversa e o seu app. O × que fecha a pré-visualização só existe em uma tela maior, e a Split view (veja Código) só existe em computador.
Em todos os tamanhos
O menu de tamanho mostra o app como ele vai ficar em cada tela.
- No frame preenche o painel, como na imagem acima.
- Desktop o coloca em uma janela de navegador, com o endereço publicado no alto.
- Tablet e Mobile o colocam em um tablet ou em um celular, na largura real deles.
Todo app é criado para os três tamanhos, e medido na largura de um celular depois de toda criação e de toda alteração. Mesmo assim, olhar por aqui é a forma mais rápida de ver o que um visitante em um celular vai ver.
Editar no lugar
Com Edit ligado, o botão passa a dizer Editing, e a pré-visualização deixa de ser uma página para usar e vira uma página para alterar. Aponte para um texto e Edit text aparece sobre ele: clique e digite. Clique em qualquer elemento e ele ganha um contorno, com uma barra de ferramentas na base da pré-visualização.
| Ferramenta | O que faz |
|---|---|
| Edit Element | Descreva em uma frase uma alteração para este único elemento, e a IA o reescreve. |
| Text | Reescreva o texto. |
| Background, Text color, Text style | As cores dele, e o tamanho, o peso, o alinhamento e a aparência do texto. |
| Opacity, Spacing | O quanto ele é transparente, e o espaço ao redor e dentro dele. |
| Image, Video | Troque ou remova a imagem ou o vídeo que ele contém. Em uma imagem, Adjust size & fit define como ela preenche o espaço dela. |
| O ícone de código | Edit code: o código deste elemento, em um painel, para alterar à mão. |
| Duplicate, Delete | Uma cópia dele logo depois, ou removê-lo. |
| Cancel, Save | Descartar as alterações, ou gravá-las no código. |
A seta no fim recolhe a barra, e o × solta o elemento. Clique duas vezes em um botão para ir à página que ele abre.
As alterações feitas com as ferramentas não custam créditos. O Edit Element é escrito pela IA, então usa alguns, como uma resposta do chat. Para qualquer coisa maior que um elemento, uma seção nova, um formulário, uma página, peça no chat.
Theme
Theme reúne as cores e as fontes que o app inteiro usa, em um painel à direita. Mude uma e todo lugar que a usa a acompanha, em todas as páginas.
- Colors lista cada cor, para que serve e quantas vezes o app a usa. Clique em uma amostra para escolher outra.
- Fonts lista cada fonte, com quantas vezes ela é usada. Escolha outra na lista.
A pré-visualização mostra cada mudança conforme você a faz. Save & Apply as grava no código, e Cancel devolve tudo como estava. Um tema não custa créditos, e a versão anterior a ele fica guardada em History.
Desfazer e o Histórico
Desfazer e refazer percorrem as alterações desta sessão, uma por clique. Para qualquer coisa mais antiga, toda alteração fica guardada em History, no alto do editor, com o nome do que ela fez, e você pode voltar a qualquer versão. Voltar também fica guardado como uma versão, então você pode avançar de novo.
Esta página foi útil?