Imagens de fundo da seção

Adicione e personalize as imagens no fundo das seções de página do seu site.

Ultima atualização 3 de Janeiro de 2025

Há várias formas de ajustar o estilo do fundo do seu site. Uma opção é adicionar imagens de fundo às seções da página e personalizar essas imagens com diversos efeitos de imagem. Essa é uma ótima forma de criar banners de páginas e elementos visuais que combinem com sua marca.

Este guia analisa como adicionar e personalizar fotos e outras imagens de fundo que você carrega no Squarespace. Aprenda sobre todas as opções de estilo de plano de fundo em Estilizar o plano de fundo do site.

Acessando o recurso

Este guia é para a versão 7.1. Para ter um efeito semelhante na versão 7.0, é possível adicionar uma imagem do banner e vídeos de fundo, dependendo do modelo.

Assista ao vídeo

Antes de começar

  • Layouts automáticos, seções de portfólio e todas as seções de blocos são compatíveis com a inclusão de imagens de fundo. Você também pode adicionar vídeos de fundo e arte de fundo a essas seções.
  • Não é possível adicionar imagens de fundo às seções de galeria, mas você pode adicionar uma cor de fundo ou usar o layout Slideshow: completo para um efeito semelhante.
  • As seções de blog, de curso, de evento, de loja e de vídeo não aceitam conteúdo no fundo, mas você pode adicionar uma cor ao fundo.
  • Se a seção incluir texto ou outro conteúdo, confira se ele ainda está visível e legível em frente ao fundo. Para alterar a cor do texto, use os ajustes de fonte no tema de cores daquela seção.
  • As imagens de fundo são cortadas automaticamente com base na quantidade de conteúdo na seção e no tamanho da tela do browser do visitante. Para escolher como a imagem é cortada, use um bloco de imagens. Para saber como as imagens de fundo aparecem na versão móvel, consulte "Como meu site aparece na versão móvel?"

Dicas de formatação de imagem

Verifique a formatação das imagens antes de fazer o upload para o site. No caso de imagens de fundo, siga estas orientações:

  • Use imagens entre 1500 pixels e 2500 pixels de largura.
  • Não use imagens com texto no arquivo de imagem real. Em vez disso, adicione texto sobre a imagem.
  • Se você for adicionar texto sobre a imagem, use uma imagem com um padrão abstrato.
  • Para tipos de arquivo de imagem e requisitos completos de imagem, visite Formatação de imagens para a Web.

Adicionar imagens de fundo

Use uma imagem de fundo para dar contraste ao texto ou outro conteúdo sobreposto à seção; ou crie um banner quando a seção ficar no topo da página.

Para adicionar uma imagem de fundo da seção:

  1. Abra o painel "Páginas" e clique na página com a seção a ser editada.
  2. No canto superior esquerdo, clique em Editar.
  3. Passe o cursor sobre a seção e clique no ícone do lápis. Em seguida, clique em Plano de fundo.
  4. Clique em Imagem e depois em +. Escolha a fonte da imagem no menu suspenso para carregar a imagem; reutilize uma imagem já carregada; use a imagem de um acervo; ou use um plano de fundo do acervo.
  5. (Opcional) Clique em Efeito de imagem para selecionar um efeito de imagem.
  6. (Opcional) Para ajustar o estilo da imagem, use Largura de fundo e Opacidade da sobreposição.
  7. (Opcional) Clique em Formatar para ajustar a altura da seção, bem como a largura e o alinhamento do conteúdo.
  8. (Opcional) Clique em Cores para selecionar um tema de cores para a sobreposição e qualquer conteúdo adicionado. Saiba mais em "Alterando as cores". Ao excluir a imagem, a sobreposição se transforma na cor de fundo da seção.
  9. Clique em Salvar para salvar as alterações e continuar editando ou clique em Sair e depois em Salvar para fechar o editor.
    .

Após carregar a imagem, você pode:

Acrescentar texto ou outro conteúdo

Você pode adicionar texto ou outro conteúdo sobre uma imagem de fundo. Como o texto adicionado se adapta a qualquer tamanho de tela ou aparelho móvel, esta é uma ótima maneira de acrescentar texto se você usar a imagem de fundo como um banner.

