Adicione um ponto focal ao topo da página para chamar a atenção dos visitantes.
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.
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:
- Abra o painel "Páginas".
- Passe o cursor sobre o título da página e clique em
e depois em Mídias. - 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.
- Clique e arraste o ponto focal para determinar o ponto central da imagem. Na maioria dos templates, isso ajuda com o corte.
- Clique em Save (Salvar) para publicar suas alterações.
- 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 
.
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.
Após adicionar a imagem, ajuste o estilo com as opções que aparecerem.
Nota: 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 |
Sim |
Postagens de blog |
Efeito de desbotamento na rolagem |
|
Bedford |
Layout |
Sim |
Postagens de blog |
|
|
Brine |
Layout |
Sim |
n/d |
Os banners podem ser exibidos atrás do cabeçalho Rolagem com Paralaxe |
| Farro | n/d | Não | Postagens de blog | n/d |
|
Five |
Layout |
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 |
Sim |
Banners de páginas são exibidos em postagens de blogs, eventos |
Os banners não são cortados verticalmente |
|
Pacific |
Layout |
Sim |
n/d | |
| Skye | n/d | Não | Postagens de blog | n/d |
|
Supply |
Layout |
Não |
Postagens de blog |
O banner é exibido à direita, exceto em dispositivos móveis |
|
Tremont |
Layout |
Sim |
n/d | |
|
York |
Layout |
Não | n/d |
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:
- Título e descrição da página - Exibe o título e a descrição adicionados nas configurações da página sobre banners da página.
- Texto do banner do item de coleção - Exibe o texto das configurações do item de coleção em publicações de blog, eventos ou itens de produtos.
- Texto do banner da página de índice - Exibe o texto de descrição sobrepondo o banner, ou o conteúdo da página pode sobrepor o banner, dependendo do template.
- Texto de sobreposição de área de introdução - Blocos de texto e outro conteúdo de bloco sobrepõem a área de cabeçalho da página em que o banner é exibido.
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:
- Abra o painel "Páginas".
- Passe o cursor sobre o título da página no painel esquerdo e clique em .
- Adicione texto aos campos Título da página e Descrição da página na guia Geral.
- 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.
Opções de texto do banner por 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 |
|
|
|
Bedford |
|
|
|
Brine |
|
|
|
Farro |
|
|
|
Five |
|
|
|
Montauk |
|
|
|
Pacific |
|
|
|
Skye |
|
|
|
Supply |
|
|
|
Tremont |
|
|
|
York |
|
|
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
- Supply – Cor 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
Para incentivar os visitantes a clicarem em um link para uma página específica, doarem para sua organização ou se cadastrarem na sua newsletter, adicione um botão ao banner.
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:
- Bedford - formate o texto da descrição da página para criar um botão na última linha.
- Brine - adicione um Bloco de Botão à introdução de uma página com um banner.
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.