Nota: Embora nossos guias mais populares tenham sido traduzidos para o português, alguns guias estão disponíveis apenas em inglês.
Adicionar um 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 a nossas opções de banner integradas, é possível adicionar um Bloco de Imagem no topo de uma Página Simples 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 do computador, ou clique em Buscar imagem para adicionar um banco de imagem.
  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.
Dica: Para editar um banner existente, clique na barra de funções Banner ou reabra as Configurações da Página.

Page_Banner.png

Templates suportados

Os banners de página são suportados nos seguintes templates. Os templates são agrupados por família.

Template Páginas suportadas

Adirondack

Páginas Simples, de Produtos, Blogs e Eventos

Família Bedford

Anya, Bryant, Bedford, Hayden

Páginas Simples, de Produtos, Blogs, Álbuns e Eventos

Família Brine

Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

Páginas Simples, de Álbum, de Blog, de Eventos, de Galeria e de Produtos

Five

Páginas Simples, de Álbum, de Blog, de Eventos, de Galeria e de Produtos

Família Montauk

Julia, Kent, Montauk, Om

Página Índice Principal, Páginas Simples, de Blogs e Eventos

Família Pacific

Charlotte, Fulton, Horizon, Naomi, Pacific

Páginas Simples, de Álbum, de Blog, de Eventos, de Galeria e de Produtos

Supply

Páginas Simples, de Eventos, Álbuns e Blogs

Família Tremont

Camino, Carson, Henson, Tremont

Páginas Simples, de Álbum, de Blog, de Eventos, de Galeria e de Produtos

Família York

Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

Página Índice Principal, Página Simples, de Produtos, Projetos, Galeria, Eventos, Blogs e Álbuns

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

Banners de item de coleção são suportados nos seguintes templates. Alguns itens de coleção exibem o banner da página; por exemplo, uma postagem de blog exibe o banner de Página de Blog. Os templates são agrupados por família.

Template Itens da coleção O que exibe

Adirondack

Postagens de blog, eventos, produtos Imagem em miniatura do item de coleção

Família Bedford

Anya, Bryant, Bedford, Hayden

Postagens de blog e eventos Imagem em miniatura do item de coleção
 

Família Farro

Farro, Haute

Postagens de blog Imagem em miniatura do item de coleção
 

Five

Postagens de blog, eventos, produtos Banner de página

Família Montauk

Julia, Kent, Montauk, Om

Postagens de blog e eventos Banner de página

Família Skye

Foundry, Indigo, Ready, Skye, Tudor

Postagens de blog Imagem em miniatura do item de coleção

Supply

Postagens de blog e eventos Imagem em miniatura do item de coleção

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.

Você pode adicionar blocos de conteúdo sobre uma imagem ou vídeo de banner nos seguintes templates. Os templates são agrupados por família.

Família Brine

Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

Adicione blocos a áreas de introdução nos banners de página e seções de conteúdo em uma Índice

Família Pacific

Charlotte, Fulton, Horizon, Naomi, Pacific

Adicione blocos às seções de conteúdo em uma Índice.

video-block-on-background-image.png

Definir estilo do banner

Para saber mais sobre as opções de estilo dos banners de seu template, acesse o guia de seu template:

  • Adirondack
  • Família Bedford - Anya, Bryant, Bedford, Hayden
  • Família Brine - Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West
  • Família Farro - Farro, Haute
  • Five
  • Família Montauk - Julia, Kent, Montauk, Om
  • Família Pacific - Charlotte, Fulton, Horizon, Naomi, Pacific
  • Família Skye - Foundry, Indigo, Ready, Skye, Tudor
  • Supply
  • Família Tremont - Camino, Carson, Henson, Tremont
  • Família York - Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

Altere a altura do banner

Esta é uma visão geral sobre como configurar a altura dos banners em cada template. Para obter ajuda detalhada sobre estilos, acesse os links com os guias de templates na próxima seção. Os templates são agrupados por família.

Template

Como alterar a altura

Adirondack

Ajuste de Altura

Família Bedford

Anya, Bryant, Bedford, Hayden

Banners de página e 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

Família Brine

Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

Adicione quebras de linha à área de introdução.

Banners de índice possuem opções de altura separadas.

Família Farro

Farro, Haute

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.)

Família Montauk

Julia, Kent, Montauk, Om

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.

Família Pacific

Charlotte, Fulton, Horizon, Naomi, Pacific

Adicione quebras de linha à descrição da página ou use o ajuste Padding (Espaçamento) . Saiba mais.

Banners de índice possuem opções de altura separadas.

Família Skye

Foundry, Indigo, Ready, Skye, Tudor

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.

Família Tremont

Camino, Carson, Henson, Tremont

Ajuste Altura da Imagem do Banner da Página

Família York

Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, 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

As imagens de banner e banners de vídeo dos seguintes templates podem ser exibidos atrás do conteúdo do cabeçalho do site, como no título do site e na navegação de página. Clique em qualquer link para obter mais informações. Os templates são agrupados por família.

  • Família Bedford - Anya, Bryant, Bedford, Hayden
  • Família Brine - Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West
  • Família Pacific - Charlotte, Fulton, Horizon, Naomi, Pacific
  • Família Tremont - Camino, Carson, Henson, Tremont
Nota: No template Five, os banners sempre são exibidos abaixo do cabeçalho, mas o título do site, logo e subtítulo podem ser exibidos como uma sobreposição de texto no banner.

