Imagens de Fundo do WordPress: Como Adicionar, editar e Personalizá-las

As imagens de fundo WordPress vêm em todas as formas. Você pode carregar uma imagem de fundo para todo o seu site, colocá-la atrás de botões, ou definir uma cor de fundo sólida para sua página de login. Independentemente de onde você queira colocá-las, é essencial entender o básico para carregar uma imagem, incluindo uma imagem de fundo.

Este artigo explica o que é uma imagem de fundo e como você pode editá-la para um melhor resultado. Cobriremos também como obter rapidamente imagens de fundo ativadas em seu site e resolver quaisquer problemas que possam ocorrer ao longo do caminho.

Entusiasmado? Vamos começar!

Confira nosso guia em vídeo para adicionar imagens de fundo no WordPress:

O que é uma imagem de fundo do WordPress?

Uma imagem de fundo WordPress serve como fundo completo do seu site. Também é chamada de fundo personalizado.

Um fundo também pode ser uma cor sólida.

Independentemente da opção escolhida, o arquivo functions.php trata a imagem de fundo em um tema WordPress. Ela também é exibida pelo arquivo header.php do WordPress.

Como resultado, os desenvolvedores de temas têm maior controle sobre se o recurso de fundo personalizado é ativado ou não para seu tema WordPress. Você ainda pode ativar ou desativar a funcionalidade, mas o tema do seu site normalmente dita as configurações padrão.

Há vários tipos de fundos que você pode implementar no WordPress. Você pode optar por um fundo padrão de site completo ou por um fundo que fica atrás de elementos específicos como barras laterais e artigos.

Fundos personalizados também são possíveis para locais mais específicos no site WordPress:

• Atrás de uma página WordPress ou artigo
• Em uma página da categoria WordPress
• Dentro de um bloco de conteúdo para uma página ou artigo
• Na página de Login
• Atrás do menu de navegação
• Nas páginas de manutenção ou em breve

Em geral, se o suporte de fundo personalizado for ativado em um tema, o usuário tem a capacidade de carregar uma imagem ou escolher uma cor para preencher a totalidade do fundo do site.

As configurações estão localizadas no painel do WordPress em Aparência > Personalizar > Imagem de fundo. Entretanto, outros tipos de fundo são possíveis através de construtores de páginas de arrastar e soltar, plugins e diferentes opções.

O carregamento de uma imagem de fundo no painel de instrumentos é apenas parte do processo. Depois disso, você precisa configurar as configurações da imagem de fundo. Algumas vezes é possível deixar as configurações como estão, enquanto outras vezes é importante reconfigurar as configurações para garantir que a imagem pareça excelente.

As configurações para uma imagem de fundo do WordPress incluem:

• Cores de fundo
• Dimensionamento
• Posição da imagem
• Se a imagem deve ou não se repetir
• Opções para preencher a tela ou esticar a imagem

Cobriremos primeiro as melhores práticas ao usar imagens de fundo do WordPress. Em seguida, vamos entrar em como definir uma imagem de fundo do WordPress em várias situações.

Os diversos estilos de fundo

Uma vantagem real de um fundo WordPress é que nem todas são imagens estáticas. Você pode se deparar com vários tipos de fundos, desde vídeos a padrões fotográficos a apresentações de slides.

Muitas vezes você é capaz de implementar fundos únicos com a ajuda de CSS personalizados ou plugins (ou ambos). Mostramos os dois métodos neste artigo.

Aqui estão alguns estilos de fundo a serem considerados:

• Imagens de fundo padrão: Estas são imagens estáticas (PNG, JPG, e outros formatos de imagem) que se estendem sobre a maioria do espaço do site e se situam atrás do conteúdo principal. Seus benefícios incluem simplicidade, opções para fotos de alta resolução e suporte padrão pelo WordPress Core. As desvantagens vão desde sua tendência a mexer com a visibilidade dos elementos em primeiro plano até uma imagem grande e de alta resolução que torna seu site mais lento.
• Fundos de cores sólidas: A imagem de fundo colorida sólida vem a calhar quando você quer adicionar alguma vibração ao seu site, mas não tem uma imagem que se encaixe na sua marca ou que pareça boa como fundo. O fundo colorido também apresenta uma imagem mais limpa, mais profissional, e não demora muito para ser implementada. Eles são ótimos para combinar com sua marca sem precisar de código personalizado ou de um plugin.
• Antecedentes gradientes: Uma transição de fundo de gradiente de uma cor para outra. É mais atraente visualmente do que uma cor sólida, não leva muito tempo para adicionar, e você pode adicionar um com muitos plugins. A principal desvantagem é que um primeiro plano pode aparecer bem em uma extremidade do gradiente, mas não na outra.
• Padrão ou Fundos de Textura: Todos os fundos de padrões e texturas são fotos, mas focalizam itens repetitivos na imagem ou uma textura de grande plano, como um painel de madeira ou um pedaço de grama. A parte boa de um padrão ou textura é que ele funciona como fundo, vendo como você pode esticá-lo, e a maioria das pessoas não notará se houver uma quebra no padrão quando a imagem não for suficientemente grande.
• Fundos de Slideshow de imagens: Um fundo de slideshow de imagem permite que os proprietários do site compartilhem vários tipos de desenhos ou fotos no fundo, aumentando os esforços para ajustar o ambiente quando um cliente percorre seu site. No entanto, os slideshows podem ser uma forma de distrair ou diminuir a velocidade do seu site.
• Antecedentes dos vídeos: Os fundos de vídeo são envolventes, divertidos de assistir e fáceis de retratar a natureza de sua marca. Entretanto, eles também levam a problemas de desempenho se não forem feitos corretamente e podem desviar a atenção do seu funil de vendas. Além disso, os vídeos de fundo devem ter as dimensões perfeitas e ser reproduzidos nos momentos certos. Eles também podem ficar caros para fazer, a menos que você opte por vídeos de estoque gratuitos.

Melhores práticas para o uso de imagens de fundo do WordPress

Definir uma imagem de fundo personalizada parece ser uma tarefa fácil. Basta carregar a imagem no local certo e vê-la aparecer no frontend, certo?

Na maioria das vezes, esse é o caso, mas outras vezes você verá que a imagem de fundo pode ser um pouco problemática. É por isso que recomendamos seguir as melhores práticas para imagens de fundo do WordPress a fim de eliminar o maior número possível de problemas.

Dicas para usar imagens de fundo do WordPress

Fique com imagens de alta qualidade

A resolução de sua imagem de fundo pretendida muitas vezes faz ou quebra sua apresentação. Você pode pensar que uma imagem que você tirou com seu smartphone é perfeita para uma imagem de fundo, mas as chances são de que ela precise ser de qualidade muito maior.

Você pode pagar por uma imagem livre de royalties a partir de um site como o Shutterstock. Esses sites normalmente têm imagens de nível profissional que são preparadas e prontas para serem carregadas como uma grande imagem de fundo. Você também pode encontrar muitas delas em sites de imagens de estoque grátis.

A imagem de fundo pode não ser exibida em sua totalidade em seu website, pois grande parte dela é coberta pelo conteúdo. Mesmo assim, a imagem real é exibida em toda a tela.

Se você não usar uma imagem de alta qualidade, você corre o risco de ver um fundo esticado.

Certifique-se de que as imagens de fundo estão dimensionadas corretamente

Junto com a resolução da imagem, o tamanho físico da imagem é muito importante.

Todas as telas têm diferentes proporções de aspecto. E os dispositivos móveis o tornam ainda mais complicado. Mas o objetivo é usar uma imagem que pareça ótima para a maior das telas. Caso contrário, corre-se o risco de ter mais uma vez a imagem esticada ou não exibida corretamente.

Em geral, uma boa regra é ficar com um tamanho mínimo de imagem de fundo WordPress de 1024 x 768 pixels. Entretanto, outros especialistas recomendam algo mais como 1920 x 1080 pixels. Em geral, seu melhor curso de ação é ficar entre 1000 e 3000 pixels para a largura, dependendo de onde ela é exibida.

O próximo fator a ser considerado é a relação de aspecto. A imagem de fundo cobre um site inteiro, ou é apenas o quarto superior?

Tecnicamente, um website tem uma relação de aspecto retrato (maior altura do que largura). Assim, você pode olhar para esses tipos de imagens. Entretanto, fundos seccionais – como os de cabeçalhos ou banners de anúncios – devem permanecer na formatação da paisagem (largura maior que a altura).

Além disso, a relação de aspecto mais comum para desktops hoje em dia é de 16:9. Permanecer em torno desse objetivo ajuda. Um tema ou plugin responsivo pode ajustar a imagem de fundo automaticamente para visualização móvel.

Em última análise, testar suas imagens de fundo em um site real e vários tipos de dispositivos deve tornar a decisão final muito mais fácil.

Otimizar antes de fazer uma imagem de fundo para WordPress

Como em todas as imagens carregadas no WordPress, você mesmo está prestando um mau serviço se não as otimizar antes de publicar na Internet. Isto é particularmente importante para as imagens de fundo, uma vez que elas freqüentemente aparecem em várias páginas do seu site. Além disso, elas são fotos grandes e cobrem uma quantidade significativa de espaço na tela.

Imagens maiores colocam uma quantidade significativa de tensão em seu servidor. Mantenha a resolução de sua imagem, mas otimize seu tamanho para que seu site seja carregado rapidamente.

Você tem duas opções para otimizar as fotos:

1. Otimize as imagens de fundo (e todas as imagens do site) antes de carregá-las para o WordPress. Complete este processo manual com a ajuda de ferramentas como Photoshop Express, GIMP, e Pixlr.
2. Automatize o processo de otimização instalando um plugin WordPress que redimensiona e encolhe as fotos após o upload.

Leia nosso guia detalhado de otimização de imagem sobre como otimizar imagens para melhorar o desempenho da web.

Verifique o suporte de fundo antes de instalar um tema

Infelizmente, nem todos os temas suportam imagens de fundo personalizadas. Isso é freqüentemente porque o fundo não se encaixa no design geral do tema, então o desenvolvedor optou por desligá-lo completamente.

No entanto, se você realmente quer um histórico em seu site, é prudente verificar a lista de recursos ao baixar um novo tema, especialmente se você planeja pagar por um tema premium. Muitos sites de venda de temas oferecem informações sobre se um tema suporta ou não fundos.

Por exemplo, os temas listados na Biblioteca de Temas do WordPress indicam suporte para fundos personalizados como tags. Você também pode encontrar uma referência a um fundo personalizado na descrição do tema.

Outros sites temáticos normalmente incluem informações similares sobre imagens de fundo personalizadas. Caso contrário, procure o desenvolvedor para descobrir se é possível de alguma forma e se a anulação do bloco de imagens de fundo (coberto abaixo) causará qualquer problema com o tema.

Considere o uso de um criador de páginas visuais para facilitar a criação de imagens de fundo

Construtores de páginas como Gutenberg, WPBakery, Divi e Elementor, oferecem listas impressionantes de blocos e módulos para inserir elementos como imagens e caixas de texto em qualquer lugar em uma página da web.

Sem um construtor de arrastar e soltar, torna-se um pouco mais difícil configurar uma imagem de fundo. É especialmente difícil tentar resolver qualquer problema que você possa encontrar.

Os construtores de páginas também tendem a substituir a funcionalidade padrão de imagem de fundo fornecida através do WordPress. Você pode substituir as restrições temáticas ou qualquer elemento que falte que ajude a exibir uma imagem de fundo no código.

Tenha certeza de que sua imagem de fundo é legal

A legalidade sempre surge quando se fala de imagens, especialmente aquelas publicadas na internet. Há uma tendência crescente nas mídias sociais onde as pessoas parecem assumir que adicionar um crédito a uma foto automaticamente faz com que seja correto usar essa foto.

