As imagens de fundo aparecem atrás do conteúdo do site; mais um elemento visual para definir o tom do site. Você pode adicionar imagens do fundo geral do site nas seguintes famílias de template:
- Adirondack
- Avenue
- Aviator - a Página de Informações também aceita uma imagem de fundo específica por página.
- Five
- Forte
- Momentum
- Montauk
- Native
Todas as imagens de fundo podem ser definidas sem margens para preencher a página até as bordas do navegador.
Dica: Se o seu template não for compatível com planos de fundo em todo o site, saiba como criar planos de fundo específicos de página.
A versão 7.1 não aceita imagens de fundo para todo o site.
Assistir a um vídeo
Melhores práticas
O tipo de imagem escolhido depende da estética pessoal e dos objetivos do site, mas há algumas orientações gerais:
- Para imagens de plano de fundo sem margens, recomendamos carregar imagens com largura de 1500 pixels a 2500 pixels.
- Os padrões e imagens abstratas sem texto ou bordas geralmente funcionam melhor, pois oferecem maior flexibilidade ao recortar, que sempre acontecerá até certo ponto.
- Repetir padrões oferece maior flexibilidade ao estilizar a exibição da imagem.
- As imagens de fundo não serão transferidas se os templates forem trocados.
Formato da imagem
Imagens de fundo sem margens costumam ser recortadas de forma diferente em dispositivos móveis e desktops, porque dispositivos móveis costumam ser visualizados como retrato.
Ao escolher uma imagem de fundo, considere como os visitantes vão acessar seu site:
- Se achar que a maioria de seus visitantes verá seu site em dispositivos móveis, você pode minimizar os cortes escolhendo uma imagem de fundo com altura superior à largura.
- Se a maioria dos visitantes acessar em desktops, use uma imagem em forma de paisagem ou próxima a um quadrado.
- Para sites de uso misto, escolha uma imagem de fundo que possa ser recortada de diversas formas.
Adicione a imagem
Para adicionar um plano de fundo geral ao site:
- No Menu Inicial, clique em Design e depois em Estilos do Site.
- Procure um ajuste chamado Imagem de fundo, Imagem de fundo do site ou Imagem de fundo da página. Clique no ajuste para abri-lo e adicione a imagem.
- Edite o estilo da imagem e clique em Salvar para publicar as alterações.
No template Adirondack, o ajuste se parece com este:
Adição de imagens
Para usar uma imagem sua, arraste-a até o carregador de imagens. Você também pode:
- Clicar no carregador de imagens para abrir um menu de seleção de arquivos e selecionar um arquivo do seu computador.
- Clicar em Buscar imagem para reutilizar uma imagem adicionada antes ou adicionar uma imagem de acervo gratuita ou premium.
Edite o estilo e recorte a imagem
Após adicionar a imagem de fundo, use as opções embaixo do carregador de imagens para estilizar a imagem e consertar recortes e distorções que possam haver.
| Size (Tamanho) |
Nos modos Auto (Automático) ou Contain (Conter), a cor do plano de fundo do site pode ser exibida atrás da imagem. Use os ajustes de Repeat (Repetir) para arrumar. |
| Position (Posição) |
Define a posição da imagem de fundo:
|
| Repeat (Repetir) |
O tamanho deve estar configurado como Automático ou Conter.
Nos modos de No-repeat (Sem repetir), Repeat-X (Repetir em X) e Repeat-Y (Repetir em Y), use as opções de Position (Posição) para ajustar a exibição da imagem. |
| Fix Position (Posição Fixa) |
Quando marcada, a posição da imagem continua estática atrás do conteúdo que está sendo rolado para cima e para baixo. Quando desmarcada, a posição rola para cima e para baixo com a página. Em muitos navegadores móveis, incluindo iOS, esse recurso não tem efeito, e a imagem é rolada junto com a página. |
Edite o estilo de outras áreas do site
Quanto da imagem de fundo que aparece depende de como os outros elementos do seu site são configurados. As opções de estilo e o nome dos ajustes variam de acordo com o template, mas use o painel Estilos do Site para explorar algumas ou todas as áreas do site, como:
- Plano de fundo da área do conteúdo principal (ou "tela")
- Plano de fundo do cabeçalho
- Plano de fundo do rodapé
- Largura do site e do conteúdo
Lembre-se:
- Pode ser que você queira deixar as cores do fundo parcialmente opacas, para que a imagem de fundo apareça.
- Uma cor de fundo ou de sobreposição pode aparecer durante o carregamento da imagem ou do banner de fundo.
Veja como o seu site fica na versão móvel
A mesma imagem de fundo é exibida em dispositivos móveis e computadores. Para ver o efeito, é uma boa ideia manter seu celular por perto e atualizar o site nele depois de salvar as alterações em um computador. Para ter uma visualização rápida conforme você edita no computador, use a visualização por dispositivo.
Dicas:
- Ao escolher uma imagem de fundo, o formato da imagem pode fazer uma grande diferença no modo como ela é exibida em dispositivos móveis.
- Nossas dicas para solução de problemas mostram os ajustes que funcionam bem na versão móvel.
Resolução de problemas
A imagem do plano de fundo distorce em certas páginas ou no celular
Isso acontece quando a imagem de fundo se estica para cobrir todo o espaço da janela do navegador. É comum em Páginas do Blog ou Páginas de Eventos em visualização de lista, que costumam ser mais longas, e nas páginas configuradas para dispositivos móveis, em que o conteúdo é empilhado na vertical. Quanto mais alto for o conteúdo da página, mais esticado ficará o plano de fundo para cobri-lo totalmente, e maior será a ampliação.
Para consertar isso, abra o ajuste da imagem do plano de fundo (ver Passo 3 acima) e tente uma ou ambas opções:
- Marque a Fixed Position (Posição Fixa) (Nota: não afeta alguns dispositivos móveis, incluindo o iOS)
- Selecione o Size (Tamanho): Contain (Conter) ou Size (Tamanho): Auto (Automático)
Pode ser que você queira tentar com as opções de Position (Posição) para ver qual versão redimensiona melhor em páginas compridas e na exibição em celulares.
A imagem está embaçada ou pixelizada
Isso acontece quando uma imagem se estica além do tamanho original para preencher a área do plano de fundo.
Para imagens sem margens, recomendamos carregar imagens com largura entre 1500 e 2500 pixels na maioria dos sites.
Nota: Não recomendamos carregar imagens de plano de fundo maiores que 2500 pixels na margem mais comprida. As imagens de plano de fundo comuns ao site todo sempre carregam o tamanho original da imagem. Se a imagem do plano de fundo for maior que 2500 pixels, ela pode gerar problemas para os visitantes.
Imagens de plano de fundo e código personalizado
O código personalizado adicionado ao site pode interferir em como a imagem de plano de fundo é exibida. Se você estiver solucionando problemas com a imagem de plano de fundo, desabilite temporariamente quaisquer códigos personalizados para ver se o problema está relacionado ao código. Para saber mais, acesse Adicionando HTML, CSS e JavaScript personalizados.
Exibição em dispositivos móveis
Veja como é possível usar ajustes de estilo para corrigir problemas comuns de exibição em dispositivos móveis. Como não há ajustes separados para dispositivos móveis e desktops, uma boa alternativa é experimentar essas opções para ver quais oferecem o melhor visual.
- Imagem ampliada ou distorcida - Defina a imagem com Size: Contain (Tamanho: Conter) ou Size: Auto (Tamanho: Automático). Talvez seja necessário também carregar uma imagem maior, com até 2500 pixels ao longo de sua borda mais comprida.
- O tamanho da imagem de fundo muda em páginas diferentes - Defina sua imagem com Size: Contain (Tamanho: Conter) ou Size: Auto (Tamanho: Automático).
- Imagem centralizada incorretamente - Use as opções de Position (Posição) para ajustar onde sua imagem será exibida na página.
- A imagem de fundo não aparece - a cor de fundo do conteúdo principal pode estar cobrindo a imagem. Ajuste a transparência para revelar a imagem de fundo (isso também afetará a visualização no desktop). A imagem original deve ter menos de 2.500 pixels na borda mais longa, e imagens maiores podem não aparecer. Na família Aviator, o ajuste Imagem de fundo da versão móvel deve estar marcado.
- A imagem não cobre todo o recipiente - Selecione Size: Auto (Tamanho: Automático) ou Size: Contain (Tamanho: Conter) e Repeat (Repitir) a imagem para cobrir todas as áreas em branco.
Exemplos
Experimente as opções de ajuste de imagem de plano de fundo para encontrar a disposição perfeita para a imagem de plano de fundo. Incluímos alguns exemplos abaixo para ajudar a inspirar você.
Aqui está um exemplo no template Montauk:
- Size: Cover (Tamanho: Cobrir)
- Fixed Position (Posição fixa)
- Canvas Background (Plano de Fundo de Tela) cor definida como parcialmente opaca
Aqui está um exemplo no template Forte:
- Size: Auto (Tamanho: Automático)
- Repeat: Repeat (Repetir: Repetir)
Aqui está um exemplo o template Native:
- Position: Top Left (Posição: Parte Superior à Esquerda)
- Size: Auto (Tamanho: Automático), Repeat-Y (Repetir em Y)
- Cor do plano de fundo do site: Azul
E o template Aviator com os planos do fundo geral site e o específico da Página de Informações:
Adicione imagens de fundo específicas de página
Existem várias maneiras de criar uma imagem de plano de fundo em apenas uma página.
- Páginas de Entrada - As Páginas de Entrada estão disponíveis em todos os templates e são compatíveis com texto, botões, títulos, logos e formulários. Elas criam uma página autônoma com suas próprias opções de estilo e não exibem o cabeçalho, a navegação ou os rodapés do site. Isso as torna uma ótima opção para quem deseja criar uma página de destaque.
- Banners - alguns templates aceitam imagens de banner, que são exibidas no topo da página e compatíveis com sobreposição de conteúdo. Na família Brine, por exemplo, é possível usar blocos na área de introdução para adicionar muitos tipos diferentes de conteúdo no seu banner.
- Seção de Página Índice - nas famílias de templates Brine e Pacific, é possível usar um Índice para adicionar uma imagem de fundo atrás de uma seção de Página de Layout.