Obs.: embora os nossos guias mais acessados tenham sido traduzidos para o português, outros guias estão disponíveis apenas em inglês.

Solução de problemas com corte

Muitas imagens em seu site serão cortadas horizontalmente, verticalmente ou ambas. Isso ajuda suas imagens a ficarem melhores no layout do seu site e em diferentes tamanhos de navegador.

Este guia ajudará você a entender o corte normal que acontece no Squarespace e a aprender a minimizá-lo o máximo possível.

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:

  • Corte a imagem com a alça de corte. Para redefinir a imagem para suas dimensões originais, clique duas vezes na alça de corte.
  • Após o corte, use o ponto focal para centralizar a imagem.
  • Diminua a imagem adicionando blocos espaçadores em ambos os lados.

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á.

Os banners sempre cortarão em algum grau, especialmente no celular. Para personalizar o banner, você pode:

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 navegador.

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 de fundo da seção ou vídeo aparecer cortada, altere a altura ou a largura da seção para mostrar mais da sua imagem ou vídeo.

Saiba mais em Seção de página.

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.
  • Ao escolher uma imagem de fundo sem margens, considere como os visitantes acessarão seu site.

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:

  • Para qualquer formato, redimensione todo o bloco adicionando blocos espaçadores em ambos os lados.
  • Slideshow - A altura da galeria é definida pela imagem mais ampla. Para evitar recortar ou espaço em branco ao redor das imagens, use imagens com proporções semelhantes.
  • Grade - Na guia Design, use a proporção para cortar todas as imagens na mesma forma e altere o número de miniaturas por linha para alterar seu tamanho. Use o ponto focal para ajustar a forma como cada imagem se concentra.
  • 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 de Armazenamento

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

Após carregar imagens para as seções da loja, use os ajustes da seção da loja para arrumar o estilo. Ao editar uma página, 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

Não é possível cortar automaticamente imagens de produtos nas Páginas da Loja. Recomendamos que as imagens do produto tenham proporções semelhantes. Por exemplo, antes de carregar imagens para o seu site, certifique-se de que as imagens do produto tenham uma orientação consistente de 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

  • 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]

  • A Página de Armazenamento Avançada sempre recorta imagens na mesma forma. Isso ajuda a dar à sua página uma aparência coesa.
  • 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.

Arquivo advancedprodcutscropping.png

Exclusivo

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

Páginas de Entrada

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

As Páginas de Entrada sempre são cortadas, principalmente na versão móvel. O tamanho do corte depende da altura da imagem, da largura do navegador e do layout escolhido.

Este artigo foi útil?
Utilizadores que acharam útil: 14 de 158