Como adicionar corretamente imagens de fundo do WordPress ao seu site?

Adicionar imagens de plano de fundo do WordPress ao seu site é fácil? A resposta é sim na maior parte, a menos que seu tema não o suporte.

A verdade é que muitos temas do WordPress atualmente oferecem algumas maneiras fáceis de adicionar e alterar imagens de plano de fundo existentes.

Você também pode alterar as imagens de plano de fundo do WordPress usando CSS ou um plug-in, que abre opções para definir a imagem de plano de fundo em páginas, postagens e categorias.

Este artigo mostrará como fazer todas as opções acima para destacar seu site com uma aparência atraente.

O que são imagens de fundo do WordPress ?

Uma imagem de fundo do WordPress é uma imagem aplicada atrás do conteúdo principal. Em vez de serem o foco principal do seu site, como uma imagem principal, eles geralmente são mais sutis e complementam outros conteúdos em suas páginas da web.

Além de ajudar a criar páginas da web que proporcionam uma melhor experiência de leitura, as imagens de fundo do WP oferecem muitas possibilidades de design que diferenciam seu site dos concorrentes.

Ser diferente dos concorrentes significa aumentar o reconhecimento da sua marca, colocando um esforço extra no design do seu site, o que nem sempre é fácil. Nesses casos, você pode solicitar a uma agência digital serviços profissionais de web design.

Mas por que você quer mudar o plano de fundo? Bem, o padrão pode não agradar a você ou não se assemelhar à sua marca. Ou talvez não seja uma imagem, apenas uma cor sólida. Ou talvez você tenha amado o existente no início, mas ficou entediado com ele agora.

Seja qual for o motivo, vamos experimentar mudá-lo.

Use o personalizador padrão do WordPress para adicionar uma imagem de plano de fundo do WordPress

Os temas do WordPress geralmente oferecem uma maneira fácil de usar uma cor ou imagem em segundo plano. A maioria das pessoas opta por alterar a cor de fundo que melhor corresponde à marca e ao gosto do site.

Neste guia, usaremos o Woostify - um tema fantástico para sites de comércio eletrônico. Dependendo do seu tema, o método pode ser um pouco diferente.

1. No painel do WordPress, vá para Aparência > Papel de parede/fundo ou Aparência > Personalizar > Papel de parede .

2. Clique no botão Selecionar imagem para abrir a Biblioteca de mídia.

3. Escolha a imagem desejada. Você pode carregá-lo do seu computador ou selecionar um existente na Biblioteca de mídia.

4. Clique no botão Escolher imagem quando estiver satisfeito.
5. Se você gostar do que vê na Visualização, clique no botão Publicar . E é isso!

Além disso, o WordPress oferece uma ferramenta simples de edição de imagem de fundo. Você pode experimentar com ele para ver qual tamanho, posição, etc. é o melhor.

Não se preocupe em ficar preso a nada. É fácil voltar às configurações e alterar o plano de fundo (e opções relacionadas) sempre que quiser.

Use o Elementor Page Builder para adicionar imagens de plano de fundo do WordPress a uma postagem/página

O Elementor é um construtor de páginas predominante que acelera drasticamente a produção de sites. Ele oferece um plugin gratuito que você pode usar para adicionar imagens de fundo do WordPress.

1. Para começar, você precisa instalar e ativar o plug-in Elementor.
2. Primeiro, vá para o post ou página de sua escolha. Uma vez no editor de páginas padrão do WordPress, clique no botão Editar com Elementor .

O Editor Elementor será aberto. No lado esquerdo, você verá um menu que lista todos os blocos de arrastar e soltar para construir e editar sua postagem/página.

3. Clique no pequeno ícone de configurações no canto inferior esquerdo do construtor de páginas.

4. Em seguida, escolha a guia Estilo .

5. Depois disso, clique no ícone de pincel para adicionar uma imagem de fundo do WordPress .

6. Em seguida, clique no botão Escolher imagem para abrir a Biblioteca de mídia.

7. Escolha a imagem desejada. Você pode carregá-lo do seu computador ou selecionar um existente na Biblioteca de mídia.

8. Em seguida, clique no botão 'Inserir mídia' no canto inferior direito.

Agora, a imagem de fundo selecionada deve aparecer na visualização à direita. Pode ser necessário ajustar outro conteúdo para garantir que itens como imagens e texto sejam exibidos corretamente.

