Imagem sem margens

Para um impacto visual, adicione imagens que se estendem até a borda da tela.

Ultima atualização 25 de janeiro de 2023

Uma imagem sem margens se estende de uma borda do browser para a outra, abrangendo a largura do site. Isso cria uma sensação expansiva, e o foco do site passa a ser as imagens.

Na versão 7.1, você pode adicionar imagens sem margens a qualquer página. Na versão 7.0, a capacidade do site de exibir imagens sem margens depende do template.

7.1_full_bleed.jpg

Antes de começar

  • Para criar uma imagem sem margens no seu site, recomendamos fazer o upload de uma imagem com largura entre 1.500 e 2.500 pixels.
  • Como as imagens sem margens mudam de tamanho dependendo da largura do navegador, elas sempre terão algum tipo de recorte.
  • Embora se usem ambos os termos de modo parecido, a imagem “sem margens” se estende até a borda da tela do navegador, enquanto a imagem com “largura total” se estende apenas até a borda da área do conteúdo principal.

Imagens de plano de fundo

As imagens de fundo funcionam de forma diferente, dependendo da versão do Squarespace do seu site.

Crie uma imagem de fundo sem margens em uma seção; para isso, alterne a opção Largura do plano de fundo para Sem margens nos estilos de seção.

Para que uma imagem de fundo preencha uma página inteira, adicione todo o conteúdo dessa página a uma seção.

Alguns templates são projetados para ter imagens grandes e em negrito, enquanto outros enfatizam o espaço em branco e mais espaço ao redor dos blocos.

Qualquer template que aceite uma imagem de fundo em todo o site pode mostrá-la sem margens. Para definir uma imagem de fundo sem margens, escolha a configuração de estilo Tamanho: Entrada.

Você pode também adicionar uma Página de Entrada a qualquer template. Muitos layouts de Páginas de Entrada usam imagens de fundo sem margens.

Banners

As imagens do banner funcionam de forma diferente, dependendo da versão do Squarespace do site.

Adicione um banner a qualquer seção: para isso, adicione uma imagem de fundo ou vídeo e, em seguida, alterne a opção Largura de fundo para Tela cheia nos estilos de seção.

O banner aparece no topo do site, abaixo ou atrás do cabeçalho.

Os banners são exibidos na largura total do browser nas seguintes famílias de templates:

  • Adirondack — os banners são exibidos na largura total do site, mas não se estendem até a largura total do navegador.
  • Brine
  • Bedford
  • Five
  • Pacific
  • Supply — os banners verticais são exibidos na altura do navegador em publicações do blog e eventos.
  • Tremont
  • York — marque Mostrar banner da página e Banner sem margens em Estilos do Site.

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

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

As imagens nas seções da galeria podem aparecer sem margens. Nos estilos de seção da galeria, deixe a opção Largura como Sem margens.

Os layouts de Galerias são exibidos sem margens nas seguintes famílias de templates:

Template Estilo da Galeria
Ishimoto Carrossel
Momentum Slideshow

Tremont

Grid (Grade)
Wexley

Grade. Ajuste o Espaçamento de itens no Índice e o Preenchimento externo.

Páginas de Projeto

A família York aceita um tipo de página especial chamada Página de Projetos, que mistura texto e imagens de maneira muito atraente.

Em Estilos do Site, marque Projeto sem margens e Permitir retrato e quadrado de largura total para exibir todas as imagens na largura do navegador.

Blocos de Imagem

Os Blocos de Imagem são exibidos em uma largura padrão dentro do espaçamento da área de conteúdo principal, que é a mesma largura de todos os outros blocos. Eles não possuem opções sem margens integradas.

Para saber mais, acesse Blocos de Imagem.

Imagens da Página de Portfólio e da Página Índice

Portfólio e Páginas de Índice funcionam de maneiras semelhantes:

  • Na versão 7.1, a Página de Portfólio é uma grade de imagens que com link para outras páginas no site. Todos os sites na versão 7.1 aceitam Páginas de Portfólio.
  • Na versão 7.0, a Página Índice é um layout exclusivo de imagens com link para outras páginas no site. Apenas alguns templates aceitam a Página Índice, e cada Índice tem o próprio estilo.

A Página de Portfólio pode aparecer sem margens no layout Fundo do Índice do portfólio.

Nas seguintes famílias de templates, a Página Índice mostra imagens sem margens ou uma colagem de imagens:

Template

Opções

Avenue

Grade de miniaturas. Marque Índice de largura total e ajuste o Espaçamento de miniaturas para 0% e o Espaçamento de tela de trabalho para 0 px (insira manualmente 0 px).

Brine

Banners empilhados e seções de galeria.

Bedford

Banners empilhados

Flatiron

Grade ou mosaico de miniaturas

Forte

Slideshow

Momentum

Slideshow

Pacific

Banners empilhados

Tremont

Slideshow

York

Banners empilhados. Escolha Espaçamento Externo do Site: Personalizado e defina o Espaçamento Personalizado do Site em 0px

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.