Dica

se quiser uma mensagem somente com texto no topo do site, adicione uma barra de notificações em vez do banner.

Não recomendamos usar imagens de fundo com texto dentro do próprio arquivo de imagem, por dois motivos:

  • Computadores não conseguem ler esse texto, então motores de busca não o indexarão para os resultados.
  • Quando a imagem mudar de forma para se adaptar a diversas larguras de navegador, serão cortadas partes do texto.

Para adicionar texto ou outro conteúdo:

  1. Clique em Editar na página com a imagem de fundo.
  2. Clique em Adicionar bloco ou em um ponto de inserção para adicionar um bloco de texto. Clique no bloco para adicionar texto, depois use o menu suspenso Formato para escolher um estilo de parágrafo.
  3. Adicione mais blocos de texto ou outro conteúdo à seção (como um bloco de botões).
  4. Clique em Salvar para salvar as alterações e continuar editando ou clique em Sair e depois em Salvar para fechar o editor.
    .

Estilos de texto

As configurações de estilo do seu site no painel Design definem como o texto é exibido em sua imagem de fundo.

  • Para alterar as fontes do site, escolha um pacote de fontes e um tamanho base no painel Fontes. Role até Atribuir Estilos ao texto específico de estilo. Para saber mais, visite Alterar fontes.
  • Para alterar a cor da fonte, escolha uma paleta e um tema no painel Cores . Clique no ícone de lápis no tema da sua seção para ajustar o estilo de elementos específicos dentro desse tema. Saiba mais em "Alterando as cores".

Assista ao vídeo

Estilizar imagens de fundo

Para editar o estilo da imagem de fundo, clique em Editar na página, depois clique no ícone de lápis na seção do banner e, por fim, clique em Fundo. Você pode definir a Largura do plano de fundo e a Opacidade da sobreposição.

Largura do fundo

Para a largura do plano de fundo:

  • A opção Sem margens estende a imagem de uma borda da janela do browser para a outra, abrangendo toda a largura do site. Normalmente, é a configuração usada nas imagens do banner.
  • A inserção endenta ligeiramente a imagem e cria uma borda ao redor da imagem.

Se a imagem for definida como Inserção, você poderá definir a cor da borda.

Opacidade da sobreposição

A opção "Opacidade da sobreposição" define a opacidade da sobreposição das cores da imagem do fundo.

Não há um grau específico de opacidade; portanto, recomendamos testar diferentes opções até achar a melhor para você. Geralmente, sugerimos uma porcentagem maior se a seção tiver muito conteúdo, a fim de diferenciar o conteúdo da imagem de fundo.

A cor da opacidade é definida pelo ajuste Sobreposição ao fundo no tema da sua seção. Saiba mais em "Alterando as cores".

Anotação

se você carregar um arquivo.png com um fundo transparente, o navegador sempre exibirá um fundo branco atrás da imagem. Para alterar essa cor de fundo, você precisará editar a imagem em um software de edição de imagens de terceiros antes de enviá-la para o seu site.

Redimensionar imagens de fundo

Para mudar a altura de uma imagem de fundo:

  1. Clique em Editar na página e depois no ícone de lápis na seção da imagem de fundo.
  2. Na aba Formato, em Altura da seção, selecione uma altura predefinida ou clique em ... para especificar uma altura personalizada. Ao editar uma seção do Editor Intuitivo, você poderá alterar a altura da grade da seção — para isso, clique e arraste o ícone de seta azul no canto inferior direito.
  3. Clique em Salvar para salvar as alterações e continuar editando ou clique em Sair e depois em Salvar para fechar o editor.
    .

A altura da seção afeta como a imagem de fundo é cortada no computador e na versão móvel. Recomendamos testar alturas diferentes até chegar ao visual desejado.

Nas seções de editor clássico, a altura da imagem de fundo também depende da quantidade de conteúdo da seção. Para aumentar a altura sem adicionar conteúdo visível, adicione blocos de espaçamento.