Isso é falso.

Quem tirar a foto é o proprietário. Mesmo que essa imagem venha de uma rápida foto do iPhone – eles têm imediatamente proteção de direitos autorais para essa foto nos Estados Unidos e em muitos outros países.

Se você quiser os direitos legais para usar a foto de outra pessoa, seria necessária uma declaração por escrito do detentor dos direitos autorais permitindo que você use suas imagens – um simples e-mail faz o truque. Mesmo assim, você pode ter que atribuir a foto se a pessoa lhe pedir.

Temos um guia abrangente sobre a proteção de imagens em seu site, mas o artigo também esboça informações valiosas para aqueles interessados em utilizar fotos de outras fontes.

A parte difícil das imagens de fundo é que normalmente não é prático adicionar atribuição, vendo como o WordPress não tem lugar para incorporar uma legenda visível para as imagens de fundo. E não, você não pode adicionar a atribuição em um artigo ou página aleatória do blog e esperar que isso sirva como crédito para uma imagem de fundo completa do site.

Para se proteger e respeitar aqueles que tiram as fotos, considere uma das seguintes opções ao adquirir uma imagem de fundo WordPress:

• Tire você mesmo a foto. Essa é a maneira mais fácil de garantir que você não está infringindo os direitos autorais de propriedade de ninguém.
• Pague por fotos em sites como Shutterstock e iStockPhoto. Estas às vezes são caras, mas para uma imagem de fundo, ela pode apenas espremer em seu orçamento.
• Considere um site de imagem gratuito como Unsplash ou Pexels. Entretanto, certifique-se de que a atribuição não seja necessária! Você pode ocasionalmente localizar imagens nestes sites onde a atribuição é sugerida, mas não é necessária.
• Entre em contato com o fotógrafo ou artista e pergunte se você pode usá-lo gratuitamente. Isto pode ser tudo o que você precisa, especialmente se você oferecer algo em troca.
• Pense em pular a imagem de fundo, ou considere ir para um fundo colorido em vez de uma foto.

Como faço para colocar uma imagem de fundo no WordPress?

Há várias maneiras de definir uma imagem de fundo no WordPress. Estes métodos geralmente mudam com base no local onde você quer colocar a imagem.

Por exemplo, você pode decidir que gostaria de ter uma imagem de fundo para permanecer a mesma em todo o seu website. Por outro lado, é possível que você prefira encontrar uma maneira de mostrar imagens de fundo únicas para todas as suas páginas.

Uma vez que existem tantas possibilidades, vamos cobrir como adicionar uma imagem de fundo ou cor às seções seguintes:

• O site inteiro
• Uma página WordPress
• Um artigo WordPress
• Um bloco de conteúdo individual
• O cabeçalho WordPress
• Uma página de arquivo da categoria
• A página de login do WordPress
• O menu de navegação
• Uma página de manutenção

Como adicionar uma imagem de fundo ao cabeçalho e aos menus do WordPress

Antes de começar: Ative o suporte de fundo personalizado no WordPress (se necessário)

Os desenvolvedores de temas decidem o destino das capacidades de fundo de um site. O WordPress tem a funcionalidade embutida no núcleo, mas um desenvolvedor de temas poderia desligá-lo, deixando-o sem a configuração do painel de controle para ligá-lo.

Se em algum ponto dos tutoriais a seguir você descobrir que seu tema é a razão pela qual você não tem uma opção de fundo personalizada, considere os seguintes passos para fazer uma correção rápida.

O principal suporte de fundo personalizado para WordPress é tratado pelo arquivo functions.php. Abra esse arquivo e insira o seguinte código, caso ele esteja faltando:

$defaults = array(
    'default-color'          => '',
    'default-image'          => '',
    'default-repeat'         => '',
    'default-position-x'     => '',
    'default-attachment'     => '',
    'wp-head-callback'       => '_custom_background_cb',
    'admin-head-callback'    => '',
    'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', $defaults );

Tenha em mente que o elemento que realmente ativa o suporte de fundo é a função add_theme_support() com tudo nele. Esse código ativa o recurso de fundo no painel do WordPress, que você pode usar em muitos dos tutoriais a seguir neste artigo.

Também é possível adicionar uma imagem de fundo padrão para o tema inteiro através do arquivo functions.php. Basta ir para a área do código anterior com o valor da default-image e adicionar a URL da imagem ao espaço em branco entre o ' ' depois do =>.

Esta é uma maneira rápida e fácil de ativar fundos personalizados dentro do painel de controle do WordPress.

Dito isto, recomendamos mudar o tema se ele não tiver apoio de fundo em primeiro lugar. A remoção do recurso de fundo personalizado poderia ter seu próprio propósito, ou talvez o desenvolvedor do tema tenha achado que estava causando muitos problemas com o projeto.

Como adicionar uma imagem de fundo ao seu site WordPress inteiro

Se seu tema oferece a capacidade de adicionar uma imagem de fundo personalizada (e muitos o fazem), isso torna muito mais fácil para você.

Para começar, vá até seu painel do WordPress e clique em Appearance > Customize.

Isso o leva ao WordPress Theme Customizer, com configurações de personalização à esquerda e uma visualização do site à direita.

Aqui, encontre e clique na guia Background.

Como alternativa, se você pode selecionar Aparência > Fundo, você pode usá-lo para uma rota mais direta para este cenário.

A área de personalização Background gerencia os elementos de fundo para todo o seu site.

Clique no botão Selecionar imagem para prosseguir.

Na janela Selecionar imagem, escolha uma imagem que sirva bem como fundo para o estilo de sua marca e website. Em geral, um padrão de cor neutra com uma tonalidade preta, ou branca, ou cinza geralmente ajuda a garantir que a maior parte do seu texto e conteúdo ainda fique bem com o fundo atrás dele.

Depois de selecionar sua imagem, clique no botão Escolher imagem para continuar.

O histórico que você implementou agora aparece na visualização do site.

Veja se seu conteúdo ainda se destaca e parece apresentável com a imagem escolhida. Às vezes você pode descobrir que precisa trocar completamente o fundo ou mudar coisas como texto ou cores de link.

Uma pequena miniatura do fundo também aparece no painel de configurações, mostrando que a imagem foi implementada.

Algumas configurações adicionais estão disponíveis para os fundos do WordPress, incluindo o campo Predefinido.

Clique no campo Preset para alterar a formatação da imagem utilizando desenhos e alinhamentos pré-definidos.

Você pode escolher entre as seguintes predefinições:

• Default: Normalmente é o mesmo que Repetir, mas pode depender do seu tema. A configuração Padrão geralmente funciona melhor, mas depende da imagem que está sendo usada.
• Tela de preenchimento: Esta configuração estica a imagem para garantir que todas as partes da tela fiquem cobertas, mesmo que isso signifique recortar a imagem, de modo que ela transborde da tela. Funciona bem para muitas imagens de alta resolução, mas pode causar embaçamento com imagens de baixa resolução.
• Adequado à tela: Isto mantém a relação de aspecto da foto original e tenta usar essa relação para se ajustar à imagem atual da tela. Faz um bom trabalho para manter a imagem próxima ao seu estado original, mas pode não cobrir toda a área de fundo.
• Repito: Isto usa partes da função Tela de preenchimento, expandindo e alongando a imagem, mas também repete a imagem quando ela não consegue cobrir toda a tela com sucesso. Para padrões, isto geralmente parece ótimo. Mas, para algumas imagens, ela pode produzir uma linha dura entre as imagens repetidas.
• Personalizado: Esta configuração lhe dá o maior controle sobre o fundo, oferecendo várias opções para personalizar o tamanho da imagem de fundo do WordPress, como por exemplo, como ela se repete na página, se estica, ou se move enquanto o usuário rola.

Não há nenhuma regra quanto a qual dos Presets funciona melhor porque as imagens vêm em tamanhos, resoluções e detalhes diferentes. Portanto, é melhor começar com a predefinição predefinida e depois testar cada uma das outras predefinições para ver qual delas parece melhor para sua imagem de fundo.

Se tudo mais falhar, vá para a configuração personalizada para ser realmente específico com suas escolhas.

A pré-configuração do Fit to Screen não o faz exatamente para esta imagem, principalmente porque a imagem original é muito mais longa do que é ampla, deixando uma quantidade significativa de espaço à direita. Eu poderia mudar a posição da imagem para o Centro, mas muito provavelmente deixaria espaço branco nos lados.

A próxima configuração a ser considerada é a ferramenta Image Position. Clique nas setas para mover sua imagem de fundo, ajustando a orientação para colocar o foco da imagem em direção ao centro ou preencher a tela.

Assim como a configuração Presets, a ferramenta Image Position requer um processo de adivinhação e verificação do seu trabalho, pois a imagem original e seu conteúdo ditam como ela se parece.

A seguir, há um campo de seleção para fazer a imagem de fundo Scroll with Page.

Com esta caixa marcada, a imagem de fundo se cola ao conteúdo em primeiro plano e rola junto com o usuário enquanto esta pessoa se move para cima ou para baixo na página.

Desmarcar essa caixa tende a mudar a orientação geral da imagem de fundo, mas sua característica dominante é dizer ao fundo para permanecer estático enquanto o usuário percorre a página.

Os itens de conteúdo em primeiro plano (como os produtos neste caso) deslizam sobre a imagem de fundo, criando um efeito atrativo.

Trabalhando com uma predefinição personalizada

Ao optar por algo além da predefinição personalizada, você não obtém tantas configurações adicionais para configurar.

No entanto, a escolha da predefinição personalizada abre vários outros campos a serem considerados.

Por exemplo, você pode optar por Preencher a Tela ou Ajustar à Tela, e depois combinar isso com uma imagem de fundo repetida ou não repetida, combinando os elementos predefinidos de antes. E você ainda tem a opção Scroll With Page.

Veja se é possível utilizar a imagem original sem nenhuma edição ou configuração. Às vezes a foto original é uma combinação quase perfeita para ser usada como fundo, então por que mexer com o que já está pronto para ir?

Entretanto, seu tamanho também pode ser grande demais para seu website, ou talvez a relação de aspecto não seja a mais adequada. Independentemente disso, sugerimos que experimente este ajuste para descobrir se é o mais adequado para você.

Uma vez que você decida sobre suas configurações de fundo perfeitas (para este tutorial, a opção Padrão parece agradável), clique no botão Publicar para renderizar as mudanças em seu website.

Vá para o frontend do seu site para ver o fundo em ação.

A página inicial é um lugar maravilhoso para se começar. Você notará que a área de cabeçalho e a imagem de boas-vindas não têm fundo. Isso porque a imagem de boas-vindas na parte superior do site já cobre toda a parte horizontal da tela como uma imagem de herói em tela cheia.

Quanto ao cabeçalho e menu, você aprenderá como configurar esses fundos em alguns dos tutoriais a seguir.

Tenha em mente que o fundo geral personalizado do WordPress é ativado em todas as páginas e artigos  do seu site. É uma característica global para aqueles que querem uma maneira rápida de marcar seu site e adicionar um pouco de flare.

Por exemplo, ir para a página Loja neste site revela o histórico por trás da seleção do produto.

Como definir uma cor de fundo ao invés de uma imagem para todo o seu site

O processo de ativar uma cor de fundo em todo o seu site não é muito diferente de quando você está ativando uma imagem de fundo. Comece indo para Appearance > Background no painel, depois procure o campo Background Color (Cor de fundo).

Clique no botão Selecionar Cor para abrir mais configurações para escolher e trocar diferentes cores para seu fundo.

