Como visualizar a versão móvel de sites do WordPress a partir do desktop

Deseja visualizar a versão móvel de seu site WordPress?

A visualização prévia do layout móvel ajuda a ver como o site fica em dispositivos móveis. Quando seu site está em desenvolvimento ou mesmo quando está no ar, geralmente é mais fácil visualizar a versão móvel em um computador desktop. Assim, você pode fazer alterações rapidamente e ver o efeito delas.

Neste artigo, mostraremos como visualizar uma versão móvel do site do WordPress em um computador.

Por que você deve visualizar seu layout para celular

Mais de 50% dos visitantes do seu site usarão telefones celulares para acessar o seu site. Cerca de 3% usarão um tablet.

Isso significa que é muito importante ter um site com boa aparência em dispositivos móveis.

Na verdade, o celular é tão importante que o Google agora está usando um índice mobile-first para seu algoritmo de classificação de sites. Isso significa que o Google usará a versão móvel do seu site para indexação. Você pode saber mais lendo nosso guia definitivo de SEO para WordPress.

Mesmo que esteja usando um tema responsivo do WordPress, você ainda precisa verificar a aparência do seu site no celular. Talvez você queira criar versões diferentes das principais páginas de destino que sejam otimizadas para as necessidades dos usuários móveis.

É importante ter em mente que a maioria das visualizações para celular não será totalmente perfeita, pois há muitos tamanhos de tela e navegadores diferentes para celular. Seu teste final deve ser sempre a visualização do site em um dispositivo móvel real.

Dito isso, vamos ver como você pode visualizar a versão móvel do seu site WordPress em um desktop.

Abordaremos dois métodos diferentes para testar a aparência do seu site em dispositivos móveis usando navegadores de desktop. Você pode clicar nos links abaixo para ir para qualquer seção:

Tutorial em vídeo

Se você preferir instruções por escrito, continue lendo.

Método 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 painel do WordPress e acessar a tela Appearance ” Customize (Aparência ” Personalizar ).

Isso abrirá o personalizador de temas do WordPress. Para este tutorial, usaremos o tema Astra.

Dependendo do tema que estiver usando, você poderá ver opções ligeiramente diferentes no menu do lado esquerdo.

Na parte inferior da tela, basta clicar no ícone do celular.

Em seguida, você verá uma prévia da aparência do seu site em dispositivos móveis.

Esse método de visualização da versão móvel é particularmente útil quando você ainda não terminou de criar o blog ou quando ele está em modo de manutenção.

Agora, você pode fazer alterações em seu site e verificar a aparência delas antes de colocá-las no ar.

Método 2: Usando o DevTools Device Mode do Google Chrome

O próximo método para visualizar a versão móvel do site é usar o navegador Google Chrome.

O navegador Google Chrome tem um conjunto de ferramentas de desenvolvedor que permite executar várias verificações em qualquer site, incluindo uma visualização prévia de como ele é exibido em dispositivos móveis.

Basta abrir o navegador Google Chrome em seu desktop 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 seu concorrente.

Em seguida, você precisa clicar com o botão direito do mouse na página e selecionar a opção “Inspecionar”.

Um novo painel será aberto no lado direito ou na parte inferior da tela.

Ele terá a seguinte aparência:

Na visualização do desenvolvedor, você poderá ver o código-fonte HTML, o CSS e outros detalhes do seu site.

Em seguida, você precisa clicar no botão “Toggle Device Toolbar” (Alternar barra de ferramentas do dispositivo) para mudar para a visualização móvel.

A visualização do seu site será reduzida para o tamanho da tela do celular.

A aparência geral do seu site também será alterada na visualização móvel. Por exemplo, os menus serão recolhidos e os ícones adicionais serão movidos para a esquerda em vez de para a direita do menu.

Quando você passar o cursor do mouse sobre a visualização móvel do seu site, ele se tornará um círculo. Esse círculo pode ser movido com o mouse para imitar a tela sensível ao toque de um dispositivo móvel.

Também é possível manter pressionada a tecla “Shift” e, em seguida, clicar e mover o mouse para simular a pinça na tela do celular para aumentar ou diminuir o zoom.

Acima da visualização móvel do seu site, você verá algumas opções adicionais.

Essas configurações permitem que você faça várias coisas extras. Você pode verificar a aparência do seu site em diferentes tipos de smartphones.

Por exemplo, você pode selecionar um dispositivo móvel, como um iPhone, e ver como seu site será exibido no dispositivo.

Você também pode simular o desempenho do seu site em conexões 3G rápidas ou lentas. Você pode até mesmo girar a tela do celular usando o ícone de rotação.

Bônus: Como criar conteúdo específico para dispositivos móveis no WordPress

É importante que seu site tenha um design responsivo para que os visitantes móveis possam navegar facilmente pelo seu site.

No entanto, o simples fato de 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 plug-ins premium permitem que você crie elementos que são exibidos de forma diferente no desktop e no celular. Você também pode usar um plug-in de criação de páginas, como o SeedProd, para editar suas páginas de destino na visualização móvel.

Você deve considerar a criação de conteúdo específico para celular para seus formulários de geração de leads. Em dispositivos móveis, esses formulários devem solicitar o mínimo de informações, de preferência apenas um endereço de e-mail. Eles também devem ter boa aparência e ser fáceis de fechar.

Para obter mais detalhes, consulte nosso guia sobre como criar uma página de destino no WordPress.

Outra ótima maneira de criar popups específicos para celular e formulários de geração de leads é com o OptinMonster. Ele é o plugin de popup para WordPress e a ferramenta de geração de leads mais poderosa do mercado.

O OptinMonster tem regras específicas de exibição de segmentação por dispositivo que permitem mostrar campanhas diferentes para usuários móveis e usuários de desktop. 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 as melhores conversões.

Para obter mais informações, consulte nosso guia sobre como criar pop-ups para celular que convertem.

Esperamos que este artigo tenha ajudado você a saber como visualizar o layout móvel do seu site. Talvez você também queira ver nossas escolhas de especialistas sobre os melhores plugins para converter um site WordPress em um aplicativo móvel e saber como aumentar o tráfego do blog.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.