Sempre quis diminuir as imagens de fundo em seu site WordPress?
Adicionar imagens de alta qualidade ao seu site é uma excelente maneira de aumentar o envolvimento e ilustrar seu conteúdo. Mas os visitantes que não conseguem ler seu conteúdo por causa de imagens que distraem podem sair do site sem saber mais sobre sua marca.
Por isso, é uma ótima ideia escurecer as imagens de fundo de conteúdos importantes e, nesta postagem, mostraremos como escurecer imagens de fundo on-line sem CSS ou HTML.
O que é uma imagem de fundo do WordPress?
Uma imagem de plano de fundo do WordPress é qualquer imagem que aparece atrás do conteúdo principal em seu site. Por exemplo, você pode ter uma imagem de fundo atrás de tudo, assim:
Ou você pode mostrar uma imagem atrás de elementos de conteúdo específicos, como barras laterais, rodapés, cabeçalhos e outros.
Essas imagens acrescentam interesse ao seu site e podem ajudar a manter os visitantes envolvidos com seu conteúdo. Elas também são essenciais para a marca da sua empresa, ajudando os usuários a diferenciar seu site dos concorrentes.
Por que você deve escurecer as imagens de fundo no WordPress?
Às vezes, as imagens de fundo podem dificultar a leitura do conteúdo pelos visitantes. Dê uma olhada neste exemplo:
É muito difícil ver o que o texto diz porque a imagem de fundo é muito vibrante.
No entanto, se você escurecer a imagem de fundo, poderá fazer com que o conteúdo se destaque mais, facilitando a leitura dos visitantes, o aprendizado sobre seus produtos e serviços e a transformação em clientes em potencial.
Como faço para escurecer meu plano de fundo?
A maneira mais popular de escurecer imagens de fundo on-line é usar uma combinação de código CSS e HTML. Isso permite que você altere as propriedades do plano de fundo e adicione um filtro às imagens para que elas não ocultem o conteúdo do site.
O problema com essa abordagem é que ela não é fácil para os proprietários de sites sem experiência em codificação. Além disso, ela envolve a alteração do código nos arquivos de tema do WordPress, o que pode danificar o site se você não souber o que está fazendo.
Uma solução melhor para iniciantes sem conhecimento técnico é usar um plug-in do WordPress para tornar sua imagem de fundo mais escura. Nosso plug-in favorito do WordPress é o SeedProd, um construtor de sites fácil e avançado.
Por que usar o SeedProd para escurecer imagens de fundo?
O SeedProd é a melhor maneira de escurecer imagens de fundo no WordPress porque não requer codificação. Ele vem com um construtor de páginas do tipo arrastar e soltar, permitindo que você aponte e clique para personalizar seu site.
Com seu recurso de sobreposição fácil, você pode escurecer uma imagem de fundo arrastando um controle deslizante simples. Também é possível criar uma sobreposição de cores e alterar a posição da imagem de fundo escolhendo uma opção em um prático menu suspenso.
Além de ajudá-lo a personalizar imagens em seu site WordPress, o SeedProd também permite que você:
- Criar um tema WordPress do zero
- Crie lojas completas do WooCommerce
- Criar páginas de destino que convertem
- Gerencie assinantes e aumente sua lista de e-mails
- Faça o pré-lançamento de seu site com uma página de lançamento em breve
- Coloque seu site em modo de manutenção
- E muito mais
Conclusão: O SeedProd facilita a personalização de qualquer parte do seu site WordPress sem código.
Como escurecer uma imagem de fundo no WordPress sem código CSS ou HTML
Siga estas etapas simples para escurecer uma imagem de fundo no WordPress sem código CSS ou HTML com o SeedProd. Prometemos que é muito mais fácil do que aprender a codificar e oferece resultados impressionantes.
- Tutorial em vídeo
- Etapa 1. Instalar e ativar o plug-in SeedProd
- Etapa 2. Escolha um kit de site ou um modelo de página de destino
- Etapa 3. Adicione sua imagem de fundo ao WordPress
- Etapa 4. Adicionar uma sobreposição para escurecer sua imagem de fundo
- Etapa 5. Escurecer imagens de fundo em outro lugar no WordPress.
- Etapa 6. Publique suas alterações
Tutorial em vídeo
Etapa 1. Instalar e ativar o plug-in SeedProd
Primeiro, você precisará acessar o site do SeedProd e escolher um nível de assinatura. Recomendamos o SeedProd Pro porque ele inclui recursos avançados de criação de temas.
Depois de escolher um plano e abrir sua conta, vá até a seção Downloads do painel do usuário e faça o download do plug-in para o seu computador. Enquanto estiver lá, copie sua chave de licença do plug-in para usá-la mais tarde.
Em seguida, acesse seu site do WordPress e instale e ative o plug-in do SeedProd. Se você nunca fez isso antes, siga este guia sobre como instalar um plug-in do WordPress.
Depois de ativar o SeedProd, vá para a página SeedProd " Settings e cole sua chave de licença no campo relevante.
Depois de clicar no botão Verify Key, você poderá acessar todos os recursos Pro do SeedProd.
Etapa 2. Escolha um kit de site ou um modelo de página de destino
Há duas maneiras de usar o SeedProd em seu site WordPress. Você pode:
- Criar um tema WordPress personalizado do zero e substituir seu tema atual
- Crie uma página de destino autônoma e mantenha o tema existente do WordPress
Para este guia, criaremos um tema personalizado, mas se, em vez disso, você quiser criar uma página de destino, siga nosso guia passo a passo: Como criar uma página de destino no WordPress.
Depois de configurar sua página, você pode voltar a este tutorial para saber como escurecer as imagens de fundo.
Como estamos criando um tema do WordPress para este tutorial, você precisará navegar até SeedProd " Theme Builder na área de administração do WordPress e clicar no botão Themes (Temas ).
Na próxima tela, você verá uma galeria de kits de sites que podem ser usados para criar um tema WordPress instantâneo.
Cada kit vem com todas as páginas e modelos de temas de que seu site precisa. Em seguida, você pode personalizar cada página com o construtor de páginas de arrastar e soltar do SeedProd.
Percorra os kits até encontrar um que seja adequado ao seu negócio, passe o mouse sobre a miniatura do kit e clique no ícone de marca de seleção.
Após importar o kit do site, você verá uma lista das partes que compõem seu novo tema do WordPress. Para personalizar qualquer parte, clique no link Edit Design e ele será aberto no construtor de páginas visuais, onde você poderá adicionar sua imagem de fundo personalizada.
Vamos começar editando o design da página inicial.
Etapa 3. Adicione sua imagem de fundo ao WordPress
Ao abrir um modelo no construtor de páginas do SeedProd, você verá um layout semelhante ao do exemplo abaixo.
Há blocos e seções para adicionar conteúdo à esquerda e uma visualização ao vivo do seu design à direita com elementos usados no kit do seu site.
Você pode personalizar seu modelo facilmente clicando em qualquer elemento na visualização. Isso abrirá um painel com configurações para esse elemento e opções de personalização.
Você também pode arrastar um bloco da esquerda para a sua página para adicionar mais conteúdo, como formulários de opt-in, ícones de mídia social, vídeos, imagens, botões e muito mais.
Adicionar uma imagem de fundo a qualquer seção é igualmente fácil. Clique na área que deseja editar e exclua a imagem de fundo padrão.
Em seguida, você pode carregar uma nova imagem do seu computador ou da biblioteca de mídia do WordPress.
Etapa 4. Adicionar uma sobreposição para escurecer sua imagem de fundo
Como você pode ver em nosso exemplo anterior, a imagem de fundo que estamos usando não contrasta o suficiente com o título, dificultando a leitura.
A correção desse problema é muito fácil e requer apenas alguns cliques. Basta localizar o título Dim Background nas configurações da seção e arrastar o controle deslizante para a direita até que o título se destaque.
Você também pode usar o mesmo painel para adicionar uma sobreposição de cores à sua imagem de fundo. Essa é uma excelente maneira de vincular as cores da sua marca ao design da Web e tornar seu site mais reconhecível.
Para isso, localize o título Overlay Color e clique no seletor de cores para selecionar uma cor personalizada. A escolha de uma cor é bastante simples. Você pode apontar e clicar para encontrar uma cor que funcione ou usar as setas para inserir uma:
- Valor hexadecimal
- Valor RGBA
- Valor HSLA
Essa é uma excelente solução se você já sabe qual cor deseja usar.
Além de adicionar uma sobreposição à sua imagem, você também pode alterar a cor de fundo da seção, usar um gradiente em vez de uma imagem e alterar a posição da imagem de fundo.
Por exemplo, ao clicar na seta suspensa, você pode posicionar o plano de fundo das seguintes maneiras:
- Capa de tela cheia
- Cobertura de tela cheia - fixa
- Contém tela cheia
- Contenção de tela cheia - Fixo
- 100% Largura da parte superior
- 100% Largura do fundo
- Repetição de fundo
- Repetição Horizontal Superior
- Repetição da parte inferior horizontal
- Repetição do centro vertical
- Posição personalizada
A escolha da opção Custom Position (Posição personalizada ) abre opções de personalização mais detalhadas.
Por exemplo, você pode alterar a posição X ou Y para mostrar uma parte específica da imagem. Você também pode alterar o tipo de anexo para fixo ou de rolagem, definir como a imagem se repete e alterar o tamanho do plano de fundo.
Como resultado, você pode personalizar cada área de suas imagens de fundo para obter a aparência perfeita.
Etapa 5. Escurecer imagens de fundo em outro lugar no WordPress.
Agora que você sabe como escurecer imagens de fundo com o SeedProd, pode usar o conhecimento em outras partes do seu design da Web.
Por exemplo, você pode adicionar uma imagem de fundo a linhas e colunas e adicionar uma propriedade de filtro para escurecê-la, de modo que seu conteúdo se destaque.
Você pode até mesmo personalizar a barra lateral do blog com uma imagem de fundo, para facilitar a visualização em comparação com as postagens do blog. Basta carregar sua imagem, ajustar rapidamente suas configurações e você estará pronto para publicar.
Etapa 6. Publique suas alterações
Para que os visitantes do site vejam as novas imagens de plano de fundo, você precisará ativar o tema personalizado do SeedProd. Para fazer isso, vá até SeedProd " Theme Builder e coloque a opção Enable SeedProd Theme na posição "Yes" (Sim).
É isso aí! Agora você pode visualizar seu tema e ver as sobreposições de plano de fundo em ação.
Aqui está um exemplo da nova imagem de fundo da página inicial:
Você também pode ver a seção "Sobre nós" e as imagens de fundo da barra lateral abaixo:
Neste guia passo a passo, você aprendeu a escurecer uma imagem de fundo no WordPress sem CSS, HTML ou qualquer outro conhecimento de codificação.
Aqui estão alguns outros guias que achamos que serão úteis:
- A navegação na página de destino está morta: eis o motivo
- Como criar animações de texto no WordPress (etapas fáceis)
- Como criar divisores de seção sofisticados para sites WordPress
Pronto para mergulhar de cabeça e personalizar seu site WordPress sem código?
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, fique à vontade para deixar um comentário com perguntas e feedback.
Você também pode nos seguir no YouTube, no X (antigo Twitter) e no Facebook para obter mais conteúdo útil para expandir seus negócios.
