Como visualizar a versão móvel dos sites do WordPress na área de trabalho

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. 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. Então, você pode fazer alterações rapidamente e ver seu efeito.

Neste artigo, mostraremos como visualizar uma versão móvel do site WordPress a partir de um desktop.

Por que você deve visualizar seu layout móvel

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

Isso significa que ter um site com ótima aparência no celular é muito importante.

Na verdade, o celular é tão importante que o Google agora está usando um primeiro índice móvel 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 aprender mais lendo nosso guia definitivo para WordPress SEO.

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

É importante ter em mente que a maioria das visualizações móveis não será totalmente perfeita porque há muitos tamanhos de tela e navegadores móveis diferentes. Seu teste final deve ser sempre olhar para o seu 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 pular para qualquer seção:

Vídeo tutorial

Se 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 ir para a tela Aparência » Personalizar .

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

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

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

Você verá uma prévia de como seu site se parece em dispositivos móveis.

Este método para visualizar a versão móvel é particularmente útil quando você ainda não terminou de criar seu blog ou quando ele está em modo de manutenção.

Agora você pode fazer alterações em seu site e verificar como elas ficam antes de colocá-las no ar.

Método 2: usando o modo de dispositivo DevTools do Google Chrome

O navegador Google Chrome possui um conjunto de ferramentas de desenvolvedor que permitem executar várias verificações em qualquer site, incluindo uma visualização de como ele fica 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 do seu site ou até mesmo o site do 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.

Vai parecer algo assim:

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

Em seguida, você precisa clicar no botão 'Alternar barra de ferramentas do dispositivo' para mudar para a visualização móvel.

Você verá a visualização do seu site encolher para o tamanho da tela do celular.

A aparência geral do seu site também mudará na visualização móvel. Por exemplo, os menus serão recolhidos e os ícones adicionais serão movidos para a esquerda em vez da 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. 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, em seguida, clicar e mover o mouse para simular beliscar a 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 como seu site ficaria em diferentes tipos de smartphones.

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

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.

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 em seu site.

No entanto, 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 plug-ins premium permitem que você crie elementos que são exibidos de maneira diferente em computadores e dispositivos móveis. Você também pode usar um plug-in do construtor 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 informações mínimas, idealmente apenas um endereço de e-mail. Eles também devem ter uma boa aparência e serem fáceis de fechar.

Para mais detalhes, você pode ver nosso guia sobre como criar uma página de destino no WordPress.

Outra ótima maneira de criar pop-ups específicos para dispositivos móveis e formulários de geração de leads é com o OptinMonster. É o plug-in pop-up WordPress mais poderoso e a ferramenta de geração de leads do mercado.

O OptinMonster possui regras de exibição específicas para segmentação por dispositivo que permitem exibir campanhas diferentes para usuários de dispositivos móveis e usuários de computadores. 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.

Você pode ver nosso guia sobre como criar pop-ups móveis que convertem para obter mais informações.

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

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.