Nota: Embora nossos guias mais populares tenham sido traduzidos para o português, alguns guias estão disponíveis apenas em inglês.
Adição de imagem de banner

Imagens de banners são exibidas próximas ao topo da página, adicionando um elemento visual que pode definir o tom de seu site. Muitos templates criam imagens de banners automaticamente usando imagens em miniatura de páginas, mas a forma como são exibidas e suas opções de estilo variam de acordo com template.

Este guia o orienta pelos passos a seguir para adicionar, formatar e estilizar uma imagem de banner.

Dica: como alternativa às nossas opções de banner integradas, é possível adicionar um Bloco de Imagem no topo de uma Página de Layout em qualquer template.

Assistir a um vídeo

Dicas de formatação de imagem

Tipos de banners

A forma como você adiciona sua imagem de banner depende dos tipos de banners que seu template suporta:

  • Banner de página - Exibido no topo de páginas individuais. Adicionada como imagem em miniatura da página.
  • Banner do vídeo - Pode substituir o banner da página em alguns templates. Adicionado como imagem em miniatura da página.
  • Banners de itens de coleção - Exibidos acima de postagens de blog, produtos e eventos individuais. Adicionado como imagem em miniatura do item.
  • Banners em todo o site - podem aparecer em todas páginas. Adicionados 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. Abra a página e clique na barra de anotações Settings (Configurações) na visualização do site. Você também pode abrir as Configurações de Página.
  2. Na aba Media (Mídia) , clique em Add an image (Adicionar uma imagem).
  3. Clique em Imagem para adicionar uma imagem salva no computador, ou clique em Buscar imagem para reutilizar uma imagem ou adicionar uma imagem de acervo.
  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, clique na anotação do Banner ou reabra as Configurações da Página.

Dica: alguns templates aceitam banners de vídeo.

Page_Banner.png

Templates suportados

As seguintes famílias de template aceitam banners de página:

Família de templates Páginas suportadas

Adirondack

Páginas de Layout, Blog, Eventos e Produtos

Bedford

P´áginas de Layout, Álbuns, Blog, Eventos e Produtos

Brine

Páginas de Layout, Álbuns, Blog, Eventos, Galeria e Produtos

Five

Páginas de Layout, Álbuns, Blog, Eventos, Galeria e Produtos

Montauk

Páginas de Layout, Blog, Eventos e do Índice Principal

Pacific

Páginas de Layout, Álbuns, Blog, Eventos, Galeria e Produtos

Supply

Páginas de Layout, Blog, Álbuns e Eventos

Tremont

Páginas de Layout, Álbuns, Blog, Eventos, Galeria e Produtos

York

Páginas de Layout, Álbuns, Blog, Eventos, Galeria, Projeto, Produtos e do Índice Principal

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.

Veja como o banner de postagem de blog é exibido no Skye:

Dica: nem todos os banners de itens de coleção suportam a sobreposição de texto.

skye-blog-post-header.png

Templates suportados

As seguintes famílias de template aceitam banners de item de coleção: Alguns itens de coleção mostram o banner da página. Por exemplo: uma publicação do blog pode mostrar o banner da Página do Blog.

  • Adirondack - publicações do blog, eventos e produtos mostram a miniatura dos itens de coleção.
  • Bedford - publicações do blog e eventos mostram a miniatura dos itens de coleção.
  • Farro - as publicações do blog mostram a miniatura dos itens de coleção.
  • Five - publicações do blog, eventos e produtos mostram o banner de página.
  • Montauk - publicações do blog e eventos mostram o banner de página.
  • Skye - as publicações do blog mostram a miniatura dos itens de coleção.
  • Supply - publicações do blog e eventos mostram a miniatura dos itens de coleção.

Adicione um banner em todo o site

Site wide banners are available in the Five template and some discontinued templates. They display on any pages that don't have a page banner.

To add a site-wide banner, click its tweak in Site Styles. In Five, the tweak is Header Background Image. In discontinued templates, the tweak may have a different name.

After you've added the image, style it with the options that appear.

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

Adicione uma sobreposição de texto

Use as opções integradas ao seu template para criar uma sobreposição de texto exibida sobre a imagem. Para saber mais, acesse Adicionar texto a banners.

Nota: Não recomendamos carregar imagens com texto ou palavras inclusos. O texto dentro de um arquivo de imagem pode ser cortado quando a imagem é recortada e não é indexado pelos motores de busca.

Veja um exemplo de sobreposição de texto no template Pacific:

pacific-page-banner.png

Adicionar conteúdo como uma sobreposição

Em alguns templates, você pode adicionar blocos de conteúdo em um banner. Por exemplo, você pode adicionar um Bloco de Vídeo sobre uma imagem de banner, conforme mostrado na captura de tela abaixo.

Você pode adicionar blocos de conteúdo sobre uma imagem ou vídeo de banner nas seguintes famílias de template:

video-block-on-background-image.png

Definir estilo do banner

Saiba mais sobre as opções de estilo das seguintes famílias de template:

Altere a altura do banner

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

