Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Como ocultar um widget do WordPress no celular (fácil para iniciantes)

Nota editorial: Ganhamos uma comissão de links de parceiros no WPBeginner. As comissões não afetam as opiniões ou avaliações de nossos editores. Saiba mais sobre Processo editorial.

Deseja ocultar um widget específico do WordPress para usuários móveis?

Widgets são conteúdos dinâmicos que geralmente são exibidos na barra lateral ou no rodapé do site. Às vezes, um widget pode ter boa aparência em um computador de mesa ou laptop, mas não em dispositivos móveis menores.

Neste artigo, mostraremos como ocultar um widget do WordPress em dispositivos móveis sem escrever nenhum código.

Hiding a WordPress widget on mobile devices

Por que ocultar um widget no celular no WordPress?

Seu site pode ficar ótimo em telas de computador de tamanho normal, mas isso não significa necessariamente que ele também ficará bom em telas menores.

Mesmo que o layout não pareça desordenado imediatamente ao visualizar a versão móvel do seu site WordPress, é importante sempre rolar a tela até o final.

Na maioria dos temas responsivos do WordPress, os widgets serão exibidos em locais diferentes, dependendo do tamanho da tela do visitante. Geralmente, os temas do WordPress movem os widgets para a parte inferior da página.

Vamos dar uma olhada em um exemplo.

A imagem a seguir mostra a aparência de um site em um computador desktop. Como você pode ver, o widget de pesquisa aparece na parte superior da barra lateral.

The widgets showing in the sidebar on a desktop

No entanto, o widget da barra lateral aparece abaixo do conteúdo quando visualizado em um smartphone.

Isso significa que os visitantes precisarão rolar até a parte inferior da página para pesquisar as postagens do seu blog, os produtos do WooCommerce ou outros conteúdos.

The search widget displaying beneath the content on mobile

Pior ainda, às vezes esse comportamento pode resultar na exibição de dois widgets idênticos um ao lado do outro.

Por exemplo, muitos proprietários de blogs do WordPress colocam um widget “Recent Posts” tanto na barra lateral quanto no rodapé. Se esses widgets se moverem, os visitantes móveis poderão ver os mesmos widgets um ao lado do outro.

Dito isso, vamos ver como você pode ocultar facilmente um widget no celular no WordPress.

Como ocultar um widget no celular no WordPress

A maneira mais fácil de ocultar widgets para usuários móveis é usar o plug-in Widget Options. Esse plug-in permite mostrar widgets diferentes, dependendo da data, da função do usuário, do dispositivo e muito mais.

Primeiro, você precisa instalar e ativar o plug-in Widget Options. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, você precisa ir para a página Appearance ” Widgets no painel do WordPress.

The widgets section of the WordPress admin

Nessa tela, você verá todos os widgets que adicionou ao seu site WordPress.

Para editar um widget, basta clicar em seu nome.

Expand your widget to view the options

Nas configurações do widget, você verá algumas novas seções adicionadas pelo plug-in Widget Options.

Para começar, clique no pequeno ícone de celular e verifique se o menu suspenso “Ocultar/mostrar” mostra “Ocultar em dispositivos verificados”.

How to hide and show widgets to mobile users

Depois disso, basta marcar cada dispositivo em que você deseja ocultar o widget.

Normalmente, você deve marcar a caixa ao lado de “Tablet” e “Celular”.

Hiding a widget on mobile devices

Depois disso, clique no botão “Salvar” para armazenar suas alterações.

Agora, vá em frente e visite seu site do WordPress usando um dispositivo móvel. O widget não aparecerá mais na área de widgets.

The search widget is now gone from the mobile version of the website

Como criar uma versão móvel de um widget no WordPress

Às vezes, talvez você queira mostrar uma versão de um widget para visitantes de dispositivos móveis e outra para usuários de desktop.

Por exemplo, talvez você queira mostrar suas cinco postagens mais recentes no desktop, mas apenas três postagens em dispositivos móveis para que a tela não pareça confusa.

Para fazer isso, basta adicionar dois widgets Recent Posts separados ao seu site. Para obter mais informações, consulte nosso guia passo a passo sobre como adicionar widgets no WordPress.

Em seguida, você pode configurar um widget para ser exibido em computadores desktop e o outro para ser exibido em dispositivos móveis.

Primeiro, abra o widget que deseja mostrar aos usuários de desktop. Em seguida, clique no pequeno ícone para celular e verifique se o menu suspenso “Ocultar/mostrar” está definido como “Ocultar em dispositivos verificados”.

Depois disso, marque as caixas ao lado de “Tablet” e “Celular”.

Displaying a widget on desktops only

Agora, esse widget só aparecerá para os visitantes que estiverem usando um computador desktop.

Em seguida, você pode fazer qualquer alteração no widget. Por exemplo, estamos digitando “5” na caixa ao lado de “Number of posts to show”.

Quando terminar, não se esqueça de pressionar o botão “Save” (Salvar) para armazenar suas configurações.

Saving widget settings in WordPress

Depois disso, você estará pronto para tornar o segundo widget somente para celular.

Basta repetir o mesmo processo descrito acima, mas, desta vez, marque a caixa ao lado de “Desktop” para ocultar o widget em dispositivos desktop.

Showing a WordPress widget on mobile devices but not on desktops

Agora você pode fazer qualquer alteração no widget para celular. Por exemplo, você pode digitar “3” na caixa “Number of posts to show”.

Como sempre, clique em “Salvar” quando terminar. Agora você tem uma versão para desktop e uma versão para celular do mesmo widget.

Esperamos que este artigo tenha ajudado você a aprender como ocultar um widget em dispositivos móveis no WordPress. Talvez você também queira conferir nossa lista dos melhores construtores de páginas do WordPress do tipo arrastar e soltar para personalizar seu site ou como criar um tema personalizado no WordPress sem escrever nenhum código.

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.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

13 ComentáriosDeixe uma resposta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Hajime says

    Thank you for the easy to understand guide. However, in my AvadaTheme, the device selection tab and checkboxes do not seem to appear.
    My AvadaTheme is V7.6.1. Is there a difference in specifications between versions?

    • WPBeginner Support says

      There may be a conflict between the plugin and your theme, we would recommend checking with the plugin’s support and they should be able to assist!

      Administrador

  3. FRB Dogs "Rich" says

    This was a great article to quickly allow me to hide extraneous footers that look like duplicates when on a mobile display as the side & footers were on the bottom. I hide one of them on a mobile device and voila! Looks so much more professional. Thank you!

    • WPBeginner Support says

      For a question like that, you would want to reach out to the plugin’s support and they would be able to let you know the current method being used.

      Administrador

Deixe uma resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.