Elemento de imagem

As imagens são uma das pistas visuais mais úteis para transmitir suas idéias aos espectadores do seu site. Neste artigo, você aprenderá como usar o elemento Imagem e alguns problemas comuns relacionados às imagens na sua página.

Sobre o elemento Imagem

O elemento Imagem permite adicionar imagens à sua página para aumentar sua taxa de conversão. Você pode usar esse elemento para criar uma imagem de banner para sua página, adicionar provas visuais adicionais para algo sobre o que você está falando na página ou para simplesmente decorar sua página.

pagefly image element 1

Na atualização mais recente, o elemento Imagem possui apenas uma opção de design, no entanto, lembre-se de que você pode personalizá-lo com mais precisão usando as guias Geral e Estilo.

Arraste uma variação para o layout e veja como ela pode ser configurada.

Configuração do elemento de imagem

O elemento Imagem vem com vários parâmetros de configurações, permitindo que você ajuste a aparência do conteúdo para alcançar a melhor taxa de conversão possível.

Selecione o elemento no layout para ver seus parâmetros.

pagefly image element 2

Os parâmetros nas guias Geral e Estilo são específicos para este elemento

Parâmetros da guia Geral

Parâmetros da guia Geral
1. CONTEÚDO Você  poderá subir imagens de 3 origens:

  • Do seu computador
  • Da internet
  • Do gerenciador de imagens

Você pode ler mais aqui para obter mais detalhes sobre como usar o gerenciador de imagens para fazer upload de imagens.

2. AÇÃO Além das ações de 5 cliques como outros elementos (leia mais aqui.), o elemento de Imagem possui uma ação de clique especial chamada Abrir Caixa de Luz que permite ao usuário exibir imagens de tamanho completo.

3. RASTREAMENTO Este é o local para configurar:

  • Evento do Google Analytics na sua conta do GA. Você pode ler mais como configurá-lo aqui. 
  • Pixel do Facebook quando um cliente clica no elemento. Você pode ler mais sobre isso aqui.
  • Eventos do PageFly: você pode adicionar o ID de acompanhamento aqui para medir a taxa de conversão da função Analytics. Leia aqui para mais detalhes.
4. ATRIBUTOS Estes são o grupo de 3 parâmetros que todos os elementos possuem. Você pode ler mais aqui
5. VISIBILIDADE Estes são o grupo de 3 parâmetros que todos os elementos possuem. Você pode ler mais aqui
6. ANIMAÇÃO Estes são o grupo de 3 parâmetros que todos os elementos possuem. Você pode ler mais aqui

Nota importante 1: Use apenas 1 imagem para todos os dispositivos

A partir da versão 2.8.0 do PageFly, você pode usar apenas 1 imagem em dispositivos diferentes. Para mudar a imagem, vá para a visão de “Todos os dispositivos” e selecione a imagem que você quiser no parâmetro CONTEÚDO.

pagefly image element 2

Se você ainda estiver usando os elementos de imagem criados em versões antigas do PageFly, você ainda poderá usar diferentes imagens em diferentes dispositivos como você desejar.

Você terá apenas que mudar a imagem em cada visão de dispositivo e selecionar a imagem no parâmetro CONTEÚDO na aba Geral.

Nota importante 2: Utilize a função “Esconder” para mostrar a imagem em diferentes dispositivos

Se você precisar usar diferentes imagens em diferentes dispositivos, por favor , siga os passos seguintes:

  • Na vista “Todos os dispositivos”, adicione as imagens que você quiser exibir em diferentes dispositivos.
  • Selecione cada imagem, e na aba Geral, você verá o parâmetro VISIBILIDADE.
  • Para exibir em algum dispositivo específico, apenas esconda-o em outros dispositivos.
  • Clique nos botões Guardar e Publicar, e você verá as diferentes imagens em diferentes dispositivos.

Veja a Imagem Ilustrativa abaixo:

Assim é como é exibido em um dispositivo Laptop:

Assim é como é exibido em um dispositivo móvel:

O vídeo abaixo descreve os detalhes dessa função “Ocultar”

Parâmetros da aba Estilo

Parâmetro da guia Estilo

Você pode estilizar sua imagem com os estilos predefinidos com 4 opções.

1. NO GERAL Você pode ler mais aqui
2. ESPAÇAMENTO Você pode ler mais aqui
3. TIPOGRAFIA Você pode ler mais aqui
4.  PLANO DE FUNDO Você pode ler mais aqui.
5. BORDA Você pode ler mais aqui
6. EXIBIÇÃO Você pode ler mais aqui
7. CSS PERSONALIZADO Você pode ler mais aqui.

Alguns problemas comuns com imagens

As imagens não têm largura total nos dispositivos móveis

Em muitos casos, quando você adiciona imagens em sua página e vê que elas são de largura total no Desktop, mas quando visualizadas em telefones celulares, elas estão menores e não possuem largura total.

Esse problema ocorre porque as imagens no dispositivo móvel têm preenchimento à esquerda ou preenchimento à direita em Todos os dispositivos e não estão configuradas na largura total – opção 100%.

Para corrigir esse problema, é necessário verificar o preenchimento da imagem, alternando para o dispositivo móvel e substituindo o preenchimento atual para 0px na guia Estilo ou definindo a opção Largura total – 100% na guia Geral, como na imagem abaixo:

Lembre-se de Publicar e ir para a Exibição ao Vivo para ver o resultado:

Caso você tenha tentado essas formas, mas elas ainda não funcionam, não hesite em entrar em contato conosco através da janela de bate-papo ao vivo para que possamos ajudá-lo(a) imediatamente.

Algumas imagens não são exibidas no navegador Safari

Em muitos casos, as imagens nas suas páginas não são exibidas no navegador Safari, mas ainda funcionam no navegador Chrome.

Um dos motivos mais populares é que as imagens que você está usando são do formato webp. Nesse caso, o Safari não suporta esse formato.

Você pode ver esta imagem por exemplo:

No entanto, se você verificar no navegador Chrome, a imagem será exibida:

Se você ainda deseja que a imagem seja exibida no Safari, é necessário convertê-la para o formato JPG ou PNG. Nesse caso, a imagem foi convertida em JPG e funciona no Safari:

É altamente recomendável que você use apenas o Chrome para obter a melhor experiência. Você pode verificar este artigo para saber se o PageFly funciona melhor com a versão mais recente do navegador Google Chrome.

Certifique-se de não usar o formato webp se quiser que a imagem seja exibida no Safari. Se você já converte a imagem em JPG, mas o problema ainda existe, não hesite em entrar em contato conosco através da janela de bate-papo ao vivo para que possamos ajudá-lo a resolver o problema.

Desejo sobrepor o texto sobre a imagem

Caso queira que o texto sobreponha a imagem, use o elemento Imagem com sobreposição de texto (a seção pré-criada):

Leia aqui para mais detalhes.

Was this helpful?

Try out all PageFly features with Free plan

.myshopify.com
Don’t have Shopify store yet? Create store
×

PageFly Help Center is now available in French, Portuguese and Chinese.Please check the flags on the page header.

I got it!
Languages