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

Existem várias maneiras de definir o estilo do plano de 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 maneira de criar banners de páginas e elementos visuais marcantes que combinam 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.

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, eventos e loja não são compatíveis com conteúdo em segundo plano, mas você pode adicionar uma cor de plano de fundo.
• Se a seção incluir texto ou outro conteúdo, veja se ele continua visível e legível na frente da arte de fundo. Para alterar a cor do texto, use os ajustes de fonte no tema de cores dessa 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 adicionar contraste com texto ou outro conteúdo sobrepondo a seção, ou crie um banner quando a seção estiver na parte superior 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. Clique no ícone de lápis da seção e clique em Plano de fundo.
4. Clique em Imagem, depois clique em +. Escolha uma origem no menu suspenso para carregar uma imagem, reutilize uma imagem carregada anteriormente ou use uma imagem de acervo.
5. Defina a Largura do plano de fundo e a Opacidade da sobreposição.
6. Clique em Formatar para ajustar a altura da seção, bem como a largura e o alinhamento do conteúdo.
7. Clique em Cores para selecionar um tema de cor para a sobreposição e qualquer conteúdo adicionado. Para saber mais, acesse Alterar cores. Se você remover a imagem, a sobreposição se tornará a cor de fundo da seção.
8. 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 sobrepondo a imagem
• Estilizar a imagem
• Adicionar efeitos de imagem
• Editar a imagem
• Definir o ponto focal da imagem
• Alterar a imagem; para isso, clique em Trocar
• Apagar a imagem

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. Abra o Tema da seção e clique no ícone de lápis para estilizar elementos específicos dentro desse tema. Para saber mais, acesse Alteração de 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.

Para a largura do plano de fundo:

• A sangria total estende a imagem de uma borda da janela do navegador para a outra, abrangendo toda a largura do site.
• 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.

Nota: 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. Depois de adicionar uma imagem de fundo no editor de seção, role até 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
• Linhas refratadas: refrata a imagem através de um padrão de linhas retas
• Círculos refratados: refrata a imagem através de um padrão de círculos

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.

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 para cada efeito de imagem e incluem controles deslizantes e chaves que mudam os componentes centrais do efeito. Para testar uma configuração aleatória de ajustes, clique no ícone de mistura ao escolher um efeito ou clique em Randomizar 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.

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