Solução de problemas com corte

Passos para minimizar recortes indesejados; e dicas para melhorar o visual das suas imagens.

Ultima atualização 31 de Outubro de 2024

Muitas imagens no site são automaticamente cortadas na horizontal, na vertical ou em ambas. Isso serve para ajustar as imagens no layout do site e em browsers de diferentes tamanhos.

Este guia explica o recorte básico que ocorre no Squarespace e mostra como minimizá-lo quando você quiser.

Dica

para cortar a imagem original, use o editor de imagens ou um software externo.

Compreender o corte

Cada imagem em seu site está em um contêiner, que é uma caixa invisível que controla como a imagem é exibida em relação a outros conteúdos na página. Quando uma imagem é carregada em um contêiner, uma dessas situações acontece, dependendo das configurações do contêiner:

  • Na maioria das vezes - A imagem está em conformidade com as dimensões do contêiner, que variam de acordo com a largura do navegador. Se a imagem não tiver a mesma forma que o contêiner, a imagem será cortada para preencher o contêiner completamente.
  • Às vezes - A forma do contêiner está em conformidade com as dimensões da imagem para que a imagem inteira seja exibida.

Geralmente, as imagens em seu site são exibidas dentro das dimensões dos contêineres e sofrerão algum corte. Isso ajuda as imagens a ficarem melhores enquanto se adaptam a diferentes tamanhos de navegador.

Arquivo bryler-overlay.png

Blocos de Imagem

Os blocos de imagem exibem imagens na proporção original de altura e largura, dentro das restrições de layout do site.

Dicas:

  • No Editor Intuitivo, os blocos de imagens definidos como Preencher se recortam quando você ajusta o tamanho. Os blocos de imagens definidos como Caber ficam menores ou maiores, mantendo a proporção original da imagem.
  • No editor clássico, recorte blocos de imagem com a alça de corte. Para retornar ao recorte original da imagem, clique duas vezes na alça de corte. Para diminuir a imagem sem recortar, adicione um bloco de espaçamento a cada lado.
  • Após o corte, use o ponto focal para centralizar a imagem.

Banners

Se suas imagens de banner tiverem a mesma proporção, é mais fácil prever como elas cortam. Certifique-se de otimizar suas imagens seguindo nossas dicas de formatação de imagem de banner.

Existem outras maneiras de controlar o corte de banner em seu site, dependendo da versão do Squarespace em que seu site está.

Para criar imagens no banner na versão 7.1, adicione imagens de fundo às seções da página. Essas imagens sempre são cortadas até certo ponto, principalmente na versão móvel. Para personalizar o banner:

  • Altere a quantidade de conteúdo sobreposto ao banner. O excesso de conteúdo aumenta a altura do banner e recorta ainda mais a imagem.
  • Altere o tamanho do banner.
  • Usar o ponto focal para alterar a forma como a imagem fica centrada.

Para saber como seus banners aparecem na versão móvel, acesse Como meu site aparecerá na versão móvel?

Banners de página

Com algumas exceções, o banner da página sempre é cortado até certo ponto, principalmente na versão móvel. A quantidade recortada vai depender da altura do banner e da largura do browser.

Dicas:

Banner geral do site

As imagens adicionadas a imagens de banner em todo o site (adicionadas nos estilos do site) podem repetir, exibir na altura ou largura do banner ou preencher o contêiner completamente.

Dicas:

Imagens ou vídeos de fundo

A forma como você controla a imagem de fundo ou o corte de vídeo depende da versão do Squarespace em que seu site está.

Se a imagem ou vídeo no fundo da seção aparecer cortado, altere a altura ou a largura da seção para mostrar mais da imagem ou vídeo.

As imagens de fundo podem repetir, exibir na altura ou largura do navegador ou preencher completamente a tela do navegador.

Dicas:

  • Use Estilo do Site para escolher como a imagem do banner é exibida.
  • Consulte nossas dicas de solução de problemas para obter ajuda com o monitor móvel.
  • Imagens com mais de 2500 pixels ao longo de sua borda mais longa podem causar problemas em dispositivos móveis.

Seção de galeria e Página de Galeria

Dependendo da versão do Squarespace, o site tem diferentes opções de galeria.

Carregue e gerencie imagens diretamente na seção da galeria e, em seguida, use a guia Galeria para controlar como as imagens são exibidas.

Saiba mais em Seção de galeria.

