Como Colocar Imagem de Fundo no Bloco Gutenberg

Curso Completo

 Olá pessoal tudo bem com vocês vamos
ver para uma esmola do nossos do nosso
curso de WordPress onde estamos criando
um site com o tema Astra e nessa aula eu
vou ensinar a como alterar essa imagem
aqui ó da página inicial para você
colocar uma imagem aí que tenha relação
com o seu negócio ou com seu produto
Então vamos para o painel do WordPress
em páginas todas as páginas vou editar
aqui a página principal né que a página
inicial Então vamos lá pessoal esse
daqui como vocês já sabem o editor
Gutemberg a princípio Como já tem mais
conteúdo agora Pode parecer um pouco
complicado Mas depois que vocês
aprenderem a trabalhar com alguns
elementos vocês vão ver que não é
difícil então vamos lá aqui o nosso
primeiro bloco de conteúdo tem alguns
elementos Ó tem uma imagem de fundo
tenho um texto e tem um botões Então nós
vamos trabalhando né aula por aula com
cada elemento para vocês depois
conseguirem construir as Próprias
Páginas do zero então a princípio vamos
clicar
a nossa imagem ele já aparece aqui em
cima algumas opções de formatação deste
elemento então quando eu clico no texto
aparece configurações de texto quando eu
clico em um botão aparece configurações
de Botão nesse caso nós vamos clicar
aqui na nossa imagem vai apenas aparecer
aqui o que que é essa imagem O que é um
bloco de é um grupo né de elementos mas
para nosso customizar mos esses
elementos têm essa opção aqui ó aqui
você tem as configurações de documento
que são as configurações da página
inteira e aqui em bloco são as
configurações do bloco que é o que nos
interessa agora nesse bloco nós vamos
até background e é a imagem de fundo e
então o beck graus e vamos colocar aqui
ó background tipo imagem e substituir
imagem vamos escolher é uma imagem que
tem a relação aqui com nosso curso de
WordPress tem uma substituir imagem
a e agora uma uma informação importante
você precisa substituir por uma imagem
que tem o mesmo tamanho da que já está
no nosso tema para que fique legal o
layout o tamanho dessa imagem ou você
selecionar ela 1920 de largura por 1080
de altura para criar esse Design no
tamanho exato É utilize a ferramenta
camba tem um curso aqui no canal curte
sobe não curso de campo completo para
ensinar a trabalhar com essa ferramenta
grátis a de criação de artes então eu
vou lá e criar um designer dimensões
personalizadas 1920 por 1080 Criar novo
designer e aqui eu posso trabalhar todo
a toda minha imagem ou então criar todos
os elementos eu posso simplesmente
colocar uma foto
Oi e aí a justo para o tamanho que eu
preciso Pronto já tenho aqui o tamanho
ideal para colocar aqui ou ainda aqui no
campo eu posso criar tudo do zero
colocar textos colocar Element E aí
vocês podem aprender aqui no curso que
tem no canal tá legal Eu Já criei aqui a
minha imagem que essa daqui seleciono
ela e então selecionar e pronto Já
alterei aqui a minha imagem de fundo
basta o atualizar atualizar o meu site e
pronto já substituir por uma imagem na
que tem a relação aqui com o meu com meu
site né com o assunto que eu adoro feito
isso Pessoal vocês podem ver também o
que quando eu desço a barra de rolagem
acontece esse efeito parallax tá eu acho
legal mas caso você não queira você
volta aqui na página e vem até aqui ó
Nessa opção a taxa mas e ao invés de
fixo coloca scroll e atualiza Então
desse jeito não vai ter o efeito
parallax eu a pessoa vai
e a página e a imagem aqui não não tem
efeito de movimento tá bom mas aí você
tem que colocar aqui uma imagem ó
centralizada aqui onde você tem o
tamanho padrão para criar sua arte você
deixa tudo Centralizado para que o
alinhamento fique correto aqui tá bom
mas nesse caso eu vou deixar fixas
e aqui tem posição da imagem tá mas eu
não recomendo que vocês trabalhem com
isso recomendo que vocês cria a imagem e
quando colocar aqui já fique no tamanho
correto porque isso daqui não é muito
intuitivo né você tem que ir muito no
teste por exemplo está sendo ou esquerda
Aí você coloca centro Centro E aí você
tem que ver o que que é alterou Ó ficou
desse jeito tá então é bom mas aí vai da
sua preferência se você quiser mexer
nessa opção você pode tá Estava sempre à
esquerda deixa eu ver já não lembro mais
Tá ok eu vou deixar assim mesmo mas eu
recomendo que vocês creem arte e já com
o alinhamento correto tá legal repetição
nesse caso não utiliza porque a nossa
imagem toma todo o espaço disponível
size e vamos manter cobertura Mas aí tem
aqui outros alto conteúdo nós vamos
manter a cobertura porque já é esse tal
é recomendado aqui do nosso temos que eu
fechar aqui o câmbio já o tamanho
recomendado aqui do tema Ok cobertura
vocês podem ver que essa imagem aí saiu
um pouco escura É porque tem uma imagem
de overlay overlay é uma camada de cor
em cima da minha imagem eu posso fazer
isso para escurecer uma imagem ou para
alterar né o dar um efeito de cor Olha
só temos aqui a overlay que está na cor
preta e opacidade cinquenta por cento e
se eu coloco sem preto não né é esse mês
verde cinza aqui se eu coloco sem o meu
site fica a minha imagem fica desse
jeito tá bom eu coloco zero ela fica
totalmente transparente então não tem
mais aquele efeito e que escurece a
imagem isso daqui é utilizada estava em
50 é utilizado para que seja possível a
visualização do texto Então assim fica
meio ruim a leitura né a contexto o
branco agora
e o overlay fica desse jeito então a
melhor a visualização do meu texto tá
bom essa é a opção de overlay e você
pode mudar também o caso você queira
deixar vermelho azul laranja atualiza
atualizar Então você coloca a cor de
overlay que você quiser tá bom vamos ver
só que agora eu já não lembro qual que
estava antes então eu vou colocar aqui
meio que um cinza atualiza vamos ver
eu vou deixar dessa cor aqui certo acho
que um pouco mais escuro Agora eu mudei
a coloração Então vou colocar 64 se você
quiser uma cor personalizada você vem
aqui ó vamos ver mais ou menos Qual era
aquele Verde
eu não vou saber agora qual qual cor
estado
eu vou deixar assim mesmo então depois
eu ouvi e atualiza Então é assim que
você vai trabalhar com a imagem de
destaque aqui nesse tema tá legal E
então fica aí a tarefa para vocês para
colocar em uma imagem que tem a relação
com o conteúdo que vocês abordam no site
Beleza espero que vocês estejam gostando
que o site de você esteja ficando aí bem
legal e profissional grande abraço
pessoal e até a próxima aula tchau

Quer conversar sobre WordPress com outros membros?

Acesse nosso Fórum de Discussão.

Seja o primeiro a avaliar essa aula.

Por favor, entre na sua conta para deixar sua avaliação.
Adicionar aos favoritos
WORDPRESS DEFINITIVO PRO (1) (1)