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

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

Page banners are supported in these template families:

Template family 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

Collection item banners are supported in these template families. Some collection items display page banners; for example, a blog post might display the Blog Page banner.

  • Adirondack - Blog posts, events, and products display collection item thumbnails.
  • Bedford - Blog posts, and events display collection item thumbnails.
  • Farro - Blog posts display collection item thumbnails.
  • Five - Blog posts, events, products display page banners.
  • Montauk - Blog posts, events display page banners.
  • Skye - Blog posts display collection item thumbnails.
  • Supply - Blog posts and events display collection item thumbnails.

 

Adicione um banner em todo o site

Banners em todo o site estão disponíveis no template Five e em alguns templates descontinuados. Eles são exibidos em quaisquer páginas sem banner de página.

Para adicionar um banner em todo o site, siga os passos em Banners do Five. Se estiver usando um template descontinuado, siga os mesmos passos, mas o ajuste de imagem do banner pode ter um nome diferente.

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.

You can add content blocks over a banner image or video in these template families:

video-block-on-background-image.png

Definir estilo do banner

Learn about the style options for these template families:

Altere a altura do banner

To set the height for banners in these template families:

Template family

Como alterar a altura

Adirondack

Ajuste de Altura

Bedford

Page and video banners - Add line breaks to the page description. Learn more.

Banners de slideshow, Banners de slideshow de blogs e Banners de itens de coleção - Altura fixa

Brine

Add line breaks to the intro areaIndex banners have separate height options.

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

Add line breaks to the page description or use the Padding tweak. Learn moreIndex banners have separate height options.

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

Banner images and video banners can display behind the site header in these template families (click the links to learn more):

Tip: Banners in Five display below the header, but the site title, logo, and tag line can display over the banner.

bedford-transparent-header.png

Banners empilhados

Some templates support an Index Page that displays multiple banners stacked vertically on one page, creating a long scrolling effect. You can stack banners in an Index in these template families (click the links to learn more):

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.

You can create banners that won't crop in these template families:

  • Montauk - Banners don't crop vertically. They always display at the width of the site content. Tall, skinny banners may pixelate as they stretch to fill the width.
  • Pacific - Create a banner image that doesn't crop by adding a Gallery Page to an Index Page.
Tip: Changing the focal point of the thumbnail might help with cropping in page and collection item banners. For more help with cropping, visit our troubleshooting tips.

Banners de slideshow

You can create slideshow banners in these template families:

Tip: In other templates, add a Slideshow Gallery Block at the top of a Layout Page for a similar effect.

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

These template families support one or more banner types:

Template family

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

If you use a .png file with a transparent background, the following tweaks adjust the color that displays behind the banner in these template families:

  • Adirondack - Content Background Color
  • Bedford - Banner Overlay Color
  • Brine - Overlay Color in the Main: Overlay section
  • Farro - Post Background Color. The Overlay Color also affects the color.
  • Five - Header Background
  • Montauk - Canvas Background
  • Pacific - Overlay Color
  • Skye - Site Background
  • Supply - Page Color
  • Tremont - Site Background Color
  • York - Background Color in the Banner section
Tip: In most cases, the color displays at 100% opacity. If you're having trouble getting the color you want, change the transparency.

Remova uma imagem de banner

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

  • Page banners - In the Media tab of the page's settings, click Image, then click the trash can icon.
  • Video banners - In the Media tab of the page's settings, click Video, the delete the video URL.
  • 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: 26 de 128