Central de Ajuda
Como ajustar a versão móvel de um site
Como configurar adicionalmente a exibição da página em diferentes dispositivos
Tilda adapta automaticamente os sites para diferentes dispositivos: smartphones, tablets, laptops e computadores de mesa. Se necessário, você pode configurar com flexibilidade a versão móvel dos blocos padrão ou criar sua própria versão responsiva do site usando Zero Block.
Leia este guia detalhado para saber como configurar a versão móvel de um site em Tilda.
Leia este guia detalhado para saber como configurar a versão móvel de um site em Tilda.
Modo de edição da versão para celular
Depois de adicionar e configurar os blocos padrão, você também pode editar a versão para dispositivos móveis deles. Para isso, clique no ícone de dispositivo móvel no centro do painel do editor de páginas.
No menu suspenso, selecione o tamanho de tela desejado. Se precisar verificar como a página fica em um dispositivo específico, selecione-o ou a opção mais próxima na seção “Dispositivos”.
No menu suspenso, selecione o tamanho de tela desejado. Se precisar verificar como a página fica em um dispositivo específico, selecione-o ou a opção mais próxima na seção “Dispositivos”.
O editor passará para o modo móvel, facilitando a edição dos blocos.
Importante: Alternar para a exibição em blocos no editor não constitui uma visualização completa do site criado. Nesse modo, as animações não funcionam e alguns blocos podem ser exibidos de maneira diferente daquela na página publicada. Para ver como o site ficará após a publicação, clique em “Visualizar”.
Modo de visualização
No modo de visualização, clique no ícone do dispositivo móvel e selecione o tamanho de tela desejado.
Importante: Não é possível editar as configurações do bloco no modo de visualização. Ele serve apenas para verificar como a página é exibida.
Para ocultar a interface do editor, clique no ícone de setas no canto inferior esquerdo ou ao lado da opção “Voltar à edição”.
Para alterar a escala da visualização, clique no ícone de 100% e selecione o valor desejado no menu suspenso.
Clique no ícone do lápis para voltar ao editor e fazer alterações nos blocos.
Editando as configurações do bloco para a versão móvel
Cada bloco possui configurações separadas de espaçamento e tipografia para a versão móvel. Dependendo do bloco, também podem estar disponíveis configurações adicionais para elementos individuais em dispositivos móveis. Essas configurações geralmente são indicadas por dicas no painel de configurações.
Por exemplo, um bloco de menu pode ter uma aba de configurações separada para isso.
Por exemplo, um bloco de menu pode ter uma aba de configurações separada para isso.
Nos blocos de capa, as configurações da versão para celular podem ser identificadas por um ícone de telefone.
Para acessar as configurações específicas para um dispositivo móvel, clique no ícone de desktop ao lado do campo desejado. Um campo adicional com um ícone de smartphone será exibido.
Como alterar o tamanho da fonte e o espaçamento entre linhas para dispositivos móveis. Nas configurações do bloco, abra a seção “Tipografia”, clique no ícone do desktop e insira o tamanho da fonte para a versão móvel no campo com o ícone do dispositivo móvel.
O espaçamento entre linhas é configurado da mesma forma.
O espaçamento entre linhas é configurado da mesma forma.
Alteração do raio dos cantos e do preenchimento das imagens de capa em dispositivos móveis. É possível definir um valor separado para o raio dos cantos ou para o preenchimento em dispositivos móveis nos blocos das categorias “Capa” e “Imagem”.
Para alterar o raio ou o preenchimento, clique em “Configurações” e localize o campo desejado. Em seguida, clique no ícone de desktop ao lado do campo e insira o valor para a versão móvel.
Para alterar o raio ou o preenchimento, clique em “Configurações” e localize o campo desejado. Em seguida, clique no ícone de desktop ao lado do campo e insira o valor para a versão móvel.
Alteração da posição da imagem de fundo. Nos blocos de capa e em outros blocos em que essa configuração estiver disponível, você pode selecionar a parte da imagem que será exibida no bloco.
Para definir a posição automática, selecione o valor adequado no menu suspenso; por exemplo, “Centralizar”.
Para definir a posição automática, selecione o valor adequado no menu suspenso; por exemplo, “Centralizar”.
Para definir a posição manualmente, clique no ícone ao lado do campo.
A imagem com os pontos de posicionamento será exibida. Você pode selecionar um dos pontos já disponíveis ou inserir seu próprio ponto onde for necessário.
O posicionamento ajuda a ajustar a forma como a imagem de fundo é exibida na versão para celular, de modo que a mesma imagem fique bem em diferentes telas.
Configurando o preenchimento para dispositivos móveis
Em qualquer bloco, abra as configurações, clique no ícone ao lado dos campos “Espaço superior” ou “Espaço inferior” e insira o valor para o dispositivo móvel.
Faixa de visibilidade em diferentes dispositivos
Se você precisar que blocos diferentes sejam exibidos em smartphones e computadores, configure o intervalo de visibilidade.
Abra as configurações do bloco e role a página para baixo até a opção “Visibilidade do bloco nos dispositivos”. Especifique em quais dispositivos o bloco deve ser exibido. Em seguida, salve as configurações e publique a página novamente.
Abra as configurações do bloco e role a página para baixo até a opção “Visibilidade do bloco nos dispositivos”. Especifique em quais dispositivos o bloco deve ser exibido. Em seguida, salve as configurações e publique a página novamente.
Configurando o design responsivo em Zero Block
Você pode configurar a responsividade do bloco para diferentes dispositivos, convertendo-o em um bloco do tipo “ Zero Block ” por meio da opção disponível nas configurações do bloco. Atualmente, essa opção está disponível na maioria dos blocos.
Depois de converter um bloco em “ Zero Block ”, o conteúdo e o design serão redefinidos para as configurações padrão. Será necessário adicionar o texto e as imagens ao bloco novamente.
Após a conversão, você poderá configurar manualmente a aparência do bloco em cinco faixas de largura de tela ou adicionar suas próprias faixas. Saiba mais sobre como configurar o design responsivo no Zero Block , nos artigos “Zero Block: Como criar um bloco personalizado ” e “Zero Block: Design responsivo ”.
Desativando a responsividade da página
Se você desativar a responsividade, a página para dispositivos móveis terá a mesma aparência que a versão para computadores.
Para desativar a versão responsiva, acesse Configurações da página → Adicional, marque a caixa de seleção “Desativar visualização para dispositivos móveis” e publique a página novamente.
Para desativar a versão responsiva, acesse Configurações da página → Adicional, marque a caixa de seleção “Desativar visualização para dispositivos móveis” e publique a página novamente.
