Resumo: Como Ocultar Imagens na Visualização de Celular no WordPress
Três maneiras de ocultar imagens em celulares no WordPress. O Método 1 usa o SeedProd e impede que as imagens sejam carregadas inteiramente, não apenas ocultadas visualmente.
- Por que ocultar imagens em celulares – Imagens grandes diminuem o tempo de carregamento e empurram o conteúdo para fora da tela em telas pequenas.
- Método do site SeedProd – Use a Visibilidade do Dispositivo na aba Avançado para alternar Ocultar em Celular em qualquer imagem ou seção.
- Páginas de destino do SeedProd – As mesmas etapas se aplicam em SeedProd » Páginas de Destino, sem necessidade de alterações no tema.
- Método CSS – Adicione uma consulta de mídia display:none, mas observe: o navegador ainda baixa a imagem no celular.
Imagens grandes de desktop podem quebrar o layout do seu celular. Elas diminuem o tempo de carregamento, empurram o conteúdo muito para baixo e fazem seu site parecer desorganizado em telas pequenas. A solução é simples: oculte imagens em celulares para que os visitantes vejam apenas o que importa.
Neste guia, mostrarei três maneiras fáceis de ocultar imagens na visualização de celular no WordPress, incluindo uma opção sem código e um método CSS rápido.
Por que Ocultar Imagem em Celular no WordPress?
Ocultar imagens na visualização de celular mantém seu site limpo e fácil de usar. Uma foto de herói gigante ou banner promocional que fica ótimo no desktop pode sobrecarregar telas pequenas, diminuir o tempo de carregamento e empurrar conteúdo importante para fora da vista. Em alguns casos, você também pode querer executar ofertas exclusivas para desktop sem confundir os visitantes do telefone.
O resultado final: ocultar imagens em celulares oferece aos usuários uma experiência mais rápida e clara.
Como Mostrar e Ocultar Imagem na Visualização de Celular no WordPress
As soluções para ocultar imagens em telas de celular podem parecer complexas para usuários que não estão familiarizados com linguagens de programação. Uma pesquisa rápida no Google revela instruções para escrever CSS personalizado, classes div e todo tipo de jargão técnico.
Não se preocupe. Você não precisará de nenhum conhecimento técnico para os métodos que cobrimos abaixo. Tudo o que você precisa é de um plugin do WordPress, um site WordPress e a capacidade de seguir alguns passos fáceis.
Método 1: Ocultar Imagem na Visualização de Celular no Site
Usaremos o SeedProd para ocultar imagens em celulares no WordPress sem escrever código.
SeedProd é o melhor construtor de sites para WordPress. Ele permite que você crie temas WordPress, páginas de destino e layouts responsivos sem escrever código.
Ele inclui centenas de modelos pré-fabricados, e você pode personalizar cada centímetro do seu site com o construtor de páginas de arrastar e soltar visual, blocos e seções. Você também pode usar as configurações de Visibilidade do Dispositivo para ocultar conteúdo específico em visualizações de celular e desktop.
O SeedProd também oferece modos integrados, como "em breve", "modo de manutenção", página 404 e página de login. Você pode ativar e desativar cada modo com um clique, permitindo ocultar seu site do público enquanto trabalha em seu design.
Siga as etapas abaixo para ocultar imagens na visualização móvel em seu site WordPress.
Passo 1. Instale e Ative o SeedProd
Primeiro, clique no botão abaixo para obter sua cópia do SeedProd.
Observação: Para usar o recurso de construtor de sites do SeedProd, você precisa de uma licença SeedProd Pro.
Após baixar o plugin, instale e ative-o em seu site WordPress. Você pode seguir este guia sobre como instalar um plugin do WordPress se precisar de ajuda.
Em seguida, vá para SeedProd » Configurações e insira sua chave de licença.
Você pode encontrar sua chave no painel da sua conta SeedProd, na seção 'Downloads'.
Clique no botão Verificar Chave para desbloquear sua licença SeedProd e, em seguida, passe para a próxima etapa.
Etapa 2. Escolha um Modelo de Site
A próxima etapa envolve criar um tema personalizado do WordPress. Isso permitirá que você use as configurações de 'Visibilidade do Dispositivo' do SeedProd para mostrar e ocultar diferentes conteúdos em desktop e mobile.
Vá para SeedProd » Construtor de Temas e clique no botão Temas para escolher um modelo de site.
Muitos temas estão disponíveis para vários setores e tipos de sites, incluindo eCommerce, blogs, portfólios, etc.
Assim que encontrar um tema que você goste, passe o mouse sobre ele e clique no ícone de checkmark para importá-lo para o seu site.
Agora você verá as diferentes partes que compõem seu tema do WordPress.
Normalmente, você precisaria personalizar essas partes manualmente com código, mas com o SeedProd, você pode editar visualmente cada parte do seu site com o construtor de páginas de arrastar e soltar.
Para personalizar qualquer parte do seu site, passe o mouse sobre um modelo de tema e clique no link de design 'Editar Design'. Para este guia, estamos começando pela página inicial.
Depois de escolher um modelo, você pode personalizar o layout com o construtor de arrastar e soltar do SeedProd. Quando estiver pronto, passe para a Etapa 4 para ocultar a imagem.
Etapa 4. Ocultar Imagens do Site no Mobile com Visibilidade do Dispositivo
Ocultar imagens na visualização móvel é fácil com as configurações de 'Visibilidade do Dispositivo' do SeedProd. Você pode ocultar imagens individualmente ou seções inteiras de imagens com um único clique.
Para ocultar imagens individualmente, localize a imagem que deseja ocultar e clique nela para abrir as configurações de conteúdo.
Em seguida, clique na aba 'Avançado' e expanda a seção 'Visibilidade do Dispositivo'.
Para ocultar a imagem no mobile, clique no alternador ao lado do título 'Ocultar no Mobile'.
Essa imagem agora será exibida apenas para visitantes de desktop e estará oculta no mobile.
Você pode seguir os mesmos passos para ocultar linhas de imagem inteiras com o SeedProd. Simplesmente abra as configurações da linha e, na aba 'Avançado', use as configurações de 'Visibilidade do Dispositivo' para ocultar a linha de imagem no mobile.
Você pode pré-visualizar suas alterações clicando no ícone 'Pré-visualização Mobile' na barra de ferramentas inferior.
Quaisquer imagens 'acinzentadas' não serão visíveis para visitantes do site mobile.
Quando estiver satisfeito com a aparência do seu design, clique no botão Salvar no canto superior direito da sua tela.
Siga as etapas acima para ocultar imagens na visualização móvel para qualquer outro modelo de tema, como sua Barra Lateral, Posts Individuais, Páginas, etc.
Por exemplo, se você deseja ocultar as imagens em destaque de suas postagens de blog no celular, pode editar seu modelo de Postagem Individual e alterar as configurações de visibilidade no bloco Imagem em Destaque desta forma:
Etapa 5. Publique seu site WordPress
Quando estiver pronto para publicar seu tema personalizado, vá para SeedProd » Theme Builder e ative o controle deslizante ‘Enable SeedProd Theme’ para a posição ‘On’.
Agora você pode visualizar seu site para ver as alterações. Como você pode ver neste exemplo, as imagens que escolhemos anteriormente estão ocultas no celular.
Método 2: Ocultar Imagens na Visualização de Celular em Páginas de Destino
As mesmas etapas funcionam para páginas de destino independentes. Crie uma página em SeedProd » Landing Pages, abra-a no editor e ative Ocultar no celular na guia Avançado.
Método 3: Ocultar uma Imagem no Celular com CSS
Observação: Recomendo este método apenas se você se sentir confortável trabalhando com linguagens de programação. Você pode usar o personalizador integrado do WordPress para adicionar CSS personalizado ao seu site.
Entendo que alguns proprietários de sites preferem personalizar seus sites manualmente. Por esse motivo, o método a seguir mostrará como ocultar imagens no celular usando CSS personalizado.
Primeiro, encontre a classe do elemento de conteúdo que contém sua imagem. Por exemplo, a imagem em destaque de suas postagens de blog. Você pode então ocultá-la usando a seguinte classe CSS:
@media only screen and (max-width : 320px) {
.your-element-class {
display: none;
}
}
Importante: display:none oculta a imagem visualmente, mas o navegador ainda a baixa no celular. Se a velocidade da página for o objetivo, o Método 1 é a melhor escolha. A Visibilidade de Dispositivo do SeedProd impede que a imagem seja carregada.
Você precisará substituir ‘your-element-class’ pela classe CSS que contém sua imagem. Talvez você também precise ajustar a largura máxima do dispositivo para se adequar ao seu tema WordPress e à consulta de mídia.
Neste exemplo, ocultamos a imagem em destaque da postagem no celular, visando a classe ‘.featured-media img class’:
@media only screen and (max-width: 782px) {
.featured-media img{
display: none;
}
}
Como você pode ver, a imagem desaparece automaticamente em tamanhos de tela menores.
Se você estiver usando o editor de blocos do WordPress sem o SeedProd, verifique o painel Avançado nas configurações do bloco para um controle deslizante “Ocultar no celular”. O WordPress 6.x adicionou essa opção para a maioria dos blocos principais.
Perguntas Frequentes sobre Ocultar Imagens na Visualização de Celular
Espero que este artigo tenha ajudado você a aprender como ocultar imagens na visualização móvel no WordPress. Você também pode gostar dos seguintes guias:
- Como Adicionar uma Barra Lateral Diferente para Páginas Diferentes no WordPress
- Como Adicionar CSS Personalizado no WordPress (Amigável para Iniciantes)
- Como Adicionar Sombra de Caixa no WordPress
- Como Ocultar Títulos de Página no WordPress
Obrigado por ler! Adoraríamos saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.
