Adicione uma imagem de banner (versão 7.0)

Adicione um ponto focal ao topo da página para chamar a atenção dos visitantes.

Ultima atualização 10 de Dezembro de 2024

A imagem do banner aparece perto do topo da página, adicionando um elemento visual que define o tom do site. Este guia mostra as etapas para adicionar e ajustar o estilo de um imagem de banner na versão 7.0. O modo de adicionar e ajustar o estilo das imagens do banner depende do template.

Acessando o recurso

Para criar uma imagem de banner na versão 7.1, adicione uma imagem de fundo da seção a uma seção no topo da página.

Assistir a um vídeo

Dicas de formatação de imagem

Verifique a formatação das imagens antes de fazer o upload para o site. Para imagens de banner:

  • Use imagens entre 1.500 pixels e 2.500 pixels de largura
  • Use imagens mais largas do que altas
  • Use imagens com padrões abstratos e sem margem
  • Não use imagens com o texto no arquivo da imagem. Em vez disso, adicione o texto sobre a imagem
  • Para tipos de arquivo de imagem e todos os requisitos das imagens, confira Formatação de imagens para a web
  • Se quiser uma mensagem somente com texto no topo do site, adicione uma barra de notificações em vez do banner

Adicionar uma imagem de banner

templates diferentes suportam tipos diversos de imagens de banner:

  • Banner de página – Exibido no topo de páginas individuais. Adicionada como imagem em destaque da página.
  • Banner de item de coleção – Aparece acima de uma publicação do blog, produto e ou evento. Adicionado como imagem em destaque do item.
  • Banner geral do site - pode aparecer em todas páginas. Adicionado no painel Estilos do Site.

Para saber mais, consulte nossa tabela de comparação de opções de banner por template ou confira um exemplo em vídeo sobre como adicionar cada opção de banner.

Adicione um banner de página

Para adicionar um banner de página:

  1. Abra o painel "Páginas".
  2. Passe o cursor sobre o título da página e clique em o ícone de engrenagem e depois em Mídias.
  3. Clique em Adicionar imagem para carregar uma imagem do computador; ou clique em Procurar imagens para reutilizar uma imagem ou adicionar uma imagem de acervo. Alguns templates também aceitam banners de vídeo.
  4. Clique e arraste o ponto focal para determinar o ponto central da imagem. Na maioria dos templates, isso ajuda com o corte.
  5. Clique em Save (Salvar) para publicar suas alterações.
  6. Use o painel Estilos do Site para editar o estilo do seu banner.

Para editar um banner existente, passe o cursor sobre a página e clique em Banner; ou reabra as configurações da página com o ícone de engrenagem.

Saiba mais sobre quais templates aceitam o banner de página em Opções de banner por template.

Dica

como alternativa às nossas opções integradas, é possível adicionar um bloco de imagem ao topo da página de layout de um site Squarespace.

Adicionar um banner de item de coleção

Banners de itens de coleção são exibidos acima de postagens de blogs, produtos e eventos individuais.

Para adicionar um banner de item de coleção, abra o editor do item e adicione uma imagem em destaque na aba Opções. Confira as etapas em detalhe em Adição de imagem em destaque.

Em vez disso, alguns itens de coleção mostram um banner de página. Uma publicação do blog, por exemplo, pode mostrar o banner da página do blog. Saiba mais quais templates aceitam o banner de itens de coleção em Opções de banner por template.

Adicione um banner em todo o site

O banner geral do site está disponível no template Five e em alguns templates suspensos. Ele aparece em todas as páginas sem banner de página adicionado.

Para adicionar um banner geral do site, clique no ajuste correspondente em Estilos do Site.

  • No template Five, o ajuste é a imagem de fundo do cabeçalho.
  • Nos templates suspensos, o ajuste pode ter um nome diferente.

Adicionada a imagem, ajuste o estilo com as opções que aparecerem.

Anotação

Banners em todo o site não devem ser maiores que 2500 pixels, pois isso pode gerar problemas em dispositivos móveis.

Opções de banners por template

As seguintes famílias de template aceitam a um ou mais tipos de banner:

Família de templates

Páginas

Banners de vídeo

Itens da coleção

Outras opções

Adirondack

Layout
Blog
Eventos
Produtos

Sim

Postagens de blog
Eventos
Produtos

Efeito de desbotamento na rolagem

Bedford

Layout
Álbum
Blog
Eventos
Índice
Produtos

Sim

Postagens de blog
Eventos

Os banners podem ser exibidos atrás do cabeçalho

Banners de slideshow

Banners de índice empilhados

Banners em slides da Página do Blog

Brine

Layout
Álbum
Blog
Eventos
Galeria
Índice
Produtos

Sim

n/d

Os banners podem ser exibidos atrás do cabeçalho

Banners de slideshow

Banners de índice empilhados

Rolagem com Paralaxe

Farro n/d Não Postagens de blog n/d

Five

Layout
Álbum
Blog
Eventos
Galeria
Produtos

Sim

Banners de páginas são exibidos em postagens de blogs, eventos, produtos

Banners de site

O título do site, o logotipo e o slogan podem sobrepor banners

Montauk

Layout
Blog
Eventos
Índice

Sim

Banners de páginas são exibidos em postagens de blogs, eventos

Os banners não são cortados verticalmente

Pacific

Layout
Álbum
Blog
Eventos
Galeria
Índice
Produtos

Sim

n/d

Os banners podem ser exibidos atrás do cabeçalho

Banners de slideshow

Banners de índice empilhados

Banners sem corte

Skye n/d Não Postagens de blog n/d

Supply

Layout
Blog
Álbuns
Eventos

Não

Postagens de blog
Eventos

O banner é exibido à direita, exceto em dispositivos móveis

Tremont

Layout
Álbum
Blog
Eventos
Galeria
Produtos

Sim

n/d

Os banners podem ser exibidos atrás do cabeçalho

Sobreposições de página

York

Layout
Álbum
Blog
Eventos
Galeria
Índice
Produtos
Projeto

Não n/d

Banners de índice

Efeito de desvanecimento

Adicionar texto a um banner

Dependendo do site, você pode adicionar texto ou outro conteúdo sobrepondo imagens de banner. Como o texto que você adiciona se adapta a qualquer tamanho de tela ou dispositivo móvel, é uma ótima maneira de adicionar texto ao banner.

Não recomendamos usar imagens de banner 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 seu banner mudar de forma para adaptar a diversas larguras de navegador, serão cortadas partes do texto.

templates diferentes suportam tipos diferentes de sobreposições de texto:

Saiba mais quais templates aceitam quais tipos de texto sobreposto em Opções de texto no banner por template.

Adicionar texto de sobreposição de área de introdução

Os templates da família Brine aceitam uma introdução que aparece sobre o banner. Você pode personalizar essa área com blocos, como um Bloco de Texto ou Bloco de Botão.

Adicionar o título e a descrição de uma página

A maioria dos templates exibe o título da página e a descrição sobre banners de página. Para adicionar texto a um banner em templates:

  1. Abra o painel "Páginas".
  2. Passe o cursor sobre o título da página no painel esquerdo e clique em o ícone de engrenagem.
  3. Adicione texto aos campos Título da página e Descrição da página na guia Geral.
  4. Clique em Salvar e depois atualize a página. Às vezes as alterações em banners não são exibidas na pré-visualização do site até que a página seja atualizada.

Lembre-se:

  • Nesses templates, as descrições de página não devem ser usadas exclusivamente para adicionar conteúdo baseado em SEO. O uso de descrições de página para o banner não afetará negativamente o SEO.
  • Para exibir títulos diferentes nos resultados da pesquisa e nos compartilhamentos sociais, adicione um título de SEO.
  • Na maioria dos templates, você pode adicionar espaços em branco à descrição para aumentar a altura. Pressione Return ou Enter ao redor do texto da descrição para mostrar mais a imagem. Isso pode corrigir problemas de recorte e aumentar a altura do banner para dar um efeito dramático.

Adicionar texto de banner de item de coleção

Os banners de itens de coleção normalmente criam seu texto de sobreposição a partir das configurações dessa publicação, desse evento ou produto do blog. Use os links abaixo para saber mais sobre como adicionar texto a cada tipo de item:

Resolução de problemas

Se o texto não for exibido, tente estas etapas de solução de problemas:

  • Atualize a página.
  • Verifique a tabela de template para confirmar que seu template suporta texto de banner para esse tipo de página.
  • No painel Estilos do Site, veja se o template oferece opções de estilo que ocultam o banner ou o texto do banner.
  • É importante adicionar uma imagem de banner, pois alguns templates exigem a imagem de banner para exibir o texto.
  • Revise o guia do seu template.

As seguintes famílias de template dão estas opções de texto ao banner :

Família de templates

Banners de página

Banners de itens de coleção

Adirondack

  • Nenhuma sobreposição de texto
  • Postagens de blog, eventos e produtos: sem sobreposição de texto

Bedford

  • Publicações do blog: título, um elemento de metadados.
  • Eventos: sem sobreposição de texto

Brine

  • Abre área de blocos ("área de introdução")
  • O conteúdo do cabeçalho (como o título do site e links de navegação) pode ser exibido sobre o banner.

 

Farro

 

Five

  • Título e descrição da página, título/logotipo e subtítulo do site ou apenas a imagem do banner. Saiba mais.
  • Iguais aos banners de página

Montauk

  • Título e descrição da página.

 

Pacific

 

Skye

 

Supply

 

  • Postagens de blog, eventos: Sem sobreposição de texto

Tremont

 

York

  • Título e descrição da página.

 

Definir estilo do banner

Use os ajustes nos estilos do site para mudar as fontes, cores e outros elementos no banner. Normalmente, os ajustes no estilo do banner afetam todos os banners do site.

Saiba mais sobre as opções de estilo de banner no guia do template.

Imagens transparentes

Em arquivos .png com fundo transparente, os ajustes a seguir mudam a cor atrás do banner:

  • Adirondack - Cor de fundo do conteúdo
  • Bedford - Cor da sobreposição do banner
  • Brine - Cor da sobreposição na seção Principal: sobreposição
  • Farro - Cor de fundo da publicação. O ajuste Cor da sobreposição também afeta a cor.
  • Five - Fundo do cabeçalho
  • Montauk - Fundo da tela de trabalho
  • Pacific - Cor da sobreposição
  • Skye - Fundo do site
  • SupplyCor da página
  • Tremont - Cor de fundo do site
  • York - Cor de fundo na seção Banner

Geralmente, a cor aparece 100% opaca. Se tiver dificuldades para obter a cor desejada, mude a transparência.

Alterar o tamanho do banner

Use a tabela abaixo para saber como alterar o tamanho do banner nessas famílias de templates. Observe que não é possível alterar a largura do banner na maioria dos templates.

Família de templates

Como alterar o tamanho

Adirondack

Ajuste de Altura

Bedford

Banners de página e de vídeo - adicione quebras de linha à descrição da página. Saiba mais.

Banners de slideshow, Banners de slideshow de blog e Banners de itens de coleção - altura fixa

Brine

Adicione quebras de linha à área de introdução. Os banners do Índice têm opções de altura independentes.

Farro

Use o ajuste Cabeçalho na seção Blog: Item para ajustar o tamanho do banner.

Five

Use os ajustes Altura da área do banner) ou Espaçamento da área do banner. (Altura da área do banner não afeta a exibição na versão móvel.)

Montauk

Altura fixa, definida pela imagem original. Banners de páginas são sempre exibidos com a largura do conteúdo do site. Eles não são recortados verticalmente.

Pacific

Adicione quebras de linha à descrição da página ou use o ajuste Espaçamento . Saiba mais. Os banners do Índice têm opções de altura independentes.

Skye

Use o ajuste Largura da imagem do banner para ajustar a largura do banner. A altura é definida pela imagem original, proporcional à largura.

Supply

A largura da página é fixa, então o banner preenche a largura restante do navegador.

Tremont

Ajuste Altura da Imagem do Banner da Página

York

Ajuste de Altura

Se o banner não ficar bom, confira Solução de problemas de recorte.

Adicionar um botão a um banner

Adicione um bloco de botões a um banner para:

  • Incentivar os visitantes a clicarem em um link para uma página específica
  • Doar para sua organização
  • Cadastre-se na newsletter

Os templates das seguintes famílias incluem opções especiais de sobreposição para adicionar botões sobre imagens e vídeos de banner em uma página específica:

Banners em dispositivos móveis

As imagens de banner sempre apresentarão cortes em dispositivos móveis.

Para saber como os banners aparecem em dispositivos móveis, acesse Como meu site aparecerá em dispositivos móveis?

Remova uma imagem de banner

O processo para excluir a imagem do banner depende da localização dela no site:

  • Banner de página - na aba Mídias das configurações da página, clique em Excluir imagem.
  • Banners de item de coleção - Abra o item individual (publicação do blog, produto ou evento), clique na guia Opções e, em seguida, clique no ícone da lixeira .
  • Banner geral do site - abra o ajuste específico em Estilos do Site e clique em Excluir.
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.

Adicione uma imagem de banner (versão 7.0)