{"id":41842,"date":"2021-03-10T14:04:38","date_gmt":"2021-03-10T13:04:38","guid":{"rendered":"https:\/\/kinsta.com\/?p=90115"},"modified":"2025-02-14T08:46:05","modified_gmt":"2025-02-14T11:46:05","slug":"imagens-fundo-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/","title":{"rendered":"Imagens de Fundo do WordPress: Como Adicionar, editar e Personaliz\u00e1-las"},"content":{"rendered":"<p>As imagens de fundo WordPress v\u00eam em todas as formas. Voc\u00ea pode carregar uma imagem de fundo para todo o seu site, coloc\u00e1-la atr\u00e1s de bot\u00f5es, ou definir uma cor de fundo s\u00f3lida para sua p\u00e1gina de login. Independentemente de onde voc\u00ea queira coloc\u00e1-las, \u00e9 essencial entender o b\u00e1sico para <a href=\"https:\/\/kinsta.com\/pt\/blog\/aumentar-tamanho-maximo-upload-wordpress\/\">carregar uma imagem<\/a>, incluindo uma imagem de fundo.<\/p>\n<p>Este artigo explica o que \u00e9 uma imagem de fundo e como voc\u00ea pode edit\u00e1-la para um melhor resultado. Cobriremos tamb\u00e9m como obter rapidamente imagens de fundo ativadas em seu site e <a href=\"https:\/\/kinsta.com\/pt\/blog\/erros-mais-comuns-do-wordpress\/\">resolver quaisquer problemas<\/a> que possam ocorrer ao longo do caminho.<\/p>\n<p>Entusiasmado? Vamos come\u00e7ar!<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h3>Confira nosso <a href=\"https:\/\/www.youtube.com\/watch?v=BsMIX1wNMNY\">guia em v\u00eddeo<\/a> para adicionar imagens de fundo no WordPress:<\/h3>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=BsMIX1wNMNY\"><\/kinsta-video>\n<h2>O que \u00e9 uma imagem de fundo do WordPress?<\/h2>\n<p>Uma imagem de fundo WordPress serve como fundo completo do seu site. Tamb\u00e9m \u00e9 chamada de fundo personalizado.<\/p>\n<figure style=\"width: 1100px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/WordPress-Background-Image-Example-e1614937251379.png\" alt=\"Um exemplo de imagem de fundo WordPress\" width=\"1100\" height=\"671\"><figcaption class=\"wp-caption-text\">Um exemplo de imagem de fundo WordPress<\/figcaption><\/figure>\n<p>Um fundo tamb\u00e9m pode ser uma cor s\u00f3lida.<\/p>\n<p>Independentemente da op\u00e7\u00e3o escolhida, o arquivo <strong>functions.php <\/strong>trata a imagem de fundo em um tema WordPress. Ela tamb\u00e9m \u00e9 exibida pelo arquivo <strong>header.php <\/strong>do WordPress.<\/p>\n<p>Como resultado, os desenvolvedores de temas t\u00eam maior controle sobre se o recurso de fundo personalizado \u00e9 ativado ou n\u00e3o para seu <a href=\"https:\/\/kinsta.com\/pt\/blog\/temas-wordpress-mais-rapidos\/\">tema WordPress<\/a>. Voc\u00ea ainda pode <strong>ativar <\/strong>ou <strong>desativar <\/strong>a funcionalidade, mas o tema do seu site normalmente dita as configura\u00e7\u00f5es padr\u00e3o.<\/p>\n<p>H\u00e1 v\u00e1rios tipos de fundos que voc\u00ea pode implementar no WordPress. Voc\u00ea pode optar por um fundo padr\u00e3o de site completo ou por um fundo que fica atr\u00e1s de elementos espec\u00edficos como barras laterais e artigos.<\/p>\n<p>Fundos personalizados tamb\u00e9m s\u00e3o poss\u00edveis para locais mais espec\u00edficos no site WordPress:<\/p>\n<ul>\n<li>Atr\u00e1s de uma p\u00e1gina WordPress ou artigo<\/li>\n<li>Em uma p\u00e1gina da categoria WordPress<\/li>\n<li>Dentro de um bloco de conte\u00fado para uma p\u00e1gina ou artigo<\/li>\n<li>Na <a href=\"https:\/\/kinsta.com\/pt\/blog\/login-wordpress-url\/\">p\u00e1gina de Login<\/a><\/li>\n<li>Atr\u00e1s do menu de navega\u00e7\u00e3o<\/li>\n<li>Nas p\u00e1ginas de manuten\u00e7\u00e3o ou em breve<\/li>\n<\/ul>\n<p>Em geral, se o suporte de fundo personalizado for ativado em um tema, o usu\u00e1rio tem a capacidade de carregar uma imagem ou escolher uma cor para preencher a totalidade do fundo do site.<\/p>\n<p>As configura\u00e7\u00f5es est\u00e3o localizadas no painel do WordPress em <strong>Apar\u00eancia &gt; Personalizar &gt; Imagem de fundo. <\/strong>Entretanto, outros tipos de fundo s\u00e3o poss\u00edveis atrav\u00e9s de <a href=\"https:\/\/kinsta.com\/pt\/blog\/construtores-de-paginas-wordpress\/\">construtores de p\u00e1ginas de arrastar e soltar<\/a>, plugins e diferentes op\u00e7\u00f5es.<\/p>\n<p>O carregamento de uma imagem de fundo no painel de instrumentos \u00e9 apenas parte do processo. Depois disso, voc\u00ea precisa configurar as configura\u00e7\u00f5es da imagem de fundo. Algumas vezes \u00e9 poss\u00edvel deixar as configura\u00e7\u00f5es como est\u00e3o, enquanto outras vezes \u00e9 importante reconfigurar as configura\u00e7\u00f5es para garantir que a imagem pare\u00e7a excelente.<\/p>\n<p>As configura\u00e7\u00f5es para uma imagem de fundo do WordPress incluem:<\/p>\n<ul>\n<li>Cores de fundo<\/li>\n<li>Dimensionamento<\/li>\n<li>Posi\u00e7\u00e3o da imagem<\/li>\n<li>Se a imagem deve ou n\u00e3o se repetir<\/li>\n<li>Op\u00e7\u00f5es para preencher a tela ou esticar a imagem<\/li>\n<\/ul>\n<p>Cobriremos primeiro as melhores pr\u00e1ticas ao usar imagens de fundo do WordPress. Em seguida, vamos entrar em como definir uma imagem de fundo do WordPress em v\u00e1rias situa\u00e7\u00f5es.<\/p>\n\n<h2>Os diversos estilos de fundo<\/h2>\n<p>Uma vantagem real de um fundo WordPress \u00e9 que nem todas s\u00e3o <a href=\"https:\/\/kinsta.com\/pt\/blog\/tipos-arquivo-imagem\/\">imagens<\/a> est\u00e1ticas. Voc\u00ea pode se deparar com v\u00e1rios tipos de fundos, desde v\u00eddeos a padr\u00f5es fotogr\u00e1ficos a apresenta\u00e7\u00f5es de slides.<\/p>\n<figure style=\"width: 1100px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Kinsta-Background-Example-e1615198933785.png\" alt=\"Um exemplo de imagem de fundo no site da Kinsta\" width=\"1100\" height=\"693\"><figcaption class=\"wp-caption-text\">Um exemplo de imagem de fundo no site da Kinsta<\/figcaption><\/figure>\n<p>Muitas vezes voc\u00ea \u00e9 capaz de implementar fundos \u00fanicos com a ajuda de CSS personalizados ou plugins (ou ambos). Mostramos os dois m\u00e9todos neste artigo.<\/p>\n<p>Aqui est\u00e3o alguns estilos de fundo a serem considerados:<\/p>\n<ul>\n<li><strong>Imagens de fundo padr\u00e3o:<\/strong> Estas s\u00e3o imagens est\u00e1ticas (PNG, JPG, e outros formatos de imagem) que se estendem sobre a maioria do espa\u00e7o do site e se situam atr\u00e1s do conte\u00fado principal. Seus benef\u00edcios incluem simplicidade, op\u00e7\u00f5es para fotos de alta resolu\u00e7\u00e3o e suporte padr\u00e3o pelo WordPress Core. As desvantagens v\u00e3o desde sua tend\u00eancia a mexer com a visibilidade dos elementos em primeiro plano at\u00e9 uma imagem grande e de alta resolu\u00e7\u00e3o que torna seu site mais lento.<\/li>\n<li><strong>Fundos de cores s\u00f3lidas: <\/strong>A imagem de fundo <a href=\"https:\/\/kinsta.com\/pt\/blog\/esquemas-de-cores-site\/\">colorida s\u00f3lida<\/a> vem a calhar quando voc\u00ea quer adicionar alguma vibra\u00e7\u00e3o ao seu site, mas n\u00e3o tem uma imagem que se encaixe na sua marca ou que pare\u00e7a boa como fundo. O fundo colorido tamb\u00e9m apresenta uma imagem mais limpa, mais profissional, e n\u00e3o demora muito para ser implementada. Eles s\u00e3o \u00f3timos para combinar com sua marca sem precisar de c\u00f3digo personalizado ou de um plugin.<\/li>\n<li><strong>Antecedentes gradientes:<\/strong> Uma transi\u00e7\u00e3o de fundo de gradiente de uma cor para outra. \u00c9 mais atraente visualmente do que uma cor s\u00f3lida, n\u00e3o leva muito tempo para adicionar, e voc\u00ea pode adicionar um com muitos plugins. A principal desvantagem \u00e9 que um primeiro plano pode aparecer bem em uma extremidade do gradiente, mas n\u00e3o na outra.<\/li>\n<li><strong>Padr\u00e3o ou Fundos de Textura:<\/strong> Todos os fundos de padr\u00f5es e texturas s\u00e3o fotos, mas focalizam itens repetitivos na imagem ou uma textura de grande plano, como um painel de madeira ou um peda\u00e7o de grama. A parte boa de um padr\u00e3o ou textura \u00e9 que ele funciona como fundo, vendo como voc\u00ea pode estic\u00e1-lo, e a maioria das pessoas n\u00e3o notar\u00e1 se houver uma quebra no padr\u00e3o quando a imagem n\u00e3o for suficientemente grande.<\/li>\n<li><strong>Fundos de Slideshow de imagens: <\/strong>Um fundo de <a href=\"https:\/\/kinsta.com\/pt\/blog\/slides-do-wordpress\/\">slideshow de imagem<\/a> permite que os propriet\u00e1rios do site compartilhem v\u00e1rios tipos de desenhos ou fotos no fundo, aumentando os esfor\u00e7os 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.<\/li>\n<li><strong>Antecedentes dos v\u00eddeos:<\/strong> Os fundos de v\u00eddeo s\u00e3o envolventes, divertidos de assistir e f\u00e1ceis de retratar a natureza de sua marca. Entretanto, eles tamb\u00e9m levam a problemas de desempenho se n\u00e3o forem feitos corretamente e podem desviar a aten\u00e7\u00e3o do seu funil de vendas. Al\u00e9m disso, os v\u00eddeos de fundo devem ter as dimens\u00f5es perfeitas e ser reproduzidos nos momentos certos. Eles tamb\u00e9m podem ficar caros para fazer, a menos que voc\u00ea opte por v\u00eddeos de estoque gratuitos.<\/li>\n<\/ul>\n<h2>Melhores pr\u00e1ticas para o uso de imagens de fundo do WordPress<\/h2>\n<p>Definir uma imagem de fundo personalizada parece ser uma tarefa f\u00e1cil. Basta carregar a imagem no local certo e v\u00ea-la aparecer no frontend, certo?<\/p>\n<p>Na maioria das vezes, esse \u00e9 o caso, mas outras vezes voc\u00ea ver\u00e1 que a imagem de fundo pode ser um pouco problem\u00e1tica. \u00c9 por isso que recomendamos seguir as <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/\">melhores pr\u00e1ticas<\/a> para imagens de fundo do WordPress a fim de eliminar o maior n\u00famero poss\u00edvel de problemas.<\/p>\n<h3>Dicas para usar imagens de fundo do WordPress<\/h3>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=RLR1vILiE98\"><\/kinsta-video>\n<h3>Fique com imagens de alta qualidade<\/h3>\n<p>A resolu\u00e7\u00e3o de sua imagem de fundo pretendida muitas vezes faz ou quebra sua apresenta\u00e7\u00e3o. Voc\u00ea pode pensar que uma imagem que voc\u00ea tirou com seu smartphone \u00e9 perfeita para uma imagem de fundo, mas as chances s\u00e3o de que ela precise ser de qualidade muito maior.<\/p>\n<figure style=\"width: 1139px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Unsplash-Free-Stock-Photos.png\" alt=\"Fotos de estoque gr\u00e1tis em Unsplash\" width=\"1139\" height=\"729\"><figcaption class=\"wp-caption-text\">Fotos de estoque gr\u00e1tis em Unsplash<\/figcaption><\/figure>\n<p>Voc\u00ea pode pagar por uma imagem livre de royalties a partir de um site como o Shutterstock. Esses sites normalmente t\u00eam imagens de n\u00edvel profissional que s\u00e3o preparadas e prontas para serem carregadas como uma grande imagem de fundo. Voc\u00ea tamb\u00e9m pode encontrar muitas delas em <a href=\"https:\/\/kinsta.com\/pt\/blog\/imagens-gratuitas-para-wordpress\/\">sites de imagens de estoque gr\u00e1tis<\/a>.<\/p>\n<p>A imagem de fundo pode n\u00e3o ser exibida em sua totalidade em seu website, pois grande parte dela \u00e9 coberta pelo conte\u00fado. Mesmo assim, a imagem real \u00e9 exibida em toda a tela.<\/p>\n<p>Se voc\u00ea n\u00e3o usar uma imagem de alta qualidade, voc\u00ea corre o risco de ver um fundo esticado.<\/p>\n<h3>Certifique-se de que as imagens de fundo est\u00e3o dimensionadas corretamente<\/h3>\n<p>Junto com a resolu\u00e7\u00e3o da imagem, o tamanho f\u00edsico da imagem \u00e9 muito importante.<\/p>\n<p>Todas as <a href=\"https:\/\/kinsta.com\/pt\/blog\/design-responsivo-web\/\">telas t\u00eam diferentes propor\u00e7\u00f5es de aspecto<\/a>. E os dispositivos m\u00f3veis o tornam ainda mais complicado. Mas o objetivo \u00e9 usar uma imagem que pare\u00e7a \u00f3tima para a maior das telas. Caso contr\u00e1rio, corre-se o risco de ter mais uma vez a imagem esticada ou n\u00e3o exibida corretamente.<\/p>\n<p>Em geral, uma boa regra \u00e9 ficar com um tamanho m\u00ednimo de imagem de fundo WordPress de <strong>1024 x 768 <\/strong>pixels. Entretanto, outros especialistas recomendam algo mais como <strong>1920 x 1080 <\/strong>pixels. Em geral, seu melhor curso de a\u00e7\u00e3o \u00e9 ficar entre 1000 e 3000 pixels para a largura, dependendo de onde ela \u00e9 exibida.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/starting-large.png\" alt=\"Dimens\u00f5es da imagem de fundo WordPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Dimens\u00f5es da imagem de fundo WordPress<\/figcaption><\/figure>\n<p>O pr\u00f3ximo fator a ser considerado \u00e9 a rela\u00e7\u00e3o de aspecto. A imagem de fundo cobre um site inteiro, ou \u00e9 apenas o quarto superior?<\/p>\n<p>Tecnicamente, um website tem uma rela\u00e7\u00e3o de aspecto retrato (maior altura do que largura). Assim, voc\u00ea pode olhar para esses tipos de imagens. Entretanto, fundos seccionais &#8211; como os de cabe\u00e7alhos ou <a href=\"https:\/\/kinsta.com\/pt\/blog\/tamanhos-dos-banners-anuncios\/\">banners de an\u00fancios<\/a> &#8211; devem permanecer na formata\u00e7\u00e3o da paisagem (largura maior que a altura).<\/p>\n<p>Al\u00e9m disso, a rela\u00e7\u00e3o de aspecto mais comum para desktops hoje em dia \u00e9 de <strong>16:9<\/strong>. Permanecer em torno desse objetivo ajuda. Um tema ou plugin responsivo pode ajustar a imagem de fundo automaticamente para visualiza\u00e7\u00e3o m\u00f3vel.<\/p>\n<p>Em \u00faltima an\u00e1lise, testar suas imagens de fundo em um site real e v\u00e1rios tipos de dispositivos deve tornar a decis\u00e3o final muito mais f\u00e1cil.<\/p>\n<h3>Otimizar antes de fazer uma imagem de fundo para WordPress<\/h3>\n<p>Como em todas as imagens carregadas no WordPress, voc\u00ea mesmo est\u00e1 prestando um mau servi\u00e7o se n\u00e3o as <a href=\"https:\/\/kinsta.com\/pt\/blog\/otimizar-imagens-para-web\/\">otimizar antes de publicar na Internet<\/a>. Isto \u00e9 particularmente importante para as imagens de fundo, uma vez que elas freq\u00fcentemente aparecem em v\u00e1rias p\u00e1ginas do seu site. Al\u00e9m disso, elas s\u00e3o fotos grandes e cobrem uma quantidade significativa de espa\u00e7o na tela.<\/p>\n<p>Imagens maiores colocam uma quantidade significativa de tens\u00e3o em seu servidor. Mantenha a resolu\u00e7\u00e3o de sua imagem, mas otimize seu tamanho para que seu <a href=\"https:\/\/kinsta.com\/pt\/aprenda\/acelerar-o-seu-site-wordpress\/\">site seja carregado rapidamente<\/a>.<\/p>\n<p>Voc\u00ea tem duas op\u00e7\u00f5es para otimizar as fotos:<\/p>\n<ol>\n<li>Otimize as imagens de fundo (e todas as imagens do site) antes de carreg\u00e1-las para o WordPress. Complete este processo manual com a ajuda de ferramentas como Photoshop Express, GIMP, e Pixlr.<\/li>\n<li>Automatize o processo de otimiza\u00e7\u00e3o instalando um plugin WordPress que redimensiona e encolhe as fotos ap\u00f3s o upload.<\/li>\n<\/ol>\n<p><a href=\"https:\/\/kinsta.com\/pt\/blog\/otimizar-imagens-para-web\/\">Leia nosso guia detalhado de otimiza\u00e7\u00e3o de imagem<\/a> sobre como otimizar imagens para melhorar o desempenho da web.<\/p>\n<h3>Verifique o suporte de fundo antes de instalar um tema<\/h3>\n<p>Infelizmente, nem todos os temas suportam imagens de fundo personalizadas. Isso \u00e9 freq\u00fcentemente porque o fundo n\u00e3o se encaixa no design geral do tema, ent\u00e3o o desenvolvedor optou por deslig\u00e1-lo completamente.<\/p>\n<p>No entanto, se voc\u00ea realmente quer um hist\u00f3rico em seu site, \u00e9 prudente verificar a lista de recursos ao baixar um novo tema, especialmente se voc\u00ea planeja <a href=\"https:\/\/kinsta.com\/pt\/blog\/que-e-u-tema-wordpress\/\">pagar por um tema premium<\/a>. Muitos <a href=\"https:\/\/kinsta.com\/pt\/blog\/temas-wordpress-mais-rapidos\/\">sites de venda de temas<\/a> oferecem informa\u00e7\u00f5es sobre se um tema suporta ou n\u00e3o fundos.<\/p>\n<p>Por exemplo, os temas listados na <a href=\"https:\/\/wordpress.org\/themes\/\">Biblioteca de Temas do WordPress<\/a> indicam suporte para fundos personalizados como tags. Voc\u00ea tamb\u00e9m pode encontrar uma refer\u00eancia a um fundo personalizado na descri\u00e7\u00e3o do tema.<\/p>\n<figure style=\"width: 1237px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/01\/the-feature-for-custom-background.png\" alt=\"Suporte de \"Contexto personalizado\" para temas\" width=\"1237\" height=\"1321\"><figcaption class=\"wp-caption-text\">Suporte de &#8220;Contexto personalizado&#8221; para temas<\/figcaption><\/figure>\n<p>Outros sites tem\u00e1ticos normalmente incluem informa\u00e7\u00f5es similares sobre imagens de fundo personalizadas. Caso contr\u00e1rio, procure o <a href=\"https:\/\/kinsta.com\/pt\/blog\/contrate-um-desenvolvedor-do-wordpress\/\">desenvolvedor<\/a> para descobrir se \u00e9 poss\u00edvel de alguma forma e se a anula\u00e7\u00e3o do bloco de imagens de fundo (coberto abaixo) causar\u00e1 qualquer problema com o tema.<\/p>\n<h3>Considere o uso de um criador de p\u00e1ginas visuais para facilitar a cria\u00e7\u00e3o de imagens de fundo<\/h3>\n<p>Construtores de p\u00e1ginas como Gutenberg, WPBakery, <a href=\"https:\/\/kinsta.com\/pt\/blog\/divi-vs-elementor\/\">Divi e Elementor<\/a>, oferecem listas impressionantes de blocos e m\u00f3dulos para inserir elementos como imagens e caixas de texto em qualquer lugar em uma p\u00e1gina da web.<\/p>\n<figure style=\"width: 1324px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/elementor-e.png\" alt=\"Elementor construtor de websites\" width=\"1324\" height=\"435\"><figcaption class=\"wp-caption-text\">Elementor construtor de websites<\/figcaption><\/figure>\n<p>Sem um <a href=\"https:\/\/kinsta.com\/pt\/blog\/construtores-de-paginas-wordpress\/\">construtor de arrastar e soltar<\/a>, torna-se um pouco mais dif\u00edcil configurar uma imagem de fundo. \u00c9 especialmente dif\u00edcil tentar resolver qualquer problema que voc\u00ea possa encontrar.<\/p>\n<p>Os construtores de p\u00e1ginas tamb\u00e9m tendem a substituir a funcionalidade padr\u00e3o de imagem de fundo fornecida atrav\u00e9s do WordPress. Voc\u00ea pode substituir as restri\u00e7\u00f5es tem\u00e1ticas ou qualquer elemento que falte que ajude a exibir uma imagem de fundo no c\u00f3digo.<\/p>\n<h3>Tenha certeza de que sua imagem de fundo \u00e9 legal<\/h3>\n<p>A legalidade sempre surge quando se fala de imagens, especialmente aquelas publicadas na internet. H\u00e1 uma tend\u00eancia crescente nas <a href=\"https:\/\/kinsta.com\/pt\/blog\/plugins-de-midia-social-do-wordpress\/\">m\u00eddias sociais<\/a> onde as pessoas parecem assumir que adicionar um cr\u00e9dito a uma foto automaticamente faz com que seja correto usar essa foto.<\/p>\n<p>Isso \u00e9 falso.<\/p>\n<p>Quem tirar a foto \u00e9 o propriet\u00e1rio. Mesmo que essa imagem venha de uma r\u00e1pida foto do iPhone &#8211; eles t\u00eam imediatamente prote\u00e7\u00e3o de direitos autorais para essa foto nos Estados Unidos e em muitos outros pa\u00edses.<\/p>\n<p>Se voc\u00ea quiser os direitos legais para usar a foto de outra pessoa, seria necess\u00e1ria uma declara\u00e7\u00e3o por escrito do detentor dos direitos autorais permitindo que voc\u00ea use suas imagens &#8211; um simples e-mail faz o truque. Mesmo assim, voc\u00ea pode ter que atribuir a foto se a pessoa lhe pedir.<\/p>\n<p>Temos um <a href=\"https:\/\/kinsta.com\/pt\/blog\/proteger-imagens\/\">guia abrangente sobre a prote\u00e7\u00e3o de imagens em seu site<\/a>, mas o artigo tamb\u00e9m esbo\u00e7a informa\u00e7\u00f5es valiosas para aqueles interessados em utilizar fotos de outras fontes.<\/p>\n<p>A parte dif\u00edcil das imagens de fundo \u00e9 que normalmente n\u00e3o \u00e9 pr\u00e1tico adicionar atribui\u00e7\u00e3o, vendo como o WordPress n\u00e3o tem lugar para incorporar uma legenda vis\u00edvel para as imagens de fundo. E n\u00e3o, voc\u00ea n\u00e3o pode adicionar a atribui\u00e7\u00e3o em um artigo ou p\u00e1gina aleat\u00f3ria do blog e esperar que isso sirva como cr\u00e9dito para uma imagem de fundo completa do site.<\/p>\n<p>Para se proteger e respeitar aqueles que tiram as fotos, considere uma das seguintes op\u00e7\u00f5es ao adquirir uma imagem de fundo WordPress:<\/p>\n<ul>\n<li>Tire voc\u00ea mesmo a foto. Essa \u00e9 a maneira mais f\u00e1cil de garantir que voc\u00ea n\u00e3o est\u00e1 infringindo os direitos autorais de propriedade de ningu\u00e9m.<\/li>\n<li><a href=\"https:\/\/kinsta.com\/blog\/wordpress-stock-photos\/#2-pixelrockstar-premium-yet-insanely-affordable\">Pague por fotos<\/a> em sites como Shutterstock e iStockPhoto. Estas \u00e0s vezes s\u00e3o caras, mas para uma imagem de fundo, ela pode apenas espremer em seu or\u00e7amento.<\/li>\n<li>Considere um <a href=\"https:\/\/kinsta.com\/pt\/blog\/imagens-gratuitas-para-wordpress\/\">site de imagem gratuito<\/a> como Unsplash ou Pexels. Entretanto, certifique-se de que a atribui\u00e7\u00e3o n\u00e3o seja necess\u00e1ria! Voc\u00ea pode ocasionalmente localizar imagens nestes sites onde a atribui\u00e7\u00e3o \u00e9 sugerida, mas n\u00e3o \u00e9 necess\u00e1ria.<\/li>\n<li>Entre em contato com o fot\u00f3grafo ou artista e pergunte se voc\u00ea pode us\u00e1-lo gratuitamente. Isto pode ser tudo o que voc\u00ea precisa, especialmente se voc\u00ea oferecer algo em troca.<\/li>\n<li>Pense em pular a imagem de fundo, ou considere ir para um fundo colorido em vez de uma foto.<\/li>\n<\/ul>\n<h2>Como fa\u00e7o para colocar uma imagem de fundo no WordPress?<\/h2>\n<p>H\u00e1 v\u00e1rias maneiras de definir uma imagem de fundo no WordPress. Estes m\u00e9todos geralmente mudam com base no local onde voc\u00ea quer colocar a imagem.<\/p>\n<p>Por exemplo, voc\u00ea pode decidir que gostaria de ter uma imagem de fundo para permanecer a mesma em todo o seu website. Por outro lado, \u00e9 poss\u00edvel que voc\u00ea prefira encontrar uma maneira de mostrar imagens de fundo \u00fanicas para todas as suas p\u00e1ginas.<\/p>\n<p>Uma vez que existem tantas possibilidades, vamos cobrir como adicionar uma imagem de fundo ou cor \u00e0s se\u00e7\u00f5es seguintes:<\/p>\n<ul>\n<li>O site inteiro<\/li>\n<li>Uma p\u00e1gina WordPress<\/li>\n<li>Um artigo WordPress<\/li>\n<li>Um <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-0\/\">bloco de conte\u00fado<\/a> individual<\/li>\n<li>O cabe\u00e7alho WordPress<\/li>\n<li>Uma p\u00e1gina de arquivo da categoria<\/li>\n<li>A p\u00e1gina de login do WordPress<\/li>\n<li>O menu de navega\u00e7\u00e3o<\/li>\n<li>Uma p\u00e1gina de manuten\u00e7\u00e3o<\/li>\n<\/ul>\n<h3 class=\"title style-scope ytd-video-primary-info-renderer\">Como adicionar uma imagem de fundo ao cabe\u00e7alho e aos menus do WordPress<\/h3>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=5bSeC5NQjp0\"><\/kinsta-video>\n<h3>Antes de come\u00e7ar: Ative o suporte de fundo personalizado no WordPress (se necess\u00e1rio)<\/h3>\n<p>Os desenvolvedores de temas decidem o destino das capacidades de fundo de um site. O WordPress tem a funcionalidade embutida no n\u00facleo, mas um desenvolvedor de temas poderia deslig\u00e1-lo, deixando-o sem a configura\u00e7\u00e3o do painel de controle para lig\u00e1-lo.<\/p>\n<p>Se em algum ponto dos tutoriais a seguir voc\u00ea descobrir que <a href=\"https:\/\/kinsta.com\/pt\/blog\/que-e-u-tema-wordpress\/\">seu tema \u00e9 a raz\u00e3o pela qual<\/a> voc\u00ea n\u00e3o tem uma op\u00e7\u00e3o de <strong>fundo personalizada<\/strong>, considere os seguintes passos para fazer uma corre\u00e7\u00e3o r\u00e1pida.<\/p>\n<p>O principal suporte de fundo personalizado para WordPress \u00e9 tratado pelo arquivo <strong>functions.php.<\/strong> Abra esse arquivo e insira o seguinte c\u00f3digo, caso ele esteja faltando:<\/p>\n<pre><code class=\"language-css\">$defaults = array(\n\u00a0\u00a0\u00a0\u00a0'default-color'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 =&gt; '',\n\u00a0\u00a0\u00a0\u00a0'default-image'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 =&gt; '',\n\u00a0\u00a0\u00a0\u00a0'default-repeat'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 =&gt; '',\n\u00a0\u00a0\u00a0\u00a0'default-position-x'\u00a0\u00a0\u00a0\u00a0 =&gt; '',\n\u00a0\u00a0\u00a0\u00a0'default-attachment'\u00a0\u00a0\u00a0\u00a0 =&gt; '',\n\u00a0\u00a0\u00a0\u00a0'wp-head-callback'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 =&gt; '_custom_background_cb',\n\u00a0\u00a0\u00a0\u00a0'admin-head-callback'\u00a0\u00a0\u00a0 =&gt; '',\n\u00a0\u00a0\u00a0\u00a0'admin-preview-callback' =&gt; ''\n);\nadd_theme_support( 'custom-background', $defaults );<\/code><\/pre>\n<p>Tenha em mente que o elemento que realmente ativa o suporte de fundo \u00e9 a fun\u00e7\u00e3o <code>add_theme_support()<\/code> com tudo nele. Esse c\u00f3digo ativa o recurso de fundo no <a href=\"https:\/\/kinsta.com\/pt\/blog\/painel-administrativo-wordpress\/\">painel do WordPress<\/a>, que voc\u00ea pode usar em muitos dos tutoriais a seguir neste artigo.<\/p>\n<p>Tamb\u00e9m \u00e9 poss\u00edvel adicionar uma imagem de fundo padr\u00e3o para o tema inteiro atrav\u00e9s do arquivo <strong>functions.php. <\/strong>Basta ir para a \u00e1rea do c\u00f3digo anterior com o valor da <code>default-image<\/code> e adicionar a URL da imagem ao espa\u00e7o em branco entre o <code>' '<\/code> depois do <code>=&gt;<\/code>.<\/p>\n<p>Esta \u00e9 uma maneira r\u00e1pida e f\u00e1cil de ativar fundos personalizados dentro do painel de controle do WordPress.<\/p>\n<p>Dito isto, recomendamos <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-alterar-tema-wordpress\/\">mudar o tema<\/a> se ele n\u00e3o tiver apoio de fundo em primeiro lugar. A remo\u00e7\u00e3o do recurso de fundo personalizado poderia ter seu pr\u00f3prio prop\u00f3sito, ou talvez o desenvolvedor do tema tenha achado que estava causando muitos problemas com o projeto.<\/p>\n<h3>Como adicionar uma imagem de fundo ao seu site WordPress inteiro<\/h3>\n<p>Se seu tema oferece a capacidade de adicionar uma imagem de fundo personalizada (e muitos o fazem), isso torna muito mais f\u00e1cil para voc\u00ea.<\/p>\n<p>Para come\u00e7ar, v\u00e1 at\u00e9 seu painel do WordPress e clique em <strong>Appearance &gt; Customize.<\/strong><\/p>\n<figure style=\"width: 1090px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/custom-ize.png\" alt=\"Clique no link 'Personalizar' sob o menu Apar\u00eancia\" width=\"1090\" height=\"912\"><figcaption class=\"wp-caption-text\">Clique no link &#8216;Personalizar&#8217; sob o menu Apar\u00eancia<\/figcaption><\/figure>\n<p>Isso o leva ao <strong>WordPress Theme Customizer<\/strong>, com configura\u00e7\u00f5es de personaliza\u00e7\u00e3o \u00e0 esquerda e uma visualiza\u00e7\u00e3o do site \u00e0 direita.<\/p>\n<p>Aqui, encontre e clique na guia <strong>Background<\/strong>.<\/p>\n<figure style=\"width: 1885px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/background-tab.png\" alt=\"Imagem de fundo WordPress no editor\" width=\"1885\" height=\"940\"><figcaption class=\"wp-caption-text\">Imagem de fundo WordPress no editor<\/figcaption><\/figure>\n<p>Como alternativa, se voc\u00ea pode selecionar <strong>Apar\u00eancia &gt; Fundo<\/strong>, voc\u00ea pode us\u00e1-lo para uma rota mais direta para este cen\u00e1rio.<\/p>\n<figure style=\"width: 1302px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/back-back.png\" alt=\"Clique no link 'Background' sob o menu Appearance\" width=\"1302\" height=\"905\"><figcaption class=\"wp-caption-text\">Clique no link &#8216;Background&#8217; sob o menu Appearance<\/figcaption><\/figure>\n<p>A \u00e1rea de personaliza\u00e7\u00e3o <strong>Background <\/strong>gerencia os elementos de fundo para todo o seu site.<\/p>\n<p>Clique no bot\u00e3o <strong>Selecionar imagem <\/strong>para prosseguir.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/select-background.png\" alt=\"Clique no bot\u00e3o 'Selecionar imagem'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Clique no bot\u00e3o &#8216;Selecionar imagem&#8217;<\/figcaption><\/figure>\n<p>Na janela <strong>Selecionar imagem<\/strong>, escolha uma imagem que sirva bem como fundo para o <a href=\"https:\/\/kinsta.com\/pt\/blog\/principais-tendencias-em-web-design\/\">estilo de sua marca e website<\/a>. Em geral, um padr\u00e3o de cor neutra com uma tonalidade preta, ou branca, ou cinza geralmente ajuda a garantir que a maior parte do seu texto e conte\u00fado ainda fique bem com o fundo atr\u00e1s dele.<\/p>\n<p>Depois de selecionar sua imagem, clique no bot\u00e3o <strong>Escolher imagem <\/strong>para continuar.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/choose-the-im.png\" alt=\"Escolha a imagem de fundo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Escolha a imagem de fundo<\/figcaption><\/figure>\n<p>O hist\u00f3rico que voc\u00ea implementou agora aparece na visualiza\u00e7\u00e3o do site.<\/p>\n<p>Veja se seu conte\u00fado ainda se destaca e parece apresent\u00e1vel com a imagem escolhida. \u00c0s vezes voc\u00ea pode descobrir que precisa trocar completamente o fundo ou mudar coisas como texto ou cores de link.<\/p>\n<p>Uma pequena <a href=\"https:\/\/kinsta.com\/pt\/blog\/regenerar-miniaturas\/\">miniatura<\/a> do fundo tamb\u00e9m aparece no painel de <strong>configura\u00e7\u00f5es<\/strong>, mostrando que a imagem foi implementada.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/thats-where-it-is.png\" alt=\"Miniaturas de imagem de fundo WordPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Miniaturas de imagem de fundo WordPress<\/figcaption><\/figure>\n<p>Algumas configura\u00e7\u00f5es adicionais est\u00e3o dispon\u00edveis para os fundos do WordPress, incluindo o campo <strong>Predefinido.<\/strong><\/p>\n<p>Clique no campo <strong>Preset <\/strong>para alterar a formata\u00e7\u00e3o da imagem utilizando desenhos e alinhamentos pr\u00e9-definidos.<\/p>\n<figure style=\"width: 1890px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/preset.png\" alt=\"A op\u00e7\u00e3o 'Preset' para imagens de fundo do WordPress\" width=\"1890\" height=\"940\"><figcaption class=\"wp-caption-text\">A op\u00e7\u00e3o &#8216;Preset&#8217; para imagens de fundo do WordPress<\/figcaption><\/figure>\n<p>Voc\u00ea pode escolher entre as seguintes predefini\u00e7\u00f5es:<\/p>\n<ul>\n<li><strong>Default:<\/strong> Normalmente \u00e9 o mesmo que <strong>Repetir<\/strong>, mas pode depender do seu tema. A configura\u00e7\u00e3o Padr\u00e3o geralmente funciona melhor, mas depende da imagem que est\u00e1 sendo usada.<\/li>\n<li><strong>Tela de preenchimento:<\/strong> Esta configura\u00e7\u00e3o 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\u00e7\u00e3o, mas pode causar emba\u00e7amento com imagens de baixa resolu\u00e7\u00e3o.<\/li>\n<li><strong>Adequado \u00e0 tela:<\/strong> Isto mant\u00e9m a rela\u00e7\u00e3o de aspecto da foto original e tenta usar essa rela\u00e7\u00e3o para se ajustar \u00e0 imagem atual da tela. Faz um bom trabalho para manter a imagem pr\u00f3xima ao seu estado original, mas pode n\u00e3o cobrir toda a \u00e1rea de fundo.<\/li>\n<li><strong>Repito: <\/strong>Isto usa partes da fun\u00e7\u00e3o <strong>Tela de preenchimento<\/strong>, expandindo e alongando a imagem, mas tamb\u00e9m repete a imagem quando ela n\u00e3o consegue cobrir toda a tela com sucesso. Para padr\u00f5es, isto geralmente parece \u00f3timo. Mas, para algumas imagens, ela pode produzir uma linha dura entre as imagens repetidas.<\/li>\n<li><strong>Personalizado:<\/strong> Esta configura\u00e7\u00e3o lhe d\u00e1 o maior controle sobre o fundo, oferecendo v\u00e1rias op\u00e7\u00f5es para personalizar o tamanho da imagem de fundo do WordPress, como por exemplo, como ela se repete na p\u00e1gina, se estica, ou se move enquanto o usu\u00e1rio rola.<\/li>\n<\/ul>\n<p>N\u00e3o h\u00e1 nenhuma regra quanto a qual dos Presets funciona melhor porque as imagens v\u00eam em tamanhos, resolu\u00e7\u00f5es e detalhes diferentes. Portanto, \u00e9 melhor come\u00e7ar com a predefini\u00e7\u00e3o <strong>predefinida <\/strong>e depois testar cada uma das outras predefini\u00e7\u00f5es para ver qual delas parece melhor para sua imagem de fundo.<\/p>\n<p>Se tudo mais falhar, v\u00e1 para a configura\u00e7\u00e3o <strong>personalizada <\/strong>para ser realmente espec\u00edfico com suas escolhas.<\/p>\n<figure style=\"width: 1406px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/fill.png\" alt=\"Pr\u00e9-defini\u00e7\u00e3o de 'tela de preenchimento' para imagens de fundo WordPress\" width=\"1406\" height=\"940\"><figcaption class=\"wp-caption-text\">Pr\u00e9-defini\u00e7\u00e3o de &#8216;tela de preenchimento&#8217; para imagens de fundo WordPress<\/figcaption><\/figure>\n<p>A pr\u00e9-configura\u00e7\u00e3o do <strong>Fit to Screen <\/strong>n\u00e3o o faz exatamente para esta imagem, principalmente porque a imagem original \u00e9 muito mais longa do que \u00e9 ampla, deixando uma quantidade significativa de espa\u00e7o \u00e0 direita. Eu poderia mudar a <strong>posi\u00e7\u00e3o da imagem <\/strong>para o <strong>Centro<\/strong>, mas muito provavelmente deixaria espa\u00e7o branco nos lados.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/fit-to.png\" alt=\"A predefini\u00e7\u00e3o 'Fit to Screen'.\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">A predefini\u00e7\u00e3o &#8216;Fit to Screen&#8217;.<\/figcaption><\/figure>\n<p>A pr\u00f3xima configura\u00e7\u00e3o a ser considerada \u00e9 a ferramenta <strong>Image Position<\/strong>. Clique nas setas para mover sua imagem de fundo, ajustando a orienta\u00e7\u00e3o para colocar o foco da imagem em dire\u00e7\u00e3o ao centro ou preencher a tela.<\/p>\n<p>Assim como a configura\u00e7\u00e3o <strong>Presets<\/strong>, a ferramenta <strong>Image Position <\/strong>requer um processo de adivinha\u00e7\u00e3o e verifica\u00e7\u00e3o do seu trabalho, pois a imagem original e seu conte\u00fado ditam como ela se parece.<\/p>\n<figure style=\"width: 1886px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/moves-around.png\" alt=\"Posi\u00e7\u00e3o da imagem de fundo WordPress\" width=\"1886\" height=\"940\"><figcaption class=\"wp-caption-text\">Posi\u00e7\u00e3o da imagem de fundo WordPress<\/figcaption><\/figure>\n<p>A seguir, h\u00e1 um campo de sele\u00e7\u00e3o para fazer a imagem de fundo <strong>Scroll with Page<\/strong>.<\/p>\n<p>Com esta caixa marcada, a imagem de fundo se cola ao conte\u00fado em primeiro plano e rola junto com o usu\u00e1rio enquanto esta pessoa se move para cima ou para baixo na p\u00e1gina.<\/p>\n<figure style=\"width: 1885px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/scroll.png\" alt=\"Habilitando a op\u00e7\u00e3o 'Rolar com p\u00e1gina'\" width=\"1885\" height=\"940\"><figcaption class=\"wp-caption-text\">Habilitando a op\u00e7\u00e3o &#8216;Rolar com p\u00e1gina&#8217;<\/figcaption><\/figure>\n<p>Desmarcar essa caixa tende a mudar a orienta\u00e7\u00e3o geral da imagem de fundo, mas sua caracter\u00edstica dominante \u00e9 dizer ao fundo para permanecer est\u00e1tico enquanto o usu\u00e1rio percorre a p\u00e1gina.<\/p>\n<p>Os itens de conte\u00fado em primeiro plano (como os <a href=\"https:\/\/kinsta.com\/pt\/blog\/conversoes-paginas-produtos-woocommerce\/\">produtos<\/a> neste caso) deslizam sobre a imagem de fundo, criando um efeito atrativo.<\/p>\n<figure style=\"width: 1878px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/no-scroll.png\" alt=\"Desativa\u00e7\u00e3o da op\u00e7\u00e3o 'Rolar com p\u00e1gina'\" width=\"1878\" height=\"940\"><figcaption class=\"wp-caption-text\">Desativa\u00e7\u00e3o da op\u00e7\u00e3o &#8216;Rolar com p\u00e1gina&#8217;<\/figcaption><\/figure>\n<h4>Trabalhando com uma predefini\u00e7\u00e3o personalizada<\/h4>\n<p>Ao optar por algo al\u00e9m da predefini\u00e7\u00e3o <strong>personalizada<\/strong>, voc\u00ea n\u00e3o obt\u00e9m tantas configura\u00e7\u00f5es adicionais para configurar.<\/p>\n<p>No entanto, a escolha da predefini\u00e7\u00e3o personalizada abre v\u00e1rios outros campos a serem considerados.<\/p>\n<p>Por exemplo, voc\u00ea pode optar por <strong>Preencher a Tela <\/strong>ou <strong>Ajustar \u00e0 Tela<\/strong>, e depois combinar isso com uma imagem de fundo repetida ou n\u00e3o repetida, combinando os elementos predefinidos de antes. E voc\u00ea ainda tem a op\u00e7\u00e3o <strong>Scroll With Page.<\/strong><\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/custom-one.png\" alt=\"Predefini\u00e7\u00f5es e tamanhos de imagem para imagens de fundo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Predefini\u00e7\u00f5es e tamanhos de imagem para imagens de fundo<\/figcaption><\/figure>\n<p>Veja se \u00e9 poss\u00edvel utilizar a imagem original sem nenhuma edi\u00e7\u00e3o ou configura\u00e7\u00e3o. \u00c0s vezes a foto original \u00e9 uma combina\u00e7\u00e3o quase perfeita para ser usada como fundo, ent\u00e3o por que mexer com o que j\u00e1 est\u00e1 pronto para ir?<\/p>\n<p>Entretanto, seu tamanho tamb\u00e9m pode ser <a href=\"https:\/\/kinsta.com\/pt\/blog\/teste-de-velocidade-do-seu-site\/\">grande demais para seu website<\/a>, ou talvez a rela\u00e7\u00e3o de aspecto n\u00e3o seja a mais adequada. Independentemente disso, sugerimos que experimente este ajuste para descobrir se \u00e9 o mais adequado para voc\u00ea.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/no-repeat-or.png\" alt=\"Defini\u00e7\u00e3o do tamanho da imagem de fundo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Defini\u00e7\u00e3o do tamanho da imagem de fundo<\/figcaption><\/figure>\n<p>Uma vez que voc\u00ea decida sobre suas configura\u00e7\u00f5es de fundo perfeitas (para este tutorial, a op\u00e7\u00e3o Padr\u00e3o parece agrad\u00e1vel), clique no bot\u00e3o <strong>Publicar <\/strong>para renderizar as mudan\u00e7as em seu website.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/publish-to-page.png\" alt=\"Aperte o bot\u00e3o 'Publicar'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Aperte o bot\u00e3o &#8216;Publicar&#8217;<\/figcaption><\/figure>\n<p>V\u00e1 para o frontend do seu site para ver o fundo em a\u00e7\u00e3o.<\/p>\n<p>A <a href=\"https:\/\/kinsta.com\/pt\/blog\/mudar-pagina-inicial-wordpress\/\">p\u00e1gina inicial<\/a> \u00e9 um lugar maravilhoso para se come\u00e7ar. Voc\u00ea notar\u00e1 que a \u00e1rea de cabe\u00e7alho e a imagem de boas-vindas n\u00e3o t\u00eam fundo. Isso porque a imagem de boas-vindas na parte superior do site j\u00e1 cobre toda a parte horizontal da tela como uma imagem de her\u00f3i em tela cheia.<\/p>\n<p>Quanto ao cabe\u00e7alho e <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-menu-plugins\/\">menu<\/a>, voc\u00ea aprender\u00e1 como configurar esses fundos em alguns dos tutoriais a seguir.<\/p>\n<figure style=\"width: 1548px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-back.png\" alt=\"Ver a imagem de fundo do WordPress\" width=\"1548\" height=\"1885\"><figcaption class=\"wp-caption-text\">Ver a imagem de fundo do WordPress<\/figcaption><\/figure>\n<p>Tenha em mente que o fundo geral personalizado do WordPress \u00e9 ativado em todas as p\u00e1ginas e artigos\u00a0 do seu site. \u00c9 uma caracter\u00edstica global para aqueles que querem uma maneira r\u00e1pida de marcar seu site e adicionar um pouco de flare.<\/p>\n<p>Por exemplo, ir para a p\u00e1gina <strong>Loja <\/strong>neste site revela o hist\u00f3rico por tr\u00e1s da sele\u00e7\u00e3o do produto.<\/p>\n<figure style=\"width: 1571px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/every-page.png\" alt=\"A imagem de fundo do WordPress em outra p\u00e1gina\" width=\"1571\" height=\"1266\"><figcaption class=\"wp-caption-text\">A imagem de fundo do WordPress em outra p\u00e1gina<\/figcaption><\/figure>\n<h4>Como definir uma cor de fundo ao inv\u00e9s de uma imagem para todo o seu site<\/h4>\n<p>O processo de ativar uma cor de fundo em todo o seu site n\u00e3o \u00e9 muito diferente de quando voc\u00ea est\u00e1 ativando uma imagem de fundo. Comece indo para <strong>Appearance &gt; Background <\/strong>no painel, depois procure o campo Background <strong>Color <\/strong>(Cor de fundo).<\/p>\n<p>Clique no bot\u00e3o <strong>Selecionar Cor <\/strong>para abrir mais configura\u00e7\u00f5es para escolher e trocar diferentes cores para seu fundo.<\/p>\n<figure style=\"width: 1906px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/bacgkround-select.jpg\" alt=\"Selecionando uma cor s\u00f3lida como fundo\" width=\"1906\" height=\"940\"><figcaption class=\"wp-caption-text\">Selecionando uma cor s\u00f3lida como fundo<\/figcaption><\/figure>\n<p>O painel colorido oferece m\u00faltiplas op\u00e7\u00f5es para que voc\u00ea possa <a href=\"https:\/\/kinsta.com\/pt\/blog\/esquemas-de-cores-site\/\">decidir sobre uma cor<\/a>. A primeira \u00e9 digitando, ou colando, um c\u00f3digo de cor. Todas as cores t\u00eam c\u00f3digos de cores \u00fanicos, e voc\u00ea pode encontrar essas cores e seus c\u00f3digos associados com uma r\u00e1pida busca na Internet.<\/p>\n<p>A outra op\u00e7\u00e3o \u00e9 clicar ao redor do painel colorido para encontrar a cor perfeita para o fundo. Eles t\u00eam at\u00e9 mesmo faixas de cores comuns em dire\u00e7\u00e3o ao fundo do painel, se voc\u00ea preferir uma das cores mais simples.<\/p>\n<p>Para ativar uma cor de fundo, certifique-se de que a cor seja selecionada e exibida na visualiza\u00e7\u00e3o <strong>Select Color<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/bg-col.jpg\" alt=\"Escolhendo uma 'cor de fundo'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Escolhendo uma &#8216;cor de fundo&#8217;<\/figcaption><\/figure>\n<p>Voc\u00ea deve ver o fundo colorido na visualiza\u00e7\u00e3o do <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-personalizar-tema-wordpress\/\">WordPress Customizer<\/a>. Caso contr\u00e1rio, isso provavelmente significa que voc\u00ea tem uma imagem de fundo instalada que est\u00e1 sobrepondo-se ao fundo colorido.<\/p>\n<p>Tudo que voc\u00ea tem que fazer para revelar o fundo colorido \u00e9 clicar no bot\u00e3o <strong>Remover <\/strong>por baixo da visualiza\u00e7\u00e3o da <strong>imagem de fundo.<\/strong><\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/remove-image.jpg\" alt=\"Remover imagem de fundo WordPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Remover imagem de fundo WordPress<\/figcaption><\/figure>\n<p>Agora a cor aparece em todo o seu site, por tr\u00e1s do conte\u00fado. Muito como voc\u00ea faria com um fundo de imagem, \u00e9 prudente olhar atrav\u00e9s do seu site para garantir que todos os textos, imagens e links ainda sejam vis\u00edveis com o novo fundo.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/once-removed.jpg\" alt=\"Pr\u00e9-visualiza\u00e7\u00e3o de um fundo WordPress laranja s\u00f3lido\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Pr\u00e9-visualiza\u00e7\u00e3o de um fundo WordPress laranja s\u00f3lido<\/figcaption><\/figure>\n<h3>Como adicionar imagem de fundo \u00e0 p\u00e1gina do WordPress<\/h3>\n<p>Mas e se voc\u00ea quiser inserir uma imagem no WordPress para aparecer como um fundo em uma \u00fanica p\u00e1gina do WordPress? A se\u00e7\u00e3o anterior delineou as configura\u00e7\u00f5es globais para uma imagem de fundo em todo o site.<\/p>\n<h3>Confira nosso <a href=\"https:\/\/www.youtube.com\/watch?v=ewE57bZIyRE\">guia em v\u00eddeo<\/a> para adicionar imagens de fundo para p\u00e1ginas \u00fanicas, artigos e blocos de conte\u00fado do WordPress<\/h3>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=ewE57bZIyRE\"><\/kinsta-video>\n<p>Muitas pessoas gostam de acrescentar fundos \u00e0s suas p\u00e1ginas porque voc\u00ea pode incorporar um determinado tema ou sentir a uma p\u00e1gina que se aplica ao conte\u00fado. Por exemplo, uma p\u00e1gina <a href=\"https:\/\/kinsta.com\/pt\/sobre-nos\/\">About Us<\/a> poderia ter um hist\u00f3rico de Los Angeles se a empresa estiver em Los Angeles. Ou uma introdu\u00e7\u00e3o a um livro de autor poderia incluir um fundo que se enquadre no tema da hist\u00f3ria.<\/p>\n<p>Nesta se\u00e7\u00e3o, vamos caminhar atrav\u00e9s de como adicionar uma imagem de fundo WordPress a uma p\u00e1gina usando um m\u00e9todo prim\u00e1rio e algumas alternativas se voc\u00ea n\u00e3o se importar de gastar dinheiro em um plugin ou optando por um construtor de p\u00e1ginas.<\/p>\n<p><strong>Nota: <\/strong>N\u00e3o importa se voc\u00ea usa o Gutenberg ou o Editor WordPress cl\u00e1ssico.<\/p>\n<p>Para fundos espec\u00edficos de p\u00e1gina, estes m\u00e9todos parecem funcionar da melhor maneira:<\/p>\n<ul>\n<li>Adicionando um fundo de p\u00e1gina \u00fanico com <a href=\"https:\/\/kinsta.com\/pt\/blog\/css-wordpress\/\">CSS personalizado<\/a>.<\/li>\n<li>Usando um plugin que permite fundos de p\u00e1gina individuais.<\/li>\n<li>Incorporando um fundo personalizado em cada p\u00e1gina com a ajuda de um construtor de p\u00e1ginas.<\/li>\n<\/ul>\n<p>Adicionar seu pr\u00f3prio CSS personalizado a uma p\u00e1gina envolve encontrar o ID de classe para aquela p\u00e1gina e solicitar uma URL de fundo, dentro do m\u00f3dulo CSS personalizado, nas configura\u00e7\u00f5es da p\u00e1gina do WordPress. Felizmente, n\u00e3o \u00e9 t\u00e3o dif\u00edcil descobrir o ID de classe de uma p\u00e1gina, considerando que podemos procur\u00e1-la, ou voc\u00ea j\u00e1 pode saber o que \u00e9.<\/p>\n<p>V\u00e1 para a p\u00e1gina em seu site onde voc\u00ea quer um fundo apenas para essa p\u00e1gina.<\/p>\n<figure style=\"width: 1473px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/this-is-the-page.png\" alt=\"Adicionando uma imagem de fundo WordPress espec\u00edfica da p\u00e1gina\" width=\"1473\" height=\"835\"><figcaption class=\"wp-caption-text\">Adicionando uma imagem de fundo WordPress espec\u00edfica da p\u00e1gina<\/figcaption><\/figure>\n<p>Clique com o bot\u00e3o direito do mouse em qualquer lugar da p\u00e1gina para revelar um menu suspenso em sua tela. Selecione a ferramenta Inspectar na parte inferior do menu suspenso.<\/p>\n<p>O m\u00f3dulo Inspect exibe a codifica\u00e7\u00e3o da pr\u00f3pria p\u00e1gina, juntamente com o CSS personalizado usado globalmente para seu website. \u00c9 uma \u00e1rea \u00fatil para localizar informa\u00e7\u00f5es sobre uma p\u00e1gina ou publica\u00e7\u00e3o em seu site.<\/p>\n<figure style=\"width: 1106px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/inspect-the-page.png\" alt=\"Inspe\u00e7\u00e3o de uma p\u00e1gina web\" width=\"1106\" height=\"825\"><figcaption class=\"wp-caption-text\">Inspe\u00e7\u00e3o de uma p\u00e1gina web<\/figcaption><\/figure>\n<p>A caixa Inspect tem linhas de c\u00f3digo da p\u00e1gina, mas estamos interessados apenas na etiqueta de classe atribu\u00edda a esta p\u00e1gina em particular. Para esclarecer, cada p\u00e1gina do WordPress tem uma tag de classe como c\u00f3digo de identifica\u00e7\u00e3o.<\/p>\n<p>Use a fun\u00e7\u00e3o de busca e digite no <code>body<\/code> ou <code>class<\/code> para localizar a linha de c\u00f3digo com a tag <code>page-id<\/code> .<\/p>\n<p>Neste caso, a identifica\u00e7\u00e3o \u00e9 <code>page-id-352<\/code>, mas a sua ser\u00e1 diferente.<\/p>\n<p>Voc\u00ea quer copiar a parte inteira do c\u00f3digo com a palavra-chave <code>page-id-#<\/code> incluindo os tra\u00e7os.<\/p>\n<figure style=\"width: 1251px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/body-class.png\" alt=\"Encontrar o ID da p\u00e1gina no WordPress\" width=\"1251\" height=\"657\"><figcaption class=\"wp-caption-text\">Encontrar o ID da p\u00e1gina no WordPress<\/figcaption><\/figure>\n<p>Com o <a href=\"https:\/\/kinsta.com\/pt\/blog\/obter-id-artigo-wordpress\/\">ID da p\u00e1gina<\/a> salvo em algum lugar para uso nas pr\u00f3ximas etapas, volte ao seu painel do WordPress e clique em <strong>Appearance &gt; Customize<\/strong>.<\/p>\n<figure style=\"width: 1348px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/custom-is-s-s.png\" alt=\"Ir para o tema customizador\" width=\"1348\" height=\"905\"><figcaption class=\"wp-caption-text\">Ir para o tema customizador<\/figcaption><\/figure>\n<p>Selecione a guia <strong>CSS adicional <\/strong>no Customizer do WordPress.<\/p>\n<figure style=\"width: 1508px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/add-css.png\" alt=\"se\u00e7\u00e3o 'CSS adicional' no Customizer\" width=\"1508\" height=\"916\"><figcaption class=\"wp-caption-text\">se\u00e7\u00e3o &#8216;CSS adicional&#8217; no Customizer<\/figcaption><\/figure>\n<p>Esta se\u00e7\u00e3o permite que voc\u00ea digite ou cole em qualquer CSS personalizado que voc\u00ea queira manipular itens em todo o seu website. Neste caso, \u00e9 \u00fatil para sobrepor a imagem de fundo padr\u00e3o e permitir uma imagem de fundo para uma p\u00e1gina e n\u00e3o para as outras.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">Cole o seguinte c\u00f3digo no campo CSS adicional, mas lembre-se de substituir o &#8220;<strong>#<\/strong>&#8221; pelo n\u00famero real que voc\u00ea puxou como o ID da p\u00e1gina das etapas anteriores. Al\u00e9m disso, voc\u00ea deve colocar uma URL de imagem real no lugar do texto de preenchimento que temos ali (<\/span><code>http:\/\/YOURIMAGEURL.jpeg<\/code><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">).<\/span><\/p>\n<pre><code class=\"language-html\">body.page-id-# { \nbackground-image: url(\"http:\/\/YOURIMAGEURL.jpeg\"); \nbackground-position: center center; \nbackground-size: cover; \nbackground-repeat: no-repeat; \nbackground-attachment: fixed;\n}<\/code><\/pre>\n<p>Para este exemplo, a identifica\u00e7\u00e3o da p\u00e1gina \u00e9 preenchida como 352, e temos uma URL de imagem de fundo colada de <a href=\"https:\/\/kinsta.com\/pt\/blog\/biblioteca-midia-wordpress\/\">nossa Biblioteca de M\u00eddia<\/a>.<\/p>\n<p>Se necess\u00e1rio, por favor, altere as configura\u00e7\u00f5es de fundo personalizadas se voc\u00ea tiver problemas para encaixar a imagem de fundo da tela. Por exemplo, voc\u00ea pode querer modificar elementos como o tamanho da imagem de fundo do WordPress, anexo, ou posi\u00e7\u00e3o. Caso contr\u00e1rio, deixe-os todos como est\u00e3o no c\u00f3digo do exemplo.<\/p>\n<figure style=\"width: 1485px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/insert-it.png\" alt=\"Adicionando CSS personalizado a um site WordPress\" width=\"1485\" height=\"923\"><figcaption class=\"wp-caption-text\">Adicionando CSS personalizado a um site WordPress<\/figcaption><\/figure>\n<p>Clique no bot\u00e3o <strong>Publicar <\/strong>quando voc\u00ea estiver satisfeito com o CSS personalizado.<\/p>\n<figure style=\"width: 1512px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/publish-the-thing.png\" alt=\"Clique no bot\u00e3o 'Publicar'\" width=\"1512\" height=\"827\"><figcaption class=\"wp-caption-text\">Clique no bot\u00e3o &#8216;Publicar&#8217;<\/figcaption><\/figure>\n<p>Com esse CSS personalizado, a p\u00e1gina especificada inclui uma imagem de fundo usando as configura\u00e7\u00f5es de tamanho e posicionamento do c\u00f3digo. Nenhuma outra p\u00e1gina em seu site mostrar\u00e1 o mesmo fundo, a menos que voc\u00ea repita o CSS para <a href=\"https:\/\/kinsta.com\/pt\/blog\/obter-id-artigo-wordpress\/\">IDs de p\u00e1gina<\/a> diferentes.<\/p>\n<figure style=\"width: 1335px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/background-just-for-page.png\" alt=\"A imagem de fundo agora aparece na p\u00e1gina\" width=\"1335\" height=\"899\"><figcaption class=\"wp-caption-text\">A imagem de fundo agora aparece na p\u00e1gina<\/figcaption><\/figure>\n<p>Como mencionado anteriormente, suas outras op\u00e7\u00f5es para adicionar um fundo \u00fanico a uma p\u00e1gina do WordPress incluem o uso de um construtor de p\u00e1ginas ou um plugin que permite imagens de fundo em p\u00e1ginas individuais.<\/p>\n<p>Entretanto, a maneira mais barata e r\u00e1pida de colocar uma imagem de fundo em uma p\u00e1gina individual \u00e9 usar o m\u00e9todo de c\u00f3digo CSS mostrado acima.<\/p>\n<h3>Como adicionar imagem de fundo ao artigo WordPress<\/h3>\n<p>A maioria das imagens de fundo s\u00e3o inseridas atr\u00e1s das p\u00e1ginas do WordPress ou em todas as p\u00e1ginas de um site.<\/p>\n<p>O recurso padr\u00e3o de fundo personalizado no WordPress n\u00e3o tem nada a ver com artigos individuais, al\u00e9m do fato de que este fundo tamb\u00e9m aparecer\u00e1 para os artigos do blog. Isso n\u00e3o \u00e9 ideal para todas as organiza\u00e7\u00f5es porque diferentes artigos no blog podem ter t\u00f3picos drasticamente diferentes.<\/p>\n<p>Tais blogs poderiam se beneficiar de suas pr\u00f3prias imagens de fundo exclusivas. Entretanto, os artigos do WordPress n\u00e3o t\u00eam sua pr\u00f3pria configura\u00e7\u00e3o de imagem de fundo, o que o torna um pouco mais complicado.<\/p>\n<p>Portanto, temos algumas op\u00e7\u00f5es a considerar ao adicionar uma imagem de fundo a um artigos (voc\u00ea notar\u00e1 que elas s\u00e3o as mesmas que quando se trabalha com imagens de fundo espec\u00edficas de uma p\u00e1gina):<\/p>\n<ul>\n<li>Inserir uma imagem de fundo usando CSS personalizado.<\/li>\n<li>Use um plugin para implementar um plano de fundo em artigos individuais.<\/li>\n<li>Instalar um construtor de p\u00e1ginas visuais para os fundos dos correios.<\/li>\n<\/ul>\n<p>Como na se\u00e7\u00e3o anterior sobre fundos exclusivos de p\u00e1ginas, voc\u00ea pode adicionar um fundo p\u00f3s espec\u00edfico usando um construtor de p\u00e1ginas ou um plugin.<\/p>\n<p>Visto que a cria\u00e7\u00e3o de um fundo p\u00f3s espec\u00edfico n\u00e3o \u00e9 muito diferente de uma p\u00e1gina espec\u00edfica, abordaremos apenas brevemente as etapas para lidar com este processo para um artigo individual.<\/p>\n<p>Ao usar o CSS personalizado para implementar um fundo p\u00f3s espec\u00edfico, voc\u00ea usa o mesmo c\u00f3digo que usaria para o fundo da p\u00e1gina, com uma diferen\u00e7a: voc\u00ea deve encontrar o ID do artigo ao inv\u00e9s do ID da p\u00e1gina.<\/p>\n<p>Portanto, abra o frontend de um artigo do WordPress onde voc\u00ea gostaria de inserir um fundo.<\/p>\n<figure style=\"width: 1294px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-actual-post.png\" alt=\"Imagem de fundo WordPress para postagens\" width=\"1294\" height=\"883\"><figcaption class=\"wp-caption-text\">Imagem de fundo WordPress para postagens<\/figcaption><\/figure>\n<p>Clique com o bot\u00e3o direito do mouse no artigo e escolha a op\u00e7\u00e3o Inspectar. Complete uma busca dentro do c\u00f3digo para localizar a se\u00e7\u00e3o de classe do corpo no c\u00f3digo. Procure a parte <code>postid-#<\/code> que \u00e9 a identifica\u00e7\u00e3o do artigo que voc\u00ea precisa inserir no CSS personalizado.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/find-post-id-1.png\" alt=\"find post id\" width=\"735\" height=\"767\"><\/p>\n<p>Voc\u00ea notar\u00e1 que a formata\u00e7\u00e3o da identifica\u00e7\u00e3o do correio \u00e9 ligeiramente diferente neste exemplo em compara\u00e7\u00e3o com a identifica\u00e7\u00e3o da p\u00e1gina, onde a etiqueta <code>postid-#<\/code> n\u00e3o tem um tra\u00e7o entre &#8220;post&#8221; e &#8220;id&#8221; como tem com o <code>page-id-#<\/code>. Al\u00e9m disso, estas n\u00e3o s\u00e3o regras dif\u00edceis. Voc\u00ea pode encontrar formatos variados para as tags.<\/p>\n<p>Agora, v\u00e1 para seu painel do WordPress e clique em <strong>Appearance &gt; Customize<\/strong>. Navegue at\u00e9 a guia <strong>CSS adicional<\/strong>.<\/p>\n<figure style=\"width: 1190px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/add-css-s.png\" alt=\"Ir para a se\u00e7\u00e3o 'CSS Adicional'\" width=\"1190\" height=\"842\"><figcaption class=\"wp-caption-text\">Ir para a se\u00e7\u00e3o &#8216;CSS Adicional&#8217;<\/figcaption><\/figure>\n<p>Colar o seguinte c\u00f3digo nesse campo CSS personalizado:<\/p>\n<pre><code class=\"language-html\">body.postid-# { \nbackground-image: url(\"http:\/\/YOURIMAGEURL.jpeg\"); \nbackground-position: center center; \nbackground-size: cover; \nbackground-repeat: no-repeat; \nbackground-attachment: fixed;\n}<\/code><\/pre>\n<p>Depois disso, pegue o n\u00famero de identifica\u00e7\u00e3o do correio que voc\u00ea encontrou no correio desejado antes. Substitua o &#8220;#&#8221; no c\u00f3digo do CSS pelo n\u00famero. Al\u00e9m disso, altere o texto\u00a0 <code>http:\/\/YOURIMAGEURL.jpeg<\/code> com a URL real da imagem de fundo que voc\u00ea gostaria de mostrar, mantendo as aspas em torno dele.<\/p>\n<figure style=\"width: 1141px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-css-typed-in.png\" alt=\"Adicionando o CSS personalizado para uma identifica\u00e7\u00e3o espec\u00edfica do posto\" width=\"1141\" height=\"820\"><figcaption class=\"wp-caption-text\">Adicionando o CSS personalizado para uma identifica\u00e7\u00e3o espec\u00edfica do artigo<\/figcaption><\/figure>\n<p>Certifique-se de pressionar o bot\u00e3o <strong>Publicar <\/strong>antes de sair da guia CSS adicional, pois isso economiza suas altera\u00e7\u00f5es no site e permite que voc\u00ea veja o fundo no frontend.<\/p>\n<figure style=\"width: 1161px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/publish-but.png\" alt=\"Pressione o bot\u00e3o 'Publicar' para salvar as mudan\u00e7as\" width=\"1161\" height=\"816\"><figcaption class=\"wp-caption-text\">Pressione o bot\u00e3o &#8216;Publicar&#8217; para salvar as mudan\u00e7as<\/figcaption><\/figure>\n<p>Com essas mudan\u00e7as no CSS, voc\u00ea pode agora voltar ao frontend daquele artigo do blog WordPress para ver o novo fundo. <a href=\"https:\/\/kinsta.com\/pt\/blog\/teste-de-velocidade-do-seu-site\/\">Teste<\/a> os outros artigos e p\u00e1ginas do blog em seu site para ver que nenhum dos outros tem um fundo, a menos que voc\u00ea implemente o mesmo c\u00f3digo para aqueles IDs de artigos.<\/p>\n<figure style=\"width: 1316px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-post-now-has-it.png\" alt=\"Veja a imagem de fundo no poste\" width=\"1316\" height=\"883\"><figcaption class=\"wp-caption-text\">Veja a imagem de fundo no artigo<\/figcaption><\/figure>\n<h3>Como adicionar uma imagem de fundo a um bloco de conte\u00fado individual<\/h3>\n<p>Os blocos de conte\u00fado individuais do editor de blocos do WordPress <a href=\"https:\/\/kinsta.com\/pt\/blog\/editor-gutenberg-wordpress\/\">Gutenberg<\/a> permitem uma ampla gama de op\u00e7\u00f5es de exibi\u00e7\u00e3o de conte\u00fado, incluindo caixas de texto, imagens e galerias.<\/p>\n<p>Estes dividem seu conte\u00fado em se\u00e7\u00f5es separadas. Assim, voc\u00ea pode adicionar uma cor ou imagem de fundo apenas para aquele bloco.<\/p>\n<p>Por exemplo, digamos que voc\u00ea esteja escrevendo um artigo no blog sobre o status da ind\u00fastria de vestu\u00e1rio no varejo. Voc\u00ea quer terminar ou come\u00e7ar o artigo com uma chamada para que as pessoas se inscrevam em <a href=\"https:\/\/kinsta.com\/webinars\/\">seu pr\u00f3ximo webinar<\/a>. Faria sentido ter esta se\u00e7\u00e3o se destacando usando uma cor ou imagem de fundo.<\/p>\n<p>Infelizmente, o editor de blocos do WordPress n\u00e3o oferece uma configura\u00e7\u00e3o completa onde voc\u00ea pode adicionar um fundo a qualquer bloco. No entanto, alguns blocos t\u00eam a op\u00e7\u00e3o de incorporar um fundo colorido.<\/p>\n<p>H\u00e1 tamb\u00e9m um bloco, chamado de Cover block, que \u00e9 a coisa mais pr\u00f3xima que podemos adicionar uma imagem de fundo para um bloco em um artigo ou p\u00e1gina. A capa permite sobrepor texto e alguns itens de m\u00eddia, tornando-a adequada para nosso objetivo final.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">Abaixo est\u00e3o as t\u00e9cnicas a serem usadas para definir uma imagem ou fundo colorido para um bloco individual do WordPress..<\/span><\/p>\n<h4>Defini\u00e7\u00e3o de um fundo de cor para um bloco<\/h4>\n<p>A maneira mais simples de acrescentar alguma vivacidade a um \u00fanico bloco \u00e9 adicionar um fundo colorido. N\u00e3o \u00e9 t\u00e3o chique quanto um fundo de imagem, mas o fundo colorido \u00e9 na verdade o \u00fanico tipo de fundo no editor de blocos do WordPress dispon\u00edvel para os blocos padr\u00e3o.<\/p>\n<p><strong>Nota: <\/strong>Alguns blocos n\u00e3o t\u00eam nenhuma configura\u00e7\u00e3o de fundo. Se este for o caso, \u00e9 melhor usar um bloco de cobertura e sobrepor outros blocos em cima dele, como abordado mais abaixo neste artigo.<\/p>\n<p>O bloco de <strong>par\u00e1grafos<\/strong>, por exemplo, tem um ajuste para ativar um fundo colorido.<\/p>\n<p>Para ativ\u00e1-lo, selecione o bloco e, em seguida, localize as <strong>Configura\u00e7\u00f5es de cores <\/strong>sob a guia <strong>Bloco<\/strong>, do lado direito.<\/p>\n<figure style=\"width: 1901px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/select-block.png\" alt=\"Mudando o fundo 'Configura\u00e7\u00f5es de cores'\" width=\"1901\" height=\"885\"><figcaption class=\"wp-caption-text\">Mudando o fundo &#8216;Configura\u00e7\u00f5es de cores&#8217;<\/figcaption><\/figure>\n<p>Esta se\u00e7\u00e3o revela os campos de <strong>cor do texto <\/strong>e <strong>cor de fundo.<\/strong><\/p>\n<p>V\u00e1 para a \u00e1rea <strong>Cor de fundo <\/strong>e selecione uma cor da lista de op\u00e7\u00f5es dispon\u00edveis. Voc\u00ea tamb\u00e9m pode escolher o link <strong>Cor personalizada <\/strong>para inserir seu pr\u00f3prio c\u00f3digo de cor ou escolher uma cor \u00fanica.<\/p>\n<p>Como voc\u00ea pode ver, uma vez que essa configura\u00e7\u00e3o esteja em vigor, o fundo do bloco de Par\u00e1grafo passa para uma cor diferente &#8211; neste caso, azul.<\/p>\n<figure style=\"width: 1900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/color-back.png\" alt=\"Escolhendo uma cor de fundo\" width=\"1900\" height=\"896\"><figcaption class=\"wp-caption-text\">Escolhendo uma cor de fundo<\/figcaption><\/figure>\n<h4>Adicionando um fundo de cor a qualquer bloco de WordPress<\/h4>\n<p>Como mencionado anteriormente, nem todos os blocos do WordPress t\u00eam este recurso de fundo incorporado. O que voc\u00ea deve fazer se quiser fazer uma galeria, ou algum outro elemento de bloco, que n\u00e3o ofere\u00e7a a op\u00e7\u00e3o de fundo?<\/p>\n<p>A solu\u00e7\u00e3o mais r\u00e1pida \u00e9 usar o recurso de bloco de <strong>grupo <\/strong>no WordPress.<\/p>\n<p>Para fazer isso, selecione v\u00e1rios blocos j\u00e1 em seu conte\u00fado. Para este exemplo, selecionarei simultaneamente um bloco de <strong>Par\u00e1grafo <\/strong>e um bloco de <strong>Galeria.<\/strong><\/p>\n<p>Clique no \u00edcone do quadrado empilhado no menu que aparece.<\/p>\n<figure style=\"width: 1561px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/select-both.png\" alt=\"A se\u00e7\u00e3o \"Nossa Equipe\" em uma p\u00e1gina\" width=\"1561\" height=\"940\"><figcaption class=\"wp-caption-text\">A se\u00e7\u00e3o &#8220;Nossa Equipe&#8221; em uma p\u00e1gina<\/figcaption><\/figure>\n<p>Escolha a op\u00e7\u00e3o <strong>Grupo <\/strong>no menu suspenso.<\/p>\n<p>Isto leva quaisquer blocos que voc\u00ea tenha selecionado atualmente e <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-5-3\/#editing-experience\">os combina em um grupo<\/a>, permitindo mov\u00ea-los ou edit\u00e1-los todos juntos em vez de blocos separados.<\/p>\n<figure style=\"width: 1575px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/group-theme.png\" alt=\"Agrupe as se\u00e7\u00f5es como um bloco\" width=\"1575\" height=\"927\"><figcaption class=\"wp-caption-text\">Agrupe as se\u00e7\u00f5es como um bloco<\/figcaption><\/figure>\n<p>Isto define o <strong>Grupo <\/strong>como seu pr\u00f3prio bloco. Isso significa que voc\u00ea pode ir at\u00e9 a guia <strong>Configura\u00e7\u00f5es de blocos<\/strong>, no lado direito da p\u00e1gina, para encontrar suas configura\u00e7\u00f5es.<\/p>\n<p>Procure a guia <strong>Configura\u00e7\u00f5es de cores <\/strong>e clique nela.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/color-sets.png\" alt=\"Alterar as 'Configura\u00e7\u00f5es de cor' para o bloco agrupado\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Alterar as &#8216;Configura\u00e7\u00f5es de cor&#8217; para o bloco agrupado<\/figcaption><\/figure>\n<p>Muito parecido com um bloco de Par\u00e1grafo padr\u00e3o, o bloco de Grupo tamb\u00e9m tem uma caracter\u00edstica de Cor de Fundo.<\/p>\n<p>Escolha a cor que voc\u00ea mais gosta para esta situa\u00e7\u00e3o para ver que tudo dentro daquele grupo deve agora ter aquela cor de fundo.<\/p>\n<p>O que \u00e9 \u00f3timo sobre o bloco Grupo \u00e9 que ele pega outro bloco que n\u00e3o tem uma caracter\u00edstica de fundo (como o bloco Galeria) e permite ativar um fundo para ele de qualquer maneira.<\/p>\n<figure style=\"width: 1454px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/back-color-in-group.png\" alt=\"Colocando a cor de fundo como azul\" width=\"1454\" height=\"894\"><figcaption class=\"wp-caption-text\">Colocando a cor de fundo como azul<\/figcaption><\/figure>\n<h4>Adicionando um fundo de imagem a um bloco de WordPress<\/h4>\n<p>Os blocos WordPress est\u00e3o em ambas as p\u00e1ginas e artigos. Portanto, podemos implementar esta t\u00e1tica em qualquer uma delas. Voc\u00ea pode inserir praticamente qualquer conte\u00fado acima do fundo do bloco agrupado &#8211; ou apenas em um bloco WordPress.<\/p>\n<p>Para iniciar este processo, clique no bot\u00e3o <strong>Adicionar bloco <\/strong>ou no \u00edcone &#8220;<strong>+<\/strong>&#8221; e procure o bloco de <strong>cobertura<\/strong>.<\/p>\n<p>Escolha esse bloco para inseri-lo em seu correio ou p\u00e1gina.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/go-for-cov.png\" alt=\"Adicionando um bloco de imagem de capa\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Adicionando um bloco de imagem de capa<\/figcaption><\/figure>\n<p>Em seguida, voc\u00ea deve clicar no bot\u00e3o <strong>Upload ou Select Media<\/strong>, que lhe permite pesquisar imagens que voc\u00ea pode usar como fundo.<\/p>\n<figure style=\"width: 1865px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/select-med.png\" alt=\"Clique no bot\u00e3o 'Select Media'\" width=\"1865\" height=\"836\"><figcaption class=\"wp-caption-text\">Clique no bot\u00e3o &#8216;Select Media&#8217;<\/figcaption><\/figure>\n<p>Escolha a imagem desejada e clique no bot\u00e3o <strong>Selecionar.<\/strong><\/p>\n<figure style=\"width: 1777px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/sel.png\" alt=\"Escolha a imagem e clique no bot\u00e3o 'Selecionar'\" width=\"1777\" height=\"834\"><figcaption class=\"wp-caption-text\">Escolha a imagem e clique no bot\u00e3o &#8216;Selecionar&#8217;<\/figcaption><\/figure>\n<p>Agora voc\u00ea pode ver essa imagem como o fundo para o bloco de cobertura.<\/p>\n<p>Sinta-se \u00e0 vontade para clicar nesse bloco para come\u00e7ar a digitar o conte\u00fado do par\u00e1grafo, pois a principal caracter\u00edstica \u00e9 a sobreposi\u00e7\u00e3o de texto.<\/p>\n<p>O que \u00e9 \u00f3timo no bloco de cobertura \u00e9 que ele oferece v\u00e1rias op\u00e7\u00f5es de <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-editores-texto\/\">formata\u00e7\u00e3o<\/a>, permitindo que voc\u00ea salte de um cabe\u00e7alho para um formato de par\u00e1grafo em segundos.<\/p>\n<figure style=\"width: 1902px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-res-ult.png\" alt=\"Imagem de fundo WordPress na se\u00e7\u00e3o\" width=\"1902\" height=\"892\"><figcaption class=\"wp-caption-text\">Imagem de fundo WordPress na se\u00e7\u00e3o<\/figcaption><\/figure>\n<p>Para adicionar outros blocos em cima desse fundo, clique no bot\u00e3o do \u00edcone &#8220;<strong>+<\/strong>&#8221; dentro do pr\u00f3prio bloco da tampa. Talvez voc\u00ea tenha que pressionar a tecla Enter uma vez para revelar o bot\u00e3o.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/blurring.png\" alt=\"Clique no sinal de mais dentro da se\u00e7\u00e3o de blocos\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Clique no sinal de mais dentro da se\u00e7\u00e3o de blocos<\/figcaption><\/figure>\n<p>Assim como adicionar um bloco de conte\u00fado em um artigo regular, o bloco de capa permite percorrer todos os blocos de conte\u00fado em potencial no WordPress.<\/p>\n<p>Isso significa que voc\u00ea pode colocar uma Imagem, <a href=\"https:\/\/kinsta.com\/pt\/blog\/plugins-galeria-fotos-wordpress\/\">Galeria<\/a>, Colunas, ou qualquer tipo de bloco WordPress dentro do bloco de Capa, tornando-o a solu\u00e7\u00e3o ideal para fundos de imagem com um bloco individual.<\/p>\n<figure id=\"attachment_91286\" aria-describedby=\"caption-attachment-91286\" style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-91286 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/search-for-block-1.png\" alt=\"busca de bloco\" width=\"1920\" height=\"941\"><figcaption id=\"caption-attachment-91286\" class=\"wp-caption-text\">busca de bloco<\/figcaption><\/figure>\n<p>Para este exemplo, inseri uma imagem e formatei-a um pouco para que ela parecesse aceit\u00e1vel dentro do bloco da tampa.<\/p>\n<p>Cada bloco que voc\u00ea coloca em frente ao fundo tem suas pr\u00f3prias configura\u00e7\u00f5es personalizadas na aba Bloco do lado direito, portanto, considere edit\u00e1-las ao deix\u00e1-las cair no bloco da tampa.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-block-complete.png\" alt=\"Um exemplo de bloco com imagem de fundo WordPress\" width=\"1920\" height=\"883\"><figcaption class=\"wp-caption-text\">Um exemplo de bloco com imagem de fundo WordPress<\/figcaption><\/figure>\n<p>Em algum momento, voc\u00ea pode querer editar ou personalizar a pr\u00f3pria imagem de fundo. Se for esse o caso, escolha o bloco Cover, ent\u00e3o v\u00e1 para a aba Block Settings no lado direito da p\u00e1gina.<\/p>\n<p>Isto revela uma mir\u00edade de configura\u00e7\u00f5es para ajustar para a imagem de fundo, incluindo as seguintes:<\/p>\n<ul>\n<li>Antecedentes fixos<\/li>\n<li>Antecedentes repetidos<\/li>\n<li>Ponto Focal de Sele\u00e7\u00e3o<\/li>\n<li>Dimens\u00f5es<\/li>\n<li>Sobreposi\u00e7\u00e3o<\/li>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-menu-plugins\/#responsive-menu\">Opacidade<\/a><\/li>\n<li>Avan\u00e7ado<\/li>\n<\/ul>\n<figure style=\"width: 1680px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-clock-sets.png\" alt=\"Alterando as configura\u00e7\u00f5es do bloco\" width=\"1680\" height=\"940\"><figcaption class=\"wp-caption-text\">Alterando as configura\u00e7\u00f5es do bloco<\/figcaption><\/figure>\n<p>Um dos ajustes mais importantes a considerar \u00e9 em dire\u00e7\u00e3o ao fundo do painel de <strong>Ajustes de Bloco<\/strong>.<\/p>\n<p>Des\u00e7a para encontrar a se\u00e7\u00e3o <strong>Overlay<\/strong>. Abra a se\u00e7\u00e3o para revelar uma lista de sobreposi\u00e7\u00f5es de cores e op\u00e7\u00f5es para tornar essas cores s\u00f3lidas ou gradientes.<\/p>\n<p>Esta \u00e9 uma \u00f3tima op\u00e7\u00e3o para mudar ligeiramente sua cor de fundo para combinar com sua marca ou destacar seu conte\u00fado em primeiro plano. Voc\u00ea tamb\u00e9m pode ajustar a <strong>Opacidade <\/strong>para garantir que a sobreposi\u00e7\u00e3o de cores n\u00e3o sobrecarregue totalmente o fundo.<\/p>\n<figure style=\"width: 1905px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/new-color.png\" alt=\"Mudando a cor de fundo do bloco\" width=\"1905\" height=\"895\"><figcaption class=\"wp-caption-text\">Mudando a cor de fundo do bloco<\/figcaption><\/figure>\n<p>Como alternativa, considere o <a href=\"https:\/\/wordpress.org\/plugins\/stackable-ultimate-gutenberg-blocks\/\">plugin Stackable Page Builder Gutenberg Blocks<\/a> para abrir ferramentas mais avan\u00e7adas para fundos em blocos individuais.<\/p>\n<h3>Como colocar uma imagem de fundo por tr\u00e1s do cabe\u00e7alho do WordPress<\/h3>\n<p>At\u00e9 agora, falamos sobre como adicionar uma imagem de fundo a todo o seu site WordPress, juntamente com m\u00e9todos para fundos em \u00e1reas espec\u00edficas como blocos, artigos e p\u00e1ginas do WordPress. Mas e quanto \u00e0 \u00e1rea que cont\u00e9m seu menu e logotipo?<\/p>\n<p>\u00c0s vezes, um fundo atr\u00e1s de sua cabe\u00e7a \u00e9 tudo o que voc\u00ea precisa.<\/p>\n<p>A defini\u00e7\u00e3o de uma imagem de fundo para o cabe\u00e7alho <a href=\"https:\/\/kinsta.com\/pt\/blog\/como-alterar-tema-wordpress\/\">acrescenta uma nova vibra\u00e7\u00e3o<\/a> ao seu site, especialmente se houver um feriado ou alguma grande venda que voc\u00ea possa destacar.<\/p>\n<p>Para come\u00e7ar, v\u00e1 para <strong>Appearance &gt; Header <\/strong>no painel do WordPress.<\/p>\n<p><strong>Nota: <\/strong>Voc\u00ea tamb\u00e9m pode encontrar as configura\u00e7\u00f5es de cabe\u00e7alho indo em <strong>Apar\u00eancia &gt; Personalizar &gt; Se\u00e7\u00e3o Cabe\u00e7alho<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/head-here.png\" alt=\"WordPress Dashboard &gt; Apar\u00eancia &gt; Cabe\u00e7alho\" width=\"1920\" height=\"910\"><figcaption class=\"wp-caption-text\">WordPress Dashboard &gt; Apar\u00eancia &gt; Cabe\u00e7alho<\/figcaption><\/figure>\n<p>Agora voc\u00ea deve ver uma pr\u00e9via de sua p\u00e1gina inicial no lado direito da tela, juntamente com as configura\u00e7\u00f5es do Cabe\u00e7alho no lado esquerdo da tela.<\/p>\n<p>O m\u00f3dulo Cabe\u00e7alho explica as dimens\u00f5es preferidas para qualquer imagem de fundo de cabe\u00e7alho, assim voc\u00ea pode optar por recortar sua imagem antes de carregar ou esperar at\u00e9 obter a imagem em seu painel de controle do WordPress.<\/p>\n<p>Sob o t\u00edtulo do <strong>cabe\u00e7alho atual<\/strong>, clique no bot\u00e3o <strong>Adicionar nova imagem<\/strong>.<\/p>\n<figure style=\"width: 1886px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/add-news.png\" alt=\"Clique no bot\u00e3o 'Adicionar nova imagem'\" width=\"1886\" height=\"940\"><figcaption class=\"wp-caption-text\">Clique no bot\u00e3o &#8216;Adicionar nova imagem&#8217;<\/figcaption><\/figure>\n<p>Os cabe\u00e7alhos s\u00e3o complicados porque voc\u00ea quer garantir que todos os <a href=\"https:\/\/kinsta.com\/pt\/blog\/links-de-ancora\/\">links<\/a> e elementos de texto (para n\u00e3o mencionar seu logotipo) fiquem cristalinos na parte superior da imagem de fundo.<\/p>\n<p>Portanto, recomendamos testar imagens de fundo e considerar imagens que aderem a cores e padr\u00f5es mais s\u00f3lidos. Elas n\u00e3o dificultar\u00e3o tanto a visualiza\u00e7\u00e3o de seus itens de menu e logotipo.<\/p>\n<p>Selecione uma imagem que pare\u00e7a ideal para voc\u00ea, depois clique no bot\u00e3o <strong>Selecionar e Cortar <\/strong>para prosseguir.<\/p>\n<figure style=\"width: 1860px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/crop-func.png\" alt=\"Escolha uma imagem\" width=\"1860\" height=\"880\"><figcaption class=\"wp-caption-text\">Escolha uma imagem<\/figcaption><\/figure>\n<p>Gostamos da ferramenta de cultivo integrada, uma vez que ela fornece automaticamente as dimens\u00f5es corretas para a imagem de fundo do cabe\u00e7alho. Isto deve acelerar o processo em compara\u00e7\u00e3o com a edi\u00e7\u00e3o pr\u00e9via de uma foto em algo como o Photoshop.<\/p>\n<p>Mova a caixa de corte para o local que fa\u00e7a mais sentido para sua imagem de fundo. Esteja \u00e0 vontade para arrastar um dos cantos se voc\u00ea precisar cortar ainda mais a imagem.<\/p>\n<p>Assim que voc\u00ea tiver a colheita perfeita, clique no bot\u00e3o <strong>Crop Image<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/crop-im.png\" alt=\"Cortar a imagem\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Cortar a imagem<\/figcaption><\/figure>\n<p>A imagem de fundo do cabe\u00e7alho \u00e9 imediatamente ativada na visualiza\u00e7\u00e3o do WordPress Customizer, ajudando voc\u00ea a ver exatamente o que seus clientes ir\u00e3o ver com este tipo de fundo.<\/p>\n<p>Voc\u00ea notar\u00e1 que a imagem de fundo do cabe\u00e7alho n\u00e3o sangra para o restante do conte\u00fado da p\u00e1gina. Em vez disso, ela permanece no cabe\u00e7alho, atr\u00e1s de qualquer coisa que esteja atualmente localizada l\u00e1, como um logotipo, tagline, menu, e <a href=\"https:\/\/kinsta.com\/pt\/blog\/pesquisa-wordpress\/\">barra de busca<\/a>.<\/p>\n<figure style=\"width: 1901px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-actual-thing.png\" alt=\"Selecione a imagem de fundo do cabe\u00e7alho\" width=\"1901\" height=\"940\"><figcaption class=\"wp-caption-text\">Selecione a imagem de fundo do cabe\u00e7alho<\/figcaption><\/figure>\n<p>Outra op\u00e7\u00e3o para seu cabe\u00e7alho de fundo \u00e9 carregar v\u00e1rias imagens e faz\u00ea-las girar aleatoriamente, adicionando um pouco de chama e surpresa ao seu site sempre que um usu\u00e1rio aterrissa na p\u00e1gina inicial.<\/p>\n<p>Para que isto funcione, \u00e9 necess\u00e1rio primeiro ter v\u00e1rias imagens carregadas na caixa de ajustes do Cabe\u00e7alho. Clique no bot\u00e3o <strong>Adicionar Nova Imagem <\/strong>para completar esse processo.<\/p>\n<p>Quando voc\u00ea tiver mais de uma imagem, clique no bot\u00e3o <strong>Randomize Uploaded Headers <\/strong>para ativar o recurso que mostra um fundo de cabe\u00e7alho diferente a cada vez.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/random.png\" alt=\"Adicionando mais cabe\u00e7alhos\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Adicionando mais cabe\u00e7alhos<\/figcaption><\/figure>\n<p>Voc\u00ea pode notar que adicionar uma imagem de fundo ao cabe\u00e7alho torna dif\u00edcil ver alguns dos itens do cabe\u00e7alho, como seu menu ou um carrinho de compras.<\/p>\n<p>Se for esse o caso, sugerimos que n\u00e3o se apague imediatamente a imagem de cabe\u00e7alho. Ao inv\u00e9s disso, v\u00e1 para os campos <strong>Cor do texto <\/strong>e <strong>Cor do link <\/strong>para ver se algum ajuste pode ajudar.<\/p>\n<p>A configura\u00e7\u00e3o de cor do texto controla qualquer texto no cabe\u00e7alho que n\u00e3o esteja hyperlinkado para outra p\u00e1gina interna ou externa. Muitas vezes isso significa apenas a tagline, se voc\u00ea tiver uma, mas \u00e0s vezes voc\u00ea pode ter outros itens como um total de carrinho de compras ou \u00edcones de m\u00eddia social que tamb\u00e9m mudam de cor com o texto.<\/p>\n<p>A outra caixa \u00e9 para a cor do link. Voc\u00ea provavelmente ver\u00e1 mais mudan\u00e7as quando ajustar esta cor, j\u00e1 que ela inclui todos os itens do menu ligados a outras p\u00e1ginas.<\/p>\n<figure style=\"width: 1921px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/lino-color.png\" alt=\"Cor do texto sobre a imagem de fundo do WordPress\" width=\"1921\" height=\"941\"><figcaption class=\"wp-caption-text\">Cor do texto sobre a imagem de fundo do WordPress<\/figcaption><\/figure>\n<p>Aqui est\u00e1 um exemplo do que acontece quando voc\u00ea escolhe uma nova cor tanto para a <strong>cor do texto <\/strong>quanto para a <strong>cor do link<\/strong>. Voc\u00ea 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\u00e7alho como o \u00edcone do carrinho de compras.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/text-and-link.png\" alt=\"Verifica\u00e7\u00e3o dos elementos de cabe\u00e7alho\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Verifica\u00e7\u00e3o dos elementos de cabe\u00e7alho<\/figcaption><\/figure>\n<p>Para aqueles n\u00e3o interessados em usar uma imagem de fundo para seu cabe\u00e7alho, voc\u00ea tamb\u00e9m tem a op\u00e7\u00e3o de usar um fundo de cor s\u00f3lida.<\/p>\n<p>Para isso, encontre o campo Cor de fundo sob a mesma \u00e1rea de Configura\u00e7\u00f5es do Cabe\u00e7alho.<\/p>\n<p>Clique no bot\u00e3o <strong>Selecionar Cor <\/strong>e escolha no painel de cores para ver os resultados da pr\u00e9-visualiza\u00e7\u00e3o. Voc\u00ea tamb\u00e9m pode mudar as cores do texto ao usar uma cor de fundo.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/do-the-back-color.png\" alt=\"Defini\u00e7\u00e3o de uma cor de fundo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Defini\u00e7\u00e3o de uma cor de fundo<\/figcaption><\/figure>\n<p>Ap\u00f3s testar o que funciona melhor para seu cabe\u00e7alho e decidir sobre a imagem de fundo perfeita para aquele cabe\u00e7alho, clique no bot\u00e3o <strong>Publicar <\/strong>para que todos vejam as mudan\u00e7as.<\/p>\n<p>E se voc\u00ea tiver algum problema para fazer as mudan\u00e7as no frontend, considere <a href=\"https:\/\/kinsta.com\/pt\/blog\/limpar-cache-wordpress\/\">limpar seu cache do WordPress<\/a>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/hit-pub.png\" alt=\"Clique no bot\u00e3o 'Publicar'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Clique no bot\u00e3o &#8216;Publicar&#8217;<\/figcaption><\/figure>\n<h3 class=\"title style-scope ytd-video-primary-info-renderer\">Como adicionar imagens de fundo para a categoria WordPress e P\u00e1gina de Login<\/h3>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=7z3l5tsU3nU\"><\/kinsta-video>\n<h3>Como adicionar imagem de fundo \u00e0 categoria WordPress<\/h3>\n<p>Uma p\u00e1gina de arquivo da categoria WordPress compila todos os artigos listados sob uma determinada categoria. Por exemplo, muitos sites t\u00eam categorias para tipos de artigos personalizadas, como Produtos. Por padr\u00e3o, todos os sites do WordPress t\u00eam categorias para postagens. Aqueles que voc\u00ea n\u00e3o categoriza s\u00e3o etiquetados com a categoria <strong>Uncategorized<\/strong>.<\/p>\n<p>Como as p\u00e1ginas de arquivo da categoria agregam conte\u00fado semelhante, faz sentido incluir uma imagem de fundo relevante nessas p\u00e1ginas para mostrar melhor a categoria. Como exemplo, voc\u00ea pode ter um fundo orientado \u00e0 tecnologia para uma categoria de Web Design ou uma concha ou fundo de praia para uma categoria de Viagens.<\/p>\n<p>O m\u00e9todo CSS personalizado (descrito abaixo) \u00e9 a op\u00e7\u00e3o mais barata. No entanto, voc\u00ea tamb\u00e9m pode olhar para os v\u00e1rios construtores de p\u00e1ginas e plugins para ver quais deles permitem fundos nas p\u00e1ginas de categoria.<\/p>\n<p>Para completar esta tarefa com CSS, abra seu painel do WordPress e v\u00e1 para <strong>Appearance &gt; Customize<\/strong>.<\/p>\n<p>Selecione a aba <strong>CSS adicional <\/strong>para abrir o m\u00f3dulo que permite digitar seu pr\u00f3prio CSS.<\/p>\n<figure style=\"width: 1538px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/additonal.png\" alt=\"Ir para a se\u00e7\u00e3o \"CSS Adicional\"\" width=\"1538\" height=\"940\"><figcaption class=\"wp-caption-text\">Ir para a se\u00e7\u00e3o &#8220;CSS Adicional&#8221;<\/figcaption><\/figure>\n<p>Abra uma das p\u00e1ginas de arquivo de sua categoria em seu site WordPress. Normalmente, estas p\u00e1ginas t\u00eam URLs como esta: <code>http:\/\/yourwebsitedomain.com\/category\/travel<\/code>. Voc\u00ea precisa mudar a parte de <strong>viagem <\/strong>para qualquer categoria que voc\u00ea tenha em seu pr\u00f3prio site e mudar a parte de <strong>suawebsitedoman <\/strong>para seu nome de dom\u00ednio atual.<\/p>\n<p>Clique com o bot\u00e3o direito do mouse em qualquer lugar na p\u00e1gina da categoria e clique em Inspect. Ele mostrar\u00e1 a ferramenta Inspect em seu navegador, com o c\u00f3digo dessa p\u00e1gina apresentado para que voc\u00ea veja.<\/p>\n<figure style=\"width: 1433px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/insepting.png\" alt=\"Clique com o bot\u00e3o direito do mouse na p\u00e1gina web e selecione 'Inspecionar'\" width=\"1433\" height=\"812\"><figcaption class=\"wp-caption-text\">Clique com o bot\u00e3o direito do mouse na p\u00e1gina web e selecione &#8216;Inspecionar&#8217;<\/figcaption><\/figure>\n<p>Procure por &#8220;corpo&#8221; ou &#8220;classe&#8221; para localizar a classe CSS para p\u00e1ginas de categoria, juntamente com a classe para esta categoria em particular.<\/p>\n<p>Para esta situa\u00e7\u00e3o, nossa classe CSS \u00e9 &#8220;category-travel&#8221;, j\u00e1 que tenho uma categoria chamada &#8220;Travel&#8221; no site.<\/p>\n<p>Guarde a etiqueta do CSS para mais tarde.<\/p>\n<figure style=\"width: 986px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/travel-cat.png\" alt=\"Anote a categoria listada\" width=\"986\" height=\"771\"><figcaption class=\"wp-caption-text\">Anote a categoria listada<\/figcaption><\/figure>\n<p>Depois disso, navegue de volta para a se\u00e7\u00e3o <strong>CSS adicional <\/strong>em seu WordPress Customizer.<\/p>\n<p>Cole o seguinte c\u00f3digo nessa caixa, trocando a classe de <code>category-travel<\/code> com a sua pr\u00f3pria e colocando uma URL de imagem real no local que diz <code>http:\/\/YOURIMAGEURL.jpeg<\/code>.<\/p>\n<pre><code class=\"language-html\">body.category-travel {\nbackground-image: url(\"http:\/\/YOURIMAGEURL.jpeg\");\nbackground-position: center center;\nbackground-size: cover;\nbackground-repeat: no-repeat;\nbackground-attachment: fixed;\n}<\/code><\/pre>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/publish-it-is.png\" alt=\"Adicionar a codifica\u00e7\u00e3o personalizada para a imagem de fundo do WordPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Adicionar a codifica\u00e7\u00e3o personalizada para a imagem de fundo do WordPress<\/figcaption><\/figure>\n<p>Clique no bot\u00e3o <strong>Publicar <\/strong>para salvar as mudan\u00e7as.<\/p>\n<figure style=\"width: 1160px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/go-and-pub.png\" alt=\"Adicionando o c\u00f3digo 'Custom CSS'\" width=\"1160\" height=\"778\"><figcaption class=\"wp-caption-text\">Adicionando o c\u00f3digo &#8216;Custom CSS&#8217;<\/figcaption><\/figure>\n<p>Finalmente, volte para a p\u00e1gina de arquivo da categoria no frontend do seu site WordPress. Deve agora mostrar a mesma p\u00e1gina de antes, mas com o fundo especificado no c\u00f3digo CSS. Se voc\u00ea tiver qualquer problema com a formata\u00e7\u00e3o da imagem de fundo do WordPress, volte ao painel CSS adicional para ajustar elementos como posi\u00e7\u00e3o, tamanho e fun\u00e7\u00e3o de repeti\u00e7\u00e3o do fundo.<\/p>\n<figure style=\"width: 1597px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-cat-page.png\" alt=\"V\u00e1 para a p\u00e1gina da categoria e veja o fundo\" width=\"1597\" height=\"904\"><figcaption class=\"wp-caption-text\">V\u00e1 para a p\u00e1gina da categoria e veja o fundo<\/figcaption><\/figure>\n<h3>Como adicionar uma imagem de fundo \u00e0 sua p\u00e1gina de Login do WordPress<\/h3>\n<p>A p\u00e1gina de login do WordPress tem duas vers\u00f5es: uma para usu\u00e1rios regulares que v\u00eam ao seu site e querem se registrar e entrar em seu site, e a outra para usu\u00e1rios internos, como administradores e autores.<\/p>\n<p><a href=\"https:\/\/kinsta.com\/pt\/blog\/login-wordpress-url\/\">Estas p\u00e1ginas de login<\/a> s\u00e3o separadas do funcionamento principal do seu site (a maioria dos arquivos est\u00e1 localizada no arquivo <strong>wp-login.php<\/strong>). Portanto, a ferramenta de imagem de fundo personalizada n\u00e3o sangrar\u00e1 nos m\u00f3dulos de login.<\/p>\n<p>Voc\u00ea pode fazer isso usando um plugin chamado <a href=\"https:\/\/wordpress.org\/plugins\/loginpress\/\">Custom Login Page Customizer<\/a>. Para come\u00e7ar, instale e ative o plugin em seu site WordPress.<\/p>\n<figure style=\"width: 1329px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/Custom-Login-Page-Customizer.png\" alt=\"LoginPlugin de impress\u00e3o\" width=\"1329\" height=\"434\"><figcaption class=\"wp-caption-text\">LoginPlugin de impress\u00e3o<\/figcaption><\/figure>\n<p>\u00c0 esquerda, uma nova aba no menu do painel do WordPress aparece para LoginPress.<\/p>\n<p>Ir para <strong>LoginImprensa &gt; Configura\u00e7\u00f5es<\/strong>.<\/p>\n<figure style=\"width: 1900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/loginpresss.png\" alt=\"Ir para Configura\u00e7\u00f5es do LoginPress\" width=\"1900\" height=\"912\"><figcaption class=\"wp-caption-text\">Ir para Configura\u00e7\u00f5es do LoginPress<\/figcaption><\/figure>\n<p>Aqui, voc\u00ea pode ajustar as configura\u00e7\u00f5es do plugin antes de adicionar seu fundo e personalizar qualquer outra parte de sua p\u00e1gina de login.<\/p>\n<p>Por exemplo, ele oferece configura\u00e7\u00f5es para lembrar automaticamente os usu\u00e1rios, mostra campos de senha personalizados e expira as sess\u00f5es ap\u00f3s um certo per\u00edodo de tempo.<\/p>\n<figure style=\"width: 1413px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-sets.png\" alt=\"Alterando as configura\u00e7\u00f5es do LoginPress\" width=\"1413\" height=\"940\"><figcaption class=\"wp-caption-text\">Alterando as configura\u00e7\u00f5es do LoginPress<\/figcaption><\/figure>\n<p>Para ativar um fundo de imagem personalizado para a p\u00e1gina de login, clique em <strong>LoginPress &gt; Customizer<\/strong>.<\/p>\n<figure style=\"width: 1352px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/customizer-o.png\" alt=\"Ir para 'LoginPress &gt; Customizer\" width=\"1352\" height=\"940\"><figcaption class=\"wp-caption-text\">Ir para &#8216;LoginPress &gt; Customizer<\/figcaption><\/figure>\n<p>Isto o envia para o WordPress Customizer, onde uma nova p\u00e1gina foi adicionada para as ferramentas LoginPress. Voc\u00ea notar\u00e1 abas para Temas, Logotipo, Background e muito mais.<\/p>\n<p>Tamb\u00e9m \u00e9 poss\u00edvel personalizar a p\u00e1gina de login, clicando nos bot\u00f5es dentro da visualiza\u00e7\u00e3o pr\u00e9via.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/setting-to-go.png\" alt=\"Estabelecendo um tema LoginPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Estabelecendo um tema LoginPress<\/figcaption><\/figure>\n<p>N\u00e3o cobriremos todos os outros ambientes, uma vez que neste momento estamos nos concentrando principalmente no fundo.<\/p>\n<p>Clique na guia <strong>Background <\/strong>para prosseguir.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/change-the-back.png\" alt=\"Ir para a guia de fundo 'LoginPress'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Ir para a guia de fundo &#8216;LoginPress&#8217;<\/figcaption><\/figure>\n<p>A primeira ordem de neg\u00f3cios \u00e9 decidir se voc\u00ea deseja um fundo colorido ou uma imagem de fundo.<\/p>\n<p>Se voc\u00ea preferir um fundo colorido, localize o campo <strong>Cor de Fundo <\/strong>e clique em <strong>Selecionar Cor<\/strong>. Isto revela um painel de cor para voc\u00ea escolher exatamente qual cor faz sentido para seu neg\u00f3cio.<\/p>\n<p>Como voc\u00ea pode ver, a mudan\u00e7a entra em vigor tamb\u00e9m na pr\u00e9-visualiza\u00e7\u00e3o do WordPress Customizer.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/change-color.png\" alt=\"Selecione a cor de fundo 'LoginPress'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Selecione a cor de fundo &#8216;LoginPress&#8217;<\/figcaption><\/figure>\n<p>Logo abaixo da configura\u00e7\u00e3o de <strong>Cor de Fundo<\/strong>, h\u00e1 uma se\u00e7\u00e3o de <strong>Imagem de Fundo<\/strong>.<\/p>\n<p>Ative o interruptor <strong>Habilitar imagem de fundo <\/strong>para mostrar uma cole\u00e7\u00e3o de imagens de fundo pr\u00e9-fabricadas.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/enable-this.png\" alt=\"Habilitar a imagem de fundo do WordPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Habilitar a imagem de fundo do WordPress<\/figcaption><\/figure>\n<p>N\u00e3o h\u00e1 muitos para escolher na vers\u00e3o gratuita, mas o plugin acrescenta mais se voc\u00ea decidir atualizar para a vers\u00e3o premium.<\/p>\n<p>V\u00e1 em frente e teste esses antecedentes pr\u00e9-fabricados para ver se eles podem funcionar para sua marca.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/changing-the-back.png\" alt=\"Colocando uma galeria de fundo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Colocando uma galeria de fundo<\/figcaption><\/figure>\n<p>O caminho mais prov\u00e1vel \u00e9 carregar sua pr\u00f3pria imagem como fundo da p\u00e1gina de login.<\/p>\n<p>Procure o t\u00edtulo Imagem de Fundo e clique no bot\u00e3o <strong>Selecionar Imagem.<\/strong><\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/select-image-s-s-s.png\" alt=\"Escolha a op\u00e7\u00e3o 'Selecionar imagem'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Escolha a op\u00e7\u00e3o &#8216;Selecionar imagem&#8217;<\/figcaption><\/figure>\n<p>Voc\u00ea \u00e9 levado \u00e0 Biblioteca de M\u00eddia WordPress para carregar uma imagem do seu computador ou escolher uma delas j\u00e1 dentro do WordPress.<\/p>\n<p>Selecione sua foto desejada e clique no bot\u00e3o <strong>Escolher imagem<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/choosing-that.png\" alt=\"Escolha a imagem de fundo de login do WordPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Escolha a imagem de fundo de login do WordPress<\/figcaption><\/figure>\n<p>A imagem de fundo ativada aparece como uma miniatura no painel do Customizer e a visualiza\u00e7\u00e3o real de sua p\u00e1gina de login.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/the-result-s-s.png\" alt=\"Defina as op\u00e7\u00f5es de imagem de fundo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Defina as op\u00e7\u00f5es de imagem de fundo<\/figcaption><\/figure>\n<p>Agora voc\u00ea tem a op\u00e7\u00e3o de clicar no bot\u00e3o <strong>Publicar <\/strong>e ficar com o que est\u00e1 na tela. Ou, voc\u00ea pode rolar at\u00e9 as configura\u00e7\u00f5es adicionais para garantir que a melhor visualiza\u00e7\u00e3o da imagem carregada esteja ativa no momento.<\/p>\n<p>Clique no campo suspenso <strong>Background Repeat <\/strong>e teste as op\u00e7\u00f5es como <strong>Repeat<\/strong>, <strong>No-repeat<\/strong>, e <strong>Repeat-x<\/strong>.<\/p>\n<p>Dependendo do tamanho de sua foto, voc\u00ea pode ou n\u00e3o ver a imagem se movimentar um pouco.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/repeating.png\" alt=\"Escolha as configura\u00e7\u00f5es 'Background Repeat'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Escolha as configura\u00e7\u00f5es &#8216;Background Repeat&#8217;<\/figcaption><\/figure>\n<p>A seguir, veja as op\u00e7\u00f5es Selecionar Posi\u00e7\u00e3o para mover ainda mais a imagem de fundo.<\/p>\n<p>Por padr\u00e3o, eles colocam a imagem no centro da tela, mas \u00e0s vezes fica melhor se voc\u00ea 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.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/select-pos.png\" alt=\"Selecione a posi\u00e7\u00e3o de fundo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Selecione a posi\u00e7\u00e3o de fundo<\/figcaption><\/figure>\n<p>Seguindo adiante, o menu suspenso Tamanho da imagem de fundo do WordPress tem ajustes para como a imagem cobre o espa\u00e7o da tela, ajustando seu tamanho com cada op\u00e7\u00e3o pr\u00e9-definida.<\/p>\n<p>Mais uma vez, teste-os para decidir qual parece ser o melhor. Voc\u00ea pode descobrir que algo como a configura\u00e7\u00e3o Contain oferece uma vis\u00e3o melhorada em vez da configura\u00e7\u00e3o Auto ou Cover.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/enabling.png\" alt=\"Definir o tamanho da imagem de fundo do WordPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Definir o tamanho da imagem de fundo do WordPress<\/figcaption><\/figure>\n<p>E isso \u00e9 tudo que existe para carregar e ativar uma imagem de fundo para sua p\u00e1gina de login!<\/p>\n<p>O cen\u00e1rio final est\u00e1 l\u00e1 se voc\u00ea quiser mostrar um v\u00eddeo como fundo em vez de uma imagem. Ligue essa configura\u00e7\u00e3o se voc\u00ea tiver um v\u00eddeo interessante relacionado ao seu neg\u00f3cio e n\u00e3o desviar muita aten\u00e7\u00e3o das pessoas que est\u00e3o conectadas ao site.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/video-on.png\" alt=\"Habilitando o 'V\u00eddeo de fundo'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Habilitando o &#8216;V\u00eddeo de fundo&#8217;<\/figcaption><\/figure>\n<p>Uma vez que tudo esteja feito, clique no bot\u00e3o <strong>Publicar <\/strong>para ativar o fundo de sua p\u00e1gina de login e v\u00ea-la exibida sempre que um usu\u00e1rio tentar se registrar ou entrar no site.<\/p>\n<h3>Como adicionar uma imagem de fundo ao seu menu de navega\u00e7\u00e3o<\/h3>\n<p>Voc\u00ea deve ter notado alguns websites com menus extravagantes que incluem imagens de fundo ou \u00edcones. Esta \u00e9 uma pr\u00e1tica comum no mundo do eCommerce, onde a marca pode ter um mega menu com categorias e imagens de fundo para cada bot\u00e3o de categoria.<\/p>\n<p>Se voc\u00ea estiver interessado em adicionar fundos ao seu menu, veja <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-menu-plugins\/\">nosso artigo sobre os melhores plugins do menu WordPress<\/a>. Muitos destes plugins de menu oferecem op\u00e7\u00f5es para incluir imagens e fundos coloridos em seu menu.<\/p>\n<p>Visto que existem v\u00e1rios plugins para adicionar um determinado fundo para os menus de navega\u00e7\u00e3o, forneceremos tutoriais para dois, um dos quais permite fundos atr\u00e1s do seu submenu. Em contraste, o outro adiciona um plano de fundo ao seu menu m\u00f3vel.<\/p>\n<p>Para adicionar uma imagem de fundo a diferentes submenus, instalar e ativar o <a href=\"https:\/\/wordpress.org\/plugins\/wp-megamenu\/\">plugin WP Mega Menu<\/a>. Este plugin permite ativar e gerenciar um mega-menu com m\u00faltiplos n\u00edveis de dropdown. \u00c9 ideal para grandes lojas online, mas tamb\u00e9m faz o truque para menus menores, especialmente se voc\u00ea quiser adicionar uma imagem de fundo ou \u00edcones.<\/p>\n<figure style=\"width: 1402px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\" size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/wp-mega-menu.png\" alt=\"WP Mega Menu plugin\" width=\"1402\" height=\"374\"><figcaption class=\"wp-caption-text\">WP Mega Menu plugin<\/figcaption><\/figure>\n<p>Comece encontrando a guia WP Mega Menu no painel do WordPress.<\/p>\n<p>Clique no item de menu <strong>Temas<\/strong>.<\/p>\n<figure style=\"width: 1240px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/themes-s-s.png\" alt=\"Ir para o painel \"Temas\"\" width=\"1240\" height=\"905\"><figcaption class=\"wp-caption-text\">Ir para o painel &#8220;Temas&#8221;<\/figcaption><\/figure>\n<p>Aqui, voc\u00ea pode ver uma lista de temas padr\u00e3o criados para seu menu pelo plugin.<\/p>\n<p>Voc\u00ea pode clicar para editar qualquer um dos temas ou adicionar seu pr\u00f3prio desenho a partir do zero.<\/p>\n<figure style=\"width: 1867px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/see-themes.png\" alt=\"Os muitos temas do Mega Menu\" width=\"1867\" height=\"841\"><figcaption class=\"wp-caption-text\">Os muitos temas do Mega Menu<\/figcaption><\/figure>\n<p>Cada tema tem suas pr\u00f3prias configura\u00e7\u00f5es onde voc\u00ea especifica elementos como o t\u00edtulo do tema, op\u00e7\u00f5es de barra de menu e o logotipo da marca. Quase todas as partes do seu menu s\u00e3o personaliz\u00e1veis, desde o menu suspenso at\u00e9 os submenus.<\/p>\n<p>No entanto, para o menu de fundo, voc\u00ea simplesmente precisa saber qual tema voc\u00ea quer escolher.<\/p>\n<figure style=\"width: 1757px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/main-sets.png\" alt=\"Definir as configura\u00e7\u00f5es tem\u00e1ticas do Mega Menu\" width=\"1757\" height=\"843\"><figcaption class=\"wp-caption-text\">Definir as configura\u00e7\u00f5es tem\u00e1ticas do Mega Menu<\/figcaption><\/figure>\n<p>Ir para <strong>Appearance &gt; Menus <\/strong>no painel de instrumentos.<\/p>\n<figure style=\"width: 1470px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/app-menu.png\" alt=\"Ir para 'Apar\u00eancia &gt; Menus'\" width=\"1470\" height=\"737\"><figcaption class=\"wp-caption-text\">Ir para &#8216;Apar\u00eancia &gt; Menus&#8217;<\/figcaption><\/figure>\n<p>Voc\u00ea ver\u00e1 um novo m\u00f3dulo que se conecta \u00e0s <strong>Configura\u00e7\u00f5es do Mega Menu<\/strong>.<\/p>\n<p>Clique para <strong>habilitar <\/strong>o mega menu, depois escolha o que voc\u00ea mais gostar para seu site.<\/p>\n<p>Finalmente, clique no bot\u00e3o <strong>Salvar<\/strong>.<\/p>\n<figure style=\"width: 1471px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/enable-it-s.png\" alt=\"Clique no bot\u00e3o 'Habilitar'\" width=\"1471\" height=\"901\"><figcaption class=\"wp-caption-text\">Clique no bot\u00e3o &#8216;Habilitar&#8217;<\/figcaption><\/figure>\n<p>Agora, desvie sua aten\u00e7\u00e3o para a \u00e1rea de <strong>Estrutura de Menu<\/strong>.<\/p>\n<p>Percorrendo qualquer um de seus itens atuais do menu revela um bot\u00e3o <strong>WP Mega Menu<\/strong>. Aqui \u00e9 onde voc\u00ea personaliza o layout e o design para cada se\u00e7\u00e3o suspensa.<\/p>\n<p>Clique no bot\u00e3o <strong>WP Mega Menu <\/strong>para qualquer item do menu que voc\u00ea quiser. Para este caso, adicionaremos um mega menu suspenso na guia Shop.<\/p>\n<p><strong>Nota: <\/strong>Presumimos que voc\u00ea j\u00e1 tenha um menu configurado em seu site WordPress. Leia nosso <a href=\"https:\/\/kinsta.com\/pt\/blog\/menu-suspenso-wordpress\/\">guia do menu suspenso do WordPress<\/a> se voc\u00ea precisar de ajuda com isso.<\/p>\n<figure style=\"width: 1455px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/selected-on.png\" alt=\"Adicione o mega menu ao seu site\" width=\"1455\" height=\"857\"><figcaption class=\"wp-caption-text\">Adicione o mega menu ao seu site<\/figcaption><\/figure>\n<p>Na nova janela popup, gire o interruptor para ligar o Mega Menu para aquele item de menu em particular.<\/p>\n<p>Voc\u00ea pode ent\u00e3o 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\u00e7am quando algu\u00e9m rolar sobre o item do menu Loja.<\/p>\n<figure style=\"width: 1855px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/add-row.png\" alt=\"Clique no bot\u00e3o 'Adicionar agora'\" width=\"1855\" height=\"918\"><figcaption class=\"wp-caption-text\">Clique no bot\u00e3o &#8216;Adicionar agora&#8217;<\/figcaption><\/figure>\n<p>Para adicionar um fundo a esta \u00e1rea suspensa, clique no bot\u00e3o <strong>Op\u00e7\u00f5es <\/strong>no canto inferior esquerdo.<\/p>\n<figure style=\"width: 1701px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/options-s-s.png\" alt=\"Escolha o link 'Op\u00e7\u00f5es'\" width=\"1701\" height=\"916\"><figcaption class=\"wp-caption-text\">Escolha o link &#8216;Op\u00e7\u00f5es&#8217;<\/figcaption><\/figure>\n<p>Encontre o campo <strong>Upload Background Image (Carregar imagem de fundo)<\/strong>.<\/p>\n<p>Clique no bot\u00e3o <strong>Upload <\/strong>para encontrar a foto certa em sua Biblioteca de M\u00eddia para us\u00e1-la como fundo.<\/p>\n<figure style=\"width: 1751px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/image-bg-up.png\" alt=\"Selecione o bot\u00e3o 'Upload de imagem'\" width=\"1751\" height=\"785\"><figcaption class=\"wp-caption-text\">Selecione o bot\u00e3o &#8216;Upload de imagem&#8217;<\/figcaption><\/figure>\n<p>Uma miniatura da imagem aparece depois de selecion\u00e1-la na Biblioteca de M\u00eddia.<\/p>\n<p>H\u00e1 alguns outros ambientes a considerar, portanto, sinta-se \u00e0 vontade para verificar se voc\u00ea quiser.<\/p>\n<figure style=\"width: 1768px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-image-uploaded.png\" alt=\"Verificar a unha do polegar\" width=\"1768\" height=\"728\"><figcaption class=\"wp-caption-text\">Verificar a unha do polegar<\/figcaption><\/figure>\n<p>Certifique-se de clicar no bot\u00e3o <strong>Salvar mudan\u00e7as<\/strong>, na parte inferior do painel de <strong>op\u00e7\u00f5es<\/strong>.<\/p>\n<figure style=\"width: 1767px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/save-them-s-s.png\" alt=\"Clique no bot\u00e3o 'Salvar mudan\u00e7as'\" width=\"1767\" height=\"864\"><figcaption class=\"wp-caption-text\">Clique no bot\u00e3o &#8216;Salvar mudan\u00e7as&#8217;<\/figcaption><\/figure>\n<p>Voc\u00ea tamb\u00e9m precisa clicar em Save Menu na \u00e1rea de Estrutura de Menu do painel de controle do WordPress.<\/p>\n<figure style=\"width: 1887px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/save-menu-s.png\" alt=\"Clique no bot\u00e3o 'Salvar Menu'\" width=\"1887\" height=\"877\"><figcaption class=\"wp-caption-text\">Clique no bot\u00e3o &#8216;Salvar Menu&#8217;<\/figcaption><\/figure>\n<p>Agora, navegue at\u00e9 o frontend do seu site para ver o menu. Se voc\u00ea folhear o item que acabamos de personalizar, voc\u00ea deve ver uma se\u00e7\u00e3o suspensa com o fundo.<\/p>\n<figure style=\"width: 1900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-shop-bg.png\" alt=\"O menu agora tem uma imagem de fundo\" width=\"1900\" height=\"867\"><figcaption class=\"wp-caption-text\">O menu agora tem uma imagem de fundo<\/figcaption><\/figure>\n<p>Outra maneira de adicionar uma imagem de fundo a um menu \u00e9 usando um menu m\u00f3vel e responsivo que aparece quando algu\u00e9m acessa seu website atrav\u00e9s de um dispositivo m\u00f3vel.<\/p>\n<p>Voc\u00ea pode colocar um fundo atr\u00e1s do menu m\u00f3vel com a ajuda do plugin <a href=\"https:\/\/kinsta.com\/pt\/blog\/plugins-wordpress-mobile\/#wp-mobile-menu\">WP Mobile Menu<\/a>.<\/p>\n<figure style=\"width: 1640px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/WP-Mobile-Menu.png\" alt=\"Plugin do Menu M\u00f3vel WP\" width=\"1640\" height=\"433\"><figcaption class=\"wp-caption-text\">Plugin do Menu M\u00f3vel WP<\/figcaption><\/figure>\n<p>Ap\u00f3s instalar e ativar o plug-in do Menu M\u00f3vel WP, v\u00e1 para Op\u00e7\u00f5es do Menu M\u00f3vel no painel do WordPress.<\/p>\n<figure style=\"width: 1361px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/mobile-menu-options.png\" alt=\"Ir para o link 'Op\u00e7\u00f5es do Menu M\u00f3vel'\" width=\"1361\" height=\"906\"><figcaption class=\"wp-caption-text\">Ir para o link &#8216;Op\u00e7\u00f5es do Menu M\u00f3vel&#8217;<\/figcaption><\/figure>\n<p>O plugin oferece diversas maneiras de configurar seu menu m\u00f3vel. A exig\u00eancia geral \u00e9 ativar um dos formatos de menu e indicar qual menu WordPress voc\u00ea deseja usar para aquele menu m\u00f3vel.<\/p>\n<p>Por exemplo, podemos clicar no bot\u00e3o <strong>Ativar Menu Esquerdo <\/strong>(ativando um menu m\u00f3vel que fica no lado esquerdo da tela) e escolher a op\u00e7\u00e3o <strong>Menu Principal<\/strong> a partir do menu suspenso <strong>Menu Esquerdo.<\/strong> Isto liga nosso Menu Principal atual com o menu m\u00f3vel, para que os visitantes vejam as mesmas abas.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/turn-on-a-menu.png\" alt=\"Defina as op\u00e7\u00f5es do menu m\u00f3vel\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Defina as op\u00e7\u00f5es do menu m\u00f3vel<\/figcaption><\/figure>\n<p>Depende do tipo de menu m\u00f3vel que voc\u00ea criar, mas como estamos fazendo um menu do lado esquerdo, podemos clicar na aba Menu esquerdo para revelar as configura\u00e7\u00f5es apropriadas para adicionar um fundo.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/left-menu.png\" alt=\"Escolha as configura\u00e7\u00f5es do menu da esquerda\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Escolha as configura\u00e7\u00f5es do menu da esquerda<\/figcaption><\/figure>\n<p>V\u00e1 at\u00e9 o campo <strong>Imagem de Fundo do Painel <\/strong>e clique no sinal &#8220;<strong>+<\/strong>&#8221; para abrir a Biblioteca de M\u00eddia.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/bg-panel.png\" alt=\"Adicionando uma imagem de fundo do menu m\u00f3vel\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Adicionando uma imagem de fundo do menu m\u00f3vel<\/figcaption><\/figure>\n<p>Selecione uma imagem de sua Biblioteca de M\u00eddia e adicione-a ao campo.<\/p>\n<p>Voc\u00ea deve ver uma vers\u00e3o em miniatura da imagem de fundo como confirma\u00e7\u00e3o.<\/p>\n<p>Selecione o bot\u00e3o <strong>Salvar mudan\u00e7as <\/strong>para ativar o fundo.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/save-the-change.png\" alt=\"Verificar a imagem de fundo com a miniatura\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Verificar a imagem de fundo com a miniatura<\/figcaption><\/figure>\n<p>Visto como o plugin gera menus m\u00f3veis, o menu s\u00f3 pode aparecer quando seu navegador estiver configurado em uma largura estreita ou quando voc\u00ea for ao seu site em um telefone ou tablet.<\/p>\n<p>O novo menu \u00e9 consolidado sob um \u00edcone de hamb\u00farguer (tr\u00eas linhas horizontais).<\/p>\n<p>Clique nisso para testar o novo menu com o fundo.<\/p>\n<figure style=\"width: 1196px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/click-on-it-now.png\" alt=\"Clique no \u00edcone do menu de hamb\u00fargueres\" width=\"1196\" height=\"844\"><figcaption class=\"wp-caption-text\">Clique no \u00edcone do menu de hamb\u00fargueres<\/figcaption><\/figure>\n<p>Como mostrado na captura de tela, o fundo \u00e9 colocado atr\u00e1s de todo o menu m\u00f3vel para que todos possam ver.<\/p>\n<figure style=\"width: 1195px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-finished-product-background.png\" alt=\"Menu m\u00f3vel com uma imagem de fundo\" width=\"1195\" height=\"826\"><figcaption class=\"wp-caption-text\">Menu m\u00f3vel com uma imagem de fundo<\/figcaption><\/figure>\n<h3>Como adicionar uma imagem de fundo do WordPress a uma p\u00e1gina de manuten\u00e7\u00e3o<\/h3>\n<p><a href=\"https:\/\/kinsta.com\/pt\/blog\/manutencao-101-do-wordpress\/\">Todos os websites ocasionalmente requerem manuten\u00e7\u00e3o<\/a>, e \u00e0s vezes essa manuten\u00e7\u00e3o leva tanto tempo que a exibi\u00e7\u00e3o de uma p\u00e1gina de manuten\u00e7\u00e3o ajuda.<\/p>\n<p>As imagens de fundo desempenham um grande papel quando se trabalha com <a href=\"https:\/\/kinsta.com\/pt\/blog\/modo-manutencao-wordpress\/\">p\u00e1ginas de manuten\u00e7\u00e3o<\/a>. A maioria das p\u00e1ginas de manuten\u00e7\u00e3o consiste de uma imagem de fundo em tela cheia e talvez algum texto ou links com mais recursos.<\/p>\n<p>Se voc\u00ea j\u00e1 tem uma p\u00e1gina de manuten\u00e7\u00e3o e ela n\u00e3o inclui uma imagem de fundo, considere os seguintes passos para gerar um belo ambiente para quando voc\u00ea precisar fechar seu website do p\u00fablico por um per\u00edodo de tempo.<\/p>\n<p>Voc\u00ea pode adicionar uma imagem de fundo a uma p\u00e1gina de manuten\u00e7\u00e3o com a ajuda do <a href=\"https:\/\/wordpress.org\/plugins\/maintenance\/\">plug-in Manuten\u00e7\u00e3o<\/a>. Instale e ative o plugin em seu site.<\/p>\n<figure style=\"width: 1328px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Maintenance.png\" alt=\"Plugin de manuten\u00e7\u00e3o\" width=\"1328\" height=\"431\"><figcaption class=\"wp-caption-text\">Plugin de manuten\u00e7\u00e3o<\/figcaption><\/figure>\n<p>Uma vez ativo, encontre o bot\u00e3o de <strong>Maintenance is On\/Off<\/strong><strong>\u00a0<\/strong>no topo do painel de instrumentos.<\/p>\n<p>Clique no bot\u00e3o para ir para a p\u00e1gina de Configura\u00e7\u00f5es do plugin de Manuten\u00e7\u00e3o.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/off.png\" alt=\"Clique no link 'Manuten\u00e7\u00e3o est\u00e1 fora'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Clique no link &#8216;Manuten\u00e7\u00e3o est\u00e1 fora&#8217;<\/figcaption><\/figure>\n<p>Outra maneira de chegar \u00e0 p\u00e1gina Configura\u00e7\u00f5es \u00e9 clicando no item do menu <strong>Manuten\u00e7\u00e3o <\/strong>no menu lateral do painel de instrumentos.<\/p>\n<figure style=\"width: 1614px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/maintenance-on-bottom.png\" alt=\"Clique no item de menu 'Manuten\u00e7\u00e3o'\" width=\"1614\" height=\"909\"><figcaption class=\"wp-caption-text\">Clique no item de menu &#8216;Manuten\u00e7\u00e3o&#8217;<\/figcaption><\/figure>\n<p>A p\u00e1gina Configura\u00e7\u00f5es do plugin de Manuten\u00e7\u00e3o tem uma cole\u00e7\u00e3o decente de op\u00e7\u00f5es para personalizar, mas a principal \u00e1rea a ser considerada \u00e9 o m\u00f3dulo de <strong>Configura\u00e7\u00f5es Gerais<\/strong>. Aqui, voc\u00ea pode escrever em um cabe\u00e7alho e descri\u00e7\u00e3o, ambos servindo como o texto que se sobrep\u00f5e sobre o fundo que estamos prestes a inserir.<\/p>\n<p>O t\u00edtulo da p\u00e1gina aparece na guia do navegador, portanto, voc\u00ea deve considerar a possibilidade de personalizar isso tamb\u00e9m.<\/p>\n<p>Voc\u00ea pode usar o plugin de Manuten\u00e7\u00e3o para qualquer coisa, desde p\u00e1ginas de manuten\u00e7\u00e3o at\u00e9 as pr\u00f3ximas p\u00e1ginas, ent\u00e3o voc\u00ea pode digitar algo como &#8220;Nosso site est\u00e1 em manuten\u00e7\u00e3o&#8221;, ou voc\u00ea pode mostrar um pouco de informa\u00e7\u00e3o sobre sua empresa e incluir um formul\u00e1rio para que as pessoas digitem seus endere\u00e7os de e-mail.<\/p>\n<figure style=\"width: 1622px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/maintenance-ss.png\" alt=\"Acrescentar uma manchete para a p\u00e1gina de manuten\u00e7\u00e3o\" width=\"1622\" height=\"940\"><figcaption class=\"wp-caption-text\">Acrescentar uma manchete para a p\u00e1gina de manuten\u00e7\u00e3o<\/figcaption><\/figure>\n<p>Continuando, o plugin oferece uma op\u00e7\u00e3o para carregar seu logotipo, que tamb\u00e9m se sobrep\u00f5e \u00e0 imagem de fundo.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/logo-up.png\" alt=\"Bot\u00e3o 'Upload Logotipo'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Bot\u00e3o &#8216;Upload Logotipo&#8217;<\/figcaption><\/figure>\n<p>Clique no bot\u00e3o <strong>Upload Logotipo <\/strong>e escolha seu logotipo para ver sua miniatura no painel de instrumentos.<\/p>\n<figure style=\"width: 1618px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/logo-in.png\" alt=\"Logotipo para a p\u00e1gina de manuten\u00e7\u00e3o\" width=\"1618\" height=\"940\"><figcaption class=\"wp-caption-text\">Logotipo para a p\u00e1gina de manuten\u00e7\u00e3o<\/figcaption><\/figure>\n<p>Finalmente, o campo Imagem de fundo pede que voc\u00ea clique no campo Upload Background Image.<\/p>\n<p>Ou carregue uma imagem do seu computador ou passe por sua Biblioteca de M\u00eddia para localizar um fundo adequado para a p\u00e1gina de manuten\u00e7\u00e3o.<\/p>\n<p><strong>Nota: <\/strong>As melhores imagens de fundo para manuten\u00e7\u00e3o s\u00e3o grandes, de alta resolu\u00e7\u00e3o e em orienta\u00e7\u00e3o paisag\u00edstica. Uma alternativa de fundo &#8220;Portrait Mode&#8221; est\u00e1 dispon\u00edvel nas configura\u00e7\u00f5es abaixo.<\/p>\n<figure style=\"width: 1616px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/upload-back.png\" alt=\"Clique no bot\u00e3o 'Upload Background'\" width=\"1616\" height=\"940\"><figcaption class=\"wp-caption-text\">Clique no bot\u00e3o &#8216;Upload Background&#8217;<\/figcaption><\/figure>\n<p>Uma vez escolhido o fundo, ele aparece como uma visualiza\u00e7\u00e3o em miniatura menor no painel de instrumentos.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/add-one.png\" alt=\"A miniatura da imagem de fundo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">A miniatura da imagem de fundo<\/figcaption><\/figure>\n<p>Embora uma imagem de fundo com uma orienta\u00e7\u00e3o de paisagem fa\u00e7a mais sentido para computadores desktop e telas mais amplas, muitas pessoas acabam em seu site usando telas com orienta\u00e7\u00f5es de retrato, como com um telefone sendo segurado verticalmente.<\/p>\n<p>Portanto, uma imagem de fundo mais ampla n\u00e3o parecer\u00e1 t\u00e3o agrad\u00e1vel. \u00c9 por isso que o plugin oferece uma imagem de fundo em modo retrato que serve como uma alternativa, sendo trocada de forma respons\u00e1vel sempre que um usu\u00e1rio visita a p\u00e1gina usando uma tela orientada para retrato.<\/p>\n<p>\u00c9 importante incluir uma imagem neste campo, portanto clique no bot\u00e3o <strong>Upload de imagem para orienta\u00e7\u00e3o do dispositivo de retrato<\/strong>.<\/p>\n<figure style=\"width: 1615px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/port.png\" alt=\"Upload de uma imagem de fundo de orienta\u00e7\u00e3o de retrato\" width=\"1615\" height=\"912\"><figcaption class=\"wp-caption-text\">Upload de uma imagem de fundo de orienta\u00e7\u00e3o de retrato<\/figcaption><\/figure>\n<p>Desta vez, encontre uma imagem que seja mais alta do que larga (modo retrato). Voc\u00ea sempre pode recortar a imagem de fundo original para torn\u00e1-la um retrato, ou voc\u00ea tem a op\u00e7\u00e3o de carregar uma imagem completamente diferente para preencher a vaga.<\/p>\n<p>Destaque a imagem desejada e clique no bot\u00e3o <strong>Select Image <\/strong>para inseri-la no painel de instrumentos.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/port-mode.png\" alt=\"Escolha a imagem de fundo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Escolha a imagem de fundo<\/figcaption><\/figure>\n<p>Todas estas configura\u00e7\u00f5es n\u00e3o significam nada a menos que voc\u00ea ative o Modo de Manuten\u00e7\u00e3o.<\/p>\n<p>Para que isso aconte\u00e7a, localize o interruptor de Manuten\u00e7\u00e3o On\/Off na parte superior da p\u00e1gina Configura\u00e7\u00f5es.<\/p>\n<figure style=\"width: 1620px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/offff.png\" alt=\"Configurando a p\u00e1gina de manuten\u00e7\u00e3o 'On' ou 'Off'\" width=\"1620\" height=\"940\"><figcaption class=\"wp-caption-text\">Configurando a p\u00e1gina de manuten\u00e7\u00e3o &#8216;On&#8217; ou &#8216;Off&#8217;<\/figcaption><\/figure>\n<p>Vire o interruptor de modo que ele leia &#8220;On,&#8221; e ent\u00e3o selecione o bot\u00e3o <strong>Salvar mudan\u00e7as<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/save-theme.png\" alt=\"Habilita\u00e7\u00e3o da p\u00e1gina de manuten\u00e7\u00e3o\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Habilita\u00e7\u00e3o da p\u00e1gina de manuten\u00e7\u00e3o<\/figcaption><\/figure>\n<p>V\u00e1 para o frontend do seu site para garantir que a imagem de fundo e a p\u00e1gina de manuten\u00e7\u00e3o apare\u00e7am corretamente.<\/p>\n<p>H\u00e1 uma boa chance de que n\u00e3o aconte\u00e7a.<\/p>\n<p>H\u00e1 duas raz\u00f5es para isso: Em primeiro lugar, voc\u00ea deve sair da conta do WordPress Admin para ver o site do Modo de Manuten\u00e7\u00e3o. Segundo, voc\u00ea pode precisar <a href=\"https:\/\/kinsta.com\/pt\/blog\/limpar-cache-wordpress\/\">limpar o cache do site<\/a> para atualizar a mudan\u00e7a no conte\u00fado.<\/p>\n<figure style=\"width: 1270px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/nothing-show.png\" alt=\"Veja o site em 'Modo de manuten\u00e7\u00e3o'\" width=\"1270\" height=\"836\"><figcaption class=\"wp-caption-text\">Veja o site em &#8216;Modo de manuten\u00e7\u00e3o&#8217;<\/figcaption><\/figure>\n<p>Por exemplo, quando eu saio da conta de administra\u00e7\u00e3o, a p\u00e1gina de manuten\u00e7\u00e3o agora aparece quando eu vou a qualquer p\u00e1gina.<\/p>\n<p>A imagem de fundo est\u00e1 l\u00e1, junto com minhas personaliza\u00e7\u00f5es como o logotipo e a descri\u00e7\u00e3o do texto.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/maintenance-page.png\" alt=\"A imagem de fundo na p\u00e1gina de manuten\u00e7\u00e3o\" width=\"1920\" height=\"1040\"><figcaption class=\"wp-caption-text\">A imagem de fundo na p\u00e1gina de manuten\u00e7\u00e3o<\/figcaption><\/figure>\n<p>Al\u00e9m disso, mudar o tamanho das janelas do navegador para uma orienta\u00e7\u00e3o mais de retrato encaixa o fundo do modo retrato no lugar.<\/p>\n<p>Voc\u00ea tamb\u00e9m deve ver o modo retrato ao visitar o site em um telefone ou tablet.<\/p>\n<figure style=\"width: 889px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/portrait-example.png\" alt=\"A imagem de fundo em modo retrato\" width=\"889\" height=\"1006\"><figcaption class=\"wp-caption-text\">A imagem de fundo em modo retrato<\/figcaption><\/figure>\n<p>Outro tipo de imagem de fundo com o plugin \u00e9 chamada de Imagem de Pr\u00e9-carregador. Isto essencialmente carrega uma imagem r\u00e1pida com um efeito animado antes de revelar a p\u00e1gina de manuten\u00e7\u00e3o real, o fundo e o conte\u00fado.<\/p>\n<p>Como a imagem de fundo normal, clique no bot\u00e3o <strong>Upload Preloader <\/strong>para encontrar uma imagem que tenha bom aspecto e adicione-a ao painel de instrumentos.<\/p>\n<p>Mais uma vez, clique no bot\u00e3o <strong>Salvar mudan\u00e7as <\/strong>e limpe o cache.<\/p>\n<figure style=\"width: 1616px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/preload.png\" alt=\"Clique no bot\u00e3o 'Upload Preloader'\" width=\"1616\" height=\"940\"><figcaption class=\"wp-caption-text\">Clique no bot\u00e3o &#8216;Upload Preloader&#8217;<\/figcaption><\/figure>\n<p>Por padr\u00e3o, o efeito de <strong>Pr\u00e9-carregador de imagem <\/strong>gira por um momento, e depois desaparece para apresentar a p\u00e1gina de manuten\u00e7\u00e3o e a imagem de fundo.<\/p>\n<p>Depende inteiramente de voc\u00ea se gostaria ou n\u00e3o de manter este tipo de efeito.<\/p>\n<figure style=\"width: 1280px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/2021-02-03_11-55-51.gif\" alt=\"Adicionando um efeito de introdu\u00e7\u00e3o \u00e0 imagem de fundo\" width=\"1280\" height=\"720\"><figcaption class=\"wp-caption-text\">Adicionando um efeito de introdu\u00e7\u00e3o \u00e0 imagem de fundo<\/figcaption><\/figure>\n<p>V\u00e1rios outros elementos de fundo est\u00e3o dispon\u00edveis para voc\u00ea experimentar no painel de Configura\u00e7\u00f5es do plugin de Manuten\u00e7\u00e3o.<\/p>\n<p>Por exemplo, voc\u00ea pode querer adicionar uma cor de fundo ao inv\u00e9s de uma imagem de fundo.<\/p>\n<p>Se for esse o caso, v\u00e1 para o campo <strong>Cor de fundo <\/strong>e Selecione uma Cor que se ajuste \u00e0 sua marca.<\/p>\n<figure style=\"width: 1617px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/back-col.png\" alt=\"Abra o campo de cor de fundo\" width=\"1617\" height=\"940\"><figcaption class=\"wp-caption-text\">Abra o campo de cor de fundo<\/figcaption><\/figure>\n<p>A cor de fundo n\u00e3o aparece na p\u00e1gina de manuten\u00e7\u00e3o, a menos que voc\u00ea desabilite todas as outras imagens de fundo.<\/p>\n<p>Portanto, certifique-se de apagar a imagem de fundo.<\/p>\n<figure style=\"width: 1618px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/remove-s.png\" alt=\"Removendo a imagem de fundo\" width=\"1618\" height=\"940\"><figcaption class=\"wp-caption-text\">Removendo a imagem de fundo<\/figcaption><\/figure>\n<p>Voc\u00ea tamb\u00e9m deve apagar a imagem de fundo em Modo Retrato.<\/p>\n<figure style=\"width: 1620px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/remove-both.png\" alt=\"Definir a imagem de fundo no modo Retrato\" width=\"1620\" height=\"940\"><figcaption class=\"wp-caption-text\">Definir a imagem de fundo no modo Retrato<\/figcaption><\/figure>\n<p>Salvar as mudan\u00e7as e limpar o cache. Em seguida, v\u00e1 at\u00e9 o frontend do seu site para ver a cor de fundo em vigor.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/back-color.png\" alt=\"Verifique o frontend do seu site\" width=\"1920\" height=\"1040\"><figcaption class=\"wp-caption-text\">Verifique o frontend do seu site<\/figcaption><\/figure>\n<p>As configura\u00e7\u00f5es a serem consideradas incluem itens como a cor da fonte, a fam\u00edlia de fontes e o borr\u00e3o de fundo.<\/p>\n<p>Tamb\u00e9m recomendamos pensar se voc\u00ea precisa ou n\u00e3o de um login frontend. Isto proporciona uma maneira para os usu\u00e1rios acessarem suas contas e obterem acesso a perfis, se necess\u00e1rio.<\/p>\n<p>Uma vez que tudo esteja feito, clique no bot\u00e3o <strong>Salvar mudan\u00e7as<\/strong>.<\/p>\n<figure style=\"width: 1366px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-setttings.png\" alt=\"Defina a cor da fonte\" width=\"1366\" height=\"926\"><figcaption class=\"wp-caption-text\">Defina a cor da fonte<\/figcaption><\/figure>\n<p>O plug-in Manuten\u00e7\u00e3o tamb\u00e9m oferece v\u00e1rios temas pr\u00e9-fabricados com belas imagens de fundo e layouts e textos desenhados profissionalmente.<\/p>\n<p>Voc\u00ea pode encontrar temas para as pr\u00f3ximas p\u00e1ginas e layouts de manuten\u00e7\u00e3o, juntamente com p\u00e1ginas para coletar endere\u00e7os de e-mail e outras informa\u00e7\u00f5es de contato.<\/p>\n<p>Voc\u00ea deve adquirir os temas para utiliz\u00e1-los.<\/p>\n<figure style=\"width: 1471px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/themess.png\" alt=\"Adquirindo um tema premium\" width=\"1471\" height=\"940\"><figcaption class=\"wp-caption-text\">Adquirindo um tema premium<\/figcaption><\/figure>\n<p>Dependendo do seu or\u00e7amento, eles s\u00e3o bastante baratos e parecem \u00f3timos.<\/p>\n<figure style=\"width: 1775px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/example-3.png\" alt=\"Um exemplo de um modelo\" width=\"1775\" height=\"924\"><figcaption class=\"wp-caption-text\">Um exemplo de um modelo<\/figcaption><\/figure>\n<p>Para aqueles que n\u00e3o est\u00e3o interessados em comprar um tema, todas as configura\u00e7\u00f5es acima est\u00e3o \u00e0 sua disposi\u00e7\u00e3o. Voc\u00ea tamb\u00e9m pode entrar no m\u00f3dulo CSS personalizado para configurar sua p\u00e1gina de manuten\u00e7\u00e3o e imagem de fundo como quiser.<\/p>\n<figure style=\"width: 1391px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/other-setss.png\" alt=\"Ir para o m\u00f3dulo 'Custom CSS'\" width=\"1391\" height=\"940\"><figcaption class=\"wp-caption-text\">Ir para o m\u00f3dulo &#8216;Custom CSS&#8217;<\/figcaption><\/figure>\n<p>Lembre-se, as configura\u00e7\u00f5es da p\u00e1gina de manuten\u00e7\u00e3o raramente entram em vigor, a menos que voc\u00ea saia da conta de administrador e clique no bot\u00e3o <strong>Limpar Cache<\/strong>.<\/p>\n<p>Voc\u00ea pode encontrar o bot\u00e3o <strong>Clear Cache <\/strong>no canto superior direito do painel ao usar o Kinsta. Se utilizar um host diferente, considere um dos muitos <a href=\"https:\/\/kinsta.com\/pt\/blog\/limpar-cache-wordpress\/\">plugins de cache existentes no mercado<\/a>.<\/p>\n<figure style=\"width: 1830px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/clear-cache-sss.png\" alt=\"Clique no bot\u00e3o 'Clear Cache'\" width=\"1830\" height=\"777\"><figcaption class=\"wp-caption-text\">Clique no bot\u00e3o &#8216;Clear Cache&#8217;<\/figcaption><\/figure>\n<p>Assim que voc\u00ea limpar o cache e salvar suas configura\u00e7\u00f5es, voc\u00ea deve ver uma bela imagem de fundo que complementa a p\u00e1gina de manuten\u00e7\u00e3o!<\/p>\n<figure style=\"width: 1701px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/regular-programing.png\" alt=\"Verifica\u00e7\u00e3o da p\u00e1gina de manuten\u00e7\u00e3o\" width=\"1701\" height=\"888\"><figcaption class=\"wp-caption-text\">Verifica\u00e7\u00e3o da p\u00e1gina de manuten\u00e7\u00e3o<\/figcaption><\/figure>\n<h3>Como adicionar um fundo de WordPress com um construtor de p\u00e1ginas de terceiros<\/h3>\n<p><a href=\"https:\/\/kinsta.com\/pt\/blog\/construtores-de-paginas-wordpress\/\">Nosso artigo sobre os melhores construtores de p\u00e1ginas<\/a> oferece uma lista de op\u00e7\u00f5es para a escolha de um construtor de p\u00e1ginas com recursos de arrastar e soltar. O WordPress j\u00e1 inclui um construtor de p\u00e1ginas em Gutenberg, mas muitos propriet\u00e1rios de sites preferem outras solu\u00e7\u00f5es.<\/p>\n<p>A se\u00e7\u00e3o a seguir explica como implementar um background utilizando alguns construtores de p\u00e1ginas populares, incluindo Elementor, Beaver Builder e Page Builder by SiteOrigin.<\/p>\n<h4>Adicione um fundo WordPress com a Elementor<\/h4>\n<p>A Elementor, a popular construtora de p\u00e1ginas web destinada a acelerar drasticamente a produ\u00e7\u00e3o do site, oferece um plugin gratuito com v\u00e1rias ferramentas de imagem de fundo.<\/p>\n<p>Al\u00e9m disso, a Elementor apresenta flexibilidade visual de fundo para v\u00e1rias partes do seu website, em vez de restringir os fundos a todo o website. Por exemplo, voc\u00ea pode adicionar um fundo atr\u00e1s de praticamente qualquer se\u00e7\u00e3o de bloco de constru\u00e7\u00e3o e mostrar fundos diferentes de p\u00e1gina para p\u00e1gina.<\/p>\n<p>Para iniciar, <a href=\"https:\/\/kinsta.com\/pt\/blog\/construtores-de-paginas-wordpress\/#elementor\">instalar e ativar o plugin da Elementor<\/a>.<\/p>\n<figure style=\"width: 1324px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/elementor-e.png\" alt=\"Elemento ou plugin\" width=\"1324\" height=\"435\"><figcaption class=\"wp-caption-text\">Elemento ou plugin<\/figcaption><\/figure>\n<p>A Elementor dispersa suas configura\u00e7\u00f5es de fundo por todo o construtor, facilitando a sele\u00e7\u00e3o de um elemento e a implementa\u00e7\u00e3o de um fundo, se necess\u00e1rio. Portanto, voc\u00ea pode tecnicamente ir a qualquer p\u00e1gina ou postar com a expectativa de ter acesso a um bot\u00e3o de carregamento de fundo.<\/p>\n<p>Neste caso, vamos para a p\u00e1gina inicial de nosso site de testes. Visite a p\u00e1gina de sua escolha selecionando a partir da lista em <strong>P\u00e1ginas &gt; Todas as P\u00e1ginas<\/strong>. Voc\u00ea tamb\u00e9m pode fazer o mesmo com os<strong> Artigos <\/strong>.<\/p>\n<p>Uma vez no editor de p\u00e1ginas padr\u00e3o do WordPress, clique no bot\u00e3o para <strong>editar com\u00a0 Elementor<\/strong>.<\/p>\n<figure style=\"width: 1889px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/edit-with.png\" alt=\"Clique no plugin 'Edit with Elementor'\" width=\"1889\" height=\"880\"><figcaption class=\"wp-caption-text\">Clique no plugin &#8216;Edit with Elementor&#8217;<\/figcaption><\/figure>\n<p>Isto desloca a vis\u00e3o em sua tela para o Editor da Elementor. Aqui, o lado esquerdo tem um menu com m\u00f3dulos de arrastar e soltar para construir e editar sua p\u00e1gina.<\/p>\n<p>A funcionalidade de fundo n\u00e3o est\u00e1 dispon\u00edvel em uma se\u00e7\u00e3o ou bloco, mas sim nas <strong>Configura\u00e7\u00f5es <\/strong>prim\u00e1rias para aquela p\u00e1gina.<\/p>\n<p>Portanto, clique no pequeno \u00edcone Configura\u00e7\u00f5es (parece uma engrenagem) no canto inferior esquerdo do editor.<\/p>\n<figure style=\"width: 1526px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/settings-gear.png\" alt=\"Clique no \u00edcone de configura\u00e7\u00f5es\" width=\"1526\" height=\"935\"><figcaption class=\"wp-caption-text\">Clique no \u00edcone de configura\u00e7\u00f5es<\/figcaption><\/figure>\n<p>Isto mostra uma se\u00e7\u00e3o para configura\u00e7\u00f5es gerais de p\u00e1gina.<\/p>\n<p>Clique na guia <strong>Estilo <\/strong>na parte superior da se\u00e7\u00e3o <strong>Configura\u00e7\u00f5es da p\u00e1gina<\/strong>.<\/p>\n<figure style=\"width: 1861px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/style-of.png\" alt=\"Ir para a guia 'Estilo'\" width=\"1861\" height=\"910\"><figcaption class=\"wp-caption-text\">Ir para a guia &#8216;Estilo&#8217;<\/figcaption><\/figure>\n<p>Sob Style, localize o campo <strong>Background Type <\/strong>e clique no \u00edcone <strong>Pincel de Pintura <\/strong>para adicionar um fundo padr\u00e3o.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/classic.png\" alt=\"Defini\u00e7\u00e3o do campo 'Background Type'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Defini\u00e7\u00e3o do campo &#8216;Background Type&#8217;<\/figcaption><\/figure>\n<p>Em seguida, escolha o tipo de fundo que voc\u00ea deseja que apare\u00e7a. Por exemplo, o campo <strong>Cor <\/strong>permite que voc\u00ea mude o fundo para uma cor s\u00f3lida. H\u00e1 tamb\u00e9m uma op\u00e7\u00e3o <strong>Gradiente <\/strong>no campo <strong>Background Type<\/strong>, se for mais o seu estilo.<\/p>\n<figure style=\"width: 1826px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-color.png\" alt=\"Configura\u00e7\u00e3o do campo de cor de fundo\" width=\"1826\" height=\"940\"><figcaption class=\"wp-caption-text\">Configura\u00e7\u00e3o do campo de cor de fundo<\/figcaption><\/figure>\n<p>Clique no bot\u00e3o <strong>Escolher imagem <\/strong>sob o campo Imagem para abrir sua <strong>Biblioteca de M\u00eddia <\/strong>e escolha uma imagem de fundo adequada para esta p\u00e1gina.<\/p>\n<figure style=\"width: 1560px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/choose-image-s-s.png\" alt=\"Clique no bot\u00e3o 'Escolher imagem'\" width=\"1560\" height=\"857\"><figcaption class=\"wp-caption-text\">Clique no bot\u00e3o &#8216;Escolher imagem&#8217;<\/figcaption><\/figure>\n<p>Como sempre, teste suas imagens de fundo e mantenha as dimens\u00f5es ideais e as melhores pr\u00e1ticas (alta resolu\u00e7\u00e3o e orienta\u00e7\u00e3o de retrato para a maioria), depois selecione a imagem que funciona bem e clique no bot\u00e3o <strong>Inserir M\u00eddia<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/inserting.png\" alt=\"Clique no bot\u00e3o 'Inserir M\u00eddia'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Clique no bot\u00e3o &#8216;Inserir M\u00eddia&#8217;<\/figcaption><\/figure>\n<p>A imagem de fundo selecionada agora aparece na visualiza\u00e7\u00e3o do site da Elementor \u00e0 direita. Voc\u00ea pode precisar ajustar outras partes do seu conte\u00fado para garantir que itens como texto e imagens apare\u00e7am quando em cima do fundo.<\/p>\n<p>A Elementor fornece configura\u00e7\u00f5es de fundo de imagem como Posi\u00e7\u00e3o, Anexo, Repetir e Tamanho da imagem de fundo do WordPress. Modifique as configura\u00e7\u00f5es para determinar se seu fundo pode parecer melhor como um anexo fixo, ou talvez com uma orienta\u00e7\u00e3o de cima para a direita ou um tamanho alternativo.<\/p>\n<p>Aperte o bot\u00e3o <strong>Atualizar <\/strong>para salvar todas as mudan\u00e7as na p\u00e1gina e publicar o novo hist\u00f3rico do seu site.<\/p>\n<figure style=\"width: 1728px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/updateing.png\" alt=\"Adicionando um novo fundo\" width=\"1728\" height=\"890\"><figcaption class=\"wp-caption-text\">Adicionando um novo fundo<\/figcaption><\/figure>\n<h5>Antecedentes da se\u00e7\u00e3o com a Elementor<\/h5>\n<p>A Elementor oferece funcionalidade de fundo avan\u00e7ada para a maioria das se\u00e7\u00f5es adicionadas a suas p\u00e1ginas.<\/p>\n<p>Tudo que voc\u00ea tem que fazer \u00e9 selecionar uma se\u00e7\u00e3o em uma p\u00e1gina da Elementor e modificar as configura\u00e7\u00f5es de Fundo para limitar o fundo apenas a essa \u00e1rea.<\/p>\n<p>Por exemplo, podemos selecionar esta se\u00e7\u00e3o <strong>Editor de Texto <\/strong>para ver as configura\u00e7\u00f5es da se\u00e7\u00e3o Texto.<\/p>\n<figure style=\"width: 1329px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/select-the-right-one.png\" alt=\"Escolha a se\u00e7\u00e3o de texto com Elementor\" width=\"1329\" height=\"940\"><figcaption class=\"wp-caption-text\">Escolha a se\u00e7\u00e3o de texto com Elementor<\/figcaption><\/figure>\n<p>Escolha a aba <strong>Advanced <\/strong>e encontre a se\u00e7\u00e3o <strong>Background <\/strong>dentro dessa aba.<\/p>\n<figure style=\"width: 1440px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/bg-ad.png\" alt=\"Ir para a se\u00e7\u00e3o \"Antecedentes\"\" width=\"1440\" height=\"831\"><figcaption class=\"wp-caption-text\">Ir para a se\u00e7\u00e3o &#8220;Antecedentes&#8221;<\/figcaption><\/figure>\n<p>As configura\u00e7\u00f5es de <strong>fundo <\/strong>incluem <strong>Tipo de fundo<\/strong>, <strong>Cor<\/strong>, <strong>Imagem <\/strong>e muito mais, muito parecido com as configura\u00e7\u00f5es que vimos para as configura\u00e7\u00f5es gerais de fundo da p\u00e1gina. A \u00fanica diferen\u00e7a \u00e9 que ela restringe estas configura\u00e7\u00f5es \u00e0 se\u00e7\u00e3o selecionada.<\/p>\n<p>Escolha o \u00edcone <strong>Pincel de Pintura <\/strong>para <strong>Tipo de Fundo<\/strong>, depois clique no bot\u00e3o <strong>Escolher Imagem <\/strong>sob o campo <strong>Imagem<\/strong>.<\/p>\n<figure style=\"width: 1440px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/choosing-it.png\" alt=\"Clique no bot\u00e3o 'Escolher imagem'\" width=\"1440\" height=\"811\"><figcaption class=\"wp-caption-text\">Clique no bot\u00e3o &#8216;Escolher imagem&#8217;<\/figcaption><\/figure>\n<p>Escolha uma imagem da <strong>Biblioteca de M\u00eddia <\/strong>e clique no bot\u00e3o <strong>Inserir M\u00eddia<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/inset-media-3.png\" alt=\"Escolha a imagem e clique no bot\u00e3o 'Inserir M\u00eddia'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Escolha a imagem e clique no bot\u00e3o &#8216;Inserir M\u00eddia&#8217;<\/figcaption><\/figure>\n<p>Como voc\u00ea pode ver, a imagem de fundo permanece dentro dos limites daquela se\u00e7\u00e3o enquanto est\u00e1 sentada atr\u00e1s do conte\u00fado j\u00e1 criado para aquela se\u00e7\u00e3o.<\/p>\n<p>Use os seletores de <strong>posi\u00e7\u00e3o<\/strong>, <strong>anexo<\/strong>, <strong>repeti\u00e7\u00e3o <\/strong>e <strong>tamanho <\/strong>para modificar a forma como a imagem de fundo \u00e9 apresentada na se\u00e7\u00e3o.<\/p>\n<p>Finalmente, clique no bot\u00e3o <strong>Atualizar <\/strong>para salvar suas altera\u00e7\u00f5es.<\/p>\n<figure style=\"width: 1752px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/update-t-e.png\" alt=\"Clique em 'Atualizar' para ver as mudan\u00e7as\" width=\"1752\" height=\"940\"><figcaption class=\"wp-caption-text\">Clique em &#8216;Atualizar&#8217; para ver as mudan\u00e7as<\/figcaption><\/figure>\n<h4>Adicione uma imagem de fundo com o Beaver Builder<\/h4>\n<p>O plug-in Beaver Builder inclui uma vers\u00e3o Lite com algumas ferramentas b\u00e1sicas de fundo. \u00c9 um dos mais populares construtores de p\u00e1ginas do mercado, oferecendo muitos m\u00f3dulos de conte\u00fado para itens como v\u00eddeo, imagens, par\u00e1grafos e muito mais.<\/p>\n<p>Al\u00e9m de tudo isso, permite implementar uma imagem de fundo, cor ou v\u00eddeo, usando ferramentas visuais e CSS para colocar o elemento de fundo em todo o seu website, uma p\u00e1gina, ou uma se\u00e7\u00e3o individual em uma p\u00e1gina.<\/p>\n<p>Primeiro, <a href=\"https:\/\/kinsta.com\/pt\/blog\/construtores-de-paginas-wordpress\/#beaver-builder\">instale o plugin Beaver Builder<\/a> para come\u00e7ar.<\/p>\n<figure style=\"width: 1331px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/bb-s.png\" alt=\"Plugin Construtor de Castores\" width=\"1331\" height=\"435\"><figcaption class=\"wp-caption-text\">Plugin Construtor de Castores<\/figcaption><\/figure>\n<p>V\u00e1 para qualquer p\u00e1gina ou artigo para edit\u00e1-la com o Beaver Builder.<\/p>\n<p>Voc\u00ea deve converter p\u00e1ginas previamente criadas para o formato Beaver Builder. Como alternativa, voc\u00ea tem a op\u00e7\u00e3o de criar uma p\u00e1gina do zero e escolher editar a p\u00e1gina no formato Beaver Builder.<\/p>\n<p>Para converter uma p\u00e1gina atual para Beaver Builder, abra esse editor de p\u00e1ginas e clique no \u00edcone de tr\u00eas pontos para abrir o menu View no canto superior direito.<\/p>\n<figure style=\"width: 1903px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/three-dots.png\" alt=\"Ir para o menu de configura\u00e7\u00f5es da p\u00e1gina\" width=\"1903\" height=\"854\"><figcaption class=\"wp-caption-text\">Ir para o menu de configura\u00e7\u00f5es da p\u00e1gina<\/figcaption><\/figure>\n<p>Role para baixo para encontrar e escolher o link <strong>Convert to Beaver Builder<\/strong>.<\/p>\n<p>Ele tenta compilar todo o conte\u00fado que voc\u00ea tem em sua p\u00e1gina e mudar esses elementos para m\u00f3dulos compat\u00edveis do Beaver Builder.<\/p>\n<figure style=\"width: 1616px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/convert-to-beaver.png\" alt=\"Clique no link 'Convert to Beaver Builder'\" width=\"1616\" height=\"821\"><figcaption class=\"wp-caption-text\">Clique no link &#8216;Convert to Beaver Builder&#8217;<\/figcaption><\/figure>\n<p>Para fazer uma p\u00e1gina do zero, v\u00e1 para <strong>P\u00e1ginas &gt; Adicionar novo<\/strong>.<\/p>\n<p>Em seguida, clique no bot\u00e3o <strong>Launch Beaver Builder<\/strong>.<\/p>\n<figure style=\"width: 1854px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/launch-bb.png\" alt=\"Clique no bot\u00e3o 'Launch Beaver Builder'\" width=\"1854\" height=\"884\"><figcaption class=\"wp-caption-text\">Clique no bot\u00e3o &#8216;Launch Beaver Builder&#8217;<\/figcaption><\/figure>\n<p>O plugin <a href=\"https:\/\/kinsta.com\/pt\/blog\/construtores-de-paginas-wordpress\/#beaver-builder\">Beaver Builder<\/a> leva voc\u00ea a uma vis\u00e3o frontal da p\u00e1gina da web. Ele ocupa a maior parte da tela atuando como um verdadeiro editor front-end, onde voc\u00ea clica nos elementos e se move pelas caixas com seu mouse.<\/p>\n<p>A primeira maneira de adicionar um fundo atrav\u00e9s do Beaver Builder \u00e9 carregando um fundo para um bloco de se\u00e7\u00e3o. Isto pode ocupar a maior parte da p\u00e1gina ou uma fra\u00e7\u00e3o da p\u00e1gina, dependendo do tamanho do bloco de se\u00e7\u00e3o.<\/p>\n<p>Uma vez selecionado, encontre o bot\u00e3o <strong>Row Settings <\/strong>(o \u00edcone \u2699).<\/p>\n<p>Clique nesse \u00edcone para revelar as configura\u00e7\u00f5es para essa linha. Voc\u00ea tamb\u00e9m pode fazer isso com se\u00e7\u00f5es e colunas, e outros tipos de blocos.<\/p>\n<figure style=\"width: 1900px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/row-sets.png\" alt=\"Editar as configura\u00e7\u00f5es das linhas\" width=\"1900\" height=\"813\"><figcaption class=\"wp-caption-text\">Editar as configura\u00e7\u00f5es das linhas<\/figcaption><\/figure>\n<p>Um painel de configura\u00e7\u00f5es aparece no topo da visualiza\u00e7\u00e3o do seu site. Clique na guia <strong>Estilo<\/strong>, depois procure a se\u00e7\u00e3o Fundo.<\/p>\n<p>Em <strong>Background<\/strong>, clique no menu suspenso para mostrar todos os tipos de background.<\/p>\n<figure style=\"width: 1316px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/finishing.png\" alt=\"Ir para a guia 'Estilo'\" width=\"1316\" height=\"775\"><figcaption class=\"wp-caption-text\">Ir para a guia &#8216;Estilo&#8217;<\/figcaption><\/figure>\n<p>Voc\u00ea tem v\u00e1rios tipos de fundo a considerar, um dos quais \u00e9 para uma foto. Os outros incluem:<\/p>\n<ul>\n<li>Cor<\/li>\n<li>Gradiente<\/li>\n<li>V\u00eddeo<\/li>\n<li>C\u00f3digo Embutido<\/li>\n<\/ul>\n<figure style=\"width: 1315px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/choose-type.png\" alt=\"Definir o tipo para imagem de fundo WordPress\" width=\"1315\" height=\"742\"><figcaption class=\"wp-caption-text\">Definir o tipo para imagem de fundo WordPress<\/figcaption><\/figure>\n<p>Esteja \u00e0 vontade para testar os diferentes tipos de fundo.<\/p>\n<p>Por exemplo, voc\u00ea pode descobrir que um fundo Gradient parece melhor do que uma imagem. Cada um dos tipos de fundo inclui suas pr\u00f3prias configura\u00e7\u00f5es. O tipo <strong>Gradiente<\/strong>, neste caso, pede duas cores para que o gradiente se mova de uma para a outra.<\/p>\n<figure style=\"width: 1780px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/change-gradient.png\" alt=\"Se\u00e7\u00e3o \"Sobre a empresa\"\" width=\"1780\" height=\"837\"><figcaption class=\"wp-caption-text\">Se\u00e7\u00e3o &#8220;Sobre a empresa&#8221;<\/figcaption><\/figure>\n<p>Optando pelo fundo da foto apresenta campos para escolher na Biblioteca de M\u00eddia ou colar em uma URL para a imagem. Clique no link <strong>Selecionar Foto <\/strong>se estiver usando a Fonte de Fotos da Biblioteca de M\u00eddia.<\/p>\n<figure style=\"width: 1811px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/select-photo.png\" alt=\"Clique no link 'Selecionar foto'\" width=\"1811\" height=\"795\"><figcaption class=\"wp-caption-text\">Clique no link &#8216;Selecionar foto&#8217;<\/figcaption><\/figure>\n<p>Encontre sua foto de fundo favorita e clique no bot\u00e3o <strong>Select Photo<\/strong>.<\/p>\n<figure style=\"width: 1871px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/select-a-phot.png\" alt=\"Escolha a m\u00eddia\" width=\"1871\" height=\"894\"><figcaption class=\"wp-caption-text\">Escolha a m\u00eddia<\/figcaption><\/figure>\n<p>Beaver Builder deixa cair a foto no espa\u00e7o de fundo escolhido anteriormente. A se\u00e7\u00e3o Configura\u00e7\u00f5es da foto pergunta como voc\u00ea gostaria de formatar a foto. Escolha entre op\u00e7\u00f5es como <strong>Tamanho<\/strong>, <strong>Repetir<\/strong>, <strong>Posicionar <\/strong>e <strong>Anexar<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/change-sets.png\" alt=\"Definir o tamanho da imagem de fundo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Definir o tamanho da imagem de fundo<\/figcaption><\/figure>\n<h5>Fotos de fundo globais e de p\u00e1gina inteira do Beaver Builder<\/h5>\n<p>O Beaver Builder trabalha com as ferramentas de projeto padr\u00e3o do WordPress para aproveitar os recursos de fundo incorporados.<\/p>\n<p>Portanto, voc\u00ea pode ir para a aba<strong> Apar\u00eancia &gt; Fundo <\/strong>para ativar um fundo fotogr\u00e1fico para todo o seu site.<\/p>\n<p>Como alternativa, abra qualquer p\u00e1gina web no Beaver Builder e clique no menu suspenso <strong>Ferramentas <\/strong>no canto superior esquerdo.<\/p>\n<p>Aqui, clique na op\u00e7\u00e3o <strong>Configura\u00e7\u00f5es Globais<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/global.png\" alt=\"\"Configura\u00e7\u00f5es globais\" para o Beaver Builder\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">&#8220;Configura\u00e7\u00f5es globais&#8221; para o Beaver Builder<\/figcaption><\/figure>\n<p>O Painel de configura\u00e7\u00f5es globais oferece a possibilidade de alterar todo o seu website, substituindo ou modificando a codifica\u00e7\u00e3o do WordPress incorporado. Portanto, gostar\u00edamos de inserir um bloco de c\u00f3digo CSS para alterar toda a imagem de fundo do site (globalmente).<\/p>\n<p>Clique na guia CSS nas Configura\u00e7\u00f5es Globais, e cole o seguinte segmento de c\u00f3digo no campo:<\/p>\n<pre><code class=\"language-html\">body {\nbackground-image: url(\"URL to Image\");\nbackground-repeat: no-repeat;\nbackground-position: center top;\nbackground-attachment: fixed;\nbackground-size: 100%;\nbackground-color: #0f1066;\n}<\/code><\/pre>\n<div>\n<p>Substituir a <strong>URL do texto da imagem <\/strong>pela URL da foto de fundo desejada. Voc\u00ea tamb\u00e9m pode mudar coisas como fun\u00e7\u00e3o de repeti\u00e7\u00e3o, anexo e tamanho do fundo com o c\u00f3digo CSS.<\/p>\n<\/div>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/css-to-bg.png\" alt=\"Ir para a guia CSS\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Ir para a guia CSS<\/figcaption><\/figure>\n<p>Faz mais sentido usar o Beaver Builder para fundos de p\u00e1gina personalizados, pois cada p\u00e1gina tem sua pr\u00f3pria imagem como pano de fundo.<\/p>\n<p>Em seu editor de p\u00e1ginas, abra novamente o menu <strong>Ferramentas<\/strong>.<\/p>\n<p>Selecione a op\u00e7\u00e3o<strong> Layout CSS &#038; Javascript<\/strong>.<\/p>\n<figure style=\"width: 1370px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/layout.png\" alt=\"Layout CSS &#038; JavaScript bot\u00e3o\" width=\"1370\" height=\"881\"><figcaption class=\"wp-caption-text\">Layout CSS &#038; JavaScript bot\u00e3o<\/figcaption><\/figure>\n<p>Cole o mesmo c\u00f3digo na guia CSS, alterando a <strong>URL para texto da<\/strong> <strong>imagem <\/strong>para a URL real e ajustando as configura\u00e7\u00f5es que desejar:<\/p>\n<pre><code class=\"language-html\">body {\nbackground-image: url(\"URL to Image\");\nbackground-repeat: no-repeat;\nbackground-position: center top;\nbackground-attachment: fixed;\nbackground-size: 100%;\nbackground-color: #0f1066;\n}<\/code><\/pre>\n<div>\n<p>Como voc\u00ea pode ver, todo o fundo muda para a imagem da URL que voc\u00ea tem na codifica\u00e7\u00e3o CSS. Tenha em mente que o painel <strong>Layout CSS \/ Javascript <\/strong>controla apenas a p\u00e1gina atual. Voc\u00ea n\u00e3o ver\u00e1 o plano de fundo em nenhuma p\u00e1gina al\u00e9m desta.<\/p>\n<\/div>\n<div><\/div>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/only-this-page.png\" alt=\"Adicionando CSS personalizado\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Adicionando CSS personalizado<\/figcaption><\/figure>\n<h4>Adicionar um fundo simples de fileira ou widget com Page Builder By SiteOrigin<\/h4>\n<p>O <a href=\"https:\/\/kinsta.com\/pt\/blog\/construtores-de-paginas-wordpress\/#siteorigin\">Page Builder by SiteOrigin<\/a> \u00e9 mais uma ferramenta visual de elabora\u00e7\u00e3o de sites com o recurso de arrastar e soltar. Ele \u00e9 limitado em sua capacidade de inserir fundos para todo o site (voc\u00ea recorreria \u00e0 ferramenta padr\u00e3o de fundo personalizado do WordPress). Ainda assim, ela fornece configura\u00e7\u00f5es para adicionar imagens e cores de fundo para linhas e widgets usados pelo SiteOrigin.<\/p>\n<p>Primeiro, baixe e ative o Page Builder por SiteOrigin plugin.<\/p>\n<figure style=\"width: 1520px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/siteor.png\" alt=\"Construtor de p\u00e1ginas por SiteOrigin plugin\" width=\"1520\" height=\"493\"><figcaption class=\"wp-caption-text\">Construtor de p\u00e1ginas por SiteOrigin plugin<\/figcaption><\/figure>\n<p>Navegue at\u00e9 uma nova p\u00e1gina ou considere adicionar uma linha SiteOrigin a uma p\u00e1gina atual no site.<\/p>\n<p>Cada se\u00e7\u00e3o do SiteOrigin pede que voc\u00ea <strong>acrescente Widget <\/strong>ou <strong>Add Row<\/strong>. Voc\u00ea tamb\u00e9m tem a oportunidade de navegar pelos <strong>layouts pr\u00e9-constru\u00eddos <\/strong>se preferir n\u00e3o iniciar um projeto a partir do zero.<\/p>\n<p>A boa not\u00edcia \u00e9 que tanto os widgets quanto as linhas no SiteOrigin t\u00eam configura\u00e7\u00f5es para incluir imagens de fundo.<\/p>\n<p>Portanto, clique no bot\u00e3o <strong>Adicionar Widget <\/strong>ou <strong>Adicionar Fila <\/strong>para prosseguir.<\/p>\n<figure style=\"width: 1896px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/add-row-or-widget.png\" alt=\"Adicionar um novo widget ou linha\" width=\"1896\" height=\"822\"><figcaption class=\"wp-caption-text\">Adicionar um novo widget ou linha<\/figcaption><\/figure>\n<p>Neste exemplo, veremos a biblioteca de <strong>Widgets<\/strong>.<\/p>\n<p>Aqui, voc\u00ea pode escolher um dos muitos widgets fornecidos pelo SiteOrigin, desde Menus e P\u00e1ginas de Navega\u00e7\u00e3o at\u00e9 Conte\u00fado do artigo e Listas de Produtos.<\/p>\n<p>Escolheremos o widget <strong>Produtos <\/strong>para este exemplo, mas voc\u00ea pode optar por um dos muitos outros widgets com base nas <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-praticas-web-design\/\">necessidades do seu projeto<\/a>. Al\u00e9m disso, voc\u00ea pode agrupar estes widgets com uma Fila, depois adicionar uma imagem de fundo a essa fila para que o fundo apare\u00e7a atr\u00e1s de v\u00e1rios widgets.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/choose-a-widg.png\" alt=\"Escolha o widget 'Produtos'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Escolha o widget &#8216;Produtos&#8217;<\/figcaption><\/figure>\n<p>O novo <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-widgets\/\">widget<\/a> ou linha acaba no editor de p\u00e1ginas SiteOrigin. A maior parte do SiteOrigin permanece no painel do WordPress, de modo que n\u00e3o h\u00e1 tanto editor de front-end como h\u00e1 com outros construtores de p\u00e1ginas.<\/p>\n<p>Para adicionar um fundo a qualquer item do SiteOrigin, role sobre o elemento e clique no link <strong>Editar<\/strong>.<\/p>\n<figure style=\"width: 1516px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/edit-the-row.png\" alt=\"Clique no link 'editar'\" width=\"1516\" height=\"808\"><figcaption class=\"wp-caption-text\">Clique no link &#8216;editar&#8217;<\/figcaption><\/figure>\n<p>Eu escolhi o widget <strong>Produtos <\/strong>para este exemplo, mas cada widget tem suas pr\u00f3prias configura\u00e7\u00f5es para configurar o que parece em seu site.<\/p>\n<p>As ferramentas de fundo vivem por baixo do menu suspenso <strong>Design<\/strong>. Clique nisso para seguir em frente.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/design-it.png\" alt=\"A aba 'Design' para imagem de fundo do WordPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">A aba &#8216;Design&#8217; para imagem de fundo do WordPress<\/figcaption><\/figure>\n<p>Encontre o campo <strong>Imagem de fundo <\/strong>e clique no bot\u00e3o <strong>Selecionar imagem<\/strong>.<\/p>\n<p>Voc\u00ea tamb\u00e9m tem a op\u00e7\u00e3o de colar em uma <strong>URL externa <\/strong>para a imagem de fundo.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-bg-image.png\" alt=\"Escolhendo a imagem de fundo e a cor\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Escolhendo a imagem de fundo e a cor<\/figcaption><\/figure>\n<p>A <a href=\"https:\/\/kinsta.com\/pt\/blog\/biblioteca-midia-wordpress\/\">Biblioteca de M\u00eddia<\/a> mostra as imagens atuais que voc\u00ea carregou para o WordPress. Clique na imagem que funciona melhor para este fundo e selecione o bot\u00e3o <strong>Feito <\/strong>para solt\u00e1-la no m\u00f3dulo SiteOrigin.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/choose-it-o-o.png\" alt=\"Clique no bot\u00e3o 'Feito'\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Clique no bot\u00e3o &#8216;Feito&#8217;<\/figcaption><\/figure>\n<p>Agora o campo Imagem de fundo apresenta uma vers\u00e3o em miniatura dessa foto.<\/p>\n<p>Percorra as configura\u00e7\u00f5es para configurar tudo, desde a <strong>Exibi\u00e7\u00e3o da Imagem de Fundo <\/strong>at\u00e9 a <strong>Cor da Fonte <\/strong>para o texto de sobreposi\u00e7\u00e3o.<\/p>\n<p>Em geral, voc\u00ea deve ser capaz de obter os resultados desejados, escolhendo o visor da Capa. Parece que o Plugin SiteOrigin \u00e9 o padr\u00e3o do display Tiled, ent\u00e3o voc\u00ea pode ter que mudar isso.<\/p>\n<p>Certifique-se de clicar no bot\u00e3o <strong>Done <\/strong>(Conclu\u00eddo) quando tiver completado suas configura\u00e7\u00f5es personalizadas para o fundo.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/adding-in.png\" alt=\"As configura\u00e7\u00f5es de 'imagem de fundo' do WordPress\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">As configura\u00e7\u00f5es de &#8216;imagem de fundo&#8217; do WordPress<\/figcaption><\/figure>\n<p>O widget (neste caso, o widget Produtos) vai para o <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-editores-texto\/\">editor<\/a> WordPress do SiteOrigin para aquela p\u00e1gina. Voc\u00ea pode arrastar este elemento para onde quiser na p\u00e1gina e adicionar novos widgets e linhas acima e abaixo dele.<\/p>\n<p>Voc\u00ea deve clicar no bot\u00e3o <strong>Preview <\/strong>ou <strong>Update <\/strong>e ent\u00e3o navegar no front-end da p\u00e1gina para ver os resultados.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/update-or-prev.png\" alt=\"Ir para a se\u00e7\u00e3o 'Produtos\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Ir para a se\u00e7\u00e3o &#8216;Produtos<\/figcaption><\/figure>\n<p>O fundo atual que acrescentei aparece dentro das restri\u00e7\u00f5es do widget <strong>Produtos <\/strong>de antes. Este fundo obviamente precisa de alguma edi\u00e7\u00e3o para ficar mais bonito, mas \u00e9 um come\u00e7o de qualidade para arquivar no espa\u00e7o com uma imagem de fundo muito mais criativa.<\/p>\n<figure style=\"width: 1390px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/not-the-pret.png\" alt=\"O hist\u00f3rico da se\u00e7\u00e3o\" width=\"1390\" height=\"711\"><figcaption class=\"wp-caption-text\">O hist\u00f3rico da se\u00e7\u00e3o<\/figcaption><\/figure>\n<h4>Adicionando imagens de fundo exclusivas com Brizy<\/h4>\n<p>O construtor da p\u00e1gina final para esta demonstra\u00e7\u00e3o, Brizy, oferece modelos elegantes e uma interface de front-end superior para adicionar designs incomuns e customiza\u00e7\u00f5es r\u00e1pidas.<\/p>\n<p>O Brizy Page Builder inclui um extenso conjunto de m\u00f3dulos de <a href=\"https:\/\/kinsta.com\/pt\/blog\/construtores-de-paginas-wordpress\/\">arrastar e soltar<\/a> para incorporar ao seu site atual. Ele tamb\u00e9m permite que voc\u00ea comece a partir de um modelo em branco e construa todo o seu website com Brizy.<\/p>\n<p>Como tal, voc\u00ea ficar\u00e1 feliz em saber que Brizy tamb\u00e9m tem uma ferramenta de fundo para quase todos os elementos que voc\u00ea inclui atrav\u00e9s do construtor da p\u00e1gina. Sem mencionar que Brizy apresenta v\u00e1rios estilos de fundo exclusivos, como adicionar um v\u00eddeo de looping ao fundo ou um mapa completo.<\/p>\n<p>Para aproveitar essas configura\u00e7\u00f5es de fundo, <a href=\"https:\/\/wordpress.org\/plugins\/brizy\/\">instale e ative o plugin Brizy<\/a> para come\u00e7ar.<\/p>\n<figure style=\"width: 1324px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/brizy.png\" alt=\"O plugin do construtor de p\u00e1ginas Brizy\" width=\"1324\" height=\"434\"><figcaption class=\"wp-caption-text\">O plugin do construtor de p\u00e1ginas Brizy<\/figcaption><\/figure>\n<p>Grande parte do processo de design Brizy requer que voc\u00ea comece com um <a href=\"https:\/\/kinsta.com\/pt\/blog\/hierarquia-modelos-wordpress\/\">modelo<\/a> em branco. Brizy tentar\u00e1 converter seus designs mais antigos em m\u00f3dulos Brizy, mas achamos que \u00e9 melhor come\u00e7ar de novo.<\/p>\n<p>V\u00e1 para uma <strong>p\u00e1gina <\/strong>ou <strong>artigo<\/strong> em seu painel do WordPress e comece a construir a p\u00e1gina com um t\u00edtulo e talvez algum conte\u00fado.<\/p>\n<p>Voc\u00ea deve ver um bot\u00e3o para <strong>editar com Brizy<\/strong>. Clique nisso para ser enviado para o criador da p\u00e1gina Brizy completa.<\/p>\n<figure style=\"width: 1865px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/brixy-ed.png\" alt=\"Clique no bot\u00e3o 'Continue a editar com Brizy'\" width=\"1865\" height=\"815\"><figcaption class=\"wp-caption-text\">Clique no bot\u00e3o &#8216;Continue a editar com Brizy&#8217;<\/figcaption><\/figure>\n<p>O construtor da p\u00e1gina Brizy mostra uma visualiza\u00e7\u00e3o completa do seu website com bot\u00f5es, texto e imagens. Se a p\u00e1gina estiver em branco, clique no bot\u00e3o <strong>Start Building Your Page<\/strong>.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/start-building.png\" alt=\"Clique no \u00edcone de mais para come\u00e7ar a construir sua p\u00e1gina\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Clique no \u00edcone de mais para come\u00e7ar a construir sua p\u00e1gina<\/figcaption><\/figure>\n<p>Procure as guias de <strong>Layouts e Blocos <\/strong>na barra de menu superior.<\/p>\n<p>Os layouts fornecem p\u00e1ginas web pr\u00e9-constru\u00eddas, repletas de conte\u00fado de demonstra\u00e7\u00e3o e prontas para uso, desde que voc\u00ea personalize o conte\u00fado de sua pr\u00f3pria empresa. Os blocos s\u00e3o peda\u00e7os menores de p\u00e1ginas da web, mas ainda s\u00e3o pr\u00e9-constru\u00eddos e muitas vezes mais f\u00e1ceis de usar e manipular do que se voc\u00ea fizesse um bloco por conta pr\u00f3pria.<\/p>\n<p>N\u00e3o importa em que dire\u00e7\u00e3o voc\u00ea v\u00e1. Navegue pelos layouts e blocos e adicione quantos voc\u00ea quiser \u00e0 p\u00e1gina. Estes s\u00e3o simplesmente os elementos que voc\u00ea usar\u00e1 para formar uma p\u00e1gina web completa.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/blocks-and-layouts.png\" alt=\"Se\u00e7\u00f5es de layouts e Blocos\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Se\u00e7\u00f5es de layouts e Blocos<\/figcaption><\/figure>\n<p>Depois de ter alguns blocos ou layouts na p\u00e1gina web, volte para a tela do editor para ver o seu trabalho.<\/p>\n<p>Voc\u00ea ver\u00e1 que cada se\u00e7\u00e3o de bloco tem um \u00edcone de Configura\u00e7\u00f5es no lado superior direito do bloco, que normalmente aparece quando voc\u00ea percorre a se\u00e7\u00e3o.<\/p>\n<p>Clique nisto para o bloco de sua escolha. Acrescentaremos um fundo a esse bloco.<\/p>\n<figure style=\"width: 1583px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/every-one.png\" alt=\"Clique no \u00edcone 'Ajustes'\" width=\"1583\" height=\"815\"><figcaption class=\"wp-caption-text\">Clique no \u00edcone &#8216;Ajustes&#8217;<\/figcaption><\/figure>\n<p>O painel de <strong>Ajustes de Bloco <\/strong>permanece no canto superior direito. Percorra os <a href=\"https:\/\/kinsta.com\/pt\/blog\/fontes-de-icones-do-wordpress\/\">\u00edcones<\/a> do menu para ver o que todos eles fazem.<\/p>\n<p>Uma delas \u00e9 para <strong>Cores<\/strong>, e com isso, elas significam um fundo colorido. Voc\u00ea pode mudar isso e adicionar um gradiente se estiver mais interessado em aderir a uma vis\u00e3o de fundo s\u00f3lida ou com gradiente de cor.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/colors-is-possible.png\" alt=\"O bot\u00e3o 'Cor' para o fundo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">O bot\u00e3o &#8216;Cor&#8217; para o fundo<\/figcaption><\/figure>\n<p>O bot\u00e3o com o \u00edcone \u00e0 esquerda cont\u00e9m as configura\u00e7\u00f5es de <strong>fundo<\/strong>.<\/p>\n<p>Clique neste bot\u00e3o para abrir as ferramentas r\u00e1pidas para carregar uma imagem de fundo para este bloco.<\/p>\n<figure style=\"width: 1551px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/abck-gro.png\" alt=\"Bot\u00e3o de imagem de fundo WordPress\" width=\"1551\" height=\"692\"><figcaption class=\"wp-caption-text\">Bot\u00e3o de imagem de fundo WordPress<\/figcaption><\/figure>\n<p>Brizy oferece tr\u00eas itens de fundo de m\u00eddia:<\/p>\n<ul>\n<li>Imagens<\/li>\n<li>V\u00eddeos<\/li>\n<li>Mapas<\/li>\n<\/ul>\n<p>Primeiro, tente o tipo de imagem para entender como ele funciona com seu layout atual.<\/p>\n<p>Clique na \u00e1rea de <strong>upload de imagens <\/strong>para encontrar uma foto na biblioteca de m\u00eddia e adicione-a ao fundo.<\/p>\n<figure style=\"width: 1572px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/image-add.png\" alt=\"Tipo de imagem de fundo WordPress\" width=\"1572\" height=\"725\"><figcaption class=\"wp-caption-text\">Tipo de imagem de fundo WordPress<\/figcaption><\/figure>\n<p>Encontramos uma foto de painel de madeira para este tutorial e indicamos que n\u00e3o gostar\u00edamos de ter nenhum <a href=\"https:\/\/kinsta.com\/pt\/blog\/twenty-twenty-tema\/#customizing-the-twenty-twenty-theme\">efeito de paralaxe<\/a>.<\/p>\n<p>Isto acrescenta um efeito agrad\u00e1vel, j\u00e1 que o fundo colorido serve como uma sobreposi\u00e7\u00e3o, mas ainda vemos a textura da madeira por tr\u00e1s dela.<\/p>\n<p>Lembre-se que voc\u00ea pode sempre ajustar o campo Parallax para fazer da imagem de fundo um fundo fixo, animado ou em rolagem.<\/p>\n<figure style=\"width: 1865px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/in-place.png\" alt=\"Imagem de fundo sem paralaxe\" width=\"1865\" height=\"940\"><figcaption class=\"wp-caption-text\">Imagem de fundo sem paralaxe<\/figcaption><\/figure>\n<p>E \u00e9 assim que voc\u00ea insere uma imagem de fundo com Brizy!<\/p>\n<p>A melhor parte do Brizy \u00e9 que voc\u00ea pode continuar a se mover atrav\u00e9s do projeto e clicar no bot\u00e3o <strong>Settings <\/strong>de cada se\u00e7\u00e3o.<\/p>\n<p>Uma se\u00e7\u00e3o abaixo, podemos inserir mais uma imagem de fundo sem gastar muito tempo com isso.<\/p>\n<figure style=\"width: 1920px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/another-section.png\" alt=\"Adicionando outra imagem de fundo\" width=\"1920\" height=\"941\"><figcaption class=\"wp-caption-text\">Adicionando outra imagem de fundo<\/figcaption><\/figure>\n<p>E para demonstrar o poder dos outros tipos de fundo, podemos clicar no tipo de fundo do <strong>mapa<\/strong>, perfurar em um endere\u00e7o e ver como um mapa desse local aparece logo atr\u00e1s do conte\u00fado do primeiro plano.<\/p>\n<p>O <a href=\"https:\/\/kinsta.com\/pt\/blog\/plugin-mapa-wordpress\/\">mapa<\/a> fica situado como um fundo completo e tem uma fun\u00e7\u00e3o de zoom se n\u00e3o sair muito bem com as configura\u00e7\u00f5es padr\u00e3o.<\/p>\n<figure style=\"width: 1800px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/the-map.png\" alt=\"Adicionar um mapa como uma imagem de fundo WordPress\" width=\"1800\" height=\"797\"><figcaption class=\"wp-caption-text\">Adicionar um mapa como uma imagem de fundo WordPress<\/figcaption><\/figure>\n<p>Finalmente, recomendamos verificar a ferramenta de v\u00eddeo de fundo Brizy, localizada na mesma se\u00e7\u00e3o que a ferramenta de imagem de fundo. Ela funciona inserindo uma URL de v\u00eddeo (<a href=\"https:\/\/kinsta.com\/pt\/blog\/estatisticas-do-youtube\/\">YouTube<\/a> ou Vimeo), apresentando um v\u00eddeo completo logo atr\u00e1s do conte\u00fado em primeiro plano. Ela fornece at\u00e9 mesmo uma configura\u00e7\u00e3o para fazer o loop do v\u00eddeo e escolher quando ele deve come\u00e7ar enquanto o usu\u00e1rio percorre a se\u00e7\u00e3o.<\/p>\n<figure style=\"width: 1548px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/video-now.png\" alt=\"URL para imagem de fundo WordPress\" width=\"1548\" height=\"820\"><figcaption class=\"wp-caption-text\">URL para imagem de fundo WordPress<\/figcaption><\/figure>\n<p>O gif animado abaixo d\u00e1 um breve exemplo do v\u00eddeo em a\u00e7\u00e3o, mesmo que provavelmente poderia usar alguma edi\u00e7\u00e3o.<\/p>\n<figure style=\"width: 1280px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/background-video.gif\" alt=\"Antecedentes com v\u00eddeo\" width=\"1280\" height=\"720\"><figcaption class=\"wp-caption-text\">Antecedentes com v\u00eddeo<\/figcaption><\/figure>\n<h2>Tamanho da imagem de fundo, fornecimento e edi\u00e7\u00e3o b\u00e1sica<\/h2>\n<p>Mencionamos anteriormente no artigo que, embora n\u00e3o haja um tamanho perfeito para uma imagem de fundo, recomendamos come\u00e7ar com nada menos que <strong>1024 x 768 <\/strong>pixels e manter uma propor\u00e7\u00e3o de aspecto comum como <strong>16:9<\/strong>. A rela\u00e7\u00e3o de aspecto n\u00e3o importa tanto quanto o tamanho e a resolu\u00e7\u00e3o reais da imagem, j\u00e1 que voc\u00ea pode recortar a imagem ou deixar o WordPress fazer isso por voc\u00ea.<\/p>\n<p>Tamb\u00e9m \u00e9 essencial encontrar os lugares certos para comprar ou emprestar imagens de fundo do WordPress, se voc\u00ea n\u00e3o planeja tirar suas pr\u00f3prias fotos.<\/p>\n<h3>Onde encontrar imagens de fundo adequadas<\/h3>\n<p>Para sua busca de imagens de fundo, veja nosso guia de busca e adi\u00e7\u00e3o de <a href=\"https:\/\/kinsta.com\/blog\/wordpress-stock-photos\/\">fotos de estoque sem sair do WordPress<\/a>. Temos tamb\u00e9m uma <a href=\"https:\/\/kinsta.com\/pt\/blog\/imagens-gratuitas-para-wordpress\/\">lista de fontes \u00fateis no mercado<\/a> para buscar fotos de estoque de alta resolu\u00e7\u00e3o, muitas das quais s\u00e3o gratuitas.<\/p>\n<p>Em geral, recomendamos que voc\u00ea mesmo tente tirar imagens de fundo. Se isso n\u00e3o for poss\u00edvel ou se voc\u00ea n\u00e3o tiver experi\u00eancia com fotografia ou design gr\u00e1fico, pense em utilizar recursos gratuitos de fotografia de fundo. Voc\u00ea tamb\u00e9m 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.<\/p>\n<p>Alguns destaques desses links incluem:<\/p>\n<ul>\n<li><a href=\"https:\/\/unsplash.com\/\">Unsplash<\/a> &#8211; Gratuito, e sem necessidade de atribui\u00e7\u00e3o.<\/li>\n<li><a href=\"https:\/\/visualhunt.com\/\">Ca\u00e7a Visual<\/a> &#8211; Fotos gratuitas. A maioria das imagens n\u00e3o requer atribui\u00e7\u00e3o.<\/li>\n<li><a href=\"https:\/\/www.pexels.com\/\">Pexels<\/a> &#8211; Gr\u00e1tis, sem necessidade de atribui\u00e7\u00e3o.<\/li>\n<li><a href=\"https:\/\/pixabay.com\/\">Pixabay<\/a> &#8211; Gratuito com a maioria das imagens que n\u00e3o requerem atribui\u00e7\u00e3o.<\/li>\n<li><a href=\"https:\/\/www.istockphoto.com\/\">iStockphoto<\/a> &#8211; Uma assinatura premium de baixo custo para imagens gratuitas de royalties.<\/li>\n<li><a href=\"https:\/\/www.shutterstock.com\/\">Shutterstock<\/a> &#8211; Imagens gratuitass de royalties por uma taxa de assinatura razo\u00e1vel.<\/li>\n<\/ul>\n<h3>Como mudar a imagem de fundo do WordPress com CSS personalizado<\/h3>\n<p>Como aprendemos, voc\u00ea pode adicionar uma imagem de fundo WordPress com ferramentas WordPress padr\u00e3o embutidas ou um plugin. N\u00e3o importa qual rota voc\u00ea escolher, desde que voc\u00ea obtenha o resultado desejado. H\u00e1 tamb\u00e9m a op\u00e7\u00e3o de utilizar CSS personalizado para estilizar a imagem de fundo ou adicion\u00e1-la ao seu site por completo.<\/p>\n<p>N\u00e3o vamos cobrir os meandros do CSS personalizado, vendo como cada imagem e tema de fundo ter\u00e1 um processo diferente. Entretanto, recomendamos a leitura de <a href=\"https:\/\/kinsta.com\/pt\/blog\/css-wordpress\/\">nosso guia sobre edi\u00e7\u00e3o, adi\u00e7\u00e3o e personaliza\u00e7\u00e3o de CSS no WordPress<\/a>. O artigo cobre dicas \u00fateis para adicionar imagens de fundo a praticamente qualquer se\u00e7\u00e3o do site, desde itens de menu at\u00e9 blocos de p\u00e1gina espec\u00edficos.<\/p>\n<h2>Corre\u00e7\u00e3o de problemas comuns com uma imagem de fundo WordPress<\/h2>\n<p>Todos os sites WordPress v\u00eam com a capacidade de adicionar um fundo. No entanto, isso n\u00e3o significa que o recurso principal funcione para todos os sites. Por exemplo, voc\u00ea pode descobrir que o tema que voc\u00ea est\u00e1 usando n\u00e3o suporta fundos personalizados. Ou talvez voc\u00ea continue carregando um fundo, mas ele n\u00e3o parece muito correto (muito grande ou muito borrado).<\/p>\n<p>Encontrar um problema com o WordPress \u00e9 frustrante e, infelizmente, um pouco comum. Compilamos algumas das quest\u00f5es mais comuns com imagens de fundo abaixo e tra\u00e7amos cada linha de a\u00e7\u00e3o.<\/p>\n<h3 class=\"title style-scope ytd-video-primary-info-renderer\">Como resolver as 5 quest\u00f5es mais comuns com imagens de fundo no WordPress<\/h3>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=kVmAoW9kBZg\"><\/kinsta-video>\n<h3>Meu tema n\u00e3o suporta uma imagem de fundo do WordPress<\/h3>\n<p>Os desenvolvedores de temas controlam o recurso de Fundos Personalizados no WordPress. Eles podem lig\u00e1-lo ou deslig\u00e1-lo, dependendo se gostariam de ativar ou n\u00e3o o suporte de fundo personalizado. O fundo \u00e9 desligado quando n\u00e3o \u00e9 necess\u00e1rio, ou talvez entre em conflito com o projeto geral do tema.<\/p>\n<p>Se voc\u00ea descobrir que seu tema n\u00e3o suporta um fundo personalizado ou limita suas habilidades ao adicionar um fundo, considere estas solu\u00e7\u00f5es:<\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/pt\/blog\/temas-wordpress-mais-rapidos\/\">Troque o tema<\/a> por um que suporte fundos personalizados. Procure Fundos Personalizados nas listas de recursos ao comprar ou baixar temas.<\/li>\n<li>Use um plugin de fundo para anular o recurso de fundo padr\u00e3o personalizado que est\u00e1 sendo bloqueado.<\/li>\n<\/ul>\n<p>Embora seja poss\u00edvel incluir sua pr\u00f3pria codifica\u00e7\u00e3o personalizada ou ir para os arquivos tem\u00e1ticos para reagir aos antecedentes personalizados, geralmente recomendamos contra ambas as op\u00e7\u00f5es. Seu melhor procedimento \u00e9 localizar um tema que suporte fundos ou adicionar um plugin que permita fundos mas n\u00e3o mexa muito com a funcionalidade do tema.<\/p>\n<h3>Minha imagem de fundo do WordPress \u00e9 muito escura ou tem a cor errada<\/h3>\n<p>Uma imagem de fundo escurecida pode ter origem em muitos cen\u00e1rios que correm ao lado da pr\u00f3pria imagem de fundo. Na maioria das vezes, ela tem a ver com um filtro de sobreposi\u00e7\u00e3o ou fundo mal colorido.<\/p>\n<p>Para a maioria dos casos em que o fundo \u00e9 descolorido, voc\u00ea deve verificar seu tema ou plugin que controla o fundo em si.<\/p>\n<p>Procure um local pr\u00f3ximo ao campo de fundo que solicite um filtro ou uma sobreposi\u00e7\u00e3o. Voc\u00ea tamb\u00e9m pode encontrar um recurso de opacidade que deve ser limpo para que seu fundo mostre corretamente.<\/p>\n<p>Se tudo o mais falhar, o tema pode ter um filtro de fundo codificado em c\u00f3digo r\u00edgido <a href=\"https:\/\/kinsta.com\/pt\/blog\/arquivos-wordpress\/\">nos arquivos de tema<\/a>. Nesse caso, contate o desenvolvedor do tema para ter uma id\u00e9ia do que \u00e9 poss\u00edvel para corrigir a cor de fundo.<\/p>\n<h3>Minha imagem de fundo do WordPress n\u00e3o est\u00e1 na posi\u00e7\u00e3o correta<\/h3>\n<p>A imagem de fundo que aparece na posi\u00e7\u00e3o errada tende a emperrar o design geral do seu site. Voc\u00ea pode descobrir que o fundo est\u00e1 muito \u00e0 esquerda ou \u00e0 direita, ou talvez o que deveria ser o foco central do fundo n\u00e3o esteja aparecendo na tela de forma alguma.<\/p>\n<p>Felizmente, mover-se ao redor do fundo leva apenas alguns cliques do bot\u00e3o.<\/p>\n<p>Ir para <strong>Appearance &gt; Background <\/strong>no painel do WordPress. Encontre a imagem que voc\u00ea carregou atualmente como fundo e procure pelo campo <strong>Posi\u00e7\u00e3o<\/strong>. Este campo permite mover o posicionamento do fundo, com op\u00e7\u00f5es para mov\u00ea-lo para a esquerda, direita, superior, inferior ou cantos.<\/p>\n<p>Recomendamos clicar em todos os bot\u00f5es de posicionamento para ver os resultados que eles produzem. Depois de encontrar a posi\u00e7\u00e3o correta, salve a p\u00e1gina.<\/p>\n<h3>Minha imagem de fundo do WordPress se repete constantemente<\/h3>\n<p>Texturas e fundos s\u00f3lidos muitas vezes parecem melhores quando repetidas, vendo como elas ignorariam as quebras de imagem. No entanto, muitas imagens parecem horr\u00edveis quando repetidas repetidamente como fundo, especialmente aquelas com muitos detalhes e v\u00e1rios graus de cor.<\/p>\n<p>Um layout de imagem de fundo repetido vem a calhar se sua imagem de origem n\u00e3o for suficientemente grande para cobrir todo o fundo sem olhar esticado. Portanto, o WordPress, \u00e0s vezes, n\u00e3o tem um layout repetido para manter a resolu\u00e7\u00e3o da imagem.<\/p>\n<p>A principal solu\u00e7\u00e3o para este problema est\u00e1 localizada na se\u00e7\u00e3o Background por <strong>Appearance &gt; Background <\/strong>em WordPress. Com uma foto carregada como fundo, tente predefini\u00e7\u00f5es como <strong>Preencher Tela<\/strong>, <strong>Ajustar \u00e0 Tela<\/strong>, ou <strong>Personalizar<\/strong>, em vez da op\u00e7\u00e3o <strong>Repetir <\/strong>predefini\u00e7\u00e3o.<\/p>\n<p>No entanto, voc\u00ea pode descobrir que tentar obter uma imagem menor para cobrir a totalidade de uma tela de fundo causa <a href=\"https:\/\/kinsta.com\/pt\/blog\/hotlinking\/\">resultados desagrad\u00e1veis<\/a>. Nesse caso, a melhor solu\u00e7\u00e3o \u00e9 substituir completamente a imagem de fundo e procurar uma que seja grande, de alta resolu\u00e7\u00e3o, e pronta para ser publicada na web.<\/p>\n<h3>Minha imagem de fundo do WordPress est\u00e1 esticada<\/h3>\n<p>Uma imagem de fundo esticada significa que suas configura\u00e7\u00f5es de fundo personalizadas tentam pegar uma imagem menor e cobrir toda a tela com a imagem.<\/p>\n<p>Voc\u00ea tamb\u00e9m pode ver isso acontecer com <a href=\"https:\/\/kinsta.com\/pt\/blog\/marketing-facebook\/#add-highquality-images\">imagens maiores e de alta resolu\u00e7\u00e3o<\/a> se elas n\u00e3o corresponderem \u00e0 rela\u00e7\u00e3o de aspecto exigida. Para imagens de fundo esticadas, pense no arquivo fonte. Escolher uma imagem diferente que seja adequada \u00e9 a melhor op\u00e7\u00e3o.<\/p>\n<p>Um outro problema \u00e9 que voc\u00ea pode ter as configura\u00e7\u00f5es de fundo mal configuradas. Verifique coisas como a posi\u00e7\u00e3o da imagem de fundo e ser esticado sobre a tela no modo <strong>Tela de preenchimento<\/strong>. Voc\u00ea pode precisar apenas ficar com as dimens\u00f5es originais ou adicionar uma fun\u00e7\u00e3o <strong>Repetir <\/strong>para que tudo funcione.<\/p>\n<h3>Outras dicas para solu\u00e7\u00e3o de problemas de fundo<\/h3>\n<ul>\n<li>Os desenvolvedores de temas t\u00eam poder total sobre o recurso de fundo personalizado no WordPress. Se voc\u00ea instalou um tema e n\u00e3o consegue que o fundo funcione, sua melhor aposta \u00e9 contatar o desenvolvedor do tema ou instalar um novo tema para ver se isso resolve o problema.<\/li>\n<li>Cores e imagens de fundo personalizadas geralmente substituem qualquer c\u00f3digo CSS personalizado que voc\u00ea implemente para controlar o tamanho, posicionamento ou fonte de sua imagem de fundo. Voc\u00ea pode ter que ficar com as configura\u00e7\u00f5es de fundo do tema em vez de usar CSS personalizados.<\/li>\n<li>Um tema pode ser vendido com um fundo personalizado j\u00e1 ativado. Normalmente, tudo o que voc\u00ea precisa fazer \u00e9 substituir a imagem de fundo por uma nova. \u00c0s vezes, \u00e9 necess\u00e1rio <a href=\"https:\/\/kinsta.com\/pt\/blog\/arquivos-wordpress\/\">tocar nos arquivos de tema<\/a> ou usar <a href=\"https:\/\/kinsta.com\/pt\/blog\/css-wordpress\/\">CSS personalizados<\/a> para substituir as configura\u00e7\u00f5es do tema.<\/li>\n<\/ul>\n<h2>Melhores plugins de imagem de fundo para WordPress<\/h2>\n<p>Se voc\u00ea quiser ter mais recursos de edi\u00e7\u00e3o para uma imagem de fundo, estiver interessado em fundos de v\u00eddeo, ou em ferramentas que permitam fundos espec\u00edficos para uma p\u00e1gina, voc\u00ea pode considerar os seguintes plugins de imagem de fundo do WordPress:<\/p>\n<h3>Simple Full Screen Background Image<\/h3>\n<figure style=\"width: 1324px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Simple-Full-Screen-Background-Image.png\" alt=\"Plugin simples de imagem de fundo de tela cheia\" width=\"1324\" height=\"433\"><figcaption class=\"wp-caption-text\">Plugin simples de imagem de fundo de tela cheia<\/figcaption><\/figure>\n<p>O plugin <a href=\"https:\/\/wordpress.org\/plugins\/simple-full-screen-background-image\/\">Simple Full Screen Background Image<\/a> n\u00e3o \u00e9 muito diferente da ferramenta de imagem de fundo padr\u00e3o no WordPress, exceto que ele adiciona recursos automatizados para coisas como redimensionamento e escalonamento para navegadores.<\/p>\n<p>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\u00ea tem no WordPress e adiciona um bot\u00e3o especial Background em seu <a href=\"https:\/\/kinsta.com\/pt\/blog\/painel-administrativo-wordpress\/\">painel de controle do WordPress<\/a> para carregar instantaneamente uma imagem do seu computador.<\/p>\n<p>\u00c9 tudo o que h\u00e1 para fazer!<\/p>\n<p>O plugin tamb\u00e9m tem uma vers\u00e3o Premium que oferece melhor escalabilidade, suporte para um n\u00famero ilimitado de fundos e efeitos \u00fanicos, e muito mais.<\/p>\n<h3 class=\"has-anchor-hash\">Advanced WordPress Backgrounds<span id=\"advanced-wordpress-backgrounds\" class=\"anchor-hash\" aria-hidden=\"true\"><\/span><\/h3>\n<figure style=\"width: 1328px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Advanced-WordPress-Backgrounds.png\" alt=\"AWB - Plugin de fundo avan\u00e7ado para WordPress\" width=\"1328\" height=\"430\"><figcaption class=\"wp-caption-text\">AWB &#8211; Plugin de fundo avan\u00e7ado para WordPress<\/figcaption><\/figure>\n<p>O <a href=\"https:\/\/wordpress.org\/plugins\/advanced-backgrounds\/\">Advanced WordPress Backgrounds<\/a> plugin assume uma abordagem diferente dos fundos do WordPress, permitindo que voc\u00ea tire proveito de efeitos \u00fanicos que apimentam seu fundo. Um exemplo disso \u00e9 o fundo paralaxe, que pode se mover lentamente junto com o usu\u00e1rio enquanto ele percorre seu site.<\/p>\n<p>O plugin tamb\u00e9m oferece suporte para v\u00eddeos. Os fundos dos v\u00eddeos s\u00e3o retirados de lugares como YouTube e Vimeo, ou voc\u00ea pode at\u00e9 mesmo <a href=\"https:\/\/kinsta.com\/pt\/blog\/hospedagem-video\/\">hosped\u00e1-los<\/a> por conta pr\u00f3pria.<\/p>\n<p>Tamb\u00e9m \u00e9 poss\u00edvel ter uma cor s\u00f3lida ou fundo texturizado. Todos estes tipos de fundo incluem recursos avan\u00e7ados que voc\u00ea n\u00e3o pode encontrar com a ferramenta b\u00e1sica de fundo WordPress. Alguns deles incluem efeitos de rolagem e escalonamento, efeitos de opacidade e op\u00e7\u00f5es de velocidade personalizadas.<\/p>\n<p>Ele suporta Gutenberg e pode ir junto com o editor WordPress padr\u00e3o e muitos outros construtores de p\u00e1ginas visuais. Finalmente, voc\u00ea pode usar suas op\u00e7\u00f5es personalizadas de CSS para adicionar ainda mais estilo a seus fundos.<\/p>\n<h3 class=\"has-anchor-hash\">Perfect Images + Retina<span id=\"perfect-images--retina\" class=\"anchor-hash\" aria-hidden=\"true\"><\/span><\/h3>\n<figure style=\"width: 1323px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Perfect-Images-Retina.png\" alt=\"Perfect Images + Plugin Retina\" width=\"1323\" height=\"431\"><figcaption class=\"wp-caption-text\">Perfect Images + Plugin Retina<\/figcaption><\/figure>\n<p>O plugin <a href=\"https:\/\/wordpress.org\/plugins\/wp-retina-2x\/\">Perfect Images + Retina<\/a> vem a calhar como uma solu\u00e7\u00e3o dois-em-um. Ele permite gerenciar o tamanho e a apar\u00eancia da imagem de fundo do WordPress, ao mesmo tempo em que <a href=\"https:\/\/kinsta.com\/pt\/blog\/regenerar-miniaturas\/\">regenerando as miniaturas<\/a> e substitui as imagens. O gerenciamento de imagens \u00e9 bastante impressionante, e \u00e9 particularmente crucial para fundos de alta resolu\u00e7\u00e3o.<\/p>\n<p>O plugin tamb\u00e9m oferece um recurso de fundo se voc\u00ea optar por sua vers\u00e3o premium. Ele gera um equivalente de retina para aquela imagem de fundo para que as imagens tenham a apar\u00eancia que se espera delas, mesmo em displays de alta resolu\u00e7\u00e3o.<\/p>\n<h3 class=\"has-anchor-hash\">Maintenance<\/h3>\n<figure style=\"width: 1325px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Maintenance-s-s.png\" alt=\"Plugin de manuten\u00e7\u00e3o com imagem de fundo WordPress\" width=\"1325\" height=\"434\"><figcaption class=\"wp-caption-text\">Plugin Maintenance com imagem de fundo WordPress<\/figcaption><\/figure>\n<p>A manuten\u00e7\u00e3o \u00e9 um plugin simples e f\u00e1cil de usar para projetar a manuten\u00e7\u00e3o e as pr\u00f3ximas p\u00e1ginas. O plugin <a href=\"https:\/\/wordpress.org\/plugins\/maintenance\/\">Maintenance<\/a> tem vers\u00f5es gratuitas e premium, mas o gratuito \u00e9 suficiente para ativar uma p\u00e1gina de manuten\u00e7\u00e3o e adicionar uma imagem de fundo com texto e campos sobrepostos.<\/p>\n<p>Voc\u00ea pode at\u00e9 mesmo carregar seu pr\u00f3prio logotipo, personalizar coisas como <a href=\"https:\/\/kinsta.com\/pt\/blog\/fontes-wordpress\/\">fontes<\/a> e \u00edcones, e escolher v\u00e1rios modelos com suas pr\u00f3prias belas imagens de fundo. Voc\u00ea tamb\u00e9m pode instalar seus muitos modelos pr\u00e9-constru\u00eddos, mas a maioria deles requer a licen\u00e7a premium do plugin.<\/p>\n\n<h2>Resumo<\/h2>\n<p>Uma imagem de fundo WordPress b\u00e1sica n\u00e3o requer nenhum esfor\u00e7o para ser adicionada e mostrada em todo o seu site. \u00c9 uma funcionalidade embutida no <a href=\"https:\/\/kinsta.com\/pt\/docs\/suporte\/escopo-do-suporte\/escopo-de-suporte-de-wordpress-gerenciado\/#what-is-wordpress-core\">WordPress Core<\/a>, portanto \u00e9 f\u00e1cil trocar fundos para certos eventos ou feriados. Voc\u00ea tamb\u00e9m pode ficar com um plano de fundo para toda a vida.<\/p>\n<p>Al\u00e9m do fundo padr\u00e3o do WordPress, voc\u00ea pode usar c\u00f3digo CSS personalizado, plugins e construtores de p\u00e1ginas para implementar todos os tipos de fundo em seu site WordPress. Desde fundos de imagem em p\u00e1ginas espec\u00edficas at\u00e9 fundos para seu bot\u00e3o de menu, as possibilidades s\u00e3o intermin\u00e1veis.<\/p>\n<p>Agora \u00e9 hora de adicionar esse hist\u00f3rico que voc\u00ea sempre quis ao seu site WordPress.<\/p>\n<p><em>Perdemos alguma coisa? Por favor, deixe um coment\u00e1rio se voc\u00ea estiver tendo problemas para adicionar ou gerenciar imagens de fundo do WordPress.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>As imagens de fundo WordPress v\u00eam em todas as formas. Voc\u00ea pode carregar uma imagem de fundo para todo o seu site, coloc\u00e1-la atr\u00e1s de bot\u00f5es, &#8230;<\/p>\n","protected":false},"author":117,"featured_media":41845,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[44,195],"topic":[1039,973,1015],"class_list":["post-41842","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-webdev","tag-wptips","topic-design-sites-wordpress","topic-otimizacao-de-imagens","topic-web-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Imagens de Fundo do WordPress: Como Adicionar, editar e Personaliz\u00e1-las<\/title>\n<meta name=\"description\" content=\"Adicionar uma imagem de fundo do WordPress n\u00e3o precisa ser t\u00e3o desafiador. Aprenda como ativ\u00e1-las, edit\u00e1-las e personaliz\u00e1-las neste guia detalhado.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Imagens de Fundo do WordPress: Como Adicionar, editar e Personaliz\u00e1-las\" \/>\n<meta property=\"og:description\" content=\"Adicionar uma imagem de fundo do WordPress n\u00e3o precisa ser t\u00e3o desafiador. Aprenda como ativ\u00e1-las, edit\u00e1-las e personaliz\u00e1-las neste guia detalhado.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-10T13:04:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-14T11:46:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/03\/imagens-fundo-wordpress.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Adicionar uma imagem de fundo do WordPress n\u00e3o precisa ser t\u00e3o desafiador. Aprenda como ativ\u00e1-las, edit\u00e1-las e personaliz\u00e1-las neste guia detalhado.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/03\/imagens-fundo-wordpress.png\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"118 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"Imagens de Fundo do WordPress: Como Adicionar, editar e Personaliz\u00e1-las\",\"datePublished\":\"2021-03-10T13:04:38+00:00\",\"dateModified\":\"2025-02-14T11:46:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/\"},\"wordCount\":20079,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/03\/imagens-fundo-wordpress.png\",\"keywords\":[\"webdev\",\"wptips\"],\"articleSection\":[\"Melhores Tutoriais WordPress\"],\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/\",\"name\":\"Imagens de Fundo do WordPress: Como Adicionar, editar e Personaliz\u00e1-las\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/03\/imagens-fundo-wordpress.png\",\"datePublished\":\"2021-03-10T13:04:38+00:00\",\"dateModified\":\"2025-02-14T11:46:05+00:00\",\"description\":\"Adicionar uma imagem de fundo do WordPress n\u00e3o precisa ser t\u00e3o desafiador. Aprenda como ativ\u00e1-las, edit\u00e1-las e personaliz\u00e1-las neste guia detalhado.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/03\/imagens-fundo-wordpress.png\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/03\/imagens-fundo-wordpress.png\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design de Sites WordPress\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/design-sites-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Imagens de Fundo do WordPress: Como Adicionar, editar e Personaliz\u00e1-las\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Imagens de Fundo do WordPress: Como Adicionar, editar e Personaliz\u00e1-las","description":"Adicionar uma imagem de fundo do WordPress n\u00e3o precisa ser t\u00e3o desafiador. Aprenda como ativ\u00e1-las, edit\u00e1-las e personaliz\u00e1-las neste guia detalhado.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/","og_locale":"pt_PT","og_type":"article","og_title":"Imagens de Fundo do WordPress: Como Adicionar, editar e Personaliz\u00e1-las","og_description":"Adicionar uma imagem de fundo do WordPress n\u00e3o precisa ser t\u00e3o desafiador. Aprenda como ativ\u00e1-las, edit\u00e1-las e personaliz\u00e1-las neste guia detalhado.","og_url":"https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2021-03-10T13:04:38+00:00","article_modified_time":"2025-02-14T11:46:05+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/03\/imagens-fundo-wordpress.png","type":"image\/png"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"Adicionar uma imagem de fundo do WordPress n\u00e3o precisa ser t\u00e3o desafiador. Aprenda como ativ\u00e1-las, edit\u00e1-las e personaliz\u00e1-las neste guia detalhado.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/03\/imagens-fundo-wordpress.png","twitter_creator":"@salmanravoof","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Salman Ravoof","Tempo estimado de leitura":"118 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"Imagens de Fundo do WordPress: Como Adicionar, editar e Personaliz\u00e1-las","datePublished":"2021-03-10T13:04:38+00:00","dateModified":"2025-02-14T11:46:05+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/"},"wordCount":20079,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/03\/imagens-fundo-wordpress.png","keywords":["webdev","wptips"],"articleSection":["Melhores Tutoriais WordPress"],"inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/","url":"https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/","name":"Imagens de Fundo do WordPress: Como Adicionar, editar e Personaliz\u00e1-las","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/03\/imagens-fundo-wordpress.png","datePublished":"2021-03-10T13:04:38+00:00","dateModified":"2025-02-14T11:46:05+00:00","description":"Adicionar uma imagem de fundo do WordPress n\u00e3o precisa ser t\u00e3o desafiador. Aprenda como ativ\u00e1-las, edit\u00e1-las e personaliz\u00e1-las neste guia detalhado.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/03\/imagens-fundo-wordpress.png","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2021\/03\/imagens-fundo-wordpress.png","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/imagens-fundo-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Design de Sites WordPress","item":"https:\/\/kinsta.com\/pt\/topicos\/design-sites-wordpress\/"},{"@type":"ListItem","position":3,"name":"Imagens de Fundo do WordPress: Como Adicionar, editar e Personaliz\u00e1-las"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinsta.com\/pt\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/41842","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=41842"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/41842\/revisions"}],"predecessor-version":[{"id":56789,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/41842\/revisions\/56789"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/41842\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/41842\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/41842\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/41842\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/41842\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/41842\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/41842\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/41842\/translations\/jp"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/41842\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/41845"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=41842"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=41842"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=41842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}