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 , 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:

  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 o carregador. Clique em Procurar imagem para reutilizar uma imagem ou adicionar uma imagem de acervo .
  4. Estilize a 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 estilizar a imagem e consertar recortes e distorções que possam haver.

Size (Tamanho)
  • Auto (Automático) - A imagem mantém sua largura e altura originais. Isso é bom para imagens menores que você deseja repetir.
  • Cover (Cobrir) - Dimensiona a imagem de modo que fique de um tamanho suficiente para cobrir completamente a área do plano de fundo (sem margens). Como resultado, a imagem toda pode não ser exibida. A imagem pode parecer diferente em cada página dependendo da altura do conteúdo da página.
  • Conter - Dimensiona a imagem para que a borda mais longa (largura ou altura) se encaixe 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 Canter (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 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:

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

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

Exemplo de imagem de fundo no template Native.

E o template Aviator com os planos do fundo geral site e o 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 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.
Este artigo foi útil?
Utilizadores que acharam útil: 51 de 368
Adição de imagens do fundo geral do site