9. Lembre-se de pressionar o botão 'UPDATE' para salvar todas as alterações e atualizar o post/página.

Além disso, o Elementor fornece alguns ajustes para imagens de plano de fundo do WordPress, como Posição, Anexo, Repetir, etc. Sinta-se à vontade para experimentá-los para descobrir o melhor plano de fundo.

Use um plugin para adicionar imagens de fundo do WordPress

Existem vários plugins gratuitos, mas excelentes, que podem fazer o trabalho de adicionar imagens de fundo do WordPress . Por exemplo, imagem de fundo de tela cheia simples, fundos avançados do WordPress, gerenciador de fundo completo, etc.

Adicione uma imagem de fundo do WordPress para todo o site

Neste guia, usaremos a Simple Full Screen Background Image, pois é simples, daí seu nome.

Este plug-in fornece instalação e configuração diretas de uma imagem de plano de fundo do WordPress para o seu site. Ele dimensiona automaticamente a imagem com o navegador. Por isso, sempre preenche a tela, não importa quais dispositivos seus visitantes estejam usando.

Para colocá-lo em ação requer apenas alguns passos simples. Há uma versão paga disponível que adiciona recursos extras. No entanto, o gratuito é tudo o que precisamos.

1. Instale e ative o plugin Simple Screen Background Image.
2. No painel do WordPress, vá para Appearance > Fullscreen BG Image .

3. Clique no botão Escolher imagem para abrir a Biblioteca de mídia.

4. Escolha a imagem desejada. Você pode carregá-lo do seu computador ou selecionar um existente na Biblioteca de mídia.

5. Clique no botão Escolher imagem quando estiver satisfeito.
6. Por fim, clique no botão 'Salvar opções' e confira seu site. A imagem agora deve ser exibida no site como uma imagem de fundo do WordPress em tela cheia.

Observe que a configuração do plug-in para imagens de plano de fundo do WordPress substitui o personalizador padrão do WordPress. Isso não é uma coisa ruim de qualquer tipo, apenas algo a ter em mente.

Adicionar imagens de fundo do WordPress em uma página /postagem específica

Neste guia, usaremos o plugin Advanced WordPress Backgrounds mencionado acima.

Este plugin permite adicionar fundos usando blocos Gutenberg. Você pode definir uma cor, imagem ou até mesmo vídeo como plano de fundo do WordPress. Todos eles podem ser visualizados em dispositivos móveis. Além disso, você pode adicionar um efeito de paralaxe às imagens e vídeos de plano de fundo do WordPress.

Nesse caso, adicionaremos apenas uma imagem de fundo estática à área de conteúdo, especificamente postagens/páginas.

Como isso funciona com blocos Gutenberg, certifique-se de alternar do modo Classic Editor se precisar.

1. Instale e ative o plug-in.
2. Abra uma postagem/página existente ou crie uma nova.
3. Clique no botão de adição no canto superior esquerdo. Em seguida, role para baixo até a seção Design e escolha o bloco AWB. Uma barra de ícones superior e uma coluna de menu lateral aparecerão ao lado do bloco.

4. Clique no botão Imagem na coluna lateral. Em seguida, clique no botão Selecionar imagem abaixo dele para abrir a Biblioteca de mídia.

5. Escolha a imagem desejada. Em seguida, clique no botão Selecionar . Depois de fazer isso, você deve ver a imagem de fundo.

6. Na barra de ícones superior, clique no ícone de forma de hambúrguer. Em seguida, escolha a opção Full Width para cobrir toda a largura. Isso é totalmente opcional.

Na coluna lateral, você pode alterar o tamanho, o espaçamento, a posição e muito mais da imagem de fundo do WordPress. Sinta-se à vontade para experimentá-lo.

Agora, tudo o que resta é adicionar conteúdo dentro do bloco. Se você estiver editando um post/página existente, basta recortar e colar o conteúdo no bloco.

Lembre-se de salvar o post/página quando estiver satisfeito com o resultado.

Use CSS para adicionar imagens de fundo do WordPress

Agora, vamos explorar como alterar as imagens de fundo do WordPress usando CSS . Isso pode ser feito para todo o site ou para categorias específicas usando o WordPress Customizer.

1. No painel do WordPress, vá para Aparência > Personalizar para acessar o WordPress Customizer.

