Como adicionar uma imagem de fundo no WordPress

Imagens de fundo podem ajudar muito tornar seu site mais atraente para seus visitantes. Mais atraentes do que um fundo monocromático, eles podem ilustrar um ponto que você está defendendo ou definir o clima para todo o seu site.

Neste tutorial, mostraremos várias maneiras de adicionar uma imagem de fundo no WordPress. Isso é o que discutiremos:

  • Como adicionar uma imagem de fundo usando as configurações do tema
  • Como adicionar uma imagem de fundo usando CSS
  • Como adicionar um plano de fundo a seções específicas de conteúdo

Mas antes de começar, devemos ter em mente que não é possível dar uma resposta única e definitiva sobre como adicionar uma imagem de fundo no WordPress, devido a muitos fatores que afetam o design geral e a aparência de uma página da web. O tema, acima de tudo, dita a capacidade ou impossibilidade de adicionar uma imagem de fundo a partes ou a toda a página. Fornecemos três maneiras diferentes, mas nem todas funcionam ou podem funcionar de maneira diferente dependendo do tema que você está usando. Até mesmo o termo “histórico” pode se relacionar a diferentes áreas de diferentes tópicos. Mesmo assim, continue lendo, pois um desses métodos pode ser exatamente o que você precisa.

Como adicionar uma imagem de fundo usando as configurações do tema

Este pode ser um bom momento para destacar que imagens grandes e de alta qualidade tendem a diminuir o tempo de carregamento. Ainda assim, existem coisas que você pode fazer para otimizar suas imagens e torná-las o mais fáceis de carregar possível. Se você estiver criando um site com a velocidade de carregamento em mente, também abordamos planos de fundo repetidos (lado a lado).

Se o seu tema tem um configuração de fundoComo muitos temas populares fazem hoje, você pode usá-lo para definir sua imagem de fundo. A maioria dos temas que possuem essa funcionalidade funcionam da mesma maneira. Usamos o tema padrão do WordPress Twenty Twenty.

Personalização de aparência

Então você quer o Imagem de fundo submenu no lado esquerdo da tela.

Submenu de imagem de fundo

Clicar nele o levará para Selecione a imagem botão. Você pode adicionar uma imagem de plano de fundo de sua biblioteca de mídia ou pode carregar uma. Selecionamos um de nossa biblioteca multimídia.

Botão Selecionar imagem

E aí está, agora você mudou seu plano de fundo.

Fundo

O tema Twenty Twenty que estamos usando nos dá algumas opções aqui. Você pode usar uma imagem que pode ser ladrilhada (repetida), como nossa folhinha verde ali, ou pode usar uma única imagem como plano de fundo.

Nesse caso, você precisará de imagens de alta definição para o seu site que ocuparão toda a largura da sua página, mas podem demorar muito para carregar e podem levar a experiências ruins do usuário. Depende de você descobrir quais imagens e configurações funcionam para o seu tema e o estilo do seu site.

Sin embargo, tenga en cuenta que, si bien muchos temas tienen la opción de agregar una imagen de fondo de esta manera, la mayoría no lo hace, por lo que es posible que deba recurrir a uno de los otros dos métodos que hemos descrito en este artigo.

Como adicionar uma imagem de fundo usando CSS

Se você for um usuário mais prático, também tem a opção de mude seu css para definir uma imagem de fundo para postagens individuais, mas também categorias, autores e outras classes CSS.

Você pode alterar o plano de fundo de uma categoria ou de todo o site usando o personalizador de tema. Navegue até ele a partir do painel do WordPress clicando em Aparência> Personalizar.

Personalização de aparência

Uma vez lá, abra o CSS Adicional seção.

Abra a seção CSS adicional

Você precisará adicionar algumas linhas de código ao campo CSS para adicionar uma imagem de fundo. Para alterar o plano de fundo de todo o site, use este código:

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

Obviamente, você precisará substituir XXX pelo URL da imagem que deseja usar. Selecionamos um de nossa biblioteca multimídia.

