Para um impacto visual, mostre uma imagem por trás do conteúdo do site.
Em alguns sites da versão 7.0, é possível adicionar uma imagem de fundo atrás do conteúdo do site. Esse elemento visual influencia o "clima" do seu site.
Você pode adicionar uma imagem de fundo geral no site nas seguintes famílias de templates:
- Adirondack
- Avenue
- Aviator - a página de informações também aceita uma imagem de fundo específica à página
- Five
- Forte
- Momentum
- Montauk
- Native
Todas as imagens de fundo podem ser definidas sem margens, de forma que preencham a página até as bordas do browser. Se o template não aceitar um fundo geral do site, aprenda a criar um plano de fundo específico da página.
A versão 7.1 não aceita uma imagem de fundo geral do site, mas você pode adicionar imagens de fundo que aparecem atrás do conteúdo do site na maioria das seções de página.
Recomendações
O tipo de imagem escolhido depende da estética pessoal e dos objetivos do site, mas há algumas orientações gerais:
- Recomendamos carregar imagens entre 1.500 pixels e 2.500 pixels de largura. Se houver problema no carregamento, como imagens de fundo que não são carregadas na versão móvel, tente reduzir a borda mais longa de todas as imagens para 1.500 pixels. Isso aumentará a velocidade de carregamento sem diminuir a qualidade da imagem.
- Normalmente, as imagens de fundo sem margens são cortadas de forma diferente entre a versão móvel e o computador. É melhor escolher uma imagem de fundo que possa ser cortada de várias formas.
- Os mais recomendados são padrões abstratos, imagens sem texto ou bordas e padrões repetidos, pois dão mais flexibilidade nos cortes, que sempre ocorrem em algum nível.
- As imagens de fundo não são transferidas se os templates forem trocados.
Adicione a imagem
Para adicionar um fundo geral ao site:
- Abra o painel Design e clique 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.
- Para adicionar um arquivo do computador, clique no carregador ou arraste a imagem para ele. Clique em Procurar imagem para reutilizar uma imagem ou adicionar uma imagem do acervo.
- Ajuste o estilo da imagem e clique em Salvar para publicar as alterações.
No template Adirondack, o ajuste fica assim:
Edite o estilo e recorte a imagem
Após adicionar a imagem de fundo, use as opções embaixo do carregador de imagens para ajustar o estilo da imagem e consertar eventuais recortes e distorções.
| Tamanho |
Nos modos Automático e Conter, a cor do fundo do site pode aparecer atrás da imagem. Use os ajustes Repetição para ajustar. |
| Posição |
Define a posição da imagem de fundo:
|
| Repetição |
O tamanho deve estar configurado como Automático ou Conter.
Para Sem repetição, Repetição-Xe Repetição-Y, use as opções Posição para ajustar ainda mais onde a imagem aparece. |
| Posição fixa |
Quando marcada, a posição da imagem continua estática, atrás do conteúdo sendo rolado. Quando desmarcada, a posição rola com a página. Em muitos browsers móveis, incluindo iOS, esse recurso não tem efeito, e a imagem rola junto com a página. |
Edite o estilo de outras áreas do site
O modo como a imagem de fundo 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 dos estilos do site para conferir algumas ou todas as áreas do site, como:
- Fundo da área do conteúdo principal (ou "tela")
- Fundo do cabeçalho
- Fundo do rodapé
- Largura do site e do conteúdo
Lembre-se:
- Talvez você decida 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 de fundo.
Veja como o seu site fica na versão móvel
A mesma imagem de fundo aparece no computador e na versão móvel. Para ver o efeito, recomendamos acessar o site pelo celular após salvar as alterações no computador. Para ter uma prévia rápida conforme você edita no computador, use a visualização por dispositivo.
À medida que se ajusta à tela do browser na versão móvel (mais longa e mais estreita), a imagem pode sofrer corte ou distorção. Para minimizar:
- Ao escolher uma imagem de fundo, o formato da imagem pode fazer uma grande diferença no modo como ela aparece na versão móvel.
- Nossas dicas para solução de problemas mostram configurações de estilo que funcionam bem na versão móvel.
Resolução de problemas
Em certas páginas ou na versão móvel, a imagem de fundo fica distorcida
Isso acontece quando a imagem de fundo se estica para cobrir todo o espaço no browser. Isso é comum nas páginas do blog ou páginas de eventos em modo "Lista", pois costumam ser mais longas; e na versão móvel, em que o conteúdo é empilhado na vertical. Quanto mais alto o conteúdo da página, mais esticado fica o plano de fundo (para cobri-lo totalmente) e maior é a ampliação.
Para corrigir, abra o ajuste da imagem de fundo (ver passo 3 acima) e tente uma das opções:
- Confira Corrigir posição (não funciona em alguns aparelhos móveis, inclusive o iOS)
- Selecione Tamanho: conter ou Tamanho: automático
Talvez você decida testar as opções Posição para ver qual versão ajusta melhor o tamanho em páginas compridas e na versão móvel.
Minha imagem está borrada ou pixelada
Isso acontece quando uma imagem se estica além do tamanho original para preencher a área do fundo.
Para imagens sem margens, recomendamos carregar imagens com largura entre 1.500 e 2.500 pixels na maioria dos sites.
Atenção: não recomendamos carregar imagens de fundo maiores do que 2.500 pixels na margem mais comprida. A imagem de fundo geral do site sempre carrega o tamanho original da imagem. Se a imagem de fundo for maior do que 2.500 pixels, ela pode gerar problemas para o visitante.
Imagens do fundo e código personalizado
O código personalizado adicionado ao site pode interferir em como a imagem de fundo aparece. Ao tratar algum problema com a imagem de fundo, desative temporariamente quaisquer códigos personalizados para ver se o problema tem relação com isso. Saiba mais em Adição de código personalizado ao site.
Exibição na versão móvel
É possível usar os ajustes no estilo para corrigir problemas comuns na exibição na versão móvel. Como não há ajustes separados para a versão móvel e para computador, uma boa alternativa é testar essas opções para ver quais oferecem o melhor visual.
- Imagem ampliada ou distorcida - deixe a imagem como Tamanho: conter ou Tamanho: automático. Talvez seja necessário também carregar uma imagem maior, com até 2.500 pixels ao longo da borda mais comprida.
- O tamanho da imagem de fundo muda de acordo com a página - deixe a imagem como Tamanho: conter ou Tamanho: automático.
- Imagem centralizada incorretamente - use as opções Posição para ajustar onde a imagem aparece 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 afeta a exibição no computador). A imagem original deve ter menos de 2.500 pixels na borda mais longa; imagens maiores podem não aparecer. Na família Aviator, o ajuste Imagem de fundo da versão móvel precisa estar marcado.
- A imagem não cobre todo o contêiner - selecione Tamanho: automático ou Tamanho: conter e repita a imagem para cobrir todas as áreas vazias.
Exemplos
Teste as opções de ajuste de imagem de fundo até achar a disposição perfeita para ela. Incluímos alguns exemplos abaixo para inspirar você.
Veja um exemplo no template Montauk:
- Tamanho: cobrir
- Posição fixa
- Fundo da tela de trabalho) cor parcialmente opaca
Veja um exemplo no template Forte:
- Tamanho: Automático
- Repetição: repetir
Veja um exemplo no template Native:
- Posição: superior esquerda
- Tamanho: automático, Repetição-Y
- Cor do fundo do site: azul
E o template Aviator com o fundo geral do site e o fundo específico da página de informações:
Adicione uma imagem de fundo específica à página
Há várias formas de criar uma imagem de fundo em apenas uma página.
- Banners - alguns templates aceitam imagens de banner, que aparecem no topo da página e talvez aceitem sobreposição de conteúdo. Na família Brine, por exemplo, é possível usar blocos na introdução para adicionar vários tipos de conteúdo no banner.
- Página de entrada - a página de entrada está disponíveis em todos os templates na versão 7.0 e aceita texto, botões, títulos, logotipos e formulários. Ela cria uma página independente com as próprias opções de estilo e sem o cabeçalho do site, a navegação e os rodapés. Por isso, é uma ótima opção para destacar uma página.
- Seção página índice - nas famílias dos templates Brine e Pacific, é possível usar um índice para adicionar uma imagem de fundo atrás de uma seção na página de layout.