\n
Como visualizar a vers\u00e3o m\u00f3vel do seu site<\/h2>\n
Um tema WordPress responsivo garante muitas vantagens, mas voc\u00ea ainda precisa verificar a apar\u00eancia do seu site em smartphones em tempo real<\/strong>. H\u00e1 muitas varia\u00e7\u00f5es poss\u00edveis nos tamanhos de tela e navegadores, portanto, nenhuma das visualiza\u00e7\u00f5es para dispositivos m\u00f3veis pode fornecer uma visualiza\u00e7\u00e3o perfeita e 100% precisa<\/strong>. Voc\u00ea deve sempre confiar na experi\u00eancia real que obt\u00e9m ao visualizar seu site em um smartphone ou dispositivo m\u00f3vel real. Isso pode inspir\u00e1-lo a otimizar suas principais p\u00e1ginas de destino e criar diferentes vers\u00f5es otimizadas para a experi\u00eancia m\u00f3vel.<\/p>\n Ent\u00e3o, vamos ver como voc\u00ea pode visualizar se tiver um site WordPress amig\u00e1vel para dispositivos m\u00f3veis de duas maneiras diferentes.<\/p>\n A primeira e mais direta maneira de ver a visualiza\u00e7\u00e3o da vers\u00e3o m\u00f3vel \u00e9 usar o personalizador de temas do WP. O procedimento \u00e9 simples. Fa\u00e7a login no seu<\/a> painel do WordPress e v\u00e1 para Apar\u00eancia > Personalizar<\/strong>.<\/p>\n Depois de clicar no WordPress Theme Customizer e abri-lo, voc\u00ea ver\u00e1 todas as op\u00e7\u00f5es no menu \u00e0 esquerda<\/strong>. Pode haver algumas varia\u00e7\u00f5es nas op\u00e7\u00f5es oferecidas dependendo do tema que voc\u00ea est\u00e1 usando.<\/p>\n Observe o \u00edcone do celular na parte inferior da tela<\/strong>. Clique nele e voc\u00ea ver\u00e1 uma pr\u00e9via da apar\u00eancia do seu site em dispositivos m\u00f3veis<\/strong>.<\/p>\n Se os s\u00edmbolos de edi\u00e7\u00e3o azuis o confundirem \u2013 n\u00e3o se preocupe. Eles s\u00e3o vis\u00edveis apenas no visualizador e nunca em seu site ao vivo.<\/p>\n Dica: se voc\u00ea ainda n\u00e3o lan\u00e7ou seu blog ou se ele estiver em modo de manuten\u00e7\u00e3o, esse m\u00e9todo de visualiza\u00e7\u00e3o \u00e9 muito \u00fatil, pois permite fazer altera\u00e7\u00f5es e verificar a apar\u00eancia deles antes de ativar seu site<\/strong>.<\/p>\n Se voc\u00ea n\u00e3o se sentir \u00e0 vontade para usar o WP Theme Customizer por qualquer motivo, sempre poder\u00e1 verificar se o WordPress \u00e9 compat\u00edvel com dispositivos m\u00f3veis com o navegador Google Chrome<\/strong>. Tamb\u00e9m \u00e9 um procedimento muito simples e f\u00e1cil que consiste em algumas etapas.<\/p>\n Basta abrir o navegador Google Chrome como voc\u00ea costuma fazer e ir para a p\u00e1gina que deseja verificar. Em seguida, clique com o bot\u00e3o direito do mouse na p\u00e1gina e escolha Inspecionar<\/strong>.<\/p>\n Observe que dessa forma voc\u00ea pode ver uma visualiza\u00e7\u00e3o de qualquer p\u00e1gina em qualquer site<\/strong>, n\u00e3o apenas no seu. Pode at\u00e9 ser o site do seu concorrente.<\/p>\n No seu lado direito, um novo painel ser\u00e1 aberto e ficar\u00e1 assim:<\/p>\n A visualiza\u00e7\u00e3o do desenvolvedor permite que voc\u00ea veja o c\u00f3digo-fonte HTML do seu site. Voc\u00ea notar\u00e1 algumas altera\u00e7\u00f5es na visualiza\u00e7\u00e3o do celular: seu site \u00e9 reduzido para caber no tamanho da tela do celular e outras altera\u00e7\u00f5es podem ocorrer. Olhe e observe as diferen\u00e7as cuidadosamente e observe o que voc\u00ea deve mudar.<\/p>\n Verifique o que acontece quando voc\u00ea tenta passar o cursor do mouse sobre a visualiza\u00e7\u00e3o m\u00f3vel \u2013 ele se torna um c\u00edrculo.<\/p>\n O objetivo do c\u00edrculo \u00e9 imitar a tela sens\u00edvel ao toque em um dispositivo m\u00f3vel.<\/p>\n Dica: se voc\u00ea quiser ver como a tela do seu celular aumenta e diminui o zoom, mantenha pressionada a tecla Shift e clique e mova o mouse<\/strong>.<\/p>\n A vantagem de usar esse m\u00e9todo para visualizar seu site para dispositivos m\u00f3veis \u00e9 que ele permite que voc\u00ea veja a apar\u00eancia da p\u00e1gina em diferentes tipos de smartphones. Essas op\u00e7\u00f5es extras est\u00e3o acima da visualiza\u00e7\u00e3o m\u00f3vel do seu site. N\u00e3o importa que tipo de visualiza\u00e7\u00e3o voc\u00ea abriu quando clicou em Toggle Device Toolbar, aqui voc\u00ea pode alterar o tamanho da tela do dispositivo.<\/p>\n Dica: use o \u00edcone de rota\u00e7\u00e3o no canto superior direito para girar a tela do celular. Voc\u00ea tamb\u00e9m pode inspecionar elementos na p\u00e1gina<\/a><\/strong> clicando com o bot\u00e3o direito do mouse e selecionando a op\u00e7\u00e3o Inspecionar.<\/p>\n O RWD \u00e9 algo que voc\u00ea deve pensar com cuidado desde o in\u00edcio da cria\u00e7\u00e3o do seu site. H\u00e1 muitas coisas para analisar quando voc\u00ea precisa tornar seu site igualmente atraente, naveg\u00e1vel e eficaz em diferentes tamanhos de tela. Os construtores de p\u00e1ginas do WordPress<\/a> t\u00eam um papel decisivo nesse processo, eles fornecem os pilares do design do seu site, portanto, voc\u00ea precisa se informar bem antes de fazer a escolha<\/strong>. Portanto, ao investir algum tempo em pesquisas sobre construtores de p\u00e1ginas, voc\u00ea economizar\u00e1 muito tempo que pode gastar na cria\u00e7\u00e3o do seu site.<\/p>\n Com base em nossa experi\u00eancia, o WPBakery<\/a> e o Elementor<\/a> s\u00e3o excelentes op\u00e7\u00f5es, pois podem atender a uma ampla gama de necessidades diferentes.<\/p>\n Se voc\u00ea estiver com or\u00e7amento limitado, Elementor \u00e9 sua melhor aposta<\/strong>. \u00c9 um plugin simples de usar e amig\u00e1vel para iniciantes que possui uma vers\u00e3o gratuita muito generosa com um conjunto s\u00f3lido de elementos. Ele tamb\u00e9m se integra bem com outros plugins<\/strong> e servi\u00e7os l\u00edderes do WP, como MailChimp<\/a>, WooCommerce<\/a>, HubSpot<\/a>, Yoast SEO<\/a>, etc. Se voc\u00ea puder comprar um plugin premium, o WPBakery Page Builder<\/strong> nunca ir\u00e1 decepcion\u00e1-lo. Ele vem com uma cole\u00e7\u00e3o incrivelmente grande de elementos, uma infinidade de blocos e op\u00e7\u00f5es. Tamb\u00e9m \u00e9 f\u00e1cil de usar e permite muita criatividade.<\/p>\n Embora os construtores de p\u00e1ginas sejam essenciais para o RWD, o tema que voc\u00ea planeja usar tamb\u00e9m \u00e9 importante, pois pode oferecer alguns recursos incr\u00edveis<\/strong>. Como voc\u00ea deve saber, os autores de temas desenvolvem widgets e elementos espec\u00edficos que podem ser ajustados separadamente dos construtores de p\u00e1ginas. Muitos desses elementos permitem que voc\u00ea defina a capacidade de resposta de acordo com suas necessidades. Por isso, voc\u00ea deve escolher o tema desenvolvido por autores conhecidos e confi\u00e1veis<\/strong>. Isso \u00e9 especialmente importante se voc\u00ea quiser usar um tema WordPress gratuito. Para economizar seu tempo e nervos, testamos v\u00e1rios temas gratuitos. Portanto, se voc\u00ea deseja usar um tema gratuito responsivo, rico em recursos e confi\u00e1vel, recomendamos que experimente o tema Qi<\/a>.<\/p>\n \u00c9 seguro dizer que o Elementor \u00e9 de longe o melhor construtor de p\u00e1ginas quando se trata de editar a vers\u00e3o m\u00f3vel do seu site. Pode acontecer que voc\u00ea n\u00e3o tenha notado este pequeno \u00edcone, chamado Viewport Icon, nas configura\u00e7\u00f5es<\/strong> :<\/p>\n Este \u00edcone indica que qualquer valor que o tenha ao lado pode ser editado separadamente para a vers\u00e3o para desktop e para a vers\u00e3o do site para celular<\/strong>. Vamos pegar as configura\u00e7\u00f5es de Largura da Coluna por exemplo \u2013 voc\u00ea pode ajustar o valor para desktop, celular e tablet<\/strong>. O valor inserido para cada dispositivo ser\u00e1 v\u00e1lido apenas para o dispositivo selecionado. Observe que a tag HTML n\u00e3o possui o \u00edcone ao lado, o que significa que ela possui o mesmo valor para todos os dispositivos.<\/p>\n Caso voc\u00ea queira alterar o valor para o dispositivo m\u00f3vel, basta escolher a op\u00e7\u00e3o de layout m\u00f3vel e inserir os valores desejados<\/strong> (esses valores ser\u00e3o implementados apenas em dispositivos m\u00f3veis). No lado direito da tela, voc\u00ea tem a visualiza\u00e7\u00e3o ao vivo de todas as altera\u00e7\u00f5es feitas, para que voc\u00ea possa ver imediatamente como os novos valores ficar\u00e3o no dispositivo.<\/p>\n Para retornar \u00e0 visualiza\u00e7\u00e3o da \u00e1rea de trabalho, voc\u00ea precisa alternar para a op\u00e7\u00e3o de layout da \u00e1rea de trabalho<\/strong>. Voc\u00ea pode fazer isso, como mencionamos acima ou usando este pequeno \u00edcone no menu inferior da p\u00e1gina<\/strong> :<\/p>\n Mais uma coisa importante a mencionar relacionada \u00e0 capacidade de resposta \u00e9 que as colunas e linhas podem ser desligadas para dispositivos individuais<\/strong>, ou seja, podemos dizer que elas n\u00e3o estar\u00e3o vis\u00edveis (ou estar\u00e3o vis\u00edveis) em alguns tamanhos de tela.<\/p>\n Para acessar esta op\u00e7\u00e3o siga o caminho:<\/p>\n Esta op\u00e7\u00e3o \u00e9 muito importante caso tenhamos uma se\u00e7\u00e3o que sabemos que s\u00f3 faz sentido ser exibida na \u00e1rea de trabalho, por isso a cancelaremos em outros dispositivos. E para compensar a falta dela, podemos fazer uma se\u00e7\u00e3o que ser\u00e1 vista em todos os outros dispositivos, exceto na \u00e1rea de trabalho.<\/p>\n Quando se trata de colunas, tamb\u00e9m podemos encontrar a op\u00e7\u00e3o de coluna Inversa<\/strong> (Tablet\/Celular). \u00c9 melhor explicar isso atrav\u00e9s de um exemplo. Digamos que temos uma se\u00e7\u00e3o como esta na \u00e1rea de trabalho, onde o conte\u00fado \u00e9 dividido em duas colunas com imagens seguidas de um breve texto<\/strong> :<\/p>\n Naturalmente, em dispositivos m\u00f3veis o conte\u00fado ser\u00e1 reorganizado como na imagem abaixo, seguindo a ordem original do desktop:<\/p>\n A op\u00e7\u00e3o de coluna inversa nos permite alternar a ordem de uma determinada se\u00e7\u00e3o para dispositivos m\u00f3veis ou layouts de tablet<\/strong>. Quando fazemos isso para a primeira se\u00e7\u00e3o em dispositivos menores, o resultado \u00e9 o conte\u00fado exibido com mais efici\u00eancia:<\/p>\n Mais cedo ou mais tarde, voc\u00ea ser\u00e1 tentado a usar uma variedade de plugins que facilitam a adi\u00e7\u00e3o de uma barra lateral, um CTA, um widget ou um elemento semelhante ao seu site. Este \u00e9 o momento em que muitos esquecem que uma barra lateral ou qualquer outro elemento que funcione perfeitamente em uma tela de desktop, pode n\u00e3o ser t\u00e3o bom no celular<\/strong>. Portanto, antes de aproveitar essas ferramentas \u00fateis, verifique se elas tamb\u00e9m s\u00e3o responsivas. A verdade \u00e9 que muitos deles s\u00e3o e podem realmente ajud\u00e1-lo a melhorar o UX. Mas para ter certeza disso, leia os coment\u00e1rios ou encontre uma demonstra\u00e7\u00e3o antes de instalar qualquer um. Contanto que o plug-in se comporte bem em dispositivos m\u00f3veis, voc\u00ea pode ter certeza de que seu site est\u00e1 no caminho do sucesso. N\u00e3o vamos esquecer tamb\u00e9m que suas op\u00e7\u00f5es variam muito dependendo do tema que voc\u00ea est\u00e1 usando<\/strong>. Um tema premium<\/a>certamente garante muito mais possibilidades.<\/p>\n O menu \u00e9 o pilar da experi\u00eancia do usu\u00e1rio. \u00c9 a primeira ou uma das primeiras coisas em que algu\u00e9m clica quando visita seu site. Isso afeta a rapidez com que o visitante encontrar\u00e1 o que veio, quanto tempo ele ficar\u00e1 e muitos outros aspectos do UX<\/strong>. \u00c9 importante ter um menu bonito e bem estruturado que facilite a navega\u00e7\u00e3o, mas n\u00e3o \u00e9 t\u00e3o simples quanto parece. Voc\u00ea pode ter um \u00f3timo menu que funciona perfeitamente em um desktop, mas \u00e9 pesado demais para um celular. Uma solu\u00e7\u00e3o neste caso \u00e9 ajustar sua vers\u00e3o de desktop para o tamanho da tela do celular tamb\u00e9m. Mas e se isso implicar perder muita informa\u00e7\u00e3o \u00fatil? Nesse caso, voc\u00ea pode criar um menu diferente, personalizado apenas para o tamanho da tela do celular. Muitos temas WP v\u00eam com a op\u00e7\u00e3o de fazer isso. Se o seu tema n\u00e3o for um desses, n\u00e3o se preocupe, existem muitos\u00f3timos plugins para menus responsivos<\/a><\/strong>. Nossa recomenda\u00e7\u00e3o \u00e9 o plugin Responsive Menu<\/a> que inclui mais de 150 op\u00e7\u00f5es de personaliza\u00e7\u00e3o e requer zero conhecimento de codifica\u00e7\u00e3o. Ele permite adicionar anima\u00e7\u00f5es, imagens de fundo, definir a posi\u00e7\u00e3o dos bot\u00f5es do menu e muito mais. \u00c9 incrivelmente f\u00e1cil de usar, por isso \u00e9 especialmente \u00fatil para iniciantes.<\/p>\n Uma imagem fala milhares de idiomas, portanto, certifique-se de que a sua seja igualmente impressionante em qualquer tamanho de tela<\/strong>. Vivemos em uma cultura muito visualmente orientada e, seja qual for o nicho em que voc\u00ea esteja, \u00f3timas fotos s\u00e3o obrigat\u00f3rias. Mas, n\u00e3o importa qu\u00e3o boas voc\u00ea tenha, se elas carregarem lentamente ou n\u00e3o forem apresentadas corretamente, voc\u00ea corre o risco de perder uma porcentagem significativa de seu p\u00fablico. Portanto, para evitar esse cen\u00e1rio, recomendamos o plug-in Envira Gallery Lite<\/a> que o ajudar\u00e1 a criar galerias poderosas como um profissional<\/strong>. Algumas de suas vantagens s\u00e3o que ele \u00e9 altamente otimizado para o desempenho da web e do servidor, o que \u00e9 uma \u00f3tima not\u00edcia para o seu SEO.<\/p>\n Quando voc\u00ea tem um menu excelente e responsivo e galerias impressionantes, a pr\u00f3xima coisa a cuidar s\u00e3o os bot\u00f5es de compartilhamento social<\/a>. Seu tamanho deve ser personalizado para o dispositivo<\/strong>. Um bot\u00e3o grande em uma tela pequena faz o visitante clicar acidentalmente, e isso \u00e9 bastante irritante. Por outro lado, bot\u00f5es pequenos em uma tela grande n\u00e3o s\u00e3o t\u00e3o f\u00e1ceis de reconhecer. Um plug-in que pode ajud\u00e1-lo a personalizar bot\u00f5es \u00e9 o plug-in Sassy Social Share<\/a>. F\u00e1cil de usar, totalmente gratuito e amig\u00e1vel para iniciantes, facilita o compartilhamento tanto para voc\u00ea quanto para os visitantes do seu site.<\/p>\n Em situa\u00e7\u00f5es em que voc\u00ea precisa tornar seu site m\u00f3vel responsivo rapidamente, n\u00e3o h\u00e1 solu\u00e7\u00e3o melhor do que um plugin como o WPtouch<\/a>. Este plugin \u00e9 feito de tal forma que adiciona automaticamente um tema m\u00f3vel simples e elegante ao seu site WP<\/strong>. O fato de ser recomendado pelo Google diz muito sobre sua efic\u00e1cia. Portanto, mesmo que voc\u00ea n\u00e3o tenha uma vers\u00e3o m\u00f3vel do seu site, um plug-in como esse pode ativar instantaneamente uma vers\u00e3o otimizada para dispositivos m\u00f3veis do seu site, para que voc\u00ea n\u00e3o perca seus rankings. Ele tamb\u00e9m permite que voc\u00ea personalize muitos aspectos da apar\u00eancia do site.<\/p>\n A velocidade de carregamento da p\u00e1gina tamb\u00e9m \u00e9 um aspecto muito importante da experi\u00eancia do usu\u00e1rio, especialmente em dispositivos m\u00f3veis. Se voc\u00ea estiver enfrentando alguns desafios nessa \u00e1rea, considere usar o plug-in Accelerated Mobile Pages<\/a>, pois \u00e9 uma das maneiras mais r\u00e1pidas e simples de melhorar a velocidade de carregamento do seu site.<\/p>\n Os pop-ups raramente s\u00e3o divertidos, mas s\u00e3o especialmente irritantes em celulares. Eles cobrem grande parte da tela e exigem que o visitante os dispense antes de acessar o conte\u00fado da p\u00e1gina. Portanto, \u00e9 melhor evit\u00e1-los completamente na vers\u00e3o m\u00f3vel do seu site<\/strong>. Como voc\u00ea vai evit\u00e1-los, depende principalmente do seu provedor de servi\u00e7os, mas a maioria deles tem a op\u00e7\u00e3o de desativar pop-ups intrusivos em celulares. Tamb\u00e9m tenha em mente que o Google penaliza sites que possuem pop-ups muito intrusivos<\/strong>.<\/p>\n Como o n\u00famero de pessoas que usam smartphones para acessar a internet est\u00e1 em constante aumento, faz sentido esperar muito mais solu\u00e7\u00f5es e op\u00e7\u00f5es para as vers\u00f5es mobile dos sites. Os designers est\u00e3o trabalhando duro para lidar com a infinidade de padr\u00f5es de uso, ainda assim, o b\u00e1sico do RWD \u00e9 o mesmo \u2013 certifique-se de escolher um tema WP compat\u00edvel com dispositivos m\u00f3veis<\/a> e um construtor de p\u00e1ginas que tenha todas as op\u00e7\u00f5es de que voc\u00ea precisa.<\/p>\n Ent\u00e3o, qu\u00e3o responsivo \u00e9 o seu site? Voc\u00ea precisa fazer muitas altera\u00e7\u00f5es para torn\u00e1-lo mais compat\u00edvel com dispositivos m\u00f3veis? Compartilhe suas respostas conosco e sinta-se \u00e0 vontade para pedir mais informa\u00e7\u00f5es na se\u00e7\u00e3o de coment\u00e1rios.<\/p>\nUsando o personalizador de temas do WordPress<\/h3>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7731a65d0.jpg\")
<\/a><\/p>\n![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e773537821.jpg\")
<\/a><\/p>\n![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7739771d3.jpg\")
<\/a><\/p>\nUsando o modo de dispositivo de ferramentas de desenvolvedor do Google Chrome<\/h3>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e773c37a6b.jpg\")
<\/a><\/p>\n![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e773fcd9ce.jpg\")
<\/a><\/p>\n
\nAgora, clique no bot\u00e3o Toggle Device Toolbar<\/strong> para ver a visualiza\u00e7\u00e3o m\u00f3vel.<\/p>\n![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7742207a5.jpg\")
<\/a><\/p>\n![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7744a51d5.jpg\")
<\/a><\/p>\n![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7746b6c41.jpg\")
<\/a><\/p>\nPor que o Page Builder \u00e9 importante para RWD<\/h2>\n
Como editar a vers\u00e3o m\u00f3vel do seu site no Elementor<\/h2>\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e77496f309.jpg\")
<\/a><\/p>\n![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e774c823e7.jpg\")
<\/a><\/p>\n![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e774f43937.jpg\")
<\/a><\/p>\n\n
![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7751c005c.jpg\")
<\/a><\/p>\n![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7754550c7.jpg\")
<\/a><\/p>\n![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e7756d019f.jpg\")
<\/a><\/p>\n![\"Como](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-348075-633e775976759.jpg\")
<\/a><\/p>\nComo editar a vers\u00e3o m\u00f3vel do seu site com plugins<\/h2>\n
Menu responsivo – Contagens da primeira impress\u00e3o<\/h3>\n
Imagens e Galerias<\/h3>\n
Bot\u00f5es de compartilhamento social<\/h3>\n
Sites Mobile Firendly<\/h3>\n
Evite adicionar pop-ups em dispositivos m\u00f3veis<\/h3>\n
Para concluir<\/h3>\n