Deseja visualizar a versão móvel do seu site WordPress? A visualização do layout móvel ajuda você a ver a aparência do seu site em dispositivos móveis.
Embora você certamente possa dar uma olhada no seu site ao vivo em seu telefone, isso não ajuda durante o estágio de desenvolvimento.
Mesmo quando seu site está ativo, geralmente é mais fácil visualizar a versão móvel em um computador desktop, para que você possa fazer alterações rapidamente e ver o efeito delas.
Neste artigo, mostraremos duas maneiras simples de visualizar facilmente o layout móvel do seu site WordPress sem alternar para dispositivos diferentes.
Por que você deve visualizar seu layout móvel
Mais de 50% dos visitantes do seu site usarão seus telefones celulares para acessar seu site. Cerca de 3% estarão usando um tablet.
Isso significa que é essencial ter um site com ótima aparência no celular.
Na verdade, o celular é tão importante que o Google agora está usando um índice “mobile-first” para o algoritmo de classificação de seu site.
Mesmo se você estiver usando um tema WordPress responsivo , você ainda precisa verificar a aparência do seu site no celular. Você pode até querer criar versões diferentes das principais páginas de destino otimizadas para as necessidades dos usuários de dispositivos móveis (mais sobre isso posteriormente).
Neste artigo, abordaremos dois métodos diferentes de testar a aparência do seu site em dispositivos móveis usando navegadores de desktop.
É importante ter em mente que a maioria das visualizações para dispositivos móveis não serão completamente perfeitas porque existem muitos tamanhos de tela e navegadores diferentes. Seu teste final deve ser sempre olhar seu site em um dispositivo móvel real.
Vídeo tutorial
Inscreva-se no WPBeginner
Se você não gostar do vídeo ou precisar de mais instruções, continue lendo.
1. Usando o personalizador de temas do WordPress
Você pode usar o personalizador de temas do WordPress para visualizar a versão móvel do seu site WordPress .
Basta fazer login no seu painel do WordPress e ir para Aparência » Personalizar tela.
Isso abrirá o personalizador de temas do WordPress. Dependendo do tema que você está usando, você pode ver opções ligeiramente diferentes no menu à esquerda aqui:
Na parte inferior da tela, clique no ícone do celular. Você verá uma prévia da aparência do seu site em dispositivos móveis.
Nota: Os símbolos de edição azuis estão presentes apenas no visualizador. Você não os verá em seu site ao vivo.
Esse método de visualização da versão móvel é particularmente útil quando você ainda não terminou de criar seu blog ou quando está em modo de manutenção .
Você pode fazer alterações e verificar como elas ficam antes de colocá-las ao vivo.
2. Usando o modo de dispositivo DevTools do Google Chrome
O navegador Google Chrome possui um conjunto de ferramentas para desenvolvedores que permitem executar várias verificações em qualquer site, incluindo uma visualização de como seu site é exibido em dispositivos móveis.
Basta abrir o navegador Google Chrome em sua área de trabalho e visitar a página que deseja verificar.
Pode ser a visualização de uma página em seu site ou até mesmo o site de seus concorrentes.
Em seguida, você precisa clicar com o botão direito do mouse na página e selecionar ‘Inspecionar’.
Um novo painel será aberto no lado direito, assim:
Na visualização do desenvolvedor, você poderá ver o código-fonte HTML do seu site.
Em seguida, clique no botão ‘Toggle Device Toolbar’ para mudar para a visualização móvel.
Você notará que a visualização do seu site diminuirá para o tamanho da tela do celular.
Você também notará que a aparência do seu site mudará para a visualização móvel. No exemplo acima, o menu foi recolhido e o ícone de pesquisa foi movido para a esquerda em vez de para a direita do menu.
Quando você passa o cursor do mouse sobre a visualização para celular do seu site, ele se torna um círculo, assim:
Este círculo pode ser movido com o mouse para imitar a tela sensível ao toque em um dispositivo móvel.
Você também pode manter pressionada a tecla ‘Shift’ e clicar e mover o mouse para simular o pinçamento da tela do celular para aumentar ou diminuir o zoom.
Acima da visualização móvel do seu site, você verá algumas opções adicionais.
Estes permitem que você faça várias coisas extras. Você pode verificar como seu site ficaria em diferentes tipos de smartphones. Você também pode simular o desempenho do seu site em conexões 3G rápidas ou lentas. Você pode até girar a tela do celular usando o ícone de rotação.
Como criar conteúdo específico para dispositivos móveis no WordPress
É importante que seu site tenha um design responsivo, para que seus visitantes móveis possam navegar facilmente em seu site.
Mas simplesmente ter um site responsivo pode não ser suficiente. Os usuários de dispositivos móveis geralmente procuram coisas diferentes dos usuários de desktop.
Muitos temas e plugins premium permitem que você crie elementos que são exibidos de forma diferente no desktop versus no celular. Você também pode usar um plug-in de construtor de páginas como o Beaver Builder para editar suas páginas de destino na visualização móvel.
Você definitivamente deve criar conteúdo específico para dispositivos móveis para seus formulários de geração de leads. Em dispositivos móveis, eles devem solicitar informações mínimas, de preferência apenas um endereço de e-mail. Eles também devem ter uma boa aparência e ser fáceis de fechar.
Uma ótima maneira de criar pop-ups específicos para dispositivos móveis e formulários de geração de leads é com o OptinMonster . É o plugin popup WordPress mais poderoso e a ferramenta de geração de leads do mercado.
Eles têm regras de exibição de segmentação por dispositivo específicas que permitem exibir campanhas diferentes para usuários de celular e usuários de computador . Você pode até combinar isso com o recurso de segmentação geográfica do OptinMonster e outros recursos avançados de personalização para obter a melhor conversão.
Esperamos que este artigo tenha ajudado você a aprender como visualizar o layout para celular do seu site. Você também pode dar uma olhada em nosso artigo sobre os melhores plugins para converter um site WordPress em um aplicativo móvel .
Bônus: confira nossa seleção dos melhores serviços de telefone comercial , para que você possa adicionar um botão de clique para ligar para usuários móveis.
Se você gostou deste artigo, assine nosso canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook .
