Como editar a versão móvel do site WordPress
Por que a versão móvel do seu site é crucial para o seu sucesso?
Vamos começar com o fato de que mais de 50% do tráfego da web globalmente vem de telefones celulares. Isso significa literalmente que mais da metade de seus clientes estão acessando seu site em seus celulares. A partir de 2018, quando o Google iniciou a indexação de sites mobile-first, o web design responsivo só se tornou ainda mais importante, e o foco na experiência móvel de um site logicamente se tornou uma prioridade para quem leva seus negócios a sério. Outra vantagem importante dos sites compatíveis com dispositivos móveis é que eles são simples e intuitivos. Eles oferecem uma experiência de usuário tranquila, facilitando o contato de clientes em potencial. Além disso, eles carregam rapidamente e tornam o compartilhamento de conteúdo fácil e natural. Uma maneira de pensar em um site responsivo é vê-lo como uma maneira gratuita de classificar melhor nos mecanismos de pesquisa. Por que você perderia essa oportunidade? Quanto melhor sua classificação, mais resultados de pesquisa orgânica você obtém, o que significa mais leads e mais conversões.
Como visualizar a versão móvel do seu site
Um tema WordPress responsivo garante muitas vantagens, mas você ainda precisa verificar a aparência do seu site em smartphones em tempo real. Há muitas variações possíveis nos tamanhos de tela e navegadores, portanto, nenhuma das visualizações para dispositivos móveis pode fornecer uma visualização perfeita e 100% precisa. Você deve sempre confiar na experiência real que obtém ao visualizar seu site em um smartphone ou dispositivo móvel real. Isso pode inspirá-lo a otimizar suas principais páginas de destino e criar diferentes versões otimizadas para a experiência móvel.
Então, vamos ver como você pode visualizar se tiver um site WordPress amigável para dispositivos móveis de duas maneiras diferentes.
Usando o personalizador de temas do WordPress
A primeira e mais direta maneira de ver a visualização da versão móvel é usar o personalizador de temas do WP. O procedimento é simples. Faça login no seu painel do WordPress e vá para Aparência > Personalizar.
Depois de clicar no WordPress Theme Customizer e abri-lo, você verá todas as opções no menu à esquerda. Pode haver algumas variações nas opções oferecidas dependendo do tema que você está usando.
Observe o ícone do celular na parte inferior da tela. Clique nele e você verá uma prévia da aparência do seu site em dispositivos móveis.
Se os símbolos de edição azuis o confundirem – não se preocupe. Eles são visíveis apenas no visualizador e nunca em seu site ao vivo.
Dica: se você ainda não lançou seu blog ou se ele estiver em modo de manutenção, esse método de visualização é muito útil, pois permite fazer alterações e verificar a aparência deles antes de ativar seu site.
Usando o modo de dispositivo de ferramentas de desenvolvedor do Google Chrome
Se você não se sentir à vontade para usar o WP Theme Customizer por qualquer motivo, sempre poderá verificar se o WordPress é compatível com dispositivos móveis com o navegador Google Chrome. Também é um procedimento muito simples e fácil que consiste em algumas etapas.
Basta abrir o navegador Google Chrome como você costuma fazer e ir para a página que deseja verificar. Em seguida, clique com o botão direito do mouse na página e escolha Inspecionar.
Observe que dessa forma você pode ver uma visualização de qualquer página em qualquer site, não apenas no seu. Pode até ser o site do seu concorrente.
No seu lado direito, um novo painel será aberto e ficará assim:
A visualização do desenvolvedor permite que você veja o código-fonte HTML do seu site.
Agora, clique no botão Toggle Device Toolbar para ver a visualização móvel.
Você notará algumas alterações na visualização do celular: seu site é reduzido para caber no tamanho da tela do celular e outras alterações podem ocorrer. Olhe e observe as diferenças cuidadosamente e observe o que você deve mudar.
Verifique o que acontece quando você tenta passar o cursor do mouse sobre a visualização móvel – ele se torna um círculo.
O objetivo do círculo é imitar a tela sensível ao toque em um dispositivo móvel.
Dica: se você quiser ver como a tela do seu celular aumenta e diminui o zoom, mantenha pressionada a tecla Shift e clique e mova o mouse.
A vantagem de usar esse método para visualizar seu site para dispositivos móveis é que ele permite que você veja a aparência da página em diferentes tipos de smartphones. Essas opções extras estão acima da visualização móvel do seu site. Não importa que tipo de visualização você abriu quando clicou em Toggle Device Toolbar, aqui você pode alterar o tamanho da tela do dispositivo.
Dica: use o ícone de rotação no canto superior direito para girar a tela do celular. Você também pode inspecionar elementos na página clicando com o botão direito do mouse e selecionando a opção Inspecionar.
Por que o Page Builder é importante para RWD
O RWD é algo que você deve pensar com cuidado desde o início da criação do seu site. Há muitas coisas para analisar quando você precisa tornar seu site igualmente atraente, navegável e eficaz em diferentes tamanhos de tela. Os construtores de páginas do WordPress têm um papel decisivo nesse processo, eles fornecem os pilares do design do seu site, portanto, você precisa se informar bem antes de fazer a escolha. Portanto, ao investir algum tempo em pesquisas sobre construtores de páginas, você economizará muito tempo que pode gastar na criação do seu site.
Com base em nossa experiência, o WPBakery e o Elementor são excelentes opções, pois podem atender a uma ampla gama de necessidades diferentes.
Se você estiver com orçamento limitado, Elementor é sua melhor aposta. É um plugin simples de usar e amigável para iniciantes que possui uma versão gratuita muito generosa com um conjunto sólido de elementos. Ele também se integra bem com outros plugins e serviços líderes do WP, como MailChimp, WooCommerce, HubSpot, Yoast SEO, etc. Se você puder comprar um plugin premium, o WPBakery Page Builder nunca irá decepcioná-lo. Ele vem com uma coleção incrivelmente grande de elementos, uma infinidade de blocos e opções. Também é fácil de usar e permite muita criatividade.
Embora os construtores de páginas sejam essenciais para o RWD, o tema que você planeja usar também é importante, pois pode oferecer alguns recursos incríveis. Como você deve saber, os autores de temas desenvolvem widgets e elementos específicos que podem ser ajustados separadamente dos construtores de páginas. Muitos desses elementos permitem que você defina a capacidade de resposta de acordo com suas necessidades. Por isso, você deve escolher o tema desenvolvido por autores conhecidos e confiáveis. Isso é especialmente importante se você quiser usar um tema WordPress gratuito. Para economizar seu tempo e nervos, testamos vários temas gratuitos. Portanto, se você deseja usar um tema gratuito responsivo, rico em recursos e confiável, recomendamos que experimente o tema Qi.
Como editar a versão móvel do seu site no Elementor
É seguro dizer que o Elementor é de longe o melhor construtor de páginas quando se trata de editar a versão móvel do seu site. Pode acontecer que você não tenha notado este pequeno ícone, chamado Viewport Icon, nas configurações :
Este ícone indica que qualquer valor que o tenha ao lado pode ser editado separadamente para a versão para desktop e para a versão do site para celular. Vamos pegar as configurações de Largura da Coluna por exemplo – você pode ajustar o valor para desktop, celular e tablet. O valor inserido para cada dispositivo será válido apenas para o dispositivo selecionado. Observe que a tag HTML não possui o ícone ao lado, o que significa que ela possui o mesmo valor para todos os dispositivos.
Caso você queira alterar o valor para o dispositivo móvel, basta escolher a opção de layout móvel e inserir os valores desejados (esses valores serão implementados apenas em dispositivos móveis). No lado direito da tela, você tem a visualização ao vivo de todas as alterações feitas, para que você possa ver imediatamente como os novos valores ficarão no dispositivo.
Para retornar à visualização da área de trabalho, você precisa alternar para a opção de layout da área de trabalho. Você pode fazer isso, como mencionamos acima ou usando este pequeno ícone no menu inferior da página :
Mais uma coisa importante a mencionar relacionada à capacidade de resposta é que as colunas e linhas podem ser desligadas para dispositivos individuais, ou seja, podemos dizer que elas não estarão visíveis (ou estarão visíveis) em alguns tamanhos de tela.
Para acessar esta opção siga o caminho:
- Clique com o botão direito na linha/coluna
- Selecione Editar Seção
- Clique na guia Avançado
- Selecione o menu suspenso Responsivo
Esta opção é muito importante caso tenhamos uma seção que sabemos que só faz sentido ser exibida na área de trabalho, por isso a cancelaremos em outros dispositivos. E para compensar a falta dela, podemos fazer uma seção que será vista em todos os outros dispositivos, exceto na área de trabalho.
Quando se trata de colunas, também podemos encontrar a opção de coluna Inversa (Tablet/Celular). É melhor explicar isso através de um exemplo. Digamos que temos uma seção como esta na área de trabalho, onde o conteúdo é dividido em duas colunas com imagens seguidas de um breve texto :
Naturalmente, em dispositivos móveis o conteúdo será reorganizado como na imagem abaixo, seguindo a ordem original do desktop:
A opção de coluna inversa nos permite alternar a ordem de uma determinada seção para dispositivos móveis ou layouts de tablet. Quando fazemos isso para a primeira seção em dispositivos menores, o resultado é o conteúdo exibido com mais eficiência:
Como editar a versão móvel do seu site com plugins
Mais cedo ou mais tarde, você será tentado a usar uma variedade de plugins que facilitam a adição de uma barra lateral, um CTA, um widget ou um elemento semelhante ao seu site. Este é o momento em que muitos esquecem que uma barra lateral ou qualquer outro elemento que funcione perfeitamente em uma tela de desktop, pode não ser tão bom no celular. Portanto, antes de aproveitar essas ferramentas úteis, verifique se elas também são responsivas. A verdade é que muitos deles são e podem realmente ajudá-lo a melhorar o UX. Mas para ter certeza disso, leia os comentários ou encontre uma demonstração antes de instalar qualquer um. Contanto que o plug-in se comporte bem em dispositivos móveis, você pode ter certeza de que seu site está no caminho do sucesso. Não vamos esquecer também que suas opções variam muito dependendo do tema que você está usando. Um tema premiumcertamente garante muito mais possibilidades.
Menu responsivo – Contagens da primeira impressão
O menu é o pilar da experiência do usuário. É a primeira ou uma das primeiras coisas em que alguém clica quando visita seu site. Isso afeta a rapidez com que o visitante encontrará o que veio, quanto tempo ele ficará e muitos outros aspectos do UX. É importante ter um menu bonito e bem estruturado que facilite a navegação, mas não é tão simples quanto parece. Você pode ter um ótimo menu que funciona perfeitamente em um desktop, mas é pesado demais para um celular. Uma solução neste caso é ajustar sua versão de desktop para o tamanho da tela do celular também. Mas e se isso implicar perder muita informação útil? Nesse caso, você pode criar um menu diferente, personalizado apenas para o tamanho da tela do celular. Muitos temas WP vêm com a opção de fazer isso. Se o seu tema não for um desses, não se preocupe, existem muitosótimos plugins para menus responsivos. Nossa recomendação é o plugin Responsive Menu que inclui mais de 150 opções de personalização e requer zero conhecimento de codificação. Ele permite adicionar animações, imagens de fundo, definir a posição dos botões do menu e muito mais. É incrivelmente fácil de usar, por isso é especialmente útil para iniciantes.
Imagens e Galerias
Uma imagem fala milhares de idiomas, portanto, certifique-se de que a sua seja igualmente impressionante em qualquer tamanho de tela. Vivemos em uma cultura muito visualmente orientada e, seja qual for o nicho em que você esteja, ótimas fotos são obrigatórias. Mas, não importa quão boas você tenha, se elas carregarem lentamente ou não forem apresentadas corretamente, você corre o risco de perder uma porcentagem significativa de seu público. Portanto, para evitar esse cenário, recomendamos o plug-in Envira Gallery Lite que o ajudará a criar galerias poderosas como um profissional. Algumas de suas vantagens são que ele é altamente otimizado para o desempenho da web e do servidor, o que é uma ótima notícia para o seu SEO.
Quando você tem um menu excelente e responsivo e galerias impressionantes, a próxima coisa a cuidar são os botões de compartilhamento social. Seu tamanho deve ser personalizado para o dispositivo. Um botão grande em uma tela pequena faz o visitante clicar acidentalmente, e isso é bastante irritante. Por outro lado, botões pequenos em uma tela grande não são tão fáceis de reconhecer. Um plug-in que pode ajudá-lo a personalizar botões é o plug-in Sassy Social Share. Fácil de usar, totalmente gratuito e amigável para iniciantes, facilita o compartilhamento tanto para você quanto para os visitantes do seu site.
Sites Mobile Firendly
Em situações em que você precisa tornar seu site móvel responsivo rapidamente, não há solução melhor do que um plugin como o WPtouch. Este plugin é feito de tal forma que adiciona automaticamente um tema móvel simples e elegante ao seu site WP. O fato de ser recomendado pelo Google diz muito sobre sua eficácia. Portanto, mesmo que você não tenha uma versão móvel do seu site, um plug-in como esse pode ativar instantaneamente uma versão otimizada para dispositivos móveis do seu site, para que você não perca seus rankings. Ele também permite que você personalize muitos aspectos da aparência do site.
A velocidade de carregamento da página também é um aspecto muito importante da experiência do usuário, especialmente em dispositivos móveis. Se você estiver enfrentando alguns desafios nessa área, considere usar o plug-in Accelerated Mobile Pages, pois é uma das maneiras mais rápidas e simples de melhorar a velocidade de carregamento do seu site.
Evite adicionar pop-ups em dispositivos móveis
Os pop-ups raramente são divertidos, mas são especialmente irritantes em celulares. Eles cobrem grande parte da tela e exigem que o visitante os dispense antes de acessar o conteúdo da página. Portanto, é melhor evitá-los completamente na versão móvel do seu site. Como você vai evitá-los, depende principalmente do seu provedor de serviços, mas a maioria deles tem a opção de desativar pop-ups intrusivos em celulares. Também tenha em mente que o Google penaliza sites que possuem pop-ups muito intrusivos.
Para concluir
Como o número de pessoas que usam smartphones para acessar a internet está em constante aumento, faz sentido esperar muito mais soluções e opções para as versões mobile dos sites. Os designers estão trabalhando duro para lidar com a infinidade de padrões de uso, ainda assim, o básico do RWD é o mesmo – certifique-se de escolher um tema WP compatível com dispositivos móveis e um construtor de páginas que tenha todas as opções de que você precisa.
Então, quão responsivo é o seu site? Você precisa fazer muitas alterações para torná-lo mais compatível com dispositivos móveis? Compartilhe suas respostas conosco e sinta-se à vontade para pedir mais informações na seção de comentários.