O painel colorido oferece múltiplas opções para que você possa decidir sobre uma cor. A primeira é digitando, ou colando, um código de cor. Todas as cores têm códigos de cores únicos, e você pode encontrar essas cores e seus códigos associados com uma rápida busca na Internet.

A outra opção é clicar ao redor do painel colorido para encontrar a cor perfeita para o fundo. Eles têm até mesmo faixas de cores comuns em direção ao fundo do painel, se você preferir uma das cores mais simples.

Para ativar uma cor de fundo, certifique-se de que a cor seja selecionada e exibida na visualização Select Color.

Você deve ver o fundo colorido na visualização do WordPress Customizer. Caso contrário, isso provavelmente significa que você tem uma imagem de fundo instalada que está sobrepondo-se ao fundo colorido.

Tudo que você tem que fazer para revelar o fundo colorido é clicar no botão Remover por baixo da visualização da imagem de fundo.

Agora a cor aparece em todo o seu site, por trás do conteúdo. Muito como você faria com um fundo de imagem, é prudente olhar através do seu site para garantir que todos os textos, imagens e links ainda sejam visíveis com o novo fundo.

Como adicionar imagem de fundo à página do WordPress

Mas e se você quiser inserir uma imagem no WordPress para aparecer como um fundo em uma única página do WordPress? A seção anterior delineou as configurações globais para uma imagem de fundo em todo o site.

Confira nosso guia em vídeo para adicionar imagens de fundo para páginas únicas, artigos e blocos de conteúdo do WordPress

Muitas pessoas gostam de acrescentar fundos às suas páginas porque você pode incorporar um determinado tema ou sentir a uma página que se aplica ao conteúdo. Por exemplo, uma página About Us poderia ter um histórico de Los Angeles se a empresa estiver em Los Angeles. Ou uma introdução a um livro de autor poderia incluir um fundo que se enquadre no tema da história.

Nesta seção, vamos caminhar através de como adicionar uma imagem de fundo WordPress a uma página usando um método primário e algumas alternativas se você não se importar de gastar dinheiro em um plugin ou optando por um construtor de páginas.

Nota: Não importa se você usa o Gutenberg ou o Editor WordPress clássico.

Para fundos específicos de página, estes métodos parecem funcionar da melhor maneira:

• Adicionando um fundo de página único com CSS personalizado.
• Usando um plugin que permite fundos de página individuais.
• Incorporando um fundo personalizado em cada página com a ajuda de um construtor de páginas.

Adicionar seu próprio CSS personalizado a uma página envolve encontrar o ID de classe para aquela página e solicitar uma URL de fundo, dentro do módulo CSS personalizado, nas configurações da página do WordPress. Felizmente, não é tão difícil descobrir o ID de classe de uma página, considerando que podemos procurá-la, ou você já pode saber o que é.

Vá para a página em seu site onde você quer um fundo apenas para essa página.

Clique com o botão direito do mouse em qualquer lugar da página para revelar um menu suspenso em sua tela. Selecione a ferramenta Inspectar na parte inferior do menu suspenso.

O módulo Inspect exibe a codificação da própria página, juntamente com o CSS personalizado usado globalmente para seu website. É uma área útil para localizar informações sobre uma página ou publicação em seu site.

A caixa Inspect tem linhas de código da página, mas estamos interessados apenas na etiqueta de classe atribuída a esta página em particular. Para esclarecer, cada página do WordPress tem uma tag de classe como código de identificação.

Use a função de busca e digite no body ou class para localizar a linha de código com a tag page-id .

Neste caso, a identificação é page-id-352, mas a sua será diferente.

Você quer copiar a parte inteira do código com a palavra-chave page-id-# incluindo os traços.

Com o ID da página salvo em algum lugar para uso nas próximas etapas, volte ao seu painel do WordPress e clique em Appearance > Customize.

Selecione a guia CSS adicional no Customizer do WordPress.

Esta seção permite que você digite ou cole em qualquer CSS personalizado que você queira manipular itens em todo o seu website. Neste caso, é útil para sobrepor a imagem de fundo padrão e permitir uma imagem de fundo para uma página e não para as outras.

Cole o seguinte código no campo CSS adicional, mas lembre-se de substituir o “#” pelo número real que você puxou como o ID da página das etapas anteriores. Além disso, você deve colocar uma URL de imagem real no lugar do texto de preenchimento que temos ali (http://YOURIMAGEURL.jpeg).

body.page-id-# { 
background-image: url("http://YOURIMAGEURL.jpeg"); 
background-position: center center; 
background-size: cover; 
background-repeat: no-repeat; 
background-attachment: fixed;
}

Para este exemplo, a identificação da página é preenchida como 352, e temos uma URL de imagem de fundo colada de nossa Biblioteca de Mídia.

Se necessário, por favor, altere as configurações de fundo personalizadas se você tiver problemas para encaixar a imagem de fundo da tela. Por exemplo, você pode querer modificar elementos como o tamanho da imagem de fundo do WordPress, anexo, ou posição. Caso contrário, deixe-os todos como estão no código do exemplo.

Clique no botão Publicar quando você estiver satisfeito com o CSS personalizado.

Com esse CSS personalizado, a página especificada inclui uma imagem de fundo usando as configurações de tamanho e posicionamento do código. Nenhuma outra página em seu site mostrará o mesmo fundo, a menos que você repita o CSS para IDs de página diferentes.

Como mencionado anteriormente, suas outras opções para adicionar um fundo único a uma página do WordPress incluem o uso de um construtor de páginas ou um plugin que permite imagens de fundo em páginas individuais.

Entretanto, a maneira mais barata e rápida de colocar uma imagem de fundo em uma página individual é usar o método de código CSS mostrado acima.

Como adicionar imagem de fundo ao artigo WordPress

A maioria das imagens de fundo são inseridas atrás das páginas do WordPress ou em todas as páginas de um site.

O recurso padrão de fundo personalizado no WordPress não tem nada a ver com artigos individuais, além do fato de que este fundo também aparecerá para os artigos do blog. Isso não é ideal para todas as organizações porque diferentes artigos no blog podem ter tópicos drasticamente diferentes.

Tais blogs poderiam se beneficiar de suas próprias imagens de fundo exclusivas. Entretanto, os artigos do WordPress não têm sua própria configuração de imagem de fundo, o que o torna um pouco mais complicado.

Portanto, temos algumas opções a considerar ao adicionar uma imagem de fundo a um artigos (você notará que elas são as mesmas que quando se trabalha com imagens de fundo específicas de uma página):

• Inserir uma imagem de fundo usando CSS personalizado.
• Use um plugin para implementar um plano de fundo em artigos individuais.
• Instalar um construtor de páginas visuais para os fundos dos correios.

Como na seção anterior sobre fundos exclusivos de páginas, você pode adicionar um fundo pós específico usando um construtor de páginas ou um plugin.

Visto que a criação de um fundo pós específico não é muito diferente de uma página específica, abordaremos apenas brevemente as etapas para lidar com este processo para um artigo individual.

Ao usar o CSS personalizado para implementar um fundo pós específico, você usa o mesmo código que usaria para o fundo da página, com uma diferença: você deve encontrar o ID do artigo ao invés do ID da página.

Portanto, abra o frontend de um artigo do WordPress onde você gostaria de inserir um fundo.

Clique com o botão direito do mouse no artigo e escolha a opção Inspectar. Complete uma busca dentro do código para localizar a seção de classe do corpo no código. Procure a parte postid-# que é a identificação do artigo que você precisa inserir no CSS personalizado.

Você notará que a formatação da identificação do correio é ligeiramente diferente neste exemplo em comparação com a identificação da página, onde a etiqueta postid-# não tem um traço entre “post” e “id” como tem com o page-id-#. Além disso, estas não são regras difíceis. Você pode encontrar formatos variados para as tags.

Agora, vá para seu painel do WordPress e clique em Appearance > Customize. Navegue até a guia CSS adicional.

Colar o seguinte código nesse campo CSS personalizado:

body.postid-# { 
background-image: url("http://YOURIMAGEURL.jpeg"); 
background-position: center center; 
background-size: cover; 
background-repeat: no-repeat; 
background-attachment: fixed;
}

Depois disso, pegue o número de identificação do correio que você encontrou no correio desejado antes. Substitua o “#” no código do CSS pelo número. Além disso, altere o texto  http://YOURIMAGEURL.jpeg com a URL real da imagem de fundo que você gostaria de mostrar, mantendo as aspas em torno dele.

Certifique-se de pressionar o botão Publicar antes de sair da guia CSS adicional, pois isso economiza suas alterações no site e permite que você veja o fundo no frontend.

Com essas mudanças no CSS, você pode agora voltar ao frontend daquele artigo do blog WordPress para ver o novo fundo. Teste os outros artigos e páginas do blog em seu site para ver que nenhum dos outros tem um fundo, a menos que você implemente o mesmo código para aqueles IDs de artigos.

Como adicionar uma imagem de fundo a um bloco de conteúdo individual

Os blocos de conteúdo individuais do editor de blocos do WordPress Gutenberg permitem uma ampla gama de opções de exibição de conteúdo, incluindo caixas de texto, imagens e galerias.

Estes dividem seu conteúdo em seções separadas. Assim, você pode adicionar uma cor ou imagem de fundo apenas para aquele bloco.

Por exemplo, digamos que você esteja escrevendo um artigo no blog sobre o status da indústria de vestuário no varejo. Você quer terminar ou começar o artigo com uma chamada para que as pessoas se inscrevam em seu próximo webinar. Faria sentido ter esta seção se destacando usando uma cor ou imagem de fundo.

Infelizmente, o editor de blocos do WordPress não oferece uma configuração completa onde você pode adicionar um fundo a qualquer bloco. No entanto, alguns blocos têm a opção de incorporar um fundo colorido.

Há também um bloco, chamado de Cover block, que é a coisa mais próxima que podemos adicionar uma imagem de fundo para um bloco em um artigo ou página. A capa permite sobrepor texto e alguns itens de mídia, tornando-a adequada para nosso objetivo final.

Abaixo estão as técnicas a serem usadas para definir uma imagem ou fundo colorido para um bloco individual do WordPress..

Definição de um fundo de cor para um bloco

A maneira mais simples de acrescentar alguma vivacidade a um único bloco é adicionar um fundo colorido. Não é tão chique quanto um fundo de imagem, mas o fundo colorido é na verdade o único tipo de fundo no editor de blocos do WordPress disponível para os blocos padrão.

Nota: Alguns blocos não têm nenhuma configuração de fundo. Se este for o caso, é melhor usar um bloco de cobertura e sobrepor outros blocos em cima dele, como abordado mais abaixo neste artigo.

O bloco de parágrafos, por exemplo, tem um ajuste para ativar um fundo colorido.

Para ativá-lo, selecione o bloco e, em seguida, localize as Configurações de cores sob a guia Bloco, do lado direito.

Esta seção revela os campos de cor do texto e cor de fundo.

Vá para a área Cor de fundo e selecione uma cor da lista de opções disponíveis. Você também pode escolher o link Cor personalizada para inserir seu próprio código de cor ou escolher uma cor única.

Como você pode ver, uma vez que essa configuração esteja em vigor, o fundo do bloco de Parágrafo passa para uma cor diferente – neste caso, azul.

Adicionando um fundo de cor a qualquer bloco de WordPress

Como mencionado anteriormente, nem todos os blocos do WordPress têm este recurso de fundo incorporado. O que você deve fazer se quiser fazer uma galeria, ou algum outro elemento de bloco, que não ofereça a opção de fundo?

A solução mais rápida é usar o recurso de bloco de grupo no WordPress.

Para fazer isso, selecione vários blocos já em seu conteúdo. Para este exemplo, selecionarei simultaneamente um bloco de Parágrafo e um bloco de Galeria.

