Como otimizar um site para visualização em dispositivos móveis
Configurar a exibição da página em vários dispositivos
Tilda ajusta automaticamente o site para visualização em tablets, smartphones, netbooks, laptops e computadores.
Além disso, você pode alterar os tamanhos dos preenchimentos entre os blocos para dispositivos móveis, ajustar a visibilidade do bloco em diferentes dispositivos, criar sua própria versão adaptável usando o editor Zero Block ou desativar a adaptabilidade do site.
Como criar diferentes versões de blocos para computadores e dispositivos móveis
Como alterar os valores dos paddings para dispositivos móveis
Como alterar o tamanho da fonte, o espaçamento entre linhas, bem como o raio da borda e os preenchimentos externos das imagens para capas de dispositivos móveis
Como editar a versão móvel e visualizar as alterações de uma só vez
Como criar sua própria versão do site para dispositivos móveis usando o editor Zero Block
Como desativar a adaptabilidade do site para telas diferentes
Bloquear a visibilidade dos dispositivos
Essa configuração determina quais blocos podem ou não ser exibidos em determinados tipos de dispositivos. Você pode ajustar esse recurso nas configurações de qualquer bloco.
Por que você pode precisar dele e como ele funciona
Se um bloco tiver boa aparência no desktop, mas não tiver a mesma qualidade no celular, talvez você queira definir a visibilidade do bloco para 980px ou mais. Dessa forma, o bloco será orientado para desktop e não aparecerá em dispositivos móveis.
Em seguida, você precisará copiar esse bloco e otimizá-lo para visualização em dispositivos móveis ajustando suas configurações (como alterar a imagem, o tamanho da fonte etc.). Defina a visibilidade do bloco como "0-980px". Você obterá uma versão móvel do bloco.
Assim, as pessoas que acessam seu site de um PC verão a versão para desktop e os usuários de celular verão a versão para celular.
A visibilidade do bloco (diferentes valores de parâmetros) é útil para que você possa ajustar a aparência do bloco para um dispositivo específico selecionando a resolução, se necessário. Por exemplo, se alguns blocos não ficarem bem em tablets ou em celulares específicos.
Se um bloco tiver boa aparência no desktop, mas não tiver a mesma qualidade no celular, talvez você queira definir a visibilidade do bloco para 980px ou mais. Dessa forma, o bloco será orientado para desktop e não aparecerá em dispositivos móveis.
Em seguida, você precisará copiar esse bloco e otimizá-lo para visualização em dispositivos móveis ajustando suas configurações (como alterar a imagem, o tamanho da fonte etc.). Defina a visibilidade do bloco como "0-980px". Você obterá uma versão móvel do bloco.
Assim, as pessoas que acessam seu site de um PC verão a versão para desktop e os usuários de celular verão a versão para celular.
A visibilidade do bloco (diferentes valores de parâmetros) é útil para que você possa ajustar a aparência do bloco para um dispositivo específico selecionando a resolução, se necessário. Por exemplo, se alguns blocos não ficarem bem em tablets ou em celulares específicos.
Não há necessidade de alterar a configuração de visibilidade do bloco para todos os blocos. Você pode ajustá-la para os blocos em que uma foto não foi bem cortada ou se o bloco selecionado não for adequado para a versão móvel.
Exemplo
Temos uma capa que fica ótima no desktop, com o texto alinhado à esquerda e o objeto principal à direita. Agora, vamos ajustá-la para que fique boa também em dispositivos móveis.
Como podemos ver, a foto é cortada em um telefone celular e não fica muito boa.
Defina a visibilidade do bloco como "> 980px". Agora, os usuários de dispositivos móveis não o verão mais.
Copie o bloco.
Ajuste o bloco para a versão móvel - altere o alinhamento da foto e do texto.
Vamos definir a visibilidade desse bloco como "≤ 980px", pois ele não aparecerá em dispositivos com telas maiores que 980px.
Pronto! Agora a capa é exibida de forma diferente em vários dispositivos, dependendo da largura da tela.
Exemplos de largura de tela para vários dispositivos:
iPhone5: 320px
iPhone6: 375px
iPhone6+: 414px
iPad: 1024px
Samsung Galaxy: 360px
Nokia Lumia: 320px
iPhone6: 375px
iPhone6+: 414px
iPad: 1024px
Samsung Galaxy: 360px
Nokia Lumia: 320px
Configuração dos preenchimentos para dispositivos móveis
Em qualquer bloco, abra as configurações, clique no ícone ao lado da opção "Top padding" (Preenchimento superior) e "Bottom padding" (Preenchimento inferior) e defina o espaçamento para o dispositivo móvel.
Configurações adicionais para dispositivos móveis
Em qualquer bloco, você também pode alterar o tamanho da fonte e o espaçamento entre linhas para dispositivos móveis e pode definir cantos arredondados para imagens separadamente.
Alteração do tamanho da fonte e do espaçamento entre linhas para dispositivos móveis
Para fazer isso, clique no botão "Settings" (Configurações) do bloco e localize a guia "Typography" (Tipografia). Nessa guia, clique no ícone de computador ao lado do campo. Em seguida, aparecerá um campo no qual você poderá especificar o tamanho da fonte para a versão móvel.
A mesma ordem de ações é aplicada para alterar o espaçamento entre linhas.
A mesma ordem de ações é aplicada para alterar o espaçamento entre linhas.
Alteração do raio da borda da imagem e do preenchimento da capa para dispositivos móveis
Você pode definir seu próprio valor de raio de borda ou preenchimento externo para capas especificamente para dispositivos móveis em todos os blocos das categorias "Cover" e "Image".
Para alterar o raio ou o preenchimento, clique no botão "Settings" (Configurações) e localize o campo correspondente. Clique no ícone de computador ao lado do campo e digite o novo valor no novo campo.
Para alterar o raio ou o preenchimento, clique no botão "Settings" (Configurações) e localize o campo correspondente. Clique no ícone de computador ao lado do campo e digite o novo valor no novo campo.
Exibir a versão móvel dos blocos no editor
Esse recurso está disponível somente no modo de teste. Para acessá-lo, marque a caixa de seleção "Opt-in to become a beta-tester and try new features before they are released" (Aceitar para se tornar um testador beta e experimentar novos recursos antes de serem lançados) em seu Profile.
Para editar a versão móvel de um bloco, alterne a exibição no editor para a versão móvel. Para fazer isso, clique no ícone de telefone no menu na parte superior e selecione a orientação do dispositivo desejado ou o tamanho dele.
Por padrão, há quatro tamanhos de tela disponíveis: 360px e 480px para um smartphone, 640px e 960px para um tablet.
Para selecionar um tamanho de dispositivo móvel diferente, clique em "Devices" (Dispositivos) na lista. No submenu, selecione o dispositivo de que precisa. Todos os dispositivos móveis e tablets atualizados já foram adicionados à lista.
Depois de alternar o modo de exibição do bloco no editor, clique no botão "Settings" (Configurações) do bloco. Agora você pode configurar a versão móvel e as alterações serão exibidas na visualização imediatamente.
Configuração da adaptabilidade no Zero Block
Você pode ajustar a adaptabilidade do bloco para vários dispositivos convertendo-o em Zero Block usando uma opção nas configurações do bloco. No momento, essa opção está disponível na maioria dos blocos.
Depois que o bloco é convertido, é possível ajustar manualmente sua aparência para cinco versões de larguras de tela. Você pode ler mais sobre como configurar a adaptabilidade no Zero Block em "Zero Block: Como criar um bloco personalizado" e "Zero Block: Design responsivo".
Desativação da adaptabilidade de página
Se você desativar a adaptabilidade, a página será exibida em dispositivos móveis da mesma forma que em um computador. Para fazer isso, marque a caixa de seleção Desativar visualização móvel em Configurações da página → Adicional e republique a página.
A versão do site adaptada para dispositivos móveis está à esquerda e o site com a adaptabilidade desativada está à direita.