Veja como ele é exibido no Bedford:

bedford-transparent-header.png

Banners empilhados em um Índice

Alguns templates suportam uma Página Índice que exibe diversos banners empilhados verticalmente em uma página, criando um efeito de rolagem longa.

Esta é uma lista dos templates que são compatíveis com essa opção. Os templates são agrupados por família.

  • Família Bedford - Anya, Bryant, Bedford, Hayden
  • Família Brine - Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West
  • Família Pacific - Charlotte, Fulton, Horizon, Naomi, Pacific
  • Família York - Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York
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.

Em alguns templates, você pode criar banners que não serão cortados:

  • Os banners na Família Montauk  (Julia, Kent, Montauk, Om) não são cortados verticalmente. Eles são sempre exibidos com a largura do conteúdo do site. Note que banners altos e estreitos podem ficar pixalizados ao serem esticados para preencher a largura.
  • Na  Família Pacific (Charlotte, Fulton, Horizon, Naomi, Pacific), é possível criar uma imagem de banner sem corte adicionandouma Página de Galeria dentro de uma Página Índice.
  • Para obter mais ajuda sobre cortes, acesse nossas dicas de resolução de problemas.
Dica: Alterar o ponto focal da imagem em miniatura pode ajudar nos cortes em banners de página e de itens de coleção.

Banners de slideshow

Você pode criar um banner de slideshow nos seguintes modelos. Os templates são agrupados por família.

Dica: Em outros templates, adicione um Bloco de Galeria em Slideshow na parte superior de uma Página Simples para um efeito semelhante.
Template Notas

Família Brine

Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

Crie uma Página Índice com um slideshow como sua seção superior. Saiba mais.

Família Bedford

Anya, Bryant, Bedford, Hayden

Crie um banner de slideshow em Páginas Simples com um Bloco de Galeria promovido ou um banner de slideshow de Página de Blog a partir de Postagens em Destaque. 

Família Pacific

Charlotte, Fulton, Horizon, Naomi, Pacific

Crie uma Página Índice com um slideshow como sua seção superior. Saiba mais.

 

Criação de banners em outros templates

Crie o efeito de um banner em qualquer template adicionando um Bloco de Imagem na parte superior de uma Página Simples.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

Os templates a seguir suportam um ou mais tipos de banners. Os templates são agrupados por família.

Template

Banners de página: páginas suportadas

Banners de vídeo

Banners de itens de coleção: itens suportados

Outras opções

Adirondack

Simples
Blog
Eventos
Produtos

Sim

Postagens de blog
Eventos
Produtos

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

Família Bedford

Anya, Bryant, Bedford, Hayden

Simples
Álbum
Blog
Eventos
Produtos

Sim

Postagens de blog
Eventos

Banners de slideshow

Banners de slideshow da Página de Blog

Família Brine

Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

Simples
Álbum
Blog
Eventos
Galeria
Produtos

Sim

 

Rolagem com Paralaxe

Família Farro

Farro, Haute

   

Postagens de blog

 

Five

Simples
Álbum
Blog
Eventos
Galeria
Produtos

Sim

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

Banners de site

Família Montauk

Julia, Kent, Montauk, Om

Simples
Blog
Eventos
Índice

Sim

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

 

Família Pacific

Charlotte, Fulton, Horizon, Naomi, Pacific

Simples
Álbum
Blog
Eventos
Galeria
Produtos

Sim

   

Família Skye

Foundry, Indigo, Ready, Skye, Tudor

   

Postagens de blog

 

Supply

Simples
Blog
Álbum Eventos

 

Postagens de blog
Eventos

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

Família Tremont

Camino, Carson, Henson, Tremont

Simples
Álbum
Blog
Eventos
Galeria
Produtos

Sim

  Sobreposição de página

Família York

Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

Simples
Álbum
Blog
Eventos
Galeria
Projeto
Produtos
Índice Principal

   

Efeito de desvanecimento

Imagens transparentes

Se você usar um arquivo .png com um fundo transparente, os ajustes a seguir definirão a cor exibida por trás do banner. Os templates são agrupados por família.

Dica: na maioria dos casos, a cor é exibida com 100% de opacidade. Se tiver dificuldades para obter a cor desejada, ajuste a transparência.
Template Ajuste
Adirondack Content Background Color (Cor de Fundo do Conteúdo)

Família Bedford

Anya, Bryant, Bedford, Hayden

Banner Overlay Color (Cor de Sobreposição do Banner)

Família Brine

Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

Cor de Sobreposição na seção Principal: Sobreposição

Família Farro

Farro, Haute

Cor de Fundo da Postagem. A Cor de Sobreposição também afeta a cor.
Five Plano de Fundo do Cabeçalho

Família Montauk

Julia, Kent, Montauk, Om

Canvas Background (Fundo da Tela)

Família Pacific

Charlotte, Fulton, Horizon, Naomi, Pacific

Overlay Color (Cor de Sobreposição)

Família Skye

Foundry, Indigo, Ready, Skye, Tudor

Plano de Fundo do Site
Supply Cor da Página

Família Tremont

Camino, Carson, Henson, Tremont

Background Color (Cor de Fundo) do site

Família York

Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

Cor de Fundo na seção do Banner.

Esse artigo foi útil?
Usuários que acharam isso útil: 24 de 121