Descubra como manipular os backgrounds do seu site. Neste post, ensinamos como colocar imagem de fundo no WordPress.
As imagens de fundo são uma excelente alternativa para dar um visual mais elaborado ao criar seu site. Afinal, com a escolha certa, a aparência pode atrair mais seus usuários, trazendo uma experiência prazerosa.
Por sua vez, o WordPress é uma plataforma que possibilita essa alteração de maneira fácil, prática e diversificada.
Nesse artigo, abordaremos o que é a imagem de fundo no WordPress. Também falaremos sobre as maneiras de fazer essa mudança, incluindo recomendação de plugins e mais. Continue lendo e confira!
Índice
O que é imagem de fundo do WordPress?
A imagem de fundo do WordPress é uma técnica utilizada para incluir imagens atrás dos elementos de texto em um site. Ela funciona como um papel de parede, semelhante àqueles que incluímos no computador ou smartphone e deixam o site com uma aparência personalizada.
Como colocar uma imagem de fundo no WordPress?
Incluir uma imagem de fundo com o WordPress é muito simples. Você pode fazer isso usando configurações básicas do tema escolhido, utilizando um plug-in ou o CSS Hero. Vamos falar de cada um deles!
Usando as configurações de tema do WordPress
Para começar, vamos ver como incluir uma imagem de fundo utilizando uma das funções mais básicas do WordPress: configurações de tema.
Passo 1 – Faça login no painel administrativo do WordPress e acesse as configurações de tema:
No painel do WordPress, vá para “Aparência” e clique em “Personalizar”. Isso abrirá o Personalizador do tema.
Passo 2: Encontre as opções de personalização de fundo:
Dentro do Personalizador, procure por uma seção ou opção que se refere ao design ou estilo do seu tema. Dependendo do tema utilizado, isso pode variar. Porém, geralmente você encontrará uma opção chamada “cores e fundos” ou “imagens de fundos”.
Passo 2 – Estilize a sua página com uma imagem:
As edições que você pode fazer também dependem do tema. No geral, elas variam entre a escolha de uma cor padrão e fazer o upload de uma imagem. Para isso, basta selecionar do banco de imagens do próprio WordPress ou do seu computador.
Passo 3 – Ajuste as configurações:
Dependendo das opções do tema, você pode ajustar configurações como posição da imagem, repetição, tamanho e outras propriedades. Experimente diferentes configurações para ver como a imagem de fundo se adapta melhor ao seu site.
Passo 4 – Pré-visualize e publique:
Antes de aplicar as alterações, sempre pré-visualize-as para ver como ficará o seu site com a nova imagem de fundo. Quando estiver satisfeito com o resultado, clique em “Publicar” para aplicar as alterações ao seu site.
Usando o plugin CSS Hero
O plugin CSS Hero é uma ferramenta poderosa para personalizar o design do seu site WordPress. A melhor parte: sem a necessidade de escrever código CSS manualmente. Aqui está um guia passo a passo para usar o plugin CSS Hero para adicionar uma imagem de fundo:
Passo 1 – Instale e ative o plugin CSS Hero
Primeiro, você precisa instalar e ativar o plugin CSS Hero no seu site WordPress. Você pode encontrar o plugin CSS Hero no diretório de plugins do WordPress ou baixá-lo no site oficial e instalá-lo manualmente.
Passo 2 – Personalize o seu site com CSS Hero
Após ativar o plugin, você verá um botão “Customize with CSS Hero” em seu painel do WordPress. Clique nele para abrir o CSS Hero e começar a personalizar o design do seu site.
Passo 3 – Selecione o elemento que deseja estilizar
Com o CSS Hero aberto, navegue pelo seu site e selecione o elemento ao qual deseja adicionar a imagem de fundo. Por exemplo, você pode querer adicionar a imagem de fundo ao corpo do site, ao cabeçalho ou a qualquer outro elemento específico.
Passo 4 – Adicione o código CSS para a imagem de fundo
Com o elemento selecionado, vá para a guia “Background” (Fundo) no painel do CSS Hero. Lá, você encontrará opções para adicionar uma imagem de fundo. Você pode carregar uma imagem do seu computador ou inserir a URL da imagem.
Passo 5 – Ajuste as configurações conforme necessário
Depois de adicionar a imagem de fundo, você pode ajustar várias configurações. Dentre elas, temos posição da imagem, repetição, tamanho e outras propriedades CSS relacionadas ao fundo.
Passo 6 – Visualize e aplique as alterações
Antes de aplicar as alterações ao seu site, sempre pré-visualize-as usando a opção de pré-visualização no CSS Hero. Certifique-se de que a imagem de fundo esteja exatamente como você deseja.
Passo 7 – Salve as alterações
Quando estiver satisfeito com a imagem de fundo, clique em salvar no CSS Hero para aplicar as alterações ao seu site WordPress.
O que considerar ao adicionar uma imagem de fundo no WordPress?
Como qualquer modificação em um site, é crucial considerar diversos aspectos para garantir uma experiência positiva para os visitantes do seu site. Pensar na navegação, na aparência estética, na no peso e na otimização das imagens, entre outros fatores, é extremamente importante.
Pensando nisso, vejamos abaixo o que considerar ao adicionar uma imagem de fundo no wordpress.
Use imagens de boa qualidade
Você já entrou em uma página na web e se deparou com imagens pixeladas, ou com uma aparência nada agradável? Essa é uma experiência que nenhum usuário gostaria de passar ao entrar em um site.
Aquele ditado “uma imagem fala mais que mil palavras”, pode ser aplicada muito bem aqui. O seu conteúdo pode estar ótimo, e as informações contidas na página também. Porém, se o fundo da sua página é uma imagem desagradável, isso provavelmente irá atrapalhar a experiência do usuário.
Por isso, certifique-se de escolher imagens de alta qualidade e resolução adequada. Dessa forma, você evita que elas pareçam pixelizadas ou distorcidas quando aplicadas como fundo. Além disso, imagens nítidas e de alta resolução contribuem para uma aparência profissional do seu site.
Dimensione as imagens corretamente
Quando falamos de performance de um site, tratamos sobre um conceito chamado Core Web Vitals. Ele é um conjunto de regras com o objetivo de tornar a experiência do usuário mais agradável, leve e confortável durante a navegação.
Uma dessas métricas é o CLS (Cumulative Layout Shift ou, em português, Mudança Cumulativa de Layout). Essa métrica fala sobre a estabilidade da página, considerando todos os seus elementos. Além disso, é um forte indicador que nos ajuda a entender se nossas imagens estão bem dimensionadas.
Quando usamos imagens com dimensões muito grandes, por exemplo, pode acontecer de algum campo da página ficar distorcido. Você já entrou em uma página pelo celular e precisou rolar ela para os lados para conseguir ler um conteúdo? Esse é um dos problemas básicos que podem atrapalhar a estabilidade de uma página.
Nesse sentido, ajuste as dimensões da imagem de acordo com as especificações do seu tema e do dispositivo dos usuários. Imagens muito grandes podem aumentar o tempo de carregamento do site. Já imagens muito pequenas podem parecer esticadas ou distorcidas em dispositivos de alta resolução.
Otimize as imagens antes de publicá-las
O tamanho da imagem também se relaciona com outra métrica do Web Core Vitals, o LCP (Largest Contentful Paint). Essa é uma métrica que avalia quanto tempo demora para que o maior conteúdo de uma página seja carregado completamente.
A probabilidade de uma imagem de fundo ser o maior elemento visual da página, é grande. Sendo assim, alguns fatores podem fazer com que essa imagem fique muito pesada e demore para carregar. Como:
1 – Ajustes as dimensões da imagem
Imagens com proporções muito grandes, como por exemplo 10.000px por 10.000px, são gigantescas. A não ser que você vá imprimi-las para um outdoor ou editorial, não tem necessidade de um tamanho tão grande.
A recomendação é que para sites em desktop, as imagens tenham até 1900 px de largura. Já para mobile, algo em torno de 450 px de largura. Dimensões muito maiores que isso, prejudicará tanto o CLS, como aumentará o peso da imagem sem necessidade.
2 – Use o formato para WebP ou JPG
Alguns formatos de imagem são mais pesados do que outros. Formatos como PNG, TIFF e GIF são muito mais pesados do que JPG. O recomendado é que as imagens sejam ou de formato JPG ou WebP, sendo o WebP o ideal.
Utilizamos formatos como PNG apenas para itens que possuam necessidade de fundo transparente, como logotipos. Se você quiser fazer uso de uma “imagem móvel”, como o GIF, é preferível utilizar vídeos curtos embedado do youtube, por exemplo.
3 – Comprima a imagem
Faz todas as mudanças necessárias e ainda assim a imagem ficou pesada? É possível usar ferramentas de compressão ou fazer a remoção de meta dados desnecessários.
Existem várias ferramentas de compressão, mas é preciso tomar cuidado. Essas ferramentas podem remover a qualidade da imagem em alguns casos. Sendo assim, use uma ferramenta de confiança e sempre faça o teste para conferir se está tudo certo!
Uma dica extra: algumas pessoas fazem a compressão da imagem sem diminuir suas dimensões ou modificar seu formato. Siga sempre esse passo a passo:
- Confira as dimensões para o tipo de tela específico,
- Ajuste o formato para WebP pu JPG,
- E por fim, se necessário, comprima a imagem.
Verifique se o seu tema suporta essa opção
Esse é um ponto muito importante, pois nem todos os temas do WordPress oferecem suporte para imagens de fundo. Antes de decidir usar uma imagem de fundo, verifique se o seu tema inclui essa função. Além disso, veja se oferece opções de personalização adequadas para ajustar a imagem conforme necessário.
Esse tema também deve respeitar as otimizações de performance. Lembre-se: não deixe as imagens deixarem o seu site muito pesado e com carregamento lento!
Fique atento aos direitos de imagem
O direito de imagem é protegido pelo artigo 5º da Constituição Federal do Brasil. Procurar uma imagem no Google e utilizá-la no seu site sem permissão pode gerar muitos problemas para você e seu negócio. Então fique atento.
Certifique-se de que você tem permissão para usar a imagem de fundo escolhida no seu site. Evite violar direitos autorais ou utilizar imagens protegidas sem autorização adequada. Prefira bancos de imagens gratuitos ou pagos, ou crie suas próprias imagens para evitar problemas legais no futuro.
Melhores plugins para adicionar imagem de fundo no WordPress
Para quem prefere usar plugins para adicionar as imagens, vamos deixar a indicação de alguns:
Simple Full Screen Background Image
Este plugin permite adicionar facilmente uma imagem de fundo em tela cheia ao seu site WordPress. Ele oferece opções simples de configuração, além de suportar imagens de alta resolução. Isso garante uma experiência visualmente impressionante para os visitantes do seu site.
Advanced WordPress Backgrounds
O Advanced WordPress Backgrounds é um plugin robusto que oferece uma variedade de recursos avançados para personalizar imagens de fundo no seu site.
Ele permite adicionar imagens de fundo em diferentes áreas do seu site, como cabeçalho, corpo e rodapé. Além disso, oferecer opções avançadas de dimensão, repetição e posição da imagem.
Perfect Images + Retina
O Perfect Imagens + Retina é ideal para quem busca otimizar imagens de fundo para dispositivos de alta resolução, como telas Retina. Ele oferece recursos avançados de otimização de imagem e suporte para imagens em alta resolução. Dessa forma, garante que suas imagens de fundo sejam exibidas com a melhor qualidade possível em todos os dispositivos.
Conclusão
Nesse conteúdo, você pode conhecer algumas formas de estilizar seu site com o wordpress, utilizando imagens de fundo. Além de entender a forma padrão, descobriu também algumas dicas de plugins que conseguem nos ajudar com isso. Que tal colocar em prática e deixar o seu site ainda mais personalizado?
Aproveite e confira mais conteúdos que ajudarão você na sua presença online: