Elemento de imagem

Sobre o elemento de imagem

O processo de Imagem O elemento no GemPages permite que você exiba imagens únicas em sua página, o que é ideal para exibir produtos, banners, recursos visuais da marca, promoções ou emblemas de confiança.

Quer você queira enfatizar um destaque de produto, ilustrar a estética da sua marca ou criar separação visual entre seções, o elemento Imagem oferece controle total sobre como as imagens aparecem em todos os dispositivos.

Você pode facilmente carregar novas imagens, reutilizar as existentes dos seus arquivos do Shopify e personalizar tamanho, posição, bordas e animações sem codificação.

Como adicionar um elemento de imagem à sua página?

Passo 1: Faça login no seu Administrador do Shopify > Painel GemPages > PÁGINAS.

Passo 2: Você pode ver todas as suas páginas criadas com GemPages aqui. Clique na página de destino para abrir o Editor.

Se preferir criar uma nova página, clique em Crie uma nova página para começar a construir sua página do zero ou selecionar entre modelos pré-desenhados.

Passo 3: Na barra lateral esquerda, digite Imagem na barra de pesquisa, arraste e solte o elemento da imagem na posição desejada.

Configurar a guia Configurações

O Elemento de Imagem oferece flexibilidade configurações de imagem para que você possa controlar o tamanho, a forma e a capacidade de resposta com facilidade.

Sessão de Fotos

Escolha como sua imagem será estilizada visualmente:

• Retângulo: Forma retangular padrão
• Círculo: Corta automaticamente a imagem em um círculo perfeito

fonte

Carregue ou selecione o arquivo de imagem. Você pode:

• Clique Carregar imagem, cole a URL da imagem ou clique Navegar na galeria para escolher entre suas mídias.
• Após o upload, o URL da imagem aparecerá abaixo para referência ou edição

Dimensões:

Controle como a imagem é exibida em termos de layout e capacidade de resposta:

quadro: Escolha uma proporção de aspecto predefinida ou use uma personalizada:

• Quadrado
• vertical
• Horizontal
• Óptimo estado. Original (mantém as dimensões nativas da imagem)
• Molduras por Medida (definir manualmente a largura e a altura)

Largura altura:

• Set in pixels (px) ou percentagem (%)
• Alternar o ícone de cadeado para manter ou quebrar a proporção da tela

Shape

Personalize o contêiner de imagens com melhorias visuais para corresponder melhor ao seu design:

Fronteira: Adicione uma borda ao redor da imagem. Personalizar:

• Cor: Escolha qualquer cor HEX
• Espessura: Definir valor de pixel
• Estilo de traço: Sólido, tracejado ou pontilhado

Corner: Arredonde os cantos da imagem ajustando o raio da borda. Você pode:

• Aplique o mesmo raio em todos os cantos
• Desbloqueie os valores para estilizar cada canto individualmente

Shadow: Adicione um efeito de sombra para dar profundidade ou separação do fundo. Configurar:

• Formato: Externo, interno ou centralizado
• Direção: Controle o ângulo da sombra
• Cor
• Distância, borrão e Dimensões:

de vidrio

Torne a imagem clicável ativando a opção LIGADO e, em seguida, selecione a ação que deseja adicionar após clicar na imagem, incluindo:

SEO

Melhore a acessibilidade das imagens e o desempenho dos mecanismos de busca:

• Texto alternativo (alt text): Descreva a imagem (usada por leitores de tela e mecanismos de busca)
• Imagem de título: Título opcional que pode ser exibido como texto de dica de ferramenta

Otimize o LCP

Ajuda a otimizar o carregamento para melhores pontuações de desempenho:

Qualidade: Escolha o nível de compressão:

• Finest (alta qualidade)
• Alto (padrão, balanceado)
• Suporte: (para páginas com alto desempenho)
• Molduras por Medida (configurações avançadas de compressão)

pré-carga: Habilite se a imagem estiver acima da dobra e contribuir para o Largest Contentful Paint (LCP)

Alinhar

Alinhe a imagem dentro do seu contêiner: Esquerda, Centro ou Direita.

Configurar a guia Avançado

Para uma personalização mais avançada, navegue até o Avançado aba e siga as instruções em Este artigo.

Solução de problemas: Imagem não aparece na página

Se a imagem que você carregou não aparecer no Editor ou na página publicada, tente as verificações abaixo:

Causas comuns e soluções

Melhores práticas para elementos de imagem

Colocar texto sobre uma imagem

Se você estiver interessado em criar um banner com sobreposição de texto em uma imagem, temos um tutorial em vídeo só para você. Assista ao vídeo abaixo para obter orientação passo a passo.

Torne sua imagem clicável

Tornar as imagens clicáveis ​​ou interativas melhora a experiência e o envolvimento do usuário.

Aprender mais: Torne um texto ou imagem clicável

Perguntas frequentes sobre o elemento de imagem

1. Como posso impedir que minha imagem seja dimensionada automaticamente?

Se você não quiser que uma imagem seja dimensionada, vá para Dimensões: seção "Configurações de imagem". Defina a largura e a altura em pixels (px) em vez de porcentagens (%). Isso bloqueia a imagem em um tamanho fixo em todos os dispositivos.

2. Onde encontro as configurações de imagem no GemPages?

Basta clicar na imagem dentro do editor e o Guia Configurações aparecerá na barra lateral esquerda. Lá, você pode ajustar todas as configurações da imagem, incluindo tamanho, moldura, borda, sombra e opções de link.

3. Posso tornar uma imagem clicável?

Sim. Na guia Configurações, role para baixo até de vidrio seção e ative-a. Você pode vincular a imagem a uma página, URL externa, âncora de seção, pop-up, e-mail ou até mesmo a um número de telefone.

4. Como adiciono texto alternativo a uma imagem para SEO?

De acordo com o relatório SEO Na seção "Configurações de imagem", insira um texto alternativo descritivo. Isso melhora a acessibilidade para leitores de tela e ajuda os mecanismos de busca a entender sua imagem.

5. Por que minha imagem fica desfocada após o upload?

Se a sua imagem estiver desfocada, verifique o Qualidade configuração em Otimizar LCP. Mudando para Finest A qualidade geralmente corrige o problema, mas certifique-se de que o arquivo de origem que você enviou seja de alta resolução.

6. Posso sobrepor texto diretamente em uma imagem?

O elemento Imagem em si não suporta sobreposição direta de texto. Para isso, use o Elemento do banner do herói, que permite colocar texto, botões ou outros elementos sobre uma imagem.

7. Como você adiciona imagens à sua página no GemPages?

Para adicionar imagens a um modelo, arraste e solte as Elemento de imagem no layout da sua página dentro do Editor. Você pode carregar um novo arquivo, escolher um da sua biblioteca de mídia do Shopify ou colar a URL de uma imagem. Isso permite personalizar visualmente qualquer produto, coleção ou modelo de landing page.

8. Como atualizo as imagens depois de publicar minha página?

Basta clicar na imagem dentro do editor. No fonte seção, você pode carregar uma nova imagem, substituí-la por uma da sua biblioteca de mídia ou ajustar suas configurações. Após a atualização, clique em Economize e Publicar para aplicar as alterações ao vivo na sua loja.

9. O que significa “Seguir link” quando defino a ação Após o clique como Abrir página?

A configuração “Seguir link: Sim/Não” controla se os mecanismos de busca podem seguir o hiperlink anexado à sua imagem.

• Sim: Os mecanismos de busca (como o Google) podem seguir este link até a página de destino. Use-o se o link levar a uma página importante que você deseja indexar (por exemplo, uma página de produto ou coleção).
• nO: Adiciona um rel="nofollow" A tag para o link informa aos mecanismos de busca. Isso informa aos mecanismos de busca. não Para seguir o link ou conceder autorização para o link.

10. Como faço para vincular o WhatsApp usando o elemento de imagem?

Você pode transformar qualquer imagem (como o ícone do WhatsApp) em um botão de bate-papo. Basta adicionar um elemento de Imagem, fazer o upload do seu logotipo do WhatsApp e ativar a opção. de vidrio opção.

Use este formato para o seu link do WhatsApp: https://wa.me/<your-number>. Por exemplo: https://wa.me/15551234567.

Quando os clientes clicarem na imagem, será aberta uma conversa no WhatsApp com o seu número.

11. Por que o upload da minha imagem falha no GemPages?