Imagens grandes para desktop podem prejudicar seu layout para celular. Elas reduzem o tempo de carregamento, empurram o conteúdo para baixo e fazem com que seu site pareça confuso em telas pequenas. A solução é simples: oculte as imagens no celular para que os visitantes vejam apenas o que interessa.
Neste guia, mostrarei três maneiras fáceis de ocultar imagens na visualização móvel no WordPress, incluindo uma opção sem código e um método CSS rápido.
Por que ocultar a imagem no celular no WordPress?
Ocultar imagens na visualização móvel mantém seu site limpo e fácil de usar. Uma foto de herói gigante ou um banner promocional que fica ótimo no desktop pode sobrecarregar as telas pequenas, diminuir o tempo de carregamento e ocultar conteúdo importante. Em alguns casos, você também pode querer fazer ofertas somente para desktop sem confundir os visitantes do celular.
Conclusão: ocultar imagens no celular proporciona aos usuários uma experiência mais rápida e clara.
Como mostrar e ocultar imagens na visualização móvel no WordPress
As soluções para ocultar imagens em telas de dispositivos móveis podem parecer complexas para usuários não familiarizados com linguagens de codificação. Uma rápida pesquisa 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 abordaremos a seguir. Tudo o que você precisa é de um plug-in do WordPress, um site do WordPress e a capacidade de seguir algumas etapas fáceis.
- Método 1: Ocultar imagem na visualização móvel do site
- Método 2: Ocultar imagens na visualização móvel em páginas de destino
- Método 3: Ocultar uma imagem no celular com CSS
- Perguntas frequentes sobre a ocultação de imagens na visualização móvel
Método 1: Ocultar imagem na visualização móvel do site
Usaremos um poderoso plugin do WordPress para ocultar imagens na visualização móvel para o primeiro método.
O SeedProd é o melhor construtor de sites para WordPress. Ele permite que você crie temas para WordPress, páginas de destino e layouts responsivos sem escrever código.
Ele inclui centenas de modelos predefinidos e você pode personalizar cada centímetro do seu site com o construtor visual de páginas de arrastar e soltar, 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 dispositivos móveis e desktops.
O SeedProd também oferece modos incorporados, 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, o que permite ocultar seu site do público enquanto trabalha em seu design.
Siga as etapas abaixo para ocultar imagens na exibição móvel em seu site WordPress.
Etapa 1. Instalar e ativar o SeedProd
Primeiro, clique no botão abaixo para obter sua cópia do SeedProd.
Observação: Para usar o recurso de criação de sites do SeedProd, você precisa de uma licença do SeedProd Pro.
Depois de fazer o download do plug-in, instale-o e ative-o em seu site do WordPress. Você pode seguir este guia sobre como instalar um plug-in do WordPress se precisar de ajuda.
Em seguida, vá para SeedProd " Settings e insira sua chave de licença.
Você pode encontrar a chave no painel de controle da sua conta SeedProd, na seção "Downloads".
Clique no botão Verify Key (Verificar chave ) para desbloquear sua licença do SeedProd e passe para a próxima etapa.
Etapa 2. Escolha um modelo de site
A próxima etapa envolve a criação de um tema WordPress personalizado. Isso permitirá que você use as configurações de "Visibilidade do dispositivo" do SeedProd para mostrar e ocultar conteúdo diferente no desktop e no celular.
Vá para SeedProd " Theme Builder e clique no botão Themes (Temas ) para escolher um modelo de site.
Muitos temas estão disponíveis para vários setores e tipos de sites, incluindo comércio eletrônico, blogs, portfólios, etc.
Quando encontrar um tema de sua preferência, passe o mouse sobre ele e clique no ícone de marca de seleção para importá-lo para o seu site.
Agora você verá as diferentes partes que compõem o tema do WordPress.
Normalmente, você precisaria personalizá-los 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 "Edit Design". Para este guia, começaremos com a página inicial.
Etapa 3. Personalize o design do seu site
Você verá o editor visual de páginas do SeedProd ao abrir um modelo de tema. Ele tem blocos e seções à esquerda para adicionar conteúdo personalizado e uma visualização ao vivo à direita.
Você pode clicar em qualquer elemento para ver suas configurações e alterar o design e o layout. Por exemplo, o elemento de título permite que você edite o conteúdo, o alinhamento, o nível do título etc.
Também é fácil adicionar novos elementos ao seu design. Basta arrastar um bloco da esquerda e soltá-lo em sua visualização ao vivo.
Neste exemplo, usamos o bloco "Contagem regressiva". Os cronômetros de contagem regressiva são uma excelente maneira de adicionar urgência ao seu site e incentivar os visitantes a agirem antes de perderem a oportunidade.
Como todos os blocos do SeedProd, você pode clicar nele para:
- Alterar o tipo de cronômetro
- Ajuste o alinhamento do cronômetro
- Adicionar uma mensagem personalizada
- Redirecionar os usuários quando o cronômetro terminar
- Alterar o tamanho do cronômetro
Você também pode clicar na guia "Templates" para escolher rapidamente um estilo diferente.
Etapa 4. Oculte as imagens do site no celular com a Visibilidade do dispositivo
Ocultar imagens na visualização móvel é fácil com as configurações de "Visibilidade do dispositivo" do SeedProd. É possível 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 guia "Advanced" (Avançado) e expanda a seção "Device Visibility" (Visibilidade do dispositivo).
Para ocultar a imagem no celular, clique no botão de alternância ao lado do título "Ocultar no celular".
Agora, essa imagem será exibida apenas para visitantes do desktop e ficará oculta no celular.
Você pode seguir as mesmas etapas para ocultar linhas de imagens inteiras com o SeedProd. Basta abrir as configurações da linha e, na guia "Advanced" (Avançado), usar as configurações de "Device Visibility" (Visibilidade do dispositivo) para ocultar a linha de imagem no celular.
Você pode visualizar suas alterações clicando no ícone "Mobile Preview" (Visualização móvel) na barra de ferramentas inferior.
As imagens "acinzentadas" não serão visíveis para os visitantes do site móvel.
Quando estiver satisfeito com a aparência do design, clique no botão Save (Salvar ) no canto superior direito da tela.
Siga as etapas acima para ocultar imagens na visualização móvel de qualquer outro modelo de tema, como a barra lateral, publicações únicas, páginas etc.
Por exemplo, se você quiser ocultar as imagens em destaque da postagem do blog no celular, poderá editar o modelo Single Post e alterar as configurações de visibilidade no bloco Featured Image da seguinte forma:
Etapa 5. Publique seu site WordPress
Quando estiver pronto para ativar seu tema personalizado, vá para SeedProd " Theme Builder e coloque o botão "Enable SeedProd Theme" na 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 móvel em páginas de destino
Você não precisa reconstruir seu tema para ocultar imagens em dispositivos móveis. Com o construtor de páginas de destino do SeedProd, você pode aplicar as mesmas configurações de Visibilidade do dispositivo a qualquer página independente.
Isso é perfeito para funis de vendas, inscrições em webinars ou páginas promocionais em que você deseja uma exibição limpa em dispositivos móveis sem mexer em todo o design do site.
Basta criar uma nova página de destino no SeedProd " Páginas de destino, escolher um modelo e abri-lo no editor visual.
Em seguida, selecione a imagem que deseja ocultar, vá para Advanced → Device Visibility (Avançado → Visibilidade do dispositivo) e alterne Hide on Mobile (Ocultar no celular).
Visualize em seu telefone, publique a página e pronto.
Método 3: Ocultar uma imagem no celular com CSS
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.
Observação: recomendo esse método somente se você se sentir confortável em trabalhar com linguagens de programação. Você pode usar o personalizador integrado do WordPress para adicionar CSS personalizado ao seu site.
Primeiro, encontre a classe do elemento de conteúdo que contém sua imagem. Por exemplo, a imagem em destaque das postagens do seu blog. Em seguida, você pode ocultá-la usando a seguinte classe CSS:
@media only screen and (max-width : 320px) {
.your-element-class {
display: none;
}
}
Você precisará substituir a "your-element-class" pela classe CSS que contém sua imagem. Talvez também seja necessário ajustar a largura máxima do dispositivo de acordo com o tema do WordPress e a consulta de mídia.
Neste exemplo, ocultamos a imagem em destaque da postagem no celular, direcionando a classe '.featured-media img':
@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.
Perguntas frequentes sobre a ocultação de imagens na visualização móvel
Espero que este artigo tenha ajudado você a aprender como ocultar imagens na visualização móvel no WordPress. Talvez você também goste dos guias a seguir:
- Como adicionar uma barra lateral diferente para páginas diferentes no WordPress
- Como adicionar CSS personalizado no WordPress (para iniciantes)
- Como adicionar um Box Shadow no WordPress
- Como ocultar os títulos das páginas no WordPress
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, sinta-se à vontade para participar da conversa no YouTube, X e Facebook para obter mais conselhos úteis e conteúdo para expandir seus negócios.
