Como Visualizar a Versão Mobile de Sites WordPress do Desktop

Revisar a versão mobile do seu site WordPress em uma prévia no desktop é uma tarefa simples, mas essencial.

Isso permite que você verifique como seu site aparece em telas menores, ajudando a identificar problemas de layout ou falhas de design que você poderia não notar de outra forma.

Ao longo dos anos, trabalhamos com muitos proprietários de sites para garantir que seus sites fiquem ótimos e funcionem bem em dispositivos móveis. Também priorizamos designs amigáveis para dispositivos móveis sempre que criamos novas páginas e posts no site WPBeginner.

Um desafio que notamos é que verificar a versão mobile em um desktop pode ser complicado sem as ferramentas certas.

Felizmente, o Personalizador de Temas do WordPress e o Modo de Dispositivo do DevTools do Google Chrome permitem que você visualize e faça ajustes rapidamente.

Neste guia, vamos mostrar ambos os métodos para visualizar a versão mobile de sites WordPress a partir do desktop.

Por Que Você Deve Pré-visualizar Seu Layout Mobile

Mais de 50% dos visitantes do seu site acessarão seu site usando seus telefones celulares, e cerca de 3% usarão um tablet.

Isso significa que ter um site que fica ótimo no mobile é muito importante.

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

Mesmo que você use um tema responsivo para WordPress, você ainda precisa verificar como seu site aparece no celular. Você pode querer criar versões diferentes de páginas de destino importantes que sejam otimizadas para as necessidades dos usuários de celular.

É importante lembrar que a maioria das prévias de celular não será completamente perfeita, pois existem muitos tamanhos de tela e navegadores de celular diferentes. Seu teste final deve ser sempre olhar para o seu site em um dispositivo móvel.

Nas seções a seguir, veremos como você pode visualizar a versão mobile do seu site WordPress em um desktop.

Cobriremos 2 métodos diferentes para testar como seu site aparece no celular usando navegadores de desktop. Você pode clicar nos links abaixo para pular para qualquer seção:

• Método 1: Usando o Personalizador de Temas do WordPress
• Método 2: Usando o Modo de Dispositivo do Google Chrome DevTools
• Dica Bônus: Criando Conteúdo Específico para Celular no WordPress
• Tutorial em Vídeo
• Perguntas Frequentes

Vamos começar!

Método 1: Usando o Personalizador de Temas do WordPress

Você pode usar o personalizador de temas do WordPress para pré-visualizar a versão mobile do seu site WordPress.

Simplesmente faça login no seu painel do WordPress e vá para a tela Aparência » Personalizar.

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.

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

Você verá então uma prévia de como seu site aparece em dispositivos móveis.

Este método para pré-visualizar a versão mobile é 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 publicá-las.

Método 2: Usando o Modo de Dispositivo do Chrome DevTools

O próximo método para visualizar a versão mobile de um site é usando o navegador Google Chrome.

O navegador Google Chrome possui um conjunto de ferramentas de desenvolvedor que permitem realizar várias verificações em qualquer site, incluindo a pré-visualização de como ele aparece em dispositivos móveis.

Simplesmente abra o navegador Google Chrome no seu desktop e visite a página que você deseja verificar. Pode ser uma pré-visualização de uma página do seu site ou até mesmo do site do seu concorrente.

Em seguida, clique com o botão direito na página e selecione a opção 'Inspecionar'.

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

Ele ficará parecido com isto:

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

Em seguida, clique no botão 'Alternar Barra de Ferramentas do Dispositivo' para mudar para a visualização mobile.

Você verá a pré-visualização do seu site encolher para o tamanho da tela de um dispositivo móvel.

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

Ao passar o cursor do mouse sobre a visualização mobile do seu site, ele se tornará um círculo. Você pode mover este círculo com o mouse para simular a tela sensível ao toque em um dispositivo móvel.