2. Role para baixo e clique na seção CSS adicional .

3. Copie e cole o código apropriado abaixo no campo CSS:

Adicione uma imagem de fundo do WordPress para todo o site

 body { background-image: url('imageURL'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }

Certifique-se de substituir o texto do espaço reservado 'imageURL' pelo URL do arquivo de imagem real. Para ver isso, selecione a imagem desejada na Biblioteca de mídia para visualizar as informações da imagem.

E se você conhece CSS, sinta-se à vontade para ajustá-lo como quiser.

Adicionar imagens de fundo do WordPress em uma página de categoria específica

 body.category-categoryid { background-image: url('imageURL'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }

Certifique-se de substituir o texto de espaço reservado 'imageURL' pelo URL do arquivo de imagem real e 'categoryid' pelo nome de categoria apropriado.

Para saber o ID da categoria, siga as instruções abaixo:

1. No painel do WordPress, vá para Postagens > Categorias .

2. Passe o mouse sobre o texto Editar da categoria que você deseja fazer referência. Você verá o URL no canto inferior esquerdo da página, mostrando o ID da categoria.

Melhores práticas para usar imagens de fundo no WordPress

Definir uma imagem de fundo personalizada no WordPress parece uma tarefa fácil. Sim! É verdade na maioria dos casos, mas nem sempre.

Portanto, recomendamos seguir as práticas recomendadas de imagem de fundo do WordPress para eliminar o maior número possível de problemas.

Verifique o suporte à imagem de fundo antes de usar um tema do WordPress

Infelizmente, nem todos os temas do WordPress suportam imagens de fundo personalizadas. Geralmente é porque os planos de fundo não correspondem ao design geral do tema. Portanto, os desenvolvedores optaram por desativá-lo completamente.

Portanto, você deve verificar a lista de recursos ao baixar um novo tema, especialmente se planeja pagar por um premium. Muitos sites que vendem temas fornecem informações sobre se um tema WordPress suporta ou não imagens de fundo.

Fique com imagens de alta qualidade

A resolução das imagens de fundo pretendidas geralmente faz ou atrapalha sua apresentação. Você pode pensar que uma foto tirada com seu telefone é boa o suficiente para um plano de fundo. Mas as chances são de que precisa ser de qualidade muito maior.

Você pode pagar por fotos isentas de royalties de sites como o Shutterstock. Esses sites geralmente têm imagens de nível profissional prontas para serem carregadas como grandes imagens de fundo. Você também pode encontrar muitos deles em sites de imagens gratuitas.

A imagem de fundo pode não estar totalmente visível em seu site WordPress, pois a maior parte dela é coberta pelo conteúdo. No entanto, ele ainda é exibido em toda a tela. Portanto, você corre o risco de ver um plano de fundo esticado se não usar uma imagem de alta qualidade.

Otimizar imagens de fundo

Tal como acontece com todas as fotos enviadas para o seu site WordPress, você deve otimizar as imagens de fundo antes de publicar.

Isso é especialmente importante para imagens de plano de fundo, pois elas geralmente aparecem em várias páginas em todo o site. Além disso, são fotos grandes e ocupam muito espaço na tela. Além disso, imagens maiores sobrecarregam significativamente o servidor. Portanto, lembre-se de otimizar suas imagens de fundo para que seu site carregue rapidamente.

Você tem duas opções aqui:

• Otimize as imagens de fundo (e todas as fotos do seu site) antes de carregá-las no servidor. Você pode concluir este processo manual com a ajuda de ferramentas como Photoshop, GIMP e Pixlr.
• Automatize o processo de otimização instalando um plugin WordPress que redimensiona e reduz as imagens no upload.

Pensamentos finais

Adicionar imagens de plano de fundo do WordPress ao seu site pode parecer uma coisa pequena. Mas se for bem feito, pode ter um impacto enorme.

Além disso, pode ajudar a manter sua presença online atualizada. Portanto, seus visitantes não ficam entediados vendo as mesmas fotos repetidamente.

Idealmente, use o WordPress Customizer para adicionar uma imagem de plano de fundo sempre que possível, pois ele foi projetado especificamente para funcionar conforme o esperado.

No entanto, você também tem outras opções para adicionar e alterar as imagens de fundo do WordPress, como mostramos acima.

Agora, vá em frente e seja criativo com o plano de fundo do seu site para envolver seus visitantes visualmente.