A forma como as imagens aparecem na Página de Galeria depende do template. Visite o guia do template para saber como as imagens podem ser cortadas para se adequarem ao design da sua Página de Galeria.

Blocos de Galeria

A forma como as imagens são exibidas em um Bloco de Galeria depende do formato: Slideshow, Grade, Carrossel ou Empilhado.

Dicas:

  •  Todos os formatos - no editor clássico, para alterar o tamanho de todo o bloco, adicione um bloco de espaçamento em ambos os lados.
  • Slideshow - a altura da galeria é definida pela imagem mais larga. Para evitar recortes ou espaços vazios ao redor das imagens, use imagens com proporções semelhantes.
  • Grade - na aba "Design", use a proporção para recortar todas as imagens na mesma forma e altere o número de miniaturas por linha para alterar o tamanho delas. Use o ponto focal para ajustar a centralização de cada imagem.
  • Carrossel - Ajuste a altura com a alça de corte.
  • Empilhado - Cada imagem se expande para preencher a largura da página ou coluna em que o bloco está.

Páginas de Portfólio e Índice

A Página de Portfólio e a Página Índice são diferentes tipos de página em diferentes versões do Squarespace, mas funcionam de forma semelhante:

Mova o cursor sobre uma seção de portfólio para adicionar uma imagem e, em seguida, use a aba Galeria para controlar como ela é exibida.

Saiba mais em Página de Portfólio.

A forma como as imagens aparecem em uma Página Índice depende do template. Visite o guia do seu template para saber mais.

Páginas da loja

Como o corte afeta as imagens do produto depende da versão do Squarespace em que seu site está.

Após carregar imagens para a loja, use os ajustes da seção da loja para arrumar o estilo. Ao editar uma página, passe o cursos por cima da seção e clique no ícone de lápis. É possível alterar o espaçamento, as colunas, a proporção da imagem e o alinhamento do texto. Teste diferentes ajustes de estilo para as imagens do produto. Saiba mais sobre como personalizar a página da loja em "Seções da página de coleção".

Proporções da imagem do produto

Nas páginas da loja, não é possível recortar automaticamente as imagens dos produtos. Recomendamos usar imagens com proporções semelhantes. Antes de carregar as imagens para o site, por exemplo, veja se as imagens do produto têm a mesma orientação (paisagem ou retrato).

Se as imagens do seu produto tiverem orientação diferente, use o nosso editor de imagem integrado ou uma ferramenta externa para cortar as imagens. Também é possível usar um bloco de produto para criar um layout personalizado para o produto.

A forma como as imagens do produto são cortadas na página de destino depende do tipo de página de loja do seu template.

Clássico

Nas páginas clássicas da loja:

  • Em Estilo do Site, use o ajuste Corte automático da imagem do produto para escolher se as imagens cortam na mesma forma ou são exibidas em suas formas originais.
  • Se você estiver cortando, use o ajuste Tamanho do item do produto para definir a forma.
  • Use o ponto focal para ajustar o centro da imagem.
  • Se você não estiver cortando, use o ajuste Cor de sobreposição do produto para escolher a cor exibida por trás da imagem.
  • Para obter mais ajuda, visite as páginas da loja Styling.
Arquivo prodpagebackground.png

Advanced [Avançado]

Nas páginas avançadas da loja:

  • As imagens são sempre recortadas no mesmo formato, para deixar a página com um visual coeso.
  • Para definir a forma de todas as imagens na sua página de loja, use o ajuste Proporção da Imagem na seção Produtos: Layout de Estilos do Site.
  • Use o ponto focal para ajustar o centro da imagem.
  • Para obter mais ajuda, visite as páginas da loja Styling.
Arquivo advancedprodcutscropping.png

Exclusivo

Acesse estes links para saber mais sobre os estilos de miniatura de qualquer uma das Páginas da loja exclusivas:

Páginas de Entrada

Acessando o recurso

A versão 7.1 não suporta Páginas de Entrada.

A página de entrada sempre é recortada, principalmente na versão móvel. O tamanho do recorte depende da altura da imagem, da largura do browser e do layout escolhido.

Footer Image
  • Peça ajuda à nossa comunidade

  • Peça ajuda à nossa comunidade sobre personalizações avançadas.

  • Contrate um Squarespace Expert

  • Ganhe destaque on-line com a ajuda de um designer ou desenvolvedor experiente.