Obs.: embora os nossos guias mais acessados tenham sido traduzidos para o português, outros guias estão disponíveis apenas em inglês.

Adição de imagens do fundo geral 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.

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 o envio de imagens com largura de 1.500 pixels a 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.
  • 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:

  1. No Menu Inicial, clique em Design e depois em Estilos do Site.
  2. 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.
  3. 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.
  4. Ajuste o estilo da imagem e clique em Salvar para publicar as alterações.

No template Adirondack, o ajuste se parece com este:

background-image-tweak.png

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)
  • Auto (Automático) - A imagem mantém sua largura e altura originais. Isso é bom para imagens menores que você deseja repetir.
  • Cobrir - ajusta i tamanho da imagem para cobrir totalmente a área do fundo (sem margens). Como resultado, a imagem pode não aparecer por completo. Dependendo da altura do conteúdo, a imagem pode parecer diferente em cada página.
  • Conter - ajusta o tamanho da imagem para que a borda mais longa (largura ou altura) caiba no navegador.

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:

  • Top Left (Parte Superior à Esquerda), Top Center (Parte Superior Central), Top Right (Parte Superior à Direita)
  • Center Left (Centro à Esquerda), Center Center (Centro ao Centro), Center Right (Centro à Direita)
  • Bottom Left (Parte Inferior à Esquerda), Bottom Center (Parte Inferior Central), Bottom Right (Parte Inferior à Direita)
Repeat (Repetir)

O tamanho deve estar configurado como Automático ou Conter.

    • No-repeat (Sem repetir) - Exibe a imagem uma vez.
    • Repeat (Repetir) - Repete a imagem para que ela cubra todo o plano de fundo.
    • Repeat-X (Repetir em X) – Repete a imagem somente no eixo horizontal.
    • Repeat-Y (Repetir em Y) – Repete a imagem somente no eixo vertical.

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

A imagem está embaçada ou pixelizada

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

Exemplo de imagem de fundo no template Montauk.

Aqui está um exemplo no template Forte:

  • Size: Auto (Tamanho: Automático)
  • Repeat: Repeat (Repetir: Repetir)

Exemplo de imagem de fundo no template Forte.

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

Exemplo de imagem de fundo no template Native.

E o template Aviator com os planos do fundo geral do site e o fundo específico da Página de Informações:

Fundo geral do website e fundo específico da Página de Introdução no template Aviator.

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.
Este artigo foi útil?
Utilizadores que acharam útil: 58 de 421
Adição de imagens do fundo geral do site