Está procurando uma maneira fácil de ocultar uma imagem na exibição móvel em seu site WordPress?
A exibição de todos os elementos de design do seu site em telas de dispositivos móveis pode tornar a experiência de visualização desordenada e sobrecarregada. Quando isso acontece, é mais difícil para os visitantes encontrarem o que estão procurando e pode até mesmo levá-los a abandonar o site.
Não seria ótimo se você pudesse "desativar" determinados elementos de design apenas para visualizadores móveis?
Este artigo mostrará como ocultar imagens em dispositivos móveis no WordPress, permitindo que você ofereça uma melhor experiência de usuário aos visitantes do site.
Por que ocultar a imagem na visualização móvel no WordPress?
Um site móvel desordenado pode afastar seus visitantes, mas esse não é o único motivo para ocultar o conteúdo em dispositivos móveis.
Às vezes, você pode querer alcançar os visitantes do desktop com uma oferta direcionada. Nesse caso, você deve ocultar suas imagens promocionais dos visitantes de dispositivos móveis para não direcioná-las acidentalmente e distorcer seus resultados.
Outro motivo para ocultar imagens é que elas podem ser grandes demais para serem exibidas em telas de dispositivos móveis. Uma imagem heroica enorme pode ficar ótima em um desktop, mas pode ocupar muito espaço valioso em dispositivos móveis; nesse caso, a melhor solução é ocultá-la.
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 programaçã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
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 a 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
- Redirecione 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".
Essa imagem agora será exibida apenas para visitantes de 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 a opçã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ê também pode usar o SeedProd para ocultar a imagem na exibição móvel de páginas de destino individuais. Essa é uma excelente solução se você quiser manter seu tema existente do WordPress e criar páginas de destino de alta conversão no WordPress.
Etapa 1. Instalar e ativar o SeedProd
Primeiro, siga as etapas acima para instalar o plug-in SeedProd e ativá-lo em seu site.
Observação: você pode usar a versão gratuita do SeedProd para esse método, pois as configurações de Visibilidade do dispositivo estão disponíveis para todos os usuários. No entanto, usaremos o SeedProd Pro para obter uma variedade maior de modelos de página de destino.
Etapa 2. Escolha um modelo de página de destino
Em seguida, vá para SeedProd " Landing Pages e clique no botão Add New Landing Page (Adicionar nova página de destino).
Você pode escolher qualquer modelo de página de destino na próxima página, incluindo:
- Em breve
- Modo de manutenção
- Página 404
- Vendas
- Webinar
- Aperto de chumbo
- Obrigado, senhor
- Login
Quando encontrar um modelo de que goste, passe o mouse sobre ele e clique no ícone de marca de seleção.
Em seguida, você pode dar um nome à sua landing page e clicar no botão Save and Start Editing the Page (Salvar e começar a editar a página ).
Etapa 3. Personalize o design de sua página de destino
Seu modelo de landing page será aberto no mesmo construtor de páginas que usamos para personalizar o tema do WordPress anteriormente. Ele funciona da mesma forma e inclui as mesmas seções e elementos que o construtor de temas.
Os únicos blocos que não podem ser usados em sua landing page são as tags de modelo do WordPress e do WooCommerce. Esses blocos estão ocultos porque as landing pages não usam conteúdo dinâmico do WordPress, como posts de blog, categorias, tags etc.
Em vez disso, você pode personalizar sua página de destino com:
- Brindes
- Títulos animados
- Formulários Optin
- Temporizadores de contagem regressiva
- Mapas do Google
- Incorporações de mídia social
- E muito mais.
Etapa 4. Ocultar imagens com a visibilidade do dispositivo
Você pode ocultar imagens no celular em sua landing page da mesma forma que fez com o construtor de temas. Basta clicar na imagem que você deseja ocultar. Em seguida, na guia "Advanced", alterne a opção "Hide on Mobile" para a posição "On".
A imagem ficará "acinzentada" quando você a visualizar no celular, o que indica que a imagem está oculta para os visitantes do celular.
Continue personalizando sua página de destino até que esteja satisfeito com a aparência dela.
Etapa 5. Publique sua página de destino
Para publicar sua landing page personalizada, clique na seta suspensa no botão Salvar. Em seguida, selecione a opção Publicar.
Ao visualizar sua landing page em um dispositivo móvel, não será possível ver a imagem que você ocultou com as configurações de visibilidade.
Método 3: Ocultar uma imagem no celular com CSS
Entendemos 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: recomendamos esse método somente se você se sentir à vontade para trabalhar com linguagens de codificaçã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 "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.
Aí está!
Esperamos que este artigo tenha ajudado você a aprender como ocultar imagens na visualização móvel no WordPress. Talvez você também goste deste guia sobre como adicionar uma caixa de autor ao WordPress.
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, fique à vontade para deixar um comentário com perguntas e feedback.
Você também pode nos seguir no YouTube, no X (antigo Twitter) e no Facebook para obter mais conteúdo útil para expandir seus negócios.
