Central de Ajuda
Ajustando a versão para celular de um site
Como personalizar ainda mais 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 personalizar com flexibilidade a versão móvel dos blocos padrão ou criar sua própria versão responsiva do site usando Zero Block.
Neste guia, explicamos em detalhes como configurar a versão móvel de um site em Tilda.
Neste guia, explicamos em detalhes 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 blocos padrão, você também pode editar sua versão para dispositivos móveis. 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 visualização em blocos no editor não constitui uma pré-visualização completa do site finalizado. Nesse modo, as animações não funcionam e alguns blocos podem ser exibidos de maneira diferente da página publicada. Para ver como o site ficará após a publicação, clique em “Pré-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 alterar as configurações do bloco no modo de visualização. Esse modo serve apenas para verificar como a página é exibida.
Para ocultar a interface do editor, clique no ícone de seta no canto inferior esquerdo ou ao lado de “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 seção de configurações específica para isso.
Por exemplo, um bloco de menu pode ter uma seção de configurações específica 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 da imagem e do espaçamento externo para capas em dispositivos móveis. É possível definir um valor separado para o raio dos cantos ou para o espaçamento externo em dispositivos móveis nos blocos das categorias “Capa” e “Imagem”.
Para alterar o raio ou o espaçamento, 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 espaçamento, 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 do posicionamento 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 o posicionamento automático, selecione o valor apropriado no menu suspenso; por exemplo, “Centralizado”.
Para definir o posicionamento automático, selecione o valor apropriado no menu suspenso; por exemplo, “Centralizado”.
Para definir o posicionamento manualmente, clique no ícone ao lado do campo.
A imagem com os pontos de posicionamento será exibida. Você pode selecionar um dos pontos já definidos 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 seja exibida corretamente em diferentes telas.
Configurando o espaçamento 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 até a seção “Intervalo de visibilidade 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 até a seção “Intervalo de visibilidade 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.
Após converter um bloco para o formato “ Zero Block ”, o conteúdo e o design voltarão às configurações padrão. Será necessário adicionar novamente o texto e as imagens ao bloco.
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 ” (Introdução) e “ Zero Block ” (Design responsivo).
Desativando a responsividade da página
Se você desativar a responsividade, a página será exibida em dispositivos móveis da mesma forma que no computador.
Para desativar a versão responsiva, acesse Configurações da página → Adicionais, selecione “Desativar responsividade para dispositivos móveis” e publique a página novamente.
Para desativar a versão responsiva, acesse Configurações da página → Adicionais, selecione “Desativar responsividade para dispositivos móveis” e publique a página novamente.