Clique no ícone do quadrado empilhado no menu que aparece.

Escolha a opção Grupo no menu suspenso.

Isto leva quaisquer blocos que você tenha selecionado atualmente e os combina em um grupo, permitindo movê-los ou editá-los todos juntos em vez de blocos separados.

Isto define o Grupo como seu próprio bloco. Isso significa que você pode ir até a guia Configurações de blocos, no lado direito da página, para encontrar suas configurações.

Procure a guia Configurações de cores e clique nela.

Muito parecido com um bloco de Parágrafo padrão, o bloco de Grupo também tem uma característica de Cor de Fundo.

Escolha a cor que você mais gosta para esta situação para ver que tudo dentro daquele grupo deve agora ter aquela cor de fundo.

O que é ótimo sobre o bloco Grupo é que ele pega outro bloco que não tem uma característica de fundo (como o bloco Galeria) e permite ativar um fundo para ele de qualquer maneira.

Adicionando um fundo de imagem a um bloco de WordPress

Os blocos WordPress estão em ambas as páginas e artigos. Portanto, podemos implementar esta tática em qualquer uma delas. Você pode inserir praticamente qualquer conteúdo acima do fundo do bloco agrupado – ou apenas em um bloco WordPress.

Para iniciar este processo, clique no botão Adicionar bloco ou no ícone “+” e procure o bloco de cobertura.

Escolha esse bloco para inseri-lo em seu correio ou página.

Em seguida, você deve clicar no botão Upload ou Select Media, que lhe permite pesquisar imagens que você pode usar como fundo.

Escolha a imagem desejada e clique no botão Selecionar.

Agora você pode ver essa imagem como o fundo para o bloco de cobertura.

Sinta-se à vontade para clicar nesse bloco para começar a digitar o conteúdo do parágrafo, pois a principal característica é a sobreposição de texto.

O que é ótimo no bloco de cobertura é que ele oferece várias opções de formatação, permitindo que você salte de um cabeçalho para um formato de parágrafo em segundos.

Para adicionar outros blocos em cima desse fundo, clique no botão do ícone “+” dentro do próprio bloco da tampa. Talvez você tenha que pressionar a tecla Enter uma vez para revelar o botão.

Assim como adicionar um bloco de conteúdo em um artigo regular, o bloco de capa permite percorrer todos os blocos de conteúdo em potencial no WordPress.

Isso significa que você pode colocar uma Imagem, Galeria, Colunas, ou qualquer tipo de bloco WordPress dentro do bloco de Capa, tornando-o a solução ideal para fundos de imagem com um bloco individual.

Para este exemplo, inseri uma imagem e formatei-a um pouco para que ela parecesse aceitável dentro do bloco da tampa.

Cada bloco que você coloca em frente ao fundo tem suas próprias configurações personalizadas na aba Bloco do lado direito, portanto, considere editá-las ao deixá-las cair no bloco da tampa.

Em algum momento, você pode querer editar ou personalizar a própria imagem de fundo. Se for esse o caso, escolha o bloco Cover, então vá para a aba Block Settings no lado direito da página.

Isto revela uma miríade de configurações para ajustar para a imagem de fundo, incluindo as seguintes:

• Antecedentes fixos
• Antecedentes repetidos
• Ponto Focal de Seleção
• Dimensões
• Sobreposição
• Opacidade
• Avançado

Um dos ajustes mais importantes a considerar é em direção ao fundo do painel de Ajustes de Bloco.

Desça para encontrar a seção Overlay. Abra a seção para revelar uma lista de sobreposições de cores e opções para tornar essas cores sólidas ou gradientes.

Esta é uma ótima opção para mudar ligeiramente sua cor de fundo para combinar com sua marca ou destacar seu conteúdo em primeiro plano. Você também pode ajustar a Opacidade para garantir que a sobreposição de cores não sobrecarregue totalmente o fundo.

Como alternativa, considere o plugin Stackable Page Builder Gutenberg Blocks para abrir ferramentas mais avançadas para fundos em blocos individuais.

Como colocar uma imagem de fundo por trás do cabeçalho do WordPress

Até agora, falamos sobre como adicionar uma imagem de fundo a todo o seu site WordPress, juntamente com métodos para fundos em áreas específicas como blocos, artigos e páginas do WordPress. Mas e quanto à área que contém seu menu e logotipo?

Às vezes, um fundo atrás de sua cabeça é tudo o que você precisa.

A definição de uma imagem de fundo para o cabeçalho acrescenta uma nova vibração ao seu site, especialmente se houver um feriado ou alguma grande venda que você possa destacar.

Para começar, vá para Appearance > Header no painel do WordPress.

Nota: Você também pode encontrar as configurações de cabeçalho indo em Aparência > Personalizar > Seção Cabeçalho.

Agora você deve ver uma prévia de sua página inicial no lado direito da tela, juntamente com as configurações do Cabeçalho no lado esquerdo da tela.

O módulo Cabeçalho explica as dimensões preferidas para qualquer imagem de fundo de cabeçalho, assim você pode optar por recortar sua imagem antes de carregar ou esperar até obter a imagem em seu painel de controle do WordPress.

Sob o título do cabeçalho atual, clique no botão Adicionar nova imagem.

Os cabeçalhos são complicados porque você quer garantir que todos os links e elementos de texto (para não mencionar seu logotipo) fiquem cristalinos na parte superior da imagem de fundo.

Portanto, recomendamos testar imagens de fundo e considerar imagens que aderem a cores e padrões mais sólidos. Elas não dificultarão tanto a visualização de seus itens de menu e logotipo.

Selecione uma imagem que pareça ideal para você, depois clique no botão Selecionar e Cortar para prosseguir.

Gostamos da ferramenta de cultivo integrada, uma vez que ela fornece automaticamente as dimensões corretas para a imagem de fundo do cabeçalho. Isto deve acelerar o processo em comparação com a edição prévia de uma foto em algo como o Photoshop.

Mova a caixa de corte para o local que faça mais sentido para sua imagem de fundo. Esteja à vontade para arrastar um dos cantos se você precisar cortar ainda mais a imagem.

Assim que você tiver a colheita perfeita, clique no botão Crop Image.

A imagem de fundo do cabeçalho é imediatamente ativada na visualização do WordPress Customizer, ajudando você a ver exatamente o que seus clientes irão ver com este tipo de fundo.

Você notará que a imagem de fundo do cabeçalho não sangra para o restante do conteúdo da página. Em vez disso, ela permanece no cabeçalho, atrás de qualquer coisa que esteja atualmente localizada lá, como um logotipo, tagline, menu, e barra de busca.

Outra opção para seu cabeçalho de fundo é carregar várias imagens e fazê-las girar aleatoriamente, adicionando um pouco de chama e surpresa ao seu site sempre que um usuário aterrissa na página inicial.

Para que isto funcione, é necessário primeiro ter várias imagens carregadas na caixa de ajustes do Cabeçalho. Clique no botão Adicionar Nova Imagem para completar esse processo.

Quando você tiver mais de uma imagem, clique no botão Randomize Uploaded Headers para ativar o recurso que mostra um fundo de cabeçalho diferente a cada vez.

Você pode notar que adicionar uma imagem de fundo ao cabeçalho torna difícil ver alguns dos itens do cabeçalho, como seu menu ou um carrinho de compras.

Se for esse o caso, sugerimos que não se apague imediatamente a imagem de cabeçalho. Ao invés disso, vá para os campos Cor do texto e Cor do link para ver se algum ajuste pode ajudar.

A configuração de cor do texto controla qualquer texto no cabeçalho que não esteja hyperlinkado para outra página interna ou externa. Muitas vezes isso significa apenas a tagline, se você tiver uma, mas às vezes você pode ter outros itens como um total de carrinho de compras ou ícones de mídia social que também mudam de cor com o texto.

A outra caixa é para a cor do link. Você provavelmente verá mais mudanças quando ajustar esta cor, já que ela inclui todos os itens do menu ligados a outras páginas.

Aqui está um exemplo do que acontece quando você escolhe uma nova cor tanto para a cor do texto quanto para a cor do link. Você pode ver que a tagline e o nome do site mudaram, o menu mudou para branco, e assim fez a maioria dos outros elementos do cabeçalho como o ícone do carrinho de compras.

Para aqueles não interessados em usar uma imagem de fundo para seu cabeçalho, você também tem a opção de usar um fundo de cor sólida.

Para isso, encontre o campo Cor de fundo sob a mesma área de Configurações do Cabeçalho.

Clique no botão Selecionar Cor e escolha no painel de cores para ver os resultados da pré-visualização. Você também pode mudar as cores do texto ao usar uma cor de fundo.

Após testar o que funciona melhor para seu cabeçalho e decidir sobre a imagem de fundo perfeita para aquele cabeçalho, clique no botão Publicar para que todos vejam as mudanças.

E se você tiver algum problema para fazer as mudanças no frontend, considere limpar seu cache do WordPress.

Como adicionar imagens de fundo para a categoria WordPress e Página de Login

Como adicionar imagem de fundo à categoria WordPress

Uma página de arquivo da categoria WordPress compila todos os artigos listados sob uma determinada categoria. Por exemplo, muitos sites têm categorias para tipos de artigos personalizadas, como Produtos. Por padrão, todos os sites do WordPress têm categorias para postagens. Aqueles que você não categoriza são etiquetados com a categoria Uncategorized.

Como as páginas de arquivo da categoria agregam conteúdo semelhante, faz sentido incluir uma imagem de fundo relevante nessas páginas para mostrar melhor a categoria. Como exemplo, você pode ter um fundo orientado à tecnologia para uma categoria de Web Design ou uma concha ou fundo de praia para uma categoria de Viagens.

O método CSS personalizado (descrito abaixo) é a opção mais barata. No entanto, você também pode olhar para os vários construtores de páginas e plugins para ver quais deles permitem fundos nas páginas de categoria.

Para completar esta tarefa com CSS, abra seu painel do WordPress e vá para Appearance > Customize.

Selecione a aba CSS adicional para abrir o módulo que permite digitar seu próprio CSS.

Abra uma das páginas de arquivo de sua categoria em seu site WordPress. Normalmente, estas páginas têm URLs como esta: http://yourwebsitedomain.com/category/travel. Você precisa mudar a parte de viagem para qualquer categoria que você tenha em seu próprio site e mudar a parte de suawebsitedoman para seu nome de domínio atual.

Clique com o botão direito do mouse em qualquer lugar na página da categoria e clique em Inspect. Ele mostrará a ferramenta Inspect em seu navegador, com o código dessa página apresentado para que você veja.

Procure por “corpo” ou “classe” para localizar a classe CSS para páginas de categoria, juntamente com a classe para esta categoria em particular.

Para esta situação, nossa classe CSS é “category-travel”, já que tenho uma categoria chamada “Travel” no site.

Guarde a etiqueta do CSS para mais tarde.

Depois disso, navegue de volta para a seção CSS adicional em seu WordPress Customizer.

Cole o seguinte código nessa caixa, trocando a classe de category-travel com a sua própria e colocando uma URL de imagem real no local que diz http://YOURIMAGEURL.jpeg.