Banners em dispositivos móveis

  • As imagens de banner sempre apresentarão cortes em dispositivos móveis.
  • Banners de vídeo às vezes não aparecem na versão móvel, dependendo da versão do browser e da velocidade da conexão do visitante. Nos dispositivos móveis, defina uma imagem de contingência para que ela apareça quando não for possível carregar o banner do vídeo.
  • As configurações de altura do banner nem sempre se aplicam a dispositivos móveis.
  • A Rolagem com paralaxe funciona em dispositivos móveis na maior parte dos casos.
  • 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.
  • Banners que ocupam o site todo não devem ser maiores que 2500 pixels, pois pode gerar problemas nos dispositivos móveis.

O que acontece quando você alterna templates

As imagens em miniatura da página, de itens de coleção e de vídeos são transferidas ao alternar templates. Se você alternar de um template que suporta qualquer destes banners para outro, a mesma imagem de banner é exibida no novo tempalte.

Banners que são exibidos atrás do cabeçalho

Nas seguintes famílias de template, a imagem e o vídeo do banner podem aparecer atrás do cabeçalho do site (clique nos links para saber mais):

Dica: no template Five, os banners aparecem abaixo do cabeçalho, mas o título, o logotipo e o slogan do site podem aparecer sobre o banner.

bedford-transparent-header.png

Banners empilhados

Alguns templates aceitam uma Página Índice com diversos banners empilhados na vertical em uma página, criando um efeito de rolagem longa. Nas seguintes famílias de template, você pode empilhar banners no Índice (clique nos links para saber mais):

Nota: Em Índices, os banners normalmente têm suas próprias configurações de estilo.

Banners que não são cortados

A maioria das imagens de banners sofre algum corte, especialmente ao se ajustarem a diferentes tamanhos de tela. Isso ajuda suas imagens a ter melhor definição dentro do layout do seu site e em diferentes tamanhos de navegador.

Nas seguintes famílias de template, você pode criar banners que não aparecem recortados:

  • Montauk - os banners não aparecem recortados na vertical. Eles aparecem sempre na largura do conteúdo do site. Banners altos e estreitos podem ficar pixelizados se você esticá-los para preencher a largura.
  • Pacific - cria uma imagem de banner que não aparece recortada. Para isso, adiciona-se uma Página de Galeria à Página Índice.
Dica: alterar o ponto focal da miniatura pode ajudar no recorte dos banners de página e de itens de coleção. Veja mais ajuda sobre recortes nas nossas dicas para solução de problemas.

Banners de slideshow

Você pode criar banners de slideshow nas seguintes famílias de template:

Dica: em outros templates, adicione um Bloco de Galeria em Slideshow na parte superior de uma Página de Layout para obter um efeito semelhante.

Criação de banners em outros templates

Crie o efeito de banner em qualquer template adicionando um Bloco de Imagem na parte superior de uma Página de Layout.
Cada layout tem suas próprias opções de sobreposição de texto.

Os Blocos de Imagem são exibidos dentro da margem da área de conteúdo principal. Eles não possuem opções de tela cheia integrada.

Dica: Alguns templates possuem áreas de cabeçalho de página que comportam blocos, inclusive de Imagem, Texto e Vídeo.

image-block-as-a-banner.png

Opções de banners por template

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

Família de templates

Banners de página: páginas suportadas

Banners de vídeo

Banners de itens de coleção: itens suportados

Outras opções

Adirondack

Layout
Blog
Eventos
Produtos

Sim

Postagens de blog
Eventos
Produtos

Efeito de esmaecimento na rolagem (visualização de desktop)

Bedford

Layout
Álbuns
Blog
Eventos
Produtos

Sim

Postagens de blog
Eventos

Banners de slideshow

Banners de slideshow da Página de Blog

Brine

Layout
Álbuns
Blog
Eventos
Galeria
Produtos

Sim

 

Rolagem com Paralaxe

Farro

   

Postagens de blog

 

Five

Layout
Álbuns
Blog
Eventos
Galeria
Produtos

Sim

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

Banners de site

Montauk

Layout
Blog
Eventos
Índice

Sim

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

 

Pacific

Layout
Álbuns
Blog
Eventos
Galeria
Produtos

Sim

   

Skye

   

Postagens de blog

 

Supply

Layout
Blog
Álbuns
Eventos

 

Postagens de blog
Eventos

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

Tremont

Layout
Álbuns
Blog
Eventos
Galeria
Produtos

Sim

  Sobreposição de página

York

Layout
Álbuns
Blog
Eventos
Galeria
Projeto
Produtos
Índice Principal

   

Efeito de desvanecimento

Imagens transparentes

Em arquivos .png com fundo transparente, os ajustes a seguir definem a cor atrás do banner nas seguintes famílias de template:

  • 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
Dica: na maioria dos casos, a cor aparece 100% opaca. Se tiver dificuldades para obter a cor desejada, mude a transparência.

Remova uma imagem de banner

Para remover uma imagem de banner, abra a área específica do banner e exclua a imagem.

  • Banners de página - na aba Mídia das configurações da página, clique em Imagem e depois no ícone da lixeira.
  • Banners de vídeo - na aba Mídia das configurações da página, clique em Vídeo e apague a URL do vídeo.
  • Banners de itens de coleção - abra o item individual (publicação de blog, produto ou evento), clique na aba de Opções e clique no ícone de lixeira.
  • Banners em todo o site - abra o ajuste específico em Estilos do Site e clique em Remover.
Esse artigo foi útil?
Usuários que acharam isso útil: 27 de 130