Como adicionar uma imagem de fundo usando CSS
body.category-YYY {
background-image: url("XXX");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

Conforme declarado acima, você precisará alterar XXX para um URL de imagem válido, ao mesmo tempo, alterar YYY para uma categoria válida.

E isso é tudo que há para fazer!

Como adicionar um plano de fundo a seções específicas de conteúdo

Agora, como sempre, nossa sugestão é usar a funcionalidade de um tema sempre que puder, pois está testado para funcionar. No entanto, se um tema que você está usando não tem a funcionalidade necessária, você provavelmente pode encontrar um plugin É verdade. Nosso complemento de escolha é Planos de fundo WordPress avançados. Depois de instalar e ativar o plugin, você receberá um bloco Gutenberg especial que pode ser usado para definir um plano de fundo dinâmico.

Este plugin funciona principalmente configurando uma espécie de metabloco, que atua como um fundo e que você precisa completar com outro bloco ou blocos.

Mostraremos como fazer isso em uma postagem.

Primeiro, criaremos uma postagem de nosso painel WordPress selecionando Postagem> Adicionar Novo. Depois de escrever o título e preenchê-lo com blocos de dois parágrafos, clicaremos em Enter após o primeiro parágrafo e, em seguida, clicaremos no mais assine e adicione um Fundo quadra.

Bloco Inferior

Agora você precisa configurar o bloco. A configuração padrão é Cor, que é um bloco simples de cor que você pode escolher se quiser um plano de fundo monocromático. Outra opção interessante é o Vídeo fundo. Você pode usar este plugin para definir um fundo de vídeo, seja em looping ou single play, e você nem precisa hospedá-lo em seu site – o plugin suporta vídeos hospedados no YouTube e Vimeo. Para esta demonstração, no entanto, estamos principalmente preocupados com o Foto fundo.

Selecione a imagem

Feito isso, você descobrirá que a imagem ocupou parte do plano de fundo. No lado direito, você encontrará opções de paralaxe e espaçamento que você pode usar se quiser que seu site pareça um pouco mais dinâmico. No topo, você encontrará os controles de posição. Você pode selecionar qual parte da imagem será exibida com base na posição do indicador nos eixos. O padrão (50% horizontal e 50% vertical) é onde o deixaremos agora, bem no meio da imagem.

Configurações de imagem

Agora, precisaremos adicionar o conteúdo para o qual esta imagem será o plano de fundo. Para fazer isso, basta clicar no mais Cadastre-se no meio do bloco de fundo. Optaremos por um bloco de parágrafo, mas você pode escolher o bloco que deseja. Uma citação ou título, por exemplo, pode ficar bem em um fundo de paralaxe.

Adicionar bloco de parágrafo

Colamos nosso texto e mudamos sua cor na guia de configurações de bloco para branco, para melhor compensá-lo com o fundo. E é isso mesmo.

Colar texto

Agora, clicando no botão de visualização, podemos ver o plugin em ação.

Imagem de visualização

E agora você pode adicionar qualquer tipo de plano de fundo que desejar a qualquer seção de conteúdo individual de seu site que deseja enfatizar.

Em conclusão

Uma imagem de plano de fundo pode realmente fazer seu site se destacar para os usuários como uma grande agulha brilhante em um palheiro sem graça. No entanto, isso tem um custo – você provavelmente precisará armazenar mídia de grande formato e afetará negativamente os tempos de carregamento. Ainda assim, gráficos lindos ainda são a melhor maneira de causar uma primeira impressão duradoura, e os usuários da Internet esperam um design profissional e atraente. O plano de fundo é provavelmente o maior elemento gráfico nas telas dos visitantes. Se você pode aumentar o tempo de carregamento, por que não tornar a experiência dos visitantes visualmente interessante? Portanto, quer você faça isso usando as configurações nativas do seu tema, um plugin ou CSS, agora você sabe como fazê-lo.

Compartilhe este Link:

Compartilhar no facebook
Compartilhar no twitter
Compartilhar no linkedin
Compartilhar no pinterest
Compartilhar no email
Compartilhar no whatsapp
Compartilhar no telegram

Deixe um comentário

Receba nossos preços
e condções direto no seu email

Por favor, preencha os campos abaixo:

Preferência de contato: