Obs.: embora os nossos guias mais acessados tenham sido traduzidos para o português, outros guias estão disponíveis apenas em inglês.

Adição de imagem de banner

Uma imagem de banner é exibida perto da parte superior da página, adicionando um elemento visual que define o tom do site. Este guia analisa as etapas para adicionar e estilizar imagens de banner.

Dica: como alternativa às nossas opções integradas, é possível adicionar um Bloco de Imagem à parte superior de uma Página de Layout em qualquer site do Squarespace.

Dicas de formatação de imagem

  • Recomendamos carregar imagens com ao menos 1.500 pixels de largura. Para escolher uma imagem adequada a todos os browsers, consulte nossas dicas de design responsivo.
  • Não recomendamos o uso de imagens que contenham texto dentro do arquivo de imagem real. Em vez disso, adicione texto sobre a imagem.
  • Você pode usar imagens .jpg, .png e .gif. Para obter os requisitos completos de imagem, acesse Formatação de imagens para a Web.
  • Se você quiser uma mensagem somente com texto na parte superior do site, adicione uma barra de anúncio.

Adicionar uma imagem de banner

A maneira de adicionar imagens de banner e os layouts que você poderá criar com eles depende da versão do seu site.

Você pode criar imagens de banner, em qualquer página, adicionando uma seção de bloco com uma imagem de fundo na parte superior da página. Não é possível adicionar imagens de banner a publicações individuais de blog, eventos ou produtos.

Para adicionar uma imagem de banner:

  1. No Menu Inicial, clique em Páginas e, em seguida, clique na página.
  2. No canto superior esquerdo, clique em Editar.
  3. Clique em + na parte superior da página para adicionar uma seção. Escolha Adicionar em branco se quiser apenas uma imagem de banner sem conteúdo sobreposto.
  4. Clique no ícone do lápis da nova seção e, em seguida, clique em Fundo .
  5. Clique em Adicionar uma imagem para carregar uma imagem ou clique em Pesquisar imagens para reutilizar uma imagem ou adicionar uma imagem de acervo. Para adicionar um vídeo em vez disso, acesse Adicionar vídeos em segundo plano.
  6. Defina a Largura do Fundo e a Opacidade de Sobreposição.
  7. Clique em Formatar para ajustar a altura da seção, a largura do conteúdo e o alinhamento do conteúdo.
  8. Clique em Colors para selecionar um tema de cores para sobreposição e qualquer conteúdo adicionado.

Você pode adicionar conteúdo, sobrepondo o banner, ou adicionar mais seções para o conteúdo da página abaixo. Depois de fazer as alterações, passe o mouse sobre Concluído e clique em Salvar.

Modelos diferentes suportam tipos diversos de imagens de banner:

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

Veja uma tabela de comparação de opções de banner por template.

Adicione um banner de página

Para adicionar um banner de página:

  1. No Menu Inicial, clique em Páginas.
  2. Passe o mouse sobre o título da página e clique em  o ícone de engrenagem, depois clique em Mídia.
  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 modelos são também compatíveis com 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 o banner.

Para editar um banner existente, passe o mouse sobre a página e clique em Bannerou 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.

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 miniatura na aba Options (Opções) . Para steps mais detalhados, acesse Adicionar imagens em miniatura.

Em vez disso, alguns itens de coleção exibem banners de página. Por exemplo, uma publicação de blog pode exibir o banner Página de blog. Para saber mais sobre quais modelos são compatíveis com banners de item de coleção, consulte Opções de banner por modelo.

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 em todo o site, clique no ajuste de estilo em Estilos de 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.

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 de slideshow da Página de 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
Álbuns
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
Álbuns
Blog
Eventos
Galeria
Produtos

Sim

n/d 

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

Sobreposições de página

York

Layout
Album
Blog
Eventos
Galeria
Índice
Products
Project

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.

A forma de inclusão do texto do banner depende da versão do seu site.

Para adicionar texto ou outro conteúdo:

  1. Clique em Editar na página com o banner.
  2. Se você adicionou uma seção em branco , ela já contém um Bloco de texto . Clique no bloco para adicionar texto e, em seguida, use o menu suspenso Formatar para escolher um estilo de parágrafo.
  3. Clique em um ponto de inserção para adicionar mais Blocos de Texto ou outro conteúdo.
  4. Passe o cursor sobre Concluído e clique em Salvar.

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

Para saber mais sobre quais modelos suportam quais tipos de texto de sobreposição, consulte Opções de texto Banner por modelo.

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

Os modelos da família Brine oferecem suporte para uma área de introdução que é exibida 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 modelos exibe o título da página e a descrição sobre banners de página. Para adicionar texto a um banner em modelos:

  1. No Menu Inicial, clique em Páginas.
  2. Passe o mouse 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 modelos, 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.
  • Você pode criar altura extra na maioria dos modelos adicionando espaços em branco à descrição. Pressione Return ou Enter ao redor do texto da descrição para exibir mais da imagem. Isso pode ajudar a corrigir problemas de corte e aumentar a altura do banner para conseguir 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 modelo para confirmar que seu modelo 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 modelos 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

  • Postagens de 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.

 

Este vídeo se refere à versão 7.1.

Definir estilo do banner

A forma de estilização do banner depende da versão do site.

Banner Image (Banner)

Para estilizar a imagem do banner, clique em Editar na página, clique no ícone de lápis na seção do banner e clique em Fundo . Você pode definir a Largura do 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.

Texto do banner

As configurações de estilo do site no painel Design definem como o texto é exibido na seção de banner.

  • Para alterar as fontes do site, escolha um pacote de fontes e o tamanho base no painel Fontes . Clique em o ícone de engrenagem para estilizar texto específico. Para saber mais, acesse Alterar fontes
  • Para alterar a cor da fonte, escolha uma paleta e um tema no painel Cores. Passe o mouse sobre o tema e clique no ícone do lápis para estilizar elementos específicos dentro desse tema. Para saber mais, acesse Alteração de cores

Use os ajustes nos Estilos do Site para ajustar fontes, cores e outros elementos de banner. Normalmente, os ajustes de estilo do banner afetam todos os banners do seu 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 definem 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

Na maioria dos casos, a cor é exibida com 100% de opacidade. Se você tiver dificuldade para conseguir a cor que deseja, mude a transparência.

Altere a altura do banner

A forma como você altera a altura do banner depende da versão do seu site.

Para alterar a altura do banner:

  1. Clique em Editar na página e, em seguida, clique no ícone do lápis na seção do banner.
  2. Na guia Formato, em Altura da Seção , selecione uma altura predefinida ou clique em ... para definir uma altura personalizada.
  3. Passe o cursor sobre Concluído e clique em Salvar.

A altura da seção afeta a forma como a imagem de fundo é cortada em computadores e dispositivos móveis. Recomendamos testar alturas diferentes para obter a aparência desejada.

A altura do banner também depende da quantidade de conteúdo da seção. Para aumentar a altura do banner sem adicionar conteúdo visível, adicione Blocos de Espaçador.

Para definir a altura dos banners das seguintes famílias de template:

Família de templates

Como alterar a altura

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 blogs 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 Banner Area Height (Altura da Área do Banner) ou Banner Area Spacing (Espaçamento da Área do Banner). (Altura da Área do Banner não afeta a exibição em dispositivos móveis.)

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 maisBanners de Índice têm opções de altura independentes.

Skye

Use o ajuste Largura da Imagem de 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 parecer correto, acesse Solução de problemas de corte.

Banners em dispositivos móveis

Ao exibir o site em dispositivos móveis, lembre-se:

  • As imagens de banner sempre apresentarão cortes em dispositivos móveis.
  • As configurações de altura do banner nem sempre se aplicam a dispositivos móveis.
  • Para banners de vídeo, defina uma imagem de contingência para dispositivos móveis para aparecer quando o vídeo não puder ser carregado, devido à velocidade de conexão ou ao tipo de navegador.
  • Em banners para todo o site, a configuração Fixed Postion (Posição Fixa) não é exibida em alguns dispositivos móveis, incluindo o iOS.

Remova uma imagem de banner

A forma de remoção de uma imagem de banner depende da versão do site.

Para remover uma imagem de banner:

  1. Clique em Editar na página e, em seguida, clique no ícone do lápis na seção do banner.
  2.  Clique em Fundo.
  3. Clique em Excluir.
  4. Passe o cursor sobre Concluído e clique em Salvar.
  • Banner de página - na aba Mídia das configurações da página, clique em Excluir imagem.
  • Banners de item de coleção - Abra o item individual (publicação de 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.

Assistir a um vídeo

Este vídeo é sobre a versão 7.0.

Este artigo foi útil?
Utilizadores que acharam útil: 31 de 179