vou manter essa introdução muito curta.
aqui está o que vamos discutir neste artigo:
- o que são imagens de fundo
- Qual é a coisa com fundos de paralaxe?
- como adicionar imagens de fundo ao seu site WordPress
- como abordar o tamanho da imagem no WordPress
pronto, estável? Vamos!
o que são imagens de fundo?
imagens de fundo são imagens que são aplicadas ao fundo de um elemento em um site, em um e-mail, etc. Embora a imagem do herói seja o principal ponto focal de um site ou e-mail, as imagens de fundo são mais sutis. Eles suportam outros elementos do site, como uma segunda camada: chamadas à ação, outras imagens, várias seções do site, etc.
vamos dar uma olhada em alguns exemplos dessas imagens de fundo:
IKEA
na página inicial do site da IKEA, as imagens de fundo são usadas para apresentar suas histórias inspiradoras. O Título e a categoria da história são colocados no topo da imagem. Há uma sobreposição de gradiente usada para diminuir a opacidade da imagem real. Essa abordagem ajuda a tornar o texto mais visível, mas também cria consistência no design, portanto, nenhuma cor se destaca mais do que outra.
Loving Vincent
um dos meus filmes favoritos, Este.
imagens de fundo estavam atrás de um carrossel que apresenta histórias por trás de Vincent van Gogh e do filme. As imagens de fundo parecem capacitar a história e entregar emoções fortes.
Lush
eu adoro a aparência do site Lush: colorido e vibrante como os próprios produtos.
agora, as imagens de Fundo podem usar padrões ou formas, como neste exemplo de página de inscrição do boletim informativo. Esses padrões conseguem transformar algo potencialmente aborrecido, em algo alegre.
imagens de fundo de paralaxe
se você olhar para o site do Museu Britânico, você notará que existem imagens em suas páginas, que ficam em segundo plano por que o conteúdo em primeiro plano rola para baixo. Estas são imagens de fundo de paralaxe.
Parallax scrolling é uma daquelas tendências de Web design que consegue adicionar um efeito brilhante a um site se integrado corretamente.
você também pode obter esse efeito no WordPress, vou mostrar como um pouco mais tarde.
como adicionar imagens de fundo ao seu site WordPress
existem três maneiras principais de adicionar imagens de fundo ao seu site WordPress. Vamos vê-los, sim?
-
adicionando imagens de fundo através do seu personalizador de tema WordPress
os temas mais populares do WordPress têm essa opção disponível. Vou usar o tema Colibri para o propósito deste exemplo. Outros temas se comportam de maneira semelhante ao tema Colibri.
se o tema escolhido não suportar o recurso, pule para os métodos 2 e 3.
agora, vamos começar indo para aparência – > Personalize a partir do painel do WordPress. À esquerda, você verá as opções de edição do personalizador do tema, enquanto à direita, há uma visualização ao vivo do seu site.
O tema permite que você coloque imagens de plano de fundo para:
- Linhas
- Colunas
- Blocos (inteira seções do site, tais como: sobre mim, carteira, equipe, contato, etc.)
- componentes (títulos, carrosséis, tabelas de preços, carrosséis, etc.)
a maneira como você pode fazer isso é a mesma, não importa onde você precise de sua imagem de fundo.
digamos que você queira adicionar uma imagem de fundo ao Bloco do site de seus serviços. Comece selecionando a seção. À esquerda, você verá as opções de edição em um menu estruturado como abaixo:
- Layout
- estilo
- avançado
vá para estilo – > tipo de fundo.
selecione “Imagem”. Agora você verá uma imagem que pode substituir pela sua. 
quando você clica na imagem, você será solicitado a uma tela onde você pode selecionar uma imagem da Galeria de mídia WordPress, ou você pode fazer upload de outra imagem.
como você já deve ter notado, você pode até adicionar um vídeo como plano de fundo.
e, há também uma opção de alternância para o efeito de paralaxe!
agora, há outro atalho para fazer essa mudança de imagem de fundo. Ao selecionar um bloco da direita, você verá o ícone Configurações. Clique nele e você verá algumas opções de edição.
se você selecionar “Alterar plano de fundo”, você será direcionado para dentro de “estilo” para prosseguir conforme descrito acima.
isso era tudo gente. Muito fácil, certo?
agora, se o seu tema não tiver a opção de imagem de fundo, há uma maneira de fazer isso no editor padrão do WordPress.
-
adicionando uma imagem de fundo usando blocos WordPress
no painel do WordPress, vá para “páginas”. Agora, selecione “Editar” abaixo da página desejada. Você verá uma interface como mostrado abaixo.
o editor WordPress padrão é baseado em blocos, o que significa que cada seção do site é feita de blocos. Esses blocos podem ser acessados a partir de qualquer sinal “+” que você verá na interface. Vamos clicar no canto superior esquerdo.
Agora, selecione o bloco “Capa”. Você verá isso aparecer imediatamente em sua página.
você pode fazer upload de uma imagem armazenada localmente em seu computador ou escolher entre as existentes na biblioteca de mídia.
Selecionei uma imagem da biblioteca de mídia. Agora posso adicionar algum texto a ele. As opções de edição são bastante limitadas aqui.
se você selecionar a capa, verá um menu aparecendo acima, onde você pode alinhar sua imagem ou duplicar todo o seu bloco. Você pode até salvar seu bloco como reutilizável, para ser usado novamente em outros projetos.
agora, no lado direito da tela, você tem algumas opções extras de edição.
dentro das configurações de mídia, se você ativar a opção Fundo fixo, ativará o efeito paralaxe.
quando a alternância está desligada, você pode ajustar o ponto focal.
este ajuste do ponto focal pode ser feito também em uma base percentual, levando em consideração a largura e a altura.
em seguida, você pode adicionar uma sobreposição. Você pode escolher sua cor e opacidade.
e, você está meio que pronto.
-
adicionando imagens de fundo através de plugins WordPress
Aqui estão alguns plugins WordPress marcados como plugins de imagem de fundo. Vou jogar um pouco com o simples plugin de imagem de fundo em Tela cheia porque tem mais instalações e as melhores críticas até agora.
agora, aqui está um tutorial sobre como instalar um plugin WordPress.
com este plugin, as imagens serão dimensionadas automaticamente com o navegador, portanto, independentemente do tamanho do navegador, a imagem sempre preencherá a tela.
tudo o que você precisa fazer é ir para aparência -> imagem BG em Tela cheia. A partir daqui, selecione sua imagem.
Quando você clicar em “Salvar Opções”, você vai ver que todas as seções do seu site, sem um plano, receberá esta imagem como plano de fundo.
agora, isso é o que está acontecendo na versão gratuita. É bastante básico e nem um pouco flexível. O plano de pagamento vem com opções extras, como:
- Uploads de imagens de fundo
- Post / página específica de imagens de plano de fundo
- Várias imagens com transições graduais nas páginas
E, que estiver pronto, você acabou de encontrar o 3 métodos que você pode usar para adicionar imagens de fundo para o seu site WordPress.
há mais uma coisa que eu quero que você saiba antes que possamos chamá-lo de um dia.
tamanhos de imagem
Antes de enviar qualquer imagem em seu site, preste atenção ao seu tamanho. Eu sei que todos nós olhamos para megapixels, mas, na web, há um problema. Imagens de alta resolução podem prejudicar seu site, afetando seu tempo de carregamento. A longo prazo, qualquer segundo de carregamento extra pode perder visitantes e conversões do site. Além disso, você diminuirá significativamente suas chances de classificação nos mecanismos de pesquisa, porque a velocidade da idade é um fator de classificação importante.
por outro lado, usar imagens muito pequenas também pode prejudicar sua experiência de usuário. Então, precisamos fazer face às despesas.
uma maneira de fazer isso é usando aplicativos externos que podem ajudá-lo a redimensionar suas imagens, garantindo a clareza adequada.
mas no WordPress, você pode fazer isso facilmente usando um … plugin, como você já deve ter adivinhado.
aqui, na Colibri, somos fãs de Smush. Smush pode e comprimirá imagens sem uma queda visível na qualidade.
na versão pro, ele também converterá imagens em WebP, um formato de imagem de última geração que pode compactar tamanhos de arquivos de imagem em até 35%, sem perda de qualidade óbvia.
e isso é um envoltório, pessoal!
se você gostou deste artigo, e você quer saber mais sobre como projetar um site WordPress, certifique-se de se inscrever no canal do YouTube da Colibri e siga-nos no Twitter e Facebook!