Você também pode pressionar a tecla 'Shift', clicar e mover o mouse para simular o gesto de pinça na tela do dispositivo móvel para aproximar ou afastar o zoom.

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

Essas configurações permitem fazer várias coisas extras. Você pode verificar como seu site apareceria em diferentes tipos de smartphones.

Por exemplo, você pode selecionar um dispositivo móvel como um iPhone e ver como seu site aparece nele.

Você também pode simular o desempenho do seu site em conexões 3G rápidas ou lentas. Usando o ícone de rotação, você pode girar a tela do dispositivo móvel.

Dica Bônus: Criando Conteúdo Específico para Celular no WordPress

É importante que seu site tenha um design responsivo para que os visitantes mobile possam navegar facilmente no seu site.

No entanto, simplesmente ter um site responsivo pode não ser suficiente. Usuários em 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 mobile. Você também pode usar um plugin construtor de páginas como o SeedProd para editar suas landing pages na visualização mobile.

Você deve considerar a criação de conteúdo específico para dispositivos móveis 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 ser fáceis de fechar.

Para mais detalhes, você pode ver nosso guia sobre como criar uma landing page no WordPress.

Outra ótima maneira de criar popups e formulários de geração de leads específicos para dispositivos móveis é com o OptinMonster. É o plugin de popup e ferramenta de geração de leads mais poderoso do WordPress no mercado.

O OptinMonster possui regras de exibição de segmentação de dispositivo específicas que permitem mostrar diferentes campanhas para usuários de dispositivos móveis versus usuários de desktop. Você pode 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 popups mobile que convertem para mais informações.

Tutorial em Vídeo

Antes de ir, você pode querer conferir nosso tutorial em vídeo sobre como visualizar a versão mobile de sites WordPress no desktop.

Inscreva-se no WPBeginner

Perguntas Frequentes

Aqui estão algumas perguntas frequentemente feitas por nossos leitores sobre a pré-visualização do layout mobile do seu site.

Essas pré-visualizações no desktop corresponderão exatamente a dispositivos móveis reais?

Nem sempre. Embora úteis para identificar problemas óbvios de layout, essas ferramentas baseadas em desktop só podem emular dimensões de tela, comportamento do navegador e condições de rede.

Elas podem não capturar peculiaridades de desempenho ou interações específicas de hardware, como gestos de toque.

É por isso que sugerimos sempre testar em dispositivos reais, incluindo telefones e tablets, para confirmar a usabilidade no mundo real antes de publicar.

Posso editar meu site na visualização móvel do meu desktop?

Sim, o WordPress permite que você edite conteúdo enquanto visualiza o modo mobile no Personalizador ou usando construtores de página como Elementor, SeedProd e Beaver Builder.

Ao mudar para a visualização móvel, você pode:

• Ajustar preenchimento, margens e tamanhos de fonte para telas menores.
• Ocultar ou mostrar certos elementos apenas no celular (como imagens grandes ou banners apenas para desktop).
• Testar menus e widgets projetados para interações por toque.

A maioria dos construtores oferece configurações específicas para dispositivos, para que você possa personalizar layouts sem afetar as versões desktop ou tablet.

Como posso verificar a visualização móvel do meu WordPress sem fazer login?

Se você quiser ver como o site publicado aparece para os visitantes, experimente estes métodos:

• Abra seu site em uma janela anônima do navegador e use o modo de dispositivo das ferramentas do desenvolvedor.
• Use verificadores de design responsivo online como o Responsive Design Checker.

Essas ferramentas permitem que você visualize seu site em diferentes resoluções sem a necessidade de credenciais de login.

Esperamos que este artigo tenha ajudado você a aprender como visualizar o layout do seu site em dispositivos móveis. Você também pode querer ver nossas principais recomendações de especialistas para os melhores plugins para converter um site WordPress em um aplicativo móvel e aprender formas de criar um site amigável para dispositivos móveis.

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