Responsivo

Seu site muda de aparência no celular e no tablet. A simulação de dispositivo mostra a página na largura de cada aparelho, e você pode editar nesse tamanho para ajustar o que o visitante de celular vai ver.

Escolher um dispositivo

1. Com nenhum elemento selecionado, clique no botão Simular dispositivo da barra do editor.

   Elemento selecionado?

   O botão fica bloqueado enquanto há um elemento selecionado e mostra o aviso «Deselecione o elemento para mudar o dispositivo». Escolha o dispositivo antes de selecionar um elemento.

2. Escolha o tamanho na lista.

   

   1. Simular dispositivo: abre a lista de tamanhos.
   2. Os tamanhos disponíveis: Desktop (tamanho nativo), Laptop L (1280 px), Laptop (1024 px), Tablet (768 px), Mobile L (425 px), Mobile (375 px) e Mobile S (320 px).

3. A página passa a ser exibida na largura escolhida, com as regras de layout de celular do seu site. O botão da barra mostra a largura em uso.

   

   1. A largura em uso.
   2. A página na largura do dispositivo.

Ajustar a largura arrastando

Para testar uma largura intermediária, arraste a alça listrada na borda direita da página para os lados.

1. A alça: clique, segure e arraste.

Ao arrastar, a largura exibida no botão da barra é atualizada.

1. A largura em uso depois de arrastar.
2. A alça na nova posição.

Editar no tamanho do celular

Com o dispositivo escolhido, selecione um elemento e edite normalmente. Você vê o resultado já na largura do celular.

1. O elemento editado na simulação.
2. Desfazer: volta a alteração.

Voltar ao tamanho normal

Para voltar ao tamanho da tela, abra a lista de dispositivos e escolha Desktop.

Resultado

Alterações feitas no tamanho de celular valem para a variante (não só para a simulação). Depois de salvar e publicar, abra a variante pelo link de prévia em uma janela de celular.

Controle (antes):

Variante (depois):

1. O texto alterado, exibido no tamanho de celular.

Próximo passo

Veja como trocar de variante e salvar suas alterações.