As alterações feitas em um dispositivo aparecem em todos os dispositivos. Por exemplo, quando uma linha é excluída na visualização para tablet do seu site, essa linha também desaparecerá nas visualizações para desktop e dispositivos móveis. Isso ocorre porque o conteúdo pode ser compartilhado entre todos os dispositivos. No entanto, você pode querer diferenciar qual conteúdo aparece em cada dispositivo. Você pode usar nossos recursos de edição por dispositivo para fazer isso e fornecer aos seus visitantes conteúdo apropriado para o dispositivo que eles estão usando para acessar o seu site.
Ao editar as configurações de um dispositivo específico, muitas vezes é necessário alternar entre as visualizações. Para obter mais informações, consulte Alternar visualizações.
Exibir barras de informações
Alguns widgets e recursos podem aparecer apenas em determinados dispositivos. Para alterar o estilo de um widget em um dispositivo específico, clique na visualização do dispositivo na barra de navegação superior para alternar para essa visualização e, em seguida, faça a alteração desejada.
Ocultar no dispositivo
Quase tudo no editor, com exceção do cabeçalho e rodapé, pode ser editado individualmente para cada dispositivo, tornando o conteúdo específico para aquele dispositivo.
Para editar o conteúdo por dispositivo:
- Copie o conteúdo que você deseja que seja específico para o dispositivo. Clique com o botão direito do mouse no widget, clique em copiar e, em seguida, clique em colar.
- Clique com o botão direito do mouse em um dos widgets, selecione "Ocultar no dispositivo" e, em seguida, selecione o dispositivo no qual deseja que o widget seja ocultado. Por exemplo, definir um botão como "Ocultar no computador" remove o botão do computador, mas o exibe nos sites para tablets e dispositivos móveis.
- Clique no conteúdo original e selecione "Ocultar no dispositivo". Em seguida, oculte o conteúdo nos dispositivos em que você não deseja alterá-lo. Por exemplo, se você definir o botão de copiar como "Ocultar no computador", defina o botão original como "Ocultar no tablet" e "Ocultar no celular". Dessa forma, você terá dois botões diferentes: um exibido no computador e outro no tablet e no celular.
- Se você quiser que o conteúdo seja diferente nos três dispositivos, pode copiá-lo novamente (ficando com três cópias do mesmo conteúdo) e exibir um botão diferente em cada dispositivo.
- Agora você tem dois (ou três) conteúdos idênticos, mas diferentes, cada um exibido em um dispositivo diferente. Quaisquer alterações feitas nesse conteúdo afetarão apenas o dispositivo em que ele estiver configurado para ser exibido.
Observação:
O conteúdo oculto ainda pode aparecer no código do site ativo (após a publicação/republicação). Isso é esperado e se deve à tecnologia utilizada. Para obter informações detalhadas, consulte "Por que o conteúdo que ocultei está aparecendo nas auditorias?".
Alterações que não afetam outros dispositivos
Observação:
Muitas configurações indicarão quais dispositivos elas afetam. Por exemplo, uma configuração pode dizer "A alteração afeta desktops e tablets", juntamente com um ícone que representa os dispositivos.
Existem diversas opções no editor que podem ser alteradas sem afetar a experiência em dispositivos móveis. São elas:
- Espaçamento (margens e preenchimento)
- Posicionamento
- Largura
- Altura
- Plano de fundo do site/página
- Tamanho da fonte (não afetará o texto que já foi editado em dispositivos móveis).
- As alterações no cabeçalho e rodapé na visualização para tablets não afetam as visualizações para desktop e dispositivos móveis.
Qualquer outra alteração que você fizer na visualização de cada dispositivo afetará os outros dispositivos.
Além da lista acima, existem outras edições que você pode fazer nas configurações sem afetar outros dispositivos. Essas edições são indicadas por um ícone "As edições afetam apenas este dispositivo" no editor.
Alterações específicas do widget
Embora alguns widgets funcionem bem em todos os dispositivos, existem diferenças drásticas entre eles, o que cria a necessidade de um conjunto diferente de recursos ou preferências de design para cada dispositivo.
A seguir, uma lista de widgets com sugestões de design e notas para adaptar determinados widgets a determinados dispositivos.
Imagens de fundo
Devido às diferenças drásticas nas proporções de tela entre dispositivos, é importante ter um cuidado especial com a forma como você projeta as imagens em seu site.
Por exemplo, um fundo de página inteira em uma linha pode ficar ótimo em um computador, mas horrível em um dispositivo móvel. Isso pode ocorrer porque os computadores são mais adequados para imagens de largura maior, enquanto os dispositivos móveis são exatamente o oposto.
Você pode definir uma imagem de fundo diferente para cada dispositivo nas configurações do tema do site. Recomenda-se usar uma imagem de fundo mais ampla para computadores e uma mais estreita para dispositivos móveis ou tablets.
Widget deslizante
Assim como acontece com a imagem de fundo, as imagens selecionadas para a versão desktop do widget de slider podem não ficar tão boas em tablets ou computadores. Recomenda-se:
- Ajuste o tamanho da moldura do controle deslizante para que ele se ajuste à tela do celular, ou
- Oculte o controle deslizante na versão para desktop e crie uma versão específica para dispositivos móveis.
Widget de imagens e ícones
O tamanho do widget de imagem não é ajustado automaticamente na versão para dispositivos móveis. É importante verificar nos seus dispositivos móveis onde o widget de imagem está sendo usado para fazer os ajustes necessários.
Efeitos de foco em tablets/dispositivos móveis
Em comparação com computadores desktop, tablets e dispositivos móveis não possuem efeito de foco ao passar o mouse. Qualquer opção ou recurso de foco ao passar o mouse está desativado em tablets e dispositivos móveis.
Widget de mapas
O widget Mapa possui opções específicas para cada dispositivo, definindo quando ele será exibido como um botão ou como um mapa.
Widget de formulários de contato
Em dispositivos móveis, os formulários de contato sempre exibirão um campo de entrada por linha.
Considerações
Ao editar widgets específicos para dispositivos, lembre-se de verificar todas as visualizações antes de publicar seu site. Os widgets podem ser facilmente posicionados incorretamente ao usar a opção "Ocultar no dispositivo".
Para obter mais informações sobre como alternar entre visualizações, leia este artigo.