body.category-travel {
background-image: url("http://YOURIMAGEURL.jpeg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

Clique no botão Publicar para salvar as mudanças.

Finalmente, volte para a página de arquivo da categoria no frontend do seu site WordPress. Deve agora mostrar a mesma página de antes, mas com o fundo especificado no código CSS. Se você tiver qualquer problema com a formatação da imagem de fundo do WordPress, volte ao painel CSS adicional para ajustar elementos como posição, tamanho e função de repetição do fundo.

Como adicionar uma imagem de fundo à sua página de Login do WordPress

A página de login do WordPress tem duas versões: uma para usuários regulares que vêm ao seu site e querem se registrar e entrar em seu site, e a outra para usuários internos, como administradores e autores.

Estas páginas de login são separadas do funcionamento principal do seu site (a maioria dos arquivos está localizada no arquivo wp-login.php). Portanto, a ferramenta de imagem de fundo personalizada não sangrará nos módulos de login.

Você pode fazer isso usando um plugin chamado Custom Login Page Customizer. Para começar, instale e ative o plugin em seu site WordPress.

À esquerda, uma nova aba no menu do painel do WordPress aparece para LoginPress.

Ir para LoginImprensa > Configurações.

Aqui, você pode ajustar as configurações do plugin antes de adicionar seu fundo e personalizar qualquer outra parte de sua página de login.

Por exemplo, ele oferece configurações para lembrar automaticamente os usuários, mostra campos de senha personalizados e expira as sessões após um certo período de tempo.

Para ativar um fundo de imagem personalizado para a página de login, clique em LoginPress > Customizer.

Isto o envia para o WordPress Customizer, onde uma nova página foi adicionada para as ferramentas LoginPress. Você notará abas para Temas, Logotipo, Background e muito mais.

Também é possível personalizar a página de login, clicando nos botões dentro da visualização prévia.

Não cobriremos todos os outros ambientes, uma vez que neste momento estamos nos concentrando principalmente no fundo.

Clique na guia Background para prosseguir.

A primeira ordem de negócios é decidir se você deseja um fundo colorido ou uma imagem de fundo.

Se você preferir um fundo colorido, localize o campo Cor de Fundo e clique em Selecionar Cor. Isto revela um painel de cor para você escolher exatamente qual cor faz sentido para seu negócio.

Como você pode ver, a mudança entra em vigor também na pré-visualização do WordPress Customizer.

Logo abaixo da configuração de Cor de Fundo, há uma seção de Imagem de Fundo.

Ative o interruptor Habilitar imagem de fundo para mostrar uma coleção de imagens de fundo pré-fabricadas.

Não há muitos para escolher na versão gratuita, mas o plugin acrescenta mais se você decidir atualizar para a versão premium.

Vá em frente e teste esses antecedentes pré-fabricados para ver se eles podem funcionar para sua marca.

O caminho mais provável é carregar sua própria imagem como fundo da página de login.

Procure o título Imagem de Fundo e clique no botão Selecionar Imagem.

Você é levado à Biblioteca de Mídia WordPress para carregar uma imagem do seu computador ou escolher uma delas já dentro do WordPress.

Selecione sua foto desejada e clique no botão Escolher imagem.

A imagem de fundo ativada aparece como uma miniatura no painel do Customizer e a visualização real de sua página de login.

Agora você tem a opção de clicar no botão Publicar e ficar com o que está na tela. Ou, você pode rolar até as configurações adicionais para garantir que a melhor visualização da imagem carregada esteja ativa no momento.

Clique no campo suspenso Background Repeat e teste as opções como Repeat, No-repeat, e Repeat-x.

Dependendo do tamanho de sua foto, você pode ou não ver a imagem se movimentar um pouco.

A seguir, veja as opções Selecionar Posição para mover ainda mais a imagem de fundo.

Por padrão, eles colocam a imagem no centro da tela, mas às vezes fica melhor se você a tiver situada em algum lugar como a parte inferior direita ou superior esquerda. Experimente todos eles para descobrir qual funciona melhor para sua imagem de fundo.

Seguindo adiante, o menu suspenso Tamanho da imagem de fundo do WordPress tem ajustes para como a imagem cobre o espaço da tela, ajustando seu tamanho com cada opção pré-definida.

Mais uma vez, teste-os para decidir qual parece ser o melhor. Você pode descobrir que algo como a configuração Contain oferece uma visão melhorada em vez da configuração Auto ou Cover.

E isso é tudo que existe para carregar e ativar uma imagem de fundo para sua página de login!

O cenário final está lá se você quiser mostrar um vídeo como fundo em vez de uma imagem. Ligue essa configuração se você tiver um vídeo interessante relacionado ao seu negócio e não desviar muita atenção das pessoas que estão conectadas ao site.

Uma vez que tudo esteja feito, clique no botão Publicar para ativar o fundo de sua página de login e vê-la exibida sempre que um usuário tentar se registrar ou entrar no site.

Como adicionar uma imagem de fundo ao seu menu de navegação

Você deve ter notado alguns websites com menus extravagantes que incluem imagens de fundo ou ícones. Esta é uma prática comum no mundo do eCommerce, onde a marca pode ter um mega menu com categorias e imagens de fundo para cada botão de categoria.

Se você estiver interessado em adicionar fundos ao seu menu, veja nosso artigo sobre os melhores plugins do menu WordPress. Muitos destes plugins de menu oferecem opções para incluir imagens e fundos coloridos em seu menu.

Visto que existem vários plugins para adicionar um determinado fundo para os menus de navegação, forneceremos tutoriais para dois, um dos quais permite fundos atrás do seu submenu. Em contraste, o outro adiciona um plano de fundo ao seu menu móvel.

Para adicionar uma imagem de fundo a diferentes submenus, instalar e ativar o plugin WP Mega Menu. Este plugin permite ativar e gerenciar um mega-menu com múltiplos níveis de dropdown. É ideal para grandes lojas online, mas também faz o truque para menus menores, especialmente se você quiser adicionar uma imagem de fundo ou ícones.

Comece encontrando a guia WP Mega Menu no painel do WordPress.

Clique no item de menu Temas.

Aqui, você pode ver uma lista de temas padrão criados para seu menu pelo plugin.

Você pode clicar para editar qualquer um dos temas ou adicionar seu próprio desenho a partir do zero.

Cada tema tem suas próprias configurações onde você especifica elementos como o título do tema, opções de barra de menu e o logotipo da marca. Quase todas as partes do seu menu são personalizáveis, desde o menu suspenso até os submenus.

No entanto, para o menu de fundo, você simplesmente precisa saber qual tema você quer escolher.

Ir para Appearance > Menus no painel de instrumentos.

Você verá um novo módulo que se conecta às Configurações do Mega Menu.

Clique para habilitar o mega menu, depois escolha o que você mais gostar para seu site.

Finalmente, clique no botão Salvar.

Agora, desvie sua atenção para a área de Estrutura de Menu.

Percorrendo qualquer um de seus itens atuais do menu revela um botão WP Mega Menu. Aqui é onde você personaliza o layout e o design para cada seção suspensa.

Clique no botão WP Mega Menu para qualquer item do menu que você quiser. Para este caso, adicionaremos um mega menu suspenso na guia Shop.

Nota: Presumimos que você já tenha um menu configurado em seu site WordPress. Leia nosso guia do menu suspenso do WordPress se você precisar de ajuda com isso.

Na nova janela popup, gire o interruptor para ligar o Mega Menu para aquele item de menu em particular.

Você pode então adicionar uma linha suspensa e arrastar alguns dos muitos widgets do lado esquerdo para essa linha. Por exemplo, vamos arrastar uma lista de produtos para que eles apareçam quando alguém rolar sobre o item do menu Loja.

Para adicionar um fundo a esta área suspensa, clique no botão Opções no canto inferior esquerdo.

Encontre o campo Upload Background Image (Carregar imagem de fundo).

Clique no botão Upload para encontrar a foto certa em sua Biblioteca de Mídia para usá-la como fundo.

Uma miniatura da imagem aparece depois de selecioná-la na Biblioteca de Mídia.

Há alguns outros ambientes a considerar, portanto, sinta-se à vontade para verificar se você quiser.

Certifique-se de clicar no botão Salvar mudanças, na parte inferior do painel de opções.

Você também precisa clicar em Save Menu na área de Estrutura de Menu do painel de controle do WordPress.

Agora, navegue até o frontend do seu site para ver o menu. Se você folhear o item que acabamos de personalizar, você deve ver uma seção suspensa com o fundo.

Outra maneira de adicionar uma imagem de fundo a um menu é usando um menu móvel e responsivo que aparece quando alguém acessa seu website através de um dispositivo móvel.

Você pode colocar um fundo atrás do menu móvel com a ajuda do plugin WP Mobile Menu.

Após instalar e ativar o plug-in do Menu Móvel WP, vá para Opções do Menu Móvel no painel do WordPress.

O plugin oferece diversas maneiras de configurar seu menu móvel. A exigência geral é ativar um dos formatos de menu e indicar qual menu WordPress você deseja usar para aquele menu móvel.

Por exemplo, podemos clicar no botão Ativar Menu Esquerdo (ativando um menu móvel que fica no lado esquerdo da tela) e escolher a opção Menu Principal a partir do menu suspenso Menu Esquerdo. Isto liga nosso Menu Principal atual com o menu móvel, para que os visitantes vejam as mesmas abas.

Depende do tipo de menu móvel que você criar, mas como estamos fazendo um menu do lado esquerdo, podemos clicar na aba Menu esquerdo para revelar as configurações apropriadas para adicionar um fundo.

Vá até o campo Imagem de Fundo do Painel e clique no sinal “+” para abrir a Biblioteca de Mídia.

Selecione uma imagem de sua Biblioteca de Mídia e adicione-a ao campo.

Você deve ver uma versão em miniatura da imagem de fundo como confirmação.

Selecione o botão Salvar mudanças para ativar o fundo.

Visto como o plugin gera menus móveis, o menu só pode aparecer quando seu navegador estiver configurado em uma largura estreita ou quando você for ao seu site em um telefone ou tablet.

O novo menu é consolidado sob um ícone de hambúrguer (três linhas horizontais).

Clique nisso para testar o novo menu com o fundo.

Como mostrado na captura de tela, o fundo é colocado atrás de todo o menu móvel para que todos possam ver.

Como adicionar uma imagem de fundo do WordPress a uma página de manutenção

Todos os websites ocasionalmente requerem manutenção, e às vezes essa manutenção leva tanto tempo que a exibição de uma página de manutenção ajuda.

As imagens de fundo desempenham um grande papel quando se trabalha com páginas de manutenção. A maioria das páginas de manutenção consiste de uma imagem de fundo em tela cheia e talvez algum texto ou links com mais recursos.

Se você já tem uma página de manutenção e ela não inclui uma imagem de fundo, considere os seguintes passos para gerar um belo ambiente para quando você precisar fechar seu website do público por um período de tempo.

Você pode adicionar uma imagem de fundo a uma página de manutenção com a ajuda do plug-in Manutenção. Instale e ative o plugin em seu site.

Uma vez ativo, encontre o botão de Maintenance is On/Off no topo do painel de instrumentos.

Clique no botão para ir para a página de Configurações do plugin de Manutenção.

Outra maneira de chegar à página Configurações é clicando no item do menu Manutenção no menu lateral do painel de instrumentos.

A página Configurações do plugin de Manutenção tem uma coleção decente de opções para personalizar, mas a principal área a ser considerada é o módulo de Configurações Gerais. Aqui, você pode escrever em um cabeçalho e descrição, ambos servindo como o texto que se sobrepõe sobre o fundo que estamos prestes a inserir.

O título da página aparece na guia do navegador, portanto, você deve considerar a possibilidade de personalizar isso também.

Você pode usar o plugin de Manutenção para qualquer coisa, desde páginas de manutenção até as próximas páginas, então você pode digitar algo como “Nosso site está em manutenção”, ou você pode mostrar um pouco de informação sobre sua empresa e incluir um formulário para que as pessoas digitem seus endereços de e-mail.

Continuando, o plugin oferece uma opção para carregar seu logotipo, que também se sobrepõe à imagem de fundo.

Clique no botão Upload Logotipo e escolha seu logotipo para ver sua miniatura no painel de instrumentos.

Finalmente, o campo Imagem de fundo pede que você clique no campo Upload Background Image.

Ou carregue uma imagem do seu computador ou passe por sua Biblioteca de Mídia para localizar um fundo adequado para a página de manutenção.

Nota: As melhores imagens de fundo para manutenção são grandes, de alta resolução e em orientação paisagística. Uma alternativa de fundo “Portrait Mode” está disponível nas configurações abaixo.

Uma vez escolhido o fundo, ele aparece como uma visualização em miniatura menor no painel de instrumentos.

Embora uma imagem de fundo com uma orientação de paisagem faça mais sentido para computadores desktop e telas mais amplas, muitas pessoas acabam em seu site usando telas com orientações de retrato, como com um telefone sendo segurado verticalmente.

Portanto, uma imagem de fundo mais ampla não parecerá tão agradável. É por isso que o plugin oferece uma imagem de fundo em modo retrato que serve como uma alternativa, sendo trocada de forma responsável sempre que um usuário visita a página usando uma tela orientada para retrato.

É importante incluir uma imagem neste campo, portanto clique no botão Upload de imagem para orientação do dispositivo de retrato.

Desta vez, encontre uma imagem que seja mais alta do que larga (modo retrato). Você sempre pode recortar a imagem de fundo original para torná-la um retrato, ou você tem a opção de carregar uma imagem completamente diferente para preencher a vaga.

Destaque a imagem desejada e clique no botão Select Image para inseri-la no painel de instrumentos.

Todas estas configurações não significam nada a menos que você ative o Modo de Manutenção.

Para que isso aconteça, localize o interruptor de Manutenção On/Off na parte superior da página Configurações.

Vire o interruptor de modo que ele leia “On,” e então selecione o botão Salvar mudanças.

Vá para o frontend do seu site para garantir que a imagem de fundo e a página de manutenção apareçam corretamente.

Há uma boa chance de que não aconteça.

Há duas razões para isso: Em primeiro lugar, você deve sair da conta do WordPress Admin para ver o site do Modo de Manutenção. Segundo, você pode precisar limpar o cache do site para atualizar a mudança no conteúdo.

Por exemplo, quando eu saio da conta de administração, a página de manutenção agora aparece quando eu vou a qualquer página.

A imagem de fundo está lá, junto com minhas personalizações como o logotipo e a descrição do texto.

Além disso, mudar o tamanho das janelas do navegador para uma orientação mais de retrato encaixa o fundo do modo retrato no lugar.

Você também deve ver o modo retrato ao visitar o site em um telefone ou tablet.

Outro tipo de imagem de fundo com o plugin é chamada de Imagem de Pré-carregador. Isto essencialmente carrega uma imagem rápida com um efeito animado antes de revelar a página de manutenção real, o fundo e o conteúdo.

Como a imagem de fundo normal, clique no botão Upload Preloader para encontrar uma imagem que tenha bom aspecto e adicione-a ao painel de instrumentos.

Mais uma vez, clique no botão Salvar mudanças e limpe o cache.

Por padrão, o efeito de Pré-carregador de imagem gira por um momento, e depois desaparece para apresentar a página de manutenção e a imagem de fundo.

Depende inteiramente de você se gostaria ou não de manter este tipo de efeito.

Vários outros elementos de fundo estão disponíveis para você experimentar no painel de Configurações do plugin de Manutenção.

Por exemplo, você pode querer adicionar uma cor de fundo ao invés de uma imagem de fundo.

Se for esse o caso, vá para o campo Cor de fundo e Selecione uma Cor que se ajuste à sua marca.

A cor de fundo não aparece na página de manutenção, a menos que você desabilite todas as outras imagens de fundo.

Portanto, certifique-se de apagar a imagem de fundo.

Você também deve apagar a imagem de fundo em Modo Retrato.

Salvar as mudanças e limpar o cache. Em seguida, vá até o frontend do seu site para ver a cor de fundo em vigor.

As configurações a serem consideradas incluem itens como a cor da fonte, a família de fontes e o borrão de fundo.

Também recomendamos pensar se você precisa ou não de um login frontend. Isto proporciona uma maneira para os usuários acessarem suas contas e obterem acesso a perfis, se necessário.

Uma vez que tudo esteja feito, clique no botão Salvar mudanças.

O plug-in Manutenção também oferece vários temas pré-fabricados com belas imagens de fundo e layouts e textos desenhados profissionalmente.

Você pode encontrar temas para as próximas páginas e layouts de manutenção, juntamente com páginas para coletar endereços de e-mail e outras informações de contato.

Você deve adquirir os temas para utilizá-los.

Dependendo do seu orçamento, eles são bastante baratos e parecem ótimos.

Para aqueles que não estão interessados em comprar um tema, todas as configurações acima estão à sua disposição. Você também pode entrar no módulo CSS personalizado para configurar sua página de manutenção e imagem de fundo como quiser.

Lembre-se, as configurações da página de manutenção raramente entram em vigor, a menos que você saia da conta de administrador e clique no botão Limpar Cache.

Você pode encontrar o botão Clear Cache no canto superior direito do painel ao usar o Kinsta. Se utilizar um host diferente, considere um dos muitos plugins de cache existentes no mercado.

Assim que você limpar o cache e salvar suas configurações, você deve ver uma bela imagem de fundo que complementa a página de manutenção!

Como adicionar um fundo de WordPress com um construtor de páginas de terceiros

Nosso artigo sobre os melhores construtores de páginas oferece uma lista de opções para a escolha de um construtor de páginas com recursos de arrastar e soltar. O WordPress já inclui um construtor de páginas em Gutenberg, mas muitos proprietários de sites preferem outras soluções.

A seção a seguir explica como implementar um background utilizando alguns construtores de páginas populares, incluindo Elementor, Beaver Builder e Page Builder by SiteOrigin.

Adicione um fundo WordPress com a Elementor

A Elementor, a popular construtora de páginas web destinada a acelerar drasticamente a produção do site, oferece um plugin gratuito com várias ferramentas de imagem de fundo.

Além disso, a Elementor apresenta flexibilidade visual de fundo para várias partes do seu website, em vez de restringir os fundos a todo o website. Por exemplo, você pode adicionar um fundo atrás de praticamente qualquer seção de bloco de construção e mostrar fundos diferentes de página para página.

Para iniciar, instalar e ativar o plugin da Elementor.

A Elementor dispersa suas configurações de fundo por todo o construtor, facilitando a seleção de um elemento e a implementação de um fundo, se necessário. Portanto, você pode tecnicamente ir a qualquer página ou postar com a expectativa de ter acesso a um botão de carregamento de fundo.

Neste caso, vamos para a página inicial de nosso site de testes. Visite a página de sua escolha selecionando a partir da lista em Páginas > Todas as Páginas. Você também pode fazer o mesmo com os Artigos .

Uma vez no editor de páginas padrão do WordPress, clique no botão para editar com  Elementor.

Isto desloca a visão em sua tela para o Editor da Elementor. Aqui, o lado esquerdo tem um menu com módulos de arrastar e soltar para construir e editar sua página.

A funcionalidade de fundo não está disponível em uma seção ou bloco, mas sim nas Configurações primárias para aquela página.

Portanto, clique no pequeno ícone Configurações (parece uma engrenagem) no canto inferior esquerdo do editor.

Isto mostra uma seção para configurações gerais de página.

Clique na guia Estilo na parte superior da seção Configurações da página.

Sob Style, localize o campo Background Type e clique no ícone Pincel de Pintura para adicionar um fundo padrão.

Em seguida, escolha o tipo de fundo que você deseja que apareça. Por exemplo, o campo Cor permite que você mude o fundo para uma cor sólida. Há também uma opção Gradiente no campo Background Type, se for mais o seu estilo.

Clique no botão Escolher imagem sob o campo Imagem para abrir sua Biblioteca de Mídia e escolha uma imagem de fundo adequada para esta página.

Como sempre, teste suas imagens de fundo e mantenha as dimensões ideais e as melhores práticas (alta resolução e orientação de retrato para a maioria), depois selecione a imagem que funciona bem e clique no botão Inserir Mídia.

A imagem de fundo selecionada agora aparece na visualização do site da Elementor à direita. Você pode precisar ajustar outras partes do seu conteúdo para garantir que itens como texto e imagens apareçam quando em cima do fundo.

A Elementor fornece configurações de fundo de imagem como Posição, Anexo, Repetir e Tamanho da imagem de fundo do WordPress. Modifique as configurações para determinar se seu fundo pode parecer melhor como um anexo fixo, ou talvez com uma orientação de cima para a direita ou um tamanho alternativo.

Aperte o botão Atualizar para salvar todas as mudanças na página e publicar o novo histórico do seu site.

Antecedentes da seção com a Elementor

A Elementor oferece funcionalidade de fundo avançada para a maioria das seções adicionadas a suas páginas.

Tudo que você tem que fazer é selecionar uma seção em uma página da Elementor e modificar as configurações de Fundo para limitar o fundo apenas a essa área.

Por exemplo, podemos selecionar esta seção Editor de Texto para ver as configurações da seção Texto.

Escolha a aba Advanced e encontre a seção Background dentro dessa aba.

As configurações de fundo incluem Tipo de fundo, Cor, Imagem e muito mais, muito parecido com as configurações que vimos para as configurações gerais de fundo da página. A única diferença é que ela restringe estas configurações à seção selecionada.

Escolha o ícone Pincel de Pintura para Tipo de Fundo, depois clique no botão Escolher Imagem sob o campo Imagem.

Escolha uma imagem da Biblioteca de Mídia e clique no botão Inserir Mídia.

Como você pode ver, a imagem de fundo permanece dentro dos limites daquela seção enquanto está sentada atrás do conteúdo já criado para aquela seção.

Use os seletores de posição, anexo, repetição e tamanho para modificar a forma como a imagem de fundo é apresentada na seção.

Finalmente, clique no botão Atualizar para salvar suas alterações.

Adicione uma imagem de fundo com o Beaver Builder

O plug-in Beaver Builder inclui uma versão Lite com algumas ferramentas básicas de fundo. É um dos mais populares construtores de páginas do mercado, oferecendo muitos módulos de conteúdo para itens como vídeo, imagens, parágrafos e muito mais.

Além de tudo isso, permite implementar uma imagem de fundo, cor ou vídeo, usando ferramentas visuais e CSS para colocar o elemento de fundo em todo o seu website, uma página, ou uma seção individual em uma página.

Primeiro, instale o plugin Beaver Builder para começar.

Vá para qualquer página ou artigo para editá-la com o Beaver Builder.

Você deve converter páginas previamente criadas para o formato Beaver Builder. Como alternativa, você tem a opção de criar uma página do zero e escolher editar a página no formato Beaver Builder.

Para converter uma página atual para Beaver Builder, abra esse editor de páginas e clique no ícone de três pontos para abrir o menu View no canto superior direito.

Role para baixo para encontrar e escolher o link Convert to Beaver Builder.

Ele tenta compilar todo o conteúdo que você tem em sua página e mudar esses elementos para módulos compatíveis do Beaver Builder.

Para fazer uma página do zero, vá para Páginas > Adicionar novo.

Em seguida, clique no botão Launch Beaver Builder.

O plugin Beaver Builder leva você a uma visão frontal da página da web. Ele ocupa a maior parte da tela atuando como um verdadeiro editor front-end, onde você clica nos elementos e se move pelas caixas com seu mouse.

A primeira maneira de adicionar um fundo através do Beaver Builder é carregando um fundo para um bloco de seção. Isto pode ocupar a maior parte da página ou uma fração da página, dependendo do tamanho do bloco de seção.

Uma vez selecionado, encontre o botão Row Settings (o ícone ⚙).

Clique nesse ícone para revelar as configurações para essa linha. Você também pode fazer isso com seções e colunas, e outros tipos de blocos.

Um painel de configurações aparece no topo da visualização do seu site. Clique na guia Estilo, depois procure a seção Fundo.

Em Background, clique no menu suspenso para mostrar todos os tipos de background.

Você tem vários tipos de fundo a considerar, um dos quais é para uma foto. Os outros incluem:

• Cor
• Gradiente
• Vídeo
• Código Embutido

Esteja à vontade para testar os diferentes tipos de fundo.

Por exemplo, você pode descobrir que um fundo Gradient parece melhor do que uma imagem. Cada um dos tipos de fundo inclui suas próprias configurações. O tipo Gradiente, neste caso, pede duas cores para que o gradiente se mova de uma para a outra.

Optando pelo fundo da foto apresenta campos para escolher na Biblioteca de Mídia ou colar em uma URL para a imagem. Clique no link Selecionar Foto se estiver usando a Fonte de Fotos da Biblioteca de Mídia.

Encontre sua foto de fundo favorita e clique no botão Select Photo.

Beaver Builder deixa cair a foto no espaço de fundo escolhido anteriormente. A seção Configurações da foto pergunta como você gostaria de formatar a foto. Escolha entre opções como Tamanho, Repetir, Posicionar e Anexar.

Fotos de fundo globais e de página inteira do Beaver Builder

O Beaver Builder trabalha com as ferramentas de projeto padrão do WordPress para aproveitar os recursos de fundo incorporados.

Portanto, você pode ir para a aba Aparência > Fundo para ativar um fundo fotográfico para todo o seu site.

Como alternativa, abra qualquer página web no Beaver Builder e clique no menu suspenso Ferramentas no canto superior esquerdo.

Aqui, clique na opção Configurações Globais.

O Painel de configurações globais oferece a possibilidade de alterar todo o seu website, substituindo ou modificando a codificação do WordPress incorporado. Portanto, gostaríamos de inserir um bloco de código CSS para alterar toda a imagem de fundo do site (globalmente).

Clique na guia CSS nas Configurações Globais, e cole o seguinte segmento de código no campo:

body {
background-image: url("URL to Image");
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100%;
background-color: #0f1066;
}

Faz mais sentido usar o Beaver Builder para fundos de página personalizados, pois cada página tem sua própria imagem como pano de fundo.

Em seu editor de páginas, abra novamente o menu Ferramentas.

Selecione a opção Layout CSS & Javascript.

Cole o mesmo código na guia CSS, alterando a URL para texto da imagem para a URL real e ajustando as configurações que desejar:

body {
background-image: url("URL to Image");
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100%;
background-color: #0f1066;
}

Adicionar um fundo simples de fileira ou widget com Page Builder By SiteOrigin

O Page Builder by SiteOrigin é mais uma ferramenta visual de elaboração de sites com o recurso de arrastar e soltar. Ele é limitado em sua capacidade de inserir fundos para todo o site (você recorreria à ferramenta padrão de fundo personalizado do WordPress). Ainda assim, ela fornece configurações para adicionar imagens e cores de fundo para linhas e widgets usados pelo SiteOrigin.

Primeiro, baixe e ative o Page Builder por SiteOrigin plugin.

Navegue até uma nova página ou considere adicionar uma linha SiteOrigin a uma página atual no site.

Cada seção do SiteOrigin pede que você acrescente Widget ou Add Row. Você também tem a oportunidade de navegar pelos layouts pré-construídos se preferir não iniciar um projeto a partir do zero.

A boa notícia é que tanto os widgets quanto as linhas no SiteOrigin têm configurações para incluir imagens de fundo.

Portanto, clique no botão Adicionar Widget ou Adicionar Fila para prosseguir.

Neste exemplo, veremos a biblioteca de Widgets.

Aqui, você pode escolher um dos muitos widgets fornecidos pelo SiteOrigin, desde Menus e Páginas de Navegação até Conteúdo do artigo e Listas de Produtos.

Escolheremos o widget Produtos para este exemplo, mas você pode optar por um dos muitos outros widgets com base nas necessidades do seu projeto. Além disso, você pode agrupar estes widgets com uma Fila, depois adicionar uma imagem de fundo a essa fila para que o fundo apareça atrás de vários widgets.

O novo widget ou linha acaba no editor de páginas SiteOrigin. A maior parte do SiteOrigin permanece no painel do WordPress, de modo que não há tanto editor de front-end como há com outros construtores de páginas.

Para adicionar um fundo a qualquer item do SiteOrigin, role sobre o elemento e clique no link Editar.

Eu escolhi o widget Produtos para este exemplo, mas cada widget tem suas próprias configurações para configurar o que parece em seu site.

As ferramentas de fundo vivem por baixo do menu suspenso Design. Clique nisso para seguir em frente.

Encontre o campo Imagem de fundo e clique no botão Selecionar imagem.

Você também tem a opção de colar em uma URL externa para a imagem de fundo.

A Biblioteca de Mídia mostra as imagens atuais que você carregou para o WordPress. Clique na imagem que funciona melhor para este fundo e selecione o botão Feito para soltá-la no módulo SiteOrigin.

Agora o campo Imagem de fundo apresenta uma versão em miniatura dessa foto.

Percorra as configurações para configurar tudo, desde a Exibição da Imagem de Fundo até a Cor da Fonte para o texto de sobreposição.

Em geral, você deve ser capaz de obter os resultados desejados, escolhendo o visor da Capa. Parece que o Plugin SiteOrigin é o padrão do display Tiled, então você pode ter que mudar isso.

Certifique-se de clicar no botão Done (Concluído) quando tiver completado suas configurações personalizadas para o fundo.

O widget (neste caso, o widget Produtos) vai para o editor WordPress do SiteOrigin para aquela página. Você pode arrastar este elemento para onde quiser na página e adicionar novos widgets e linhas acima e abaixo dele.

Você deve clicar no botão Preview ou Update e então navegar no front-end da página para ver os resultados.

O fundo atual que acrescentei aparece dentro das restrições do widget Produtos de antes. Este fundo obviamente precisa de alguma edição para ficar mais bonito, mas é um começo de qualidade para arquivar no espaço com uma imagem de fundo muito mais criativa.

Adicionando imagens de fundo exclusivas com Brizy

O construtor da página final para esta demonstração, Brizy, oferece modelos elegantes e uma interface de front-end superior para adicionar designs incomuns e customizações rápidas.

O Brizy Page Builder inclui um extenso conjunto de módulos de arrastar e soltar para incorporar ao seu site atual. Ele também permite que você comece a partir de um modelo em branco e construa todo o seu website com Brizy.

Como tal, você ficará feliz em saber que Brizy também tem uma ferramenta de fundo para quase todos os elementos que você inclui através do construtor da página. Sem mencionar que Brizy apresenta vários estilos de fundo exclusivos, como adicionar um vídeo de looping ao fundo ou um mapa completo.

Para aproveitar essas configurações de fundo, instale e ative o plugin Brizy para começar.

Grande parte do processo de design Brizy requer que você comece com um modelo em branco. Brizy tentará converter seus designs mais antigos em módulos Brizy, mas achamos que é melhor começar de novo.

Vá para uma página ou artigo em seu painel do WordPress e comece a construir a página com um título e talvez algum conteúdo.

Você deve ver um botão para editar com Brizy. Clique nisso para ser enviado para o criador da página Brizy completa.

O construtor da página Brizy mostra uma visualização completa do seu website com botões, texto e imagens. Se a página estiver em branco, clique no botão Start Building Your Page.

Procure as guias de Layouts e Blocos na barra de menu superior.

Os layouts fornecem páginas web pré-construídas, repletas de conteúdo de demonstração e prontas para uso, desde que você personalize o conteúdo de sua própria empresa. Os blocos são pedaços menores de páginas da web, mas ainda são pré-construídos e muitas vezes mais fáceis de usar e manipular do que se você fizesse um bloco por conta própria.

Não importa em que direção você vá. Navegue pelos layouts e blocos e adicione quantos você quiser à página. Estes são simplesmente os elementos que você usará para formar uma página web completa.

Depois de ter alguns blocos ou layouts na página web, volte para a tela do editor para ver o seu trabalho.

Você verá que cada seção de bloco tem um ícone de Configurações no lado superior direito do bloco, que normalmente aparece quando você percorre a seção.

Clique nisto para o bloco de sua escolha. Acrescentaremos um fundo a esse bloco.

O painel de Ajustes de Bloco permanece no canto superior direito. Percorra os ícones do menu para ver o que todos eles fazem.

Uma delas é para Cores, e com isso, elas significam um fundo colorido. Você pode mudar isso e adicionar um gradiente se estiver mais interessado em aderir a uma visão de fundo sólida ou com gradiente de cor.

O botão com o ícone à esquerda contém as configurações de fundo.

Clique neste botão para abrir as ferramentas rápidas para carregar uma imagem de fundo para este bloco.

Brizy oferece três itens de fundo de mídia:

• Imagens
• Vídeos
• Mapas

Primeiro, tente o tipo de imagem para entender como ele funciona com seu layout atual.

Clique na área de upload de imagens para encontrar uma foto na biblioteca de mídia e adicione-a ao fundo.

Encontramos uma foto de painel de madeira para este tutorial e indicamos que não gostaríamos de ter nenhum efeito de paralaxe.

Isto acrescenta um efeito agradável, já que o fundo colorido serve como uma sobreposição, mas ainda vemos a textura da madeira por trás dela.

Lembre-se que você pode sempre ajustar o campo Parallax para fazer da imagem de fundo um fundo fixo, animado ou em rolagem.

E é assim que você insere uma imagem de fundo com Brizy!

A melhor parte do Brizy é que você pode continuar a se mover através do projeto e clicar no botão Settings de cada seção.

Uma seção abaixo, podemos inserir mais uma imagem de fundo sem gastar muito tempo com isso.

E para demonstrar o poder dos outros tipos de fundo, podemos clicar no tipo de fundo do mapa, perfurar em um endereço e ver como um mapa desse local aparece logo atrás do conteúdo do primeiro plano.

O mapa fica situado como um fundo completo e tem uma função de zoom se não sair muito bem com as configurações padrão.

Finalmente, recomendamos verificar a ferramenta de vídeo de fundo Brizy, localizada na mesma seção que a ferramenta de imagem de fundo. Ela funciona inserindo uma URL de vídeo (YouTube ou Vimeo), apresentando um vídeo completo logo atrás do conteúdo em primeiro plano. Ela fornece até mesmo uma configuração para fazer o loop do vídeo e escolher quando ele deve começar enquanto o usuário percorre a seção.

O gif animado abaixo dá um breve exemplo do vídeo em ação, mesmo que provavelmente poderia usar alguma edição.

Tamanho da imagem de fundo, fornecimento e edição básica

Mencionamos anteriormente no artigo que, embora não haja um tamanho perfeito para uma imagem de fundo, recomendamos começar com nada menos que 1024 x 768 pixels e manter uma proporção de aspecto comum como 16:9. A relação de aspecto não importa tanto quanto o tamanho e a resolução reais da imagem, já que você pode recortar a imagem ou deixar o WordPress fazer isso por você.

Também é essencial encontrar os lugares certos para comprar ou emprestar imagens de fundo do WordPress, se você não planeja tirar suas próprias fotos.

Onde encontrar imagens de fundo adequadas

Para sua busca de imagens de fundo, veja nosso guia de busca e adição de fotos de estoque sem sair do WordPress. Temos também uma lista de fontes úteis no mercado para buscar fotos de estoque de alta resolução, muitas das quais são gratuitas.

Em geral, recomendamos que você mesmo tente tirar imagens de fundo. Se isso não for possível ou se você não tiver experiência com fotografia ou design gráfico, pense em utilizar recursos gratuitos de fotografia de fundo. Você também pode optar por pagar por uma imagem de fundo de um dos muitos sites de imagens de estoque premium, alguns dos quais cobram uma taxa mensal para fazer o download de um monte de fotos.

Alguns destaques desses links incluem:

• Unsplash – Gratuito, e sem necessidade de atribuição.
• Caça Visual – Fotos gratuitas. A maioria das imagens não requer atribuição.
• Pexels – Grátis, sem necessidade de atribuição.
• Pixabay – Gratuito com a maioria das imagens que não requerem atribuição.
• iStockphoto – Uma assinatura premium de baixo custo para imagens gratuitas de royalties.
• Shutterstock – Imagens gratuitass de royalties por uma taxa de assinatura razoável.

Como mudar a imagem de fundo do WordPress com CSS personalizado

Como aprendemos, você pode adicionar uma imagem de fundo WordPress com ferramentas WordPress padrão embutidas ou um plugin. Não importa qual rota você escolher, desde que você obtenha o resultado desejado. Há também a opção de utilizar CSS personalizado para estilizar a imagem de fundo ou adicioná-la ao seu site por completo.

Não vamos cobrir os meandros do CSS personalizado, vendo como cada imagem e tema de fundo terá um processo diferente. Entretanto, recomendamos a leitura de nosso guia sobre edição, adição e personalização de CSS no WordPress. O artigo cobre dicas úteis para adicionar imagens de fundo a praticamente qualquer seção do site, desde itens de menu até blocos de página específicos.

Correção de problemas comuns com uma imagem de fundo WordPress

Todos os sites WordPress vêm com a capacidade de adicionar um fundo. No entanto, isso não significa que o recurso principal funcione para todos os sites. Por exemplo, você pode descobrir que o tema que você está usando não suporta fundos personalizados. Ou talvez você continue carregando um fundo, mas ele não parece muito correto (muito grande ou muito borrado).

Encontrar um problema com o WordPress é frustrante e, infelizmente, um pouco comum. Compilamos algumas das questões mais comuns com imagens de fundo abaixo e traçamos cada linha de ação.

Como resolver as 5 questões mais comuns com imagens de fundo no WordPress

Meu tema não suporta uma imagem de fundo do WordPress

Os desenvolvedores de temas controlam o recurso de Fundos Personalizados no WordPress. Eles podem ligá-lo ou desligá-lo, dependendo se gostariam de ativar ou não o suporte de fundo personalizado. O fundo é desligado quando não é necessário, ou talvez entre em conflito com o projeto geral do tema.

Se você descobrir que seu tema não suporta um fundo personalizado ou limita suas habilidades ao adicionar um fundo, considere estas soluções:

• Troque o tema por um que suporte fundos personalizados. Procure Fundos Personalizados nas listas de recursos ao comprar ou baixar temas.
• Use um plugin de fundo para anular o recurso de fundo padrão personalizado que está sendo bloqueado.

Embora seja possível incluir sua própria codificação personalizada ou ir para os arquivos temáticos para reagir aos antecedentes personalizados, geralmente recomendamos contra ambas as opções. Seu melhor procedimento é localizar um tema que suporte fundos ou adicionar um plugin que permita fundos mas não mexa muito com a funcionalidade do tema.

Minha imagem de fundo do WordPress é muito escura ou tem a cor errada

Uma imagem de fundo escurecida pode ter origem em muitos cenários que correm ao lado da própria imagem de fundo. Na maioria das vezes, ela tem a ver com um filtro de sobreposição ou fundo mal colorido.

Para a maioria dos casos em que o fundo é descolorido, você deve verificar seu tema ou plugin que controla o fundo em si.

Procure um local próximo ao campo de fundo que solicite um filtro ou uma sobreposição. Você também pode encontrar um recurso de opacidade que deve ser limpo para que seu fundo mostre corretamente.

Se tudo o mais falhar, o tema pode ter um filtro de fundo codificado em código rígido nos arquivos de tema. Nesse caso, contate o desenvolvedor do tema para ter uma idéia do que é possível para corrigir a cor de fundo.

Minha imagem de fundo do WordPress não está na posição correta

A imagem de fundo que aparece na posição errada tende a emperrar o design geral do seu site. Você pode descobrir que o fundo está muito à esquerda ou à direita, ou talvez o que deveria ser o foco central do fundo não esteja aparecendo na tela de forma alguma.

Felizmente, mover-se ao redor do fundo leva apenas alguns cliques do botão.

Ir para Appearance > Background no painel do WordPress. Encontre a imagem que você carregou atualmente como fundo e procure pelo campo Posição. Este campo permite mover o posicionamento do fundo, com opções para movê-lo para a esquerda, direita, superior, inferior ou cantos.

Recomendamos clicar em todos os botões de posicionamento para ver os resultados que eles produzem. Depois de encontrar a posição correta, salve a página.

Minha imagem de fundo do WordPress se repete constantemente

Texturas e fundos sólidos muitas vezes parecem melhores quando repetidas, vendo como elas ignorariam as quebras de imagem. No entanto, muitas imagens parecem horríveis quando repetidas repetidamente como fundo, especialmente aquelas com muitos detalhes e vários graus de cor.

Um layout de imagem de fundo repetido vem a calhar se sua imagem de origem não for suficientemente grande para cobrir todo o fundo sem olhar esticado. Portanto, o WordPress, às vezes, não tem um layout repetido para manter a resolução da imagem.

A principal solução para este problema está localizada na seção Background por Appearance > Background em WordPress. Com uma foto carregada como fundo, tente predefinições como Preencher Tela, Ajustar à Tela, ou Personalizar, em vez da opção Repetir predefinição.

No entanto, você pode descobrir que tentar obter uma imagem menor para cobrir a totalidade de uma tela de fundo causa resultados desagradáveis. Nesse caso, a melhor solução é substituir completamente a imagem de fundo e procurar uma que seja grande, de alta resolução, e pronta para ser publicada na web.

Minha imagem de fundo do WordPress está esticada

Uma imagem de fundo esticada significa que suas configurações de fundo personalizadas tentam pegar uma imagem menor e cobrir toda a tela com a imagem.

Você também pode ver isso acontecer com imagens maiores e de alta resolução se elas não corresponderem à relação de aspecto exigida. Para imagens de fundo esticadas, pense no arquivo fonte. Escolher uma imagem diferente que seja adequada é a melhor opção.

Um outro problema é que você pode ter as configurações de fundo mal configuradas. Verifique coisas como a posição da imagem de fundo e ser esticado sobre a tela no modo Tela de preenchimento. Você pode precisar apenas ficar com as dimensões originais ou adicionar uma função Repetir para que tudo funcione.

Outras dicas para solução de problemas de fundo

• Os desenvolvedores de temas têm poder total sobre o recurso de fundo personalizado no WordPress. Se você instalou um tema e não consegue que o fundo funcione, sua melhor aposta é contatar o desenvolvedor do tema ou instalar um novo tema para ver se isso resolve o problema.
• Cores e imagens de fundo personalizadas geralmente substituem qualquer código CSS personalizado que você implemente para controlar o tamanho, posicionamento ou fonte de sua imagem de fundo. Você pode ter que ficar com as configurações de fundo do tema em vez de usar CSS personalizados.
• Um tema pode ser vendido com um fundo personalizado já ativado. Normalmente, tudo o que você precisa fazer é substituir a imagem de fundo por uma nova. Às vezes, é necessário tocar nos arquivos de tema ou usar CSS personalizados para substituir as configurações do tema.

Melhores plugins de imagem de fundo para WordPress

Se você quiser ter mais recursos de edição para uma imagem de fundo, estiver interessado em fundos de vídeo, ou em ferramentas que permitam fundos específicos para uma página, você pode considerar os seguintes plugins de imagem de fundo do WordPress:

Simple Full Screen Background Image

O plugin Simple Full Screen Background Image não é muito diferente da ferramenta de imagem de fundo padrão no WordPress, exceto que ele adiciona recursos automatizados para coisas como redimensionamento e escalonamento para navegadores.

Em geral, este plugin funciona melhor para aqueles que descobrem que seu tema bloqueia a capacidade de adicionar um fundo, ou talvez estejam tendo problemas com a ferramenta de fundo integrada do WordPress. Ele substitui o que você tem no WordPress e adiciona um botão especial Background em seu painel de controle do WordPress para carregar instantaneamente uma imagem do seu computador.

É tudo o que há para fazer!

O plugin também tem uma versão Premium que oferece melhor escalabilidade, suporte para um número ilimitado de fundos e efeitos únicos, e muito mais.

Advanced WordPress Backgrounds

O Advanced WordPress Backgrounds plugin assume uma abordagem diferente dos fundos do WordPress, permitindo que você tire proveito de efeitos únicos que apimentam seu fundo. Um exemplo disso é o fundo paralaxe, que pode se mover lentamente junto com o usuário enquanto ele percorre seu site.

O plugin também oferece suporte para vídeos. Os fundos dos vídeos são retirados de lugares como YouTube e Vimeo, ou você pode até mesmo hospedá-los por conta própria.

Também é possível ter uma cor sólida ou fundo texturizado. Todos estes tipos de fundo incluem recursos avançados que você não pode encontrar com a ferramenta básica de fundo WordPress. Alguns deles incluem efeitos de rolagem e escalonamento, efeitos de opacidade e opções de velocidade personalizadas.

Ele suporta Gutenberg e pode ir junto com o editor WordPress padrão e muitos outros construtores de páginas visuais. Finalmente, você pode usar suas opções personalizadas de CSS para adicionar ainda mais estilo a seus fundos.

Perfect Images + Retina

O plugin Perfect Images + Retina vem a calhar como uma solução dois-em-um. Ele permite gerenciar o tamanho e a aparência da imagem de fundo do WordPress, ao mesmo tempo em que regenerando as miniaturas e substitui as imagens. O gerenciamento de imagens é bastante impressionante, e é particularmente crucial para fundos de alta resolução.

O plugin também oferece um recurso de fundo se você optar por sua versão premium. Ele gera um equivalente de retina para aquela imagem de fundo para que as imagens tenham a aparência que se espera delas, mesmo em displays de alta resolução.

Maintenance

A manutenção é um plugin simples e fácil de usar para projetar a manutenção e as próximas páginas. O plugin Maintenance tem versões gratuitas e premium, mas o gratuito é suficiente para ativar uma página de manutenção e adicionar uma imagem de fundo com texto e campos sobrepostos.

Você pode até mesmo carregar seu próprio logotipo, personalizar coisas como fontes e ícones, e escolher vários modelos com suas próprias belas imagens de fundo. Você também pode instalar seus muitos modelos pré-construídos, mas a maioria deles requer a licença premium do plugin.

Resumo

Uma imagem de fundo WordPress básica não requer nenhum esforço para ser adicionada e mostrada em todo o seu site. É uma funcionalidade embutida no WordPress Core, portanto é fácil trocar fundos para certos eventos ou feriados. Você também pode ficar com um plano de fundo para toda a vida.

Além do fundo padrão do WordPress, você pode usar código CSS personalizado, plugins e construtores de páginas para implementar todos os tipos de fundo em seu site WordPress. Desde fundos de imagem em páginas específicas até fundos para seu botão de menu, as possibilidades são intermináveis.

Agora é hora de adicionar esse histórico que você sempre quis ao seu site WordPress.

Perdemos alguma coisa? Por favor, deixe um comentário se você estiver tendo problemas para adicionar ou gerenciar imagens de fundo do WordPress.