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 ficar sem margens, preenchendo a página até as bordas do navegador. 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.
Melhores práticas
O tipo de imagem escolhido depende da estética pessoal e dos objetivos do site, mas há algumas orientações gerais:
- Recomendamos fazer upload de imagens com uma largura de 1500 pixels a 2500 pixels. Se ocorrerem problemas de carregamento, como imagens de fundo que não são carregadas no celular, tente reduzir a borda mais longa de todas as imagens para 1500 pixels. Isso aumentará a velocidade de carregamento enquanto mantém a qualidade da imagem.
- Normalmente as imagens de fundo com sangria total são cortadas de forma diferente em dispositivos móveis e em computadores. É melhor escolher uma imagem de fundo que possa ser cortada de várias maneiras.
- 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 serão transferidas se os templates forem trocados.
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.
- 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 se parece com este:
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.
| 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 sendo rolado. Quando desmarcada, a posição rola 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:
- Talvez você decida deixar as cores do fundo parcialmente opacas para que a imagem de fundo apareça.
- Pode ser exibida uma cor de fundo ou de sobreposição enquanto uma imagem de fundo estiver sendo carregada.
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 ver uma prévia rápida conforme você edita no computador, use a visualização por dispositivo.
À medida que a imagem se ajusta à tela do navegador mais longa e mais estreita de um dispositivo móvel, ela pode sofrer corte ou distorção. Há algumas coisas que você pode fazer para minimizar o corte:
- 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 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 exibição em 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:
- Verifique a posição de correção (isso não afetará alguns dispositivos móveis, inclusive o iOS)
- Selecionar o Size (Tamanho): Contain (Conter) ou Size (Tamanho): Auto (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 de plano de 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. Veja mais em Adição de código personalizado ao site.
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 computadores, 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 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 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
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:
- Size: Cover (Tamanho: Cobrir)
- Fixed Position (Posição fixa)
- Fundo da tela de trabalho) cor parcialmente opaca
Aqui está um exemplo no template Forte:
- Size: Auto (Tamanho: Automático)
- Repeat: Repeat (Repetir: Repetir)
Aqui está um exemplo no 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 do site e o fundo 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.
- 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áginas de entrada - As página de entrada estão disponíveis em todos os templates na versão 7.0 e oferecem suporte a texto, botões, títulos, logotipos e formulários. Elas criam uma página independente com suas próprias opções de estilo e não exibem o cabeçalho do site, a navegação ou os rodapés. Isso os torna uma ótima opção se você quiser dar destaque a 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.