Embora as imagens de fundo normalmente abranjam toda a largura do site, você pode estilizar a imagem de fundo para incluir uma borda ao redor dela. Isso dá a aparência de reduzir a largura da imagem.

Adicionar efeitos de imagem de fundo

Depois de adicionar uma imagem de fundo, você pode adicionar efeitos para dar uma aparência mais estilizada à imagem. Alguns efeitos adicionam uma animação para que a imagem esteja sempre em movimento, enquanto outros aparecem apenas quando o visitante percorre essa seção do seu site.

Para adicionar um efeito de imagem:

  1. Adicionada a imagem de fundo no editor da seção, clique em Efeito de imagem na aba Plano de fundo.
  2. Escolha um efeito no menu. Para personalizar o efeito, clique no ícone de configurações para abrir o painel de detalhes. Qualquer alteração que você fizer no efeito aparecerá na pré-visualização do site. Para saber mais sobre suas opções, confira a seção abaixo.
  3. Clique em Salvar para salvar as alterações e continuar editando ou clique em Sair e depois em Salvar para fechar o editor.
    .

Lembre-se:

  • Os efeitos da imagem só aparecem em navegadores e aparelhos compatíveis com WebGL, uma ferramenta que funciona com o processador gráfico do seu aparelho. Para ver se seu navegador é compatível, acesse get.webgl.org. Caso não seja, o fundo da seção permanecerá estático.
  • Os efeitos de imagem não se aplicam a arte de fundo nem a vídeos de fundo, mesmo que o vídeo use uma imagem de contingência para dispositivos móveis.

Estilos de efeito de imagem

Você pode escolher entre estes efeitos de imagem:

  • Nenhum: sem efeito, com exceção da configuração de opacidade de sobreposição
  • Líquido: dá à imagem um efeito de ondulação
  • Granulação: adiciona uma sobreposição estática animada à imagem
  • Paralaxe: a imagem se move à medida que os visitantes rolam a página
  • Círculos refratados: refrata a imagem através de um padrão de círculos
  • Linhas refratadas: refrata a imagem através de um padrão de linhas retas

Você pode personalizar seu efeito de imagem no painel de detalhes. Para abrir esse painel, clique em um efeito de imagem e depois no ícone de configurações.

O ícone de configurações aparece quando você clica em um dos efeitos de imagem no editor da seção

Confira as opções e configurações até achar um padrão do seu gosto. Clique em uma categoria para expandir o menu suspenso e revelar mais opções. Aparecerão diferentes categorias de acordo com o tipo de efeito de imagem.

Por exemplo, você pode:

  • Editar o tamanho e a forma do efeito.
  • Editar a velocidade e a direção dos efeitos com movimento, como o Líquido.

Outras configurações são exclusivas a cada efeito de imagem e incluem controles deslizantes e chaves que mudam os elementos centrais do efeito. Para testar uma combinação aleatória de configurações, clique no ícone de misturar ao escolher um efeito; ou clique em Aleatório no painel de detalhes do efeito.

Recomendamos testar cada efeito para ter uma noção melhor da aparência e do funcionamento no seu site.

Este é um exemplo de uma imagem de fundo de seção com o efeito Líquido.

Section_background_image_with_the_Liquid_effect.gif

Remover uma imagem de fundo

Para remover uma imagem de fundo:

  1. Clique em Editar na página e depois clique no ícone do lápis na seção do banner.
  2. Clique em Fundo.
  3. Clique em Excluir.
  4. Clique em Salvar para salvar as alterações e continuar editando ou clique em Sair e depois em Salvar para fechar o editor.
    .

Fundo de seção como banner

Uma seção com uma imagem de fundo no topo da página pode servir como ponto focal visual para definir o tom do conteúdo. Essa imagem é comumente chamada de banner.

As imagens do banner normalmente ficam sozinhas, sem nenhum outro conteúdo na seção; ou têm um texto muito simples, como um título, sobreposto a elas. Você também pode criar banners com outros tipos de plano de fundo, como vídeos ou artes, para uma estética diferente.

Mesmo ao variar no uso deles, os banners funcionam da mesma forma que as seções com imagens no fundo. Portanto, você pode seguir este guia para:

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.