Você sabia que talvez mais da metade dos seus visitantes acessem seu site pelo celular ou tablet? Neste guia, você verá as etapas essenciais para proporcionar uma experiência perfeita ao usuário em todos os tamanhos de tela, desde a seleção de um tema responsivo até o ajuste do seu conteúdo.
Neste guia
Escolher um tema compatível com dispositivos móveis em um site do WordPress é crucial para fornecer ao usuário uma experiência otimizada e simplificada em vários dispositivos. Assim, você melhora a acessibilidade e impacta positivamente as classificações dos mecanismos de busca.
Todos os temas oferecidos no WordPress.com são responsivos para dispositivos móveis, o que significa que eles foram projetados para ficarem ótimos tanto nesses dispositivos quanto em desktops.
Se você estiver usando um tema de terceiros, verifique se ele é anunciado como compatível com dispositivos móveis e se fica bonito quando aberto nesses dispositivos. Consulte a documentação do tema para ver as opções ou configurações de personalização e controlar a aparência do tema em dispositivos móveis.
Depois de escolher um tema responsivo para dispositivos móveis, você provavelmente fará alterações no conteúdo padrão para deixá-lo com a sua cara. Conforme você edita seu site no editor do WordPress, é importante garantir que ele fique bom em todas as telas.
Não há um “editor móvel” separado no WordPress. As alterações feitas no seu site afetam tanto dispositivos móveis quanto desktops. Desde que seu site tenha um tema compatível com dispositivos móveis, o conteúdo se adaptará a todas as telas, grandes e pequenas. Isso é chamado de “responsividade”.
Clique no ícone Visualização, no canto superior direito do editor, para ver como seu site é exibido para um visitante. Selecione Celular ou Tablet para ver uma aproximação de como o conteúdo aparecerá:
Dissemos aproximação porque muitos elementos da visualização do editor são informados pelo tema do site. Os estilos do tema não são exibidos no editor, apenas ao ver a página em uma nova guia ou o seu site no navegador do dispositivo. Para ver seu conteúdo com os estilos do tema aplicados, clique na opção “Visualizar em uma nova guia“.
Após clicar na opção “Visualizar em uma nova guia“, use a ferramenta de inspeção no navegador para ver a versão móvel. Para usar o modo de inspeção do navegador e visualizar como uma página ou post aparecerá em dispositivos móveis:
- Clique no ícone Visualização no canto superior direito do editor do WordPress.
- Selecione a opção “Visualizar em uma nova guia“.
- Clique com o botão direito na página de visualização e, em seguida, em “Inspecionar” (Chrome, Edge) ou “Inspecionar elemento” (Safari, Firefox).
- No modo de inspeção do navegador, clique no ícone de dispositivo móvel para mudar para essa visualização.
Depois de publicar as alterações, abra o site no celular ou tablet para acessá-lo como um visitante, fazendo uma verificação final para garantir que ele apareça como o esperado.
Aqui estão algumas dicas para maximizar a capacidade de resposta do design do seu site, garantindo que o conteúdo seja bem apresentado em celulares, tablets e desktops.
Se uma imagem contiver texto, ele poderá ser cortado em telas menores como esta:
Isso ocorre porque o texto criado dentro de uma imagem não é responsivo.
No editor do WordPress, você pode escrever texto sobre uma imagem. O texto adicionado dessa forma é responsivo. No vídeo abaixo, recriaremos a mesma imagem acima com o bloco de cobertura para demonstrar sua capacidade de resposta em telas menores:
Para maximizar a capacidade de resposta do dimensionamento de fontes na sua página, use as unidades em ou rem em vez de pixels (px). Usar pixels para o tamanho da fonte é basicamente criar códigos fixos com o tamanho na página. Assim, a fonte sempre será exibida nesse tamanho exato, independentemente do tamanho da tela. Por outro lado, em e rem são unidades de tamanho relativo que se ajustam para cima ou para baixo dependendo do espaço disponível na tela do visitante.
Em vez de usar um menu de texto para o layout de dispositivos móveis, personalize o bloco de navegação do seu site para exibir o menu móvel, chamado de menu de sobreposição ou “menu hambúrguer”. Essa funcionalidade pode ajudar a deixar o cabeçalho mais compacto, e o menu mais acessível para visualização e uso em dispositivos móveis.
Alguns blocos incluem a opção de empilhar em dispositivos móveis, que usa melhor o espaço em telas menores. Se o conteúdo for exibido lado a lado em uma tela de desktop, ele ficará “empilhado” em telas menores para que seja mais facilmente lido por visitantes em dispositivos móveis.
A configuração “Empilhar em dispositivos móveis” está disponível nos seguintes blocos:
Será mais fácil ler os botões e menus em dispositivos menores se forem ajustados em várias linhas.
A opção “Permitir quebra de linhas” está disponível nas configurações de layout dos seguintes blocos:
- Bloco de botões
- Bloco de botões de compartilhamento
- Bloco de navegação
- Bloco de ícones de redes sociais
- Bloco de comentários
- Blocos de linha e pilha
O Accelerated Mobile Pages é uma estrutura open source de terceiros que permite a criação de sites carregados quase instantaneamente em dispositivos móveis, proporcionando aos visitantes uma experiência de navegação rápida. Para adicionar o AMP ao seu site, instale o plugin AMP. Em sites do WordPress.com criados antes de 13 de junho de 2022 que tenham plugins ativados, o plugin AMP foi instalado por padrão.
Lembre-se de que o uso do AMP remove muitas funcionalidades do seu site (layout, vários recursos) para acelerar o carregamento em dispositivos móveis. É melhor usá-lo apenas se o seu tema foi criado com o AMP em mente. Todos os temas no WordPress.com já são compatíveis com dispositivos móveis, então o AMP não é necessário para oferecer uma experiência otimizada para esses dispositivos.
Se o seu site estiver com problemas de exibição e o AMP estiver instalado, recomendamos desativar o plugin para ver se isso melhora o desempenho do site. A desativação também será recomendada se a opção “Sair da versão para dispositivos móveis” for exibida e você quiser removê-la completamente.
Se o seu site usa o AMP há algum tempo, lembre-se de que o Google não atualiza os resultados imediatamente e continuará exibindo as páginas AMP por algum tempo depois da desativação. Configure os redirecionamentos de página após desativar o AMP. Os mecanismos de busca indexam as URLs de páginas AMP e levará algum tempo para exclui-las das listas deles. Por isso, alguns visitantes em dispositivos móveis podem ser enviados para uma página de erro 404.
Há vários plugins de redirecionamento gratuitos e conhecidos para você escolher. Você configurará um redirecionamento 301 e provavelmente precisará de uma expressão Regex semelhante a /(.*)\/amp. Recomendamos fazer alguns testes para garantir que você configurou o redirecionamento correto e consultar os guias de instruções do plugin de redirecionamento.
Suporte 