Em alguns sites da versão 7.0 , você pode adicionar uma imagem de fundo para exibir por trás do conteúdo do site, criando um elemento visual para ajudar a definir o tom do site. Você pode adicionar imagens de fundo em todo o site nestas famílias de modelos:
- 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 é compatível com imagens de fundo em todo o site, mas você pode adicionar imagens de fundo que serão exibidas atrás do conteúdo do site na maioria das seções de página.
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:
- Recomendamos fazer upload de imagens com largura entre 1.500 pixels e 2.500 pixels.
- 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.
- Padrões abstratos, imagens sem texto ou bordas e padrões repetidos geralmente funcionam melhor, pois oferecem mais flexibilidade nos cortes, o que sempre ocorrerá em algum grau.
- 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 o carregador. Clique em Procurar imagem para reutilizar uma imagem ou adicionar uma imagem de acervo .
- Estilize a 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 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.
- 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 é exibida em computadores e dispositivos móveis. Para ver o efeito, é recomendável manter seu telefone por perto e atualizar o site no telefone depois de salvar as alterações em um computador. Para ver uma prévia rápida enquanto você está editando em uma área de trabalho, use a Exibição de Dispositivo.
Dicas:
- Consulte nossas práticas recomendadas ao escolher uma imagem de fundo.
- 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 corrigir isso, abra o ajuste da imagem do plano de fundo (ver Passo 3 acima) e tente uma ou ambas as opções:
- Verifique a posição de correção (isso não afetará alguns dispositivos móveis, inclusive 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 as imagens maiores poderão não aparecer. Na família Aviator, o ajuste Imagem de fundo da versão móvel deverá 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.
- 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.
- Páginas de entrada - As página de entrada estão disponíveis em todos os modelos 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 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.