Como Criar um SITE PROFISSIONAL no WordPress com Elementor GRÁTIS em 2024 [Sem Programação]

Neste vídeo eu vou te ensinar a criar um site profissional usando o WordPress e o Elementor Fala pessoal, tudo bem? aqui é Micaela do Descomplicando Sites e antes de começar o tutorial quero pedir para você deixar aquele like no vídeo que ajuda demais o canal a crescer e para você se inscrever no canal se você ainda não for inscrito. Tá bom?! então é isso vamos pra tela do meu computador agora. Antes de começar o tutorial pessoal, preciso passar alguns avisos importantes. para que você consiga seguir o passo a passo da forma correta ok aqui abaixo

desse vídeo eu deixo uma descrição tá, é só você rolar a tela aqui para baixo e clicar em mais que vai expandir Então sempre que eu citar outro vídeo né que tiver algum outro vídeo que eu te indicar de alguma outra função vai estar listado aqui Se tiver algum link porque por exemplo eu sempre deixo material de apoio para vocês deixo as fotos que eu estou usando os ícones se tiver Algum código deixo a paleta de cores as Logos as imagens para se você quiser seguir o tutorial igualzinho e replicar o site para colocar no

seu portfólio então sempre vai ter aqui ó o link do material de apoio que você vai clicar e vai ir para uma pasta aqui no drive do meu Google com todos os arquivos do projeto tá eu sempre vou deixar na descrição também vai estar sempre separado aqui por capítulos tá então você pode clicar aí direto pra parte aqui do Capítulo e eu sempre deixo aqui na descrição os nossos links nós somos afiliados e parceiros de algumas plataformas então quando a gente indicar algum produto por exemplo hospedagem que a gente vai indicar que a Hostinger a

gente sempre deixa o nosso link aqui na descrição tá que é a forma que você tem de apoiar o canal e nos ajudar a trazer mais conteúdos relevantes para você então clicando com o nosso link você vai nos ajudar e a gente também tem cupom de desconto que fica aqui na descrição OK outra coisa esse tutorial é grande então se você estiver achando que eu estou falando rápido demais ou devagar demais aqui no YouTube sempre tem essa engrenagem que você clica em velocidade E você pode ou diminuir a velocidade ou aumentar a velocidade tá para

que fique da forma melhor aí para você então é isso dados os avisos vamos lá vamos para o nosso primeiro passo que é a compra do domínio e hospedagem domínio para quem não sabe é o link do nosso site assim como uma casa precisa de um endereço o site na internet também precisa do seu endereço e o link né ou seja o seu domínio é o endereço é a forma de encontrar você aqui na internet você tem que pagar pelo direito de usar um domínio assim customizado com o nome da sua empresa ou da sua

marca Não se preocupe que não é caro e você paga ele anualmente mas você precisa pagar para usá-lo tá e a hospedagem é uma empresa que mantém todos os nossos arquivos na internet assim como a gente tem o nosso endereço quando a gente vai se hospedar em algum lugar a gente precisa pagar pel aquele lugar que a gente tá hospedado aqui na internet também é a mesma coisa para você você conseguir estar na internet para você conseguir manter os seus arquivos os seus dados na internet você precisa pagar para uma empresa de hospedagem mantê-los na

internet e esse serviço é cobrado anualmente mensalmente Trimestralmente depende da forma que você quiser pagar a empresa que a gente indica é a empresa Hostinger ela é uma empresa de hospedagem muito boa é multinacional Tem suporte em português né tem a equipe deles Aqui no Brasil tem servidor no Brasil então é uma empresa que a gente gosta muito pelo custo benefício porque o serviço é bom e os preços são muito bons também como eu falei para vocês aqui na descrição do vídeo se não tiver aparecendo tudo é só você clicar no Maizinho tem escrito mais

que vai est aqui ó vai estar assim você clica em mais que vai expandir e aqui está o nosso link você pode clicar que você vai direto aqui pro site da Hostinger e aqui fica o nosso cupom de desconto que você pode copiar também tá aí aqui na Hostinger tem vários planos de hospedagem você tem que observar aqui nos recursos do plano Qual que você acha que vai se adequar melhor ao seu projeto a gente sempre indica que você pegue a partir desse plano Premium aqui ó você consegue colocar vários sites na sua hospedagem Então

se depois você quiser criar mais você consegue criar até 100 sites tá tanto aqui no plano Premium quanto no plano Business que é O o mais popular que o mais comprado né então o plano Premium ele tem 100 GB de armazenamento e o business ele tem 200 GB de armazenamento esse aqui tem backups que são cópias feitas do seu do seu site sem manais e esse aqui tem backups diários esse aqui tem CDN grátis que é uma ferramenta usada para deixar o site mais rápido e esse aqui não tem o CDN grátis então assim eles

têm várias características um do outro então você tem que analisar quanto de tráfego ou seja quantas pessoas você acha que vão acessar o seu site e se você acha que vai ter muitos acessos principalmente se você for fazer campanhas de tráfego pago né que a gente espera que muitas pessoas cliquem no link você precisa comprar um plano mais maior porque se você comprar um plano menor que suporta menos acessos Pode ser que o seu site saia fora do a se tiver muitos acessos ao mesmo tempo tá então quanto mais acesso o seu site for ter

um plano de hospedagem maior Você vai precisar eu vou comprar esse plano Premium aqui uma coisa legal aqui sobre a Hostinger é o seguinte a partir desse plano Premium Se você comprar um ano de hospedagem ou seja 12 meses você ganha o Domínio grátis no primeiro ano lembra que eu falei para você o domínio é o link do seu site você precisa precisa pagar anualmente Se você comprar já um ano de hospedagem você não precisa pagar pelo domínio agora né na contratação só depois de um ano então a Hostinger ainda dá para você esse domínio

de graça Se você comprar a partir de 12 meses compensa muito você vai escolher o seu plano vai clicar em adicionar no carrinho aí eu vai ser redirecionado para cá aqui é para você escolher a quantidade de tempo que você quer comprar Se você comprar um mês só fica R$ 45,99 por mês mas se você comprar 12 meses ó que é o que eu tô te falando para comprar que você já ganha o domínio grátis que é o que eu recomendo ó cada mês sai a R$ 17,99 então assim compensa muito porque cai para menos

da metade do preço né E conforme mais tempo você for comprando mais desconto você ganha Então você vai escolher aqui o seu período aí aqui você vai criar uma nova conta né você vai colocar o seu endereço de e-mail ou você pode logar com uma conta do Google do Facebook também Aí você coloca o seu endereço de e-mail e uma senha aqui você escolhe qual vai ser o método De pagamento e aqui você preenche os seus dados aqui onde tem escrito tem um cupom de desconto Você vai clicar e vai abrir a abinha para você

colocar o cupom você pode vir aqui na descrição e copiar ou então você pode escrever aqui assim ó descomplicando sites que é o nome aqui do nosso canal aí você vai clicar em aplicar ó ele já vai dar um desconto aqui para você de 10% e você vai clicar aqui para poder autorizar né os termos de serviço e políticas de privacidade e agora você vai clicar em enviar um pagamento aí vai te mandar para essa tela para você preencher os dados do seu cartão vou preencher o meu e depois vou clicar em Pag agora aqui

você consegue escolher se você quer parcelar Tá vendo Por isso que não compensa comprar um mês porque se você quiser pagar o valor mensalmente tem como você parcelar em até 12 vezes aqui tá vendo e sai bem mais barato do que comprar apenas um mês e ter que ficar se preocupando sempre em renovar tá ó eu vou comprar de uma vez mesmo e vou preencher todos os meus dados e clicar em Pag agora pronto assim que você efetuar o pagamento você vai ser redirecionado para essa página aí você vai clicar em começar agora pode Pular

toda essa parte aqui clicar em pular quero uma experiência personalizada pular quero criar um site do zero e aí aqui você vai pra escolha do seu domínio lembra que a gente comprou 12 meses para ganhar o domínio de graça então aí você vai antes de escolher aqui né pode clicar em selecionar e já deixar aqui mas antes de escolher você vai voltar tá lá no site da Hostinger para poder escolher o domínio aqui ó pela parte de domínios por qu aqui a gente consegue ter visão melhor e pesquisar melhor Quais os nomes de domínio que

estão disponíveis então ó o nome que eu quero é Zeus advogados Lembrando que todos os sites que eu crio aqui no canal são sites fictícios que eu faço crio tudo todo Brand toda a estrutura só para ensinar para vocês tá então esse site aqui não existe não tô comprando qualquer domínio aqui só para ensinar tá então você vai colocar o seu nome aqui né da sua empresa ou do seu negócio e vai clicar em procurar ele vai dizer para você as extensões que estão disponíveis as mais comuns que a gente mais costuma usar é a

pcom.br extensão pessoal primeiramente é o que vem depois do ponto tá então assim o seu domínio é isso aqui Ó o nome e aí tem um ponto aí depois do ponto tem a extensão tá então assim quando tem ponto com. tudo que tem BR no final BR significa Brasil e todo o domínio que tem BR né que significa Brasil ajuda no seo que são configurações que a gente faz pro site ser melhor ranqueado nas plataformas de busca como o Google por exemplo por que o Google ele quer sempre entregar o melhor resultado para quem está

buscando E se o site é do Brasil e a pessoa está pesquisando no Brasil em português ele entende que se ele entregar para ela um site em português né um site do Brasil vai ser mais eficiente então quando a gente gente compra domino.com.br é mais fácil do Google entregar a gente paraas pessoas tá outro também que é bem usado é só o ponto com também que é um domínio Universal né então ele é acessá via todos os países do mundo e a maioria dos países estrangeiros usa assim s.com então essas duas extensões de domínio são

ótimas para você comprar e fica bem profissional quem é advogado gosta também de ADV então tem ADV adv.br tá também é uma extensão boa para advogado mas eu recomendo que você compre sempre ou P com ou pc.br tá bom E você verifique na hora que você for colocar aqui se tem as duas disponíveis se possível né se você quiser compre as duas porque olha para você ver esse aqui do Ponto com tá 19 R$ 19,90 por ano tá baratinho e aí o que que pode acontecer uma pessoa ter a mesma ideia do mesmo nome que

você e aí você vem e compra só o.com.br né mas aí você deixou disponível P com pra pessoa comprar E aí vai ter um site na internet se a pessoa comprar né com o mesmo nome que o seu só com a extensão diferente e a isso pode confundir as pessoas Às vezes as pessoas podem usar para dar golpe né que é um site igualzinho o seu E aí a pessoa não vai saber diferenciar então é muito importante muito seguro que você compre os as duas extensões se você puder então perceba que a. com ela custa

R$ 19,90 né no primeiro ano que a Hostinger sempre dá o desconto E aí depois para renovar é R$ 74,99 por ano tá bom aí dá para você fazer redirecionamento depois por exemplo eu tenho as duas extensões P com.com.br Então quando você acessa a ponto com Ó você é redirecionado para o meu site principal que é pcom.br entendeu então você pode ter as duas extensões e deixar uma redirecionando pra Outra então quando a pessoa tentar ponto com por exemplo vai pro seu site que é o pcom.br Tá bom então tá você vai vir aqui vai

pesquisar às vezes não vai ter o mesmo nome igualzinho você digitou então você pode mudar a disposição aqui dos nomes então em vez de deixar Zeus advogados você deixa advogados Zeus tá vai mudando a ordem aqui vai acrescentando tirando palavras colocando sinônimo de palavras que dá certo ok então você vai pesquisar vai ver aqui se tem disponivel.com.br E aí você vai voltar né para aquela tela e aqui você vai escrever o que que você decidiu no meu caso é Zeus advogados vê se tá escrito certinho tá não pode ter pontuação não pode ter caracter nenhum

tem que ser menús e escrito assim aí aqui que você vai escolher a extensão ó eu vou querer pegar de graça a extensão pcom.br que é essa daqui pronto aí vou clicar em pesquisar ele vai falar que tá disponível né que a gente já viu lá e vou clicar em continuar se você tiver escrito errado ou se tiver dado em disponível é só clicar em alterar e tentar de novo vou clicar em continuar aqui como é para mim eu vou deixar em pessoal se no seu caso for para uma empresa você coloca empresa Tá aí

você vai clicar em próximo o país já foi escolhido né que é o Brasil aí aqui tem o endereço se você não tiver colocado ainda você coloca o seu endereço e o seu número de telefone preenchi cliquei em próximo e agora eu vou digitar o meu CPF e vou clicar em finalizar registro pronto aí vai carregar né aí vai vir para essa tela pra gente finalizar a contratação do nosso do nosso domínio aí aqui ele pergunta qual servidor que a gente vai querer aí a gente vai escolher América do Sul que é no Brasil a

gente vai clicar em alterar E aí vamos clicar em configuração eu tô escolhendo a América do Sul Brasil porque o meu público é daqui tá se você estiver fazendo para clientes de outros países é para outros países você tem que colocar o mais próximo da onde que as pessoas que vão acessar o site moram pronto clica em concluir configurações aí vai carregar tá finalizando a contratação do domínio o domínio pessoal a Hostinger ela faz a compra na Biblioteca Nacional dos domínios que é o registro br né faz essa ligação então demora um tempinho para poder

registrar na hora que finalizar aqui que o pacote de hospedagem que a gente comprou na hosing já vai Estar comprado mas o domínio ainda vai estar em processo de análise sabe para ser comprado então Ó aqui você consegue clicar e você já vai aqui pro seu painel da hospedagem a partir de agora Toda vez que você logar na hostinger Você vai vir pro painel da hospedagem tá sempre que você precisar mexer em coisas relacionadas a hospedagem domínio e-mail porque tem e-mail gratuito aqui para você e-mail com o seu domínio profissional tem vídeo aqui no canal

ensinando a fazer tá você vai logar sempre na hostinger Então você vai vir sempre aqui né na Hostinger vai clicar aqui em entrar se você tiver deslogado né já vou te ensinar como é que faz para logar de m só clicar lá em cima e entrar aí você vai colocar o seu nome de usuário e senha aqui vai clicar em connex aí você pode clicar aqui em salvar a senha que aí já fica salvando no seu navegador aí você vai sempre cair aqui no início tá vai ter aqui o seu domínio tá vendo tem seu

domínio e tem seu plano de hospedagem aqui aí você vai sempre clicar aqui no em cima do domínio que você você quer que é onde a gente vai criar o site e clicar em gerenciar ele vai te levar para cá paraa parte aqui da hospedagem onde a gente vai Configurar o domínio e aí percebe que ainda tá falando assor status registrando isso é normal quando você compra um domínio principalmente o.com.br ele pode levar até 24 horas para ser registrado Então agora você vai aguardar algumas horas na maioria das vezes não leva esse tempo todo leva

poucos minutos poucas horas para poder registrar Tá mas tem esse prazo máximo você também consegue chegar aqui ó clicar aqui em cima de hospedagem aí vai ter o seu plano Você vai clicar em cima do site clicar em cima do domínio aí você vai vir aqui pro painel onde é que a gente vai fazer a criação do nosso site tá tá vendo também tá escrito tem uma bolinha vermelha escrito status domínio está em apontamento né quando sumir essa bolinha vermelha significa que o domínio já está ok para você usar outra coisa se você acessar o

domínio que você comprou agora vai tá dando erro porque ainda não foi registrado né É normal tá quando você acessar vai aparecendo uma página roa daos falando começ a criar seu site aí significa que já foi registrado você já pode começar a criar Ok então agora só esperar alguns minutos e daqui a pouco você entra de novo pronto quando começa A aparecer uma página roa assim significa já está pronto pra gente criar o nosso site agora vamos pra parte de instalar e configurar o nosso WordPress tá se você tiver deslogado da ros você vai voltar

aqui no site vai clicar em entrar vai colocar o seu login senha beleza aí aqui vai ter hospedagem ou então você pode clicar ali em cima em hospedagem Você vai clicar em cima de site e no domínio que você quer usar que no nosso caso é esse aqui pcom.br você vai clicar em cima aí estamos aqui no painel agora você vai clicar aqui do lado em site WordPress e vai clicar aqui nesse botão de instalar agora a gente vai colocar o título do nosso site o título é aquele nome que aparece ali em cima na

guia tá vendo Então a gente vai colocar o nome que a gente quer que apareça eu vou colocar Zeus Zeus advogados e aqui você vai colocar um e-mail e um nome de usuário que você quer para logar lá no seu site tá o site ele fica dentro da hospedagem Mas ele tem um login independente você não precisa entrar na hospedagem para poder entrar dentro do site não tá uma vez que o site foi instalado né que o WordPress instalado você consegue entrar diretamente nele Por isso que a gente precisa criar um login senha tá como

eu coloquei o meu e-mail aqui e o primeiro nome do meu e-mail mkl ele já pegou o primeiro nome como nome de usuário Se você quiser mudar é só você selecionar aqui e escrever outro nome eu vou deixar Micaela mesmo como nome de usuário aí eu vou conseguir logar com os dois ou com e-mail ou nome de usuário e vou colocar uma senha tente escolher uma senha forte que tenha números que tenha letras maiúsculas Ou pelo menos uma letra maiúscula caracter tá bom para ficar mais seguro Aí clica em próximo aqui você vai escolher qual

que é o idioma que vai ser lá o Wordpress estamos no Brasil Então vou colocar português Brasil se você tiver em outro idioma Coloca outro idioma vou clicar em instalar e pronto o nosso site já está online se a gente vier aqui no nosso domínio e recarregar a página olha você vai ver que já mudou a cara agora está aparecendo este site aqui tá aparece assim porque quando a gente instala WordPress ele instala um tema padrão tá vendo tem o conteúdo aqui já isso aqui tudo a gente consegue alterar para deixar no site exatamente como

a gente quer que fique Tá e agora que a gente já Instalou WordPress o nosso site já está no ar o nosso site é isso daqui qualquer pessoa que quiser acessar o site vai conseguir acessar e vai ver isto daqui Falo isso porque às vezes eu ensino vocês a criar um site E aí no final vocês falam e agora como que eu faço para pôr o site no ar o site já está no ar já está funcionando já está na internet a partir do momento que a gente instala o WordPress que é o software que

a gente acabou de instalar ele já fica no a Ok o que a gente vai fazer agora é modificar este layout para ficar da forma que a gente quer para você logar lá dentro do painel do WordPress que é o painel que a gente vai usar agora para criar o nosso site ó você vai vir aqui no seu domínio vai colocar barra wp-admin E aí você vai pra página de login Sempre que você quiser é só colocar isso WP-admin depois da Barra que você vai cair aqui nessa página Ok se você por um acaso tiver

esquecido o seu login senha né tiver colocado uma senha aqui esqueceu você vai conseguir logar aqui dentro da hospedagem né vem aqui em hospedagem clica aqui clica aqui aí você vai clicar aqui em WordPress visão geral e aí você vai clicar aqui em painel administrador Tá vendo que a gente vai logar aqui agora vou mostrar para você quando log caímos aqui neste painel vendo essa Barrinha preta aqui do lado e significa que estamos logados dentro do site tá então se você clicar aqui em painel administrador a Hostinger vai te logar lá dentro do site você

vai cair bem dentro desse painel aqui que é a mesma coisa que acontece se você logar aqui direto pelo site tá vendo ela te trouxe para cá E aí se você esqueceu a senha você vem para cá E aí você vem aqui em usuários todos os usuários vem aqui no seu tá vendo que é o seu usuário administrador clica em editar e Altera a sua senha só se você não lembrar da senha se você tiver colocado uma que saiu errado lá e você não lembra OK aí você vai vir aqui nova senha definir nova você

gera uma aqui ou então usa essa aqui mesmo e clica em atualizar perfil aí agora você vai ter uma nova senha e vai conseguir logar normal sem precisar passar lá pela Hostinger mas a sua senha tiver Ok sempre que for logar é domínio barra WP traço admin. Beleza agora que já instalamos nosso WordPress vamos fazer alguns ajustes né Vamos configurar a primeira coisa que a gente vai mudar Vai ser o tema Então vamos vir aqui em aparência temas WordPress já vem com três temas instalados os temas são como se fosse as configurações do nosso celular

então por exemplo o celular da Apple tem o sistema operacional iOS os outros tem o sistema Android sabe então é como se fosse isso a gente vai instalar o sistema operacional do nosso WordPress e a gente precisa só de um então esses que estão aqui sem usar a gente pode clicar em cima dele clicar em excluir e clicar em Ok e deixar apenas o que a gente tiver usando tá só que não é esse que a gente vai usar a gente vai usar um outro a gente vai clicar aqui em Adicionar novo tema o tema

que a gente vai usar ele não fica aqui dentro do WordPress você precisa entrar dentro do site Croc boock é gratuito tá essee tema que a gente vai instalar entra dentro do site Croc boock bxa aqui até o final aí vai ter aqui ó produtos free aqui ó free produtos vai clicar aí aqui vai ter cava tem vai clicar em download aí vai ser feito o download aqui na sua máquina assim que ele tiver concluído Você vai clicar aqui né em enviar tema vai aparecer um lugar para você colocar o arquivo Você vai clicar pegar

o o arquivo que Você acabou de baixar no seu computador e vai clicar em instalar e ativar ó Aí clica aqui em ativar pronto esse outro aqui que a gente não tá usando mais a gente pode clicar em cima dele e clicar em excluir ó sempre que você passar o mouse aqui em cima do nome vai ter visite o site você consegue clicar com o botão direito e abrir aqui só para poder abrir uma nova guia tá vendo ainda tá o antigo mas recarrega de novo ele vai limpar o cach né vai limpar as configurações

anteriores e você vai conseguir ver ó já mudou para essa cara essa aqui é a cara do tema novo que a gente instalou e a gente vai configurar ele se por acaso o seu estiver em inglês você pode vir aqui em configurações geral aí aqui vai ter idioma ó idioma do site e você troca aqui pro português do Brasil ou pro idioma que você quiser tá Às vezes quando a gente escolhe mesmo assim ele não vem com o idioma que a gente quer às vezes dá algum bug Então você consegue mudar por aqui ok também

aqui a gente vai configurar a descrição do nosso site a descrição o nome que aparece depois do título Então tá vendo que aparece ali ó descomplicando sites um tracinho e aprenda a criar sites WordPress Então esse texto que tem depois do traço é o que fica aqui então a gente vai colocar a descrição do nosso site aqui eu vou colocar assim o que é importante para você é importante para nós aqui você consegue alterar o formato da data se você quiser eu vou deixar assim ó no estilo brasileiro e vou clicar em salvar Pronto agora

a a gente vai pro passo dois e o primeiro passo vai ser criar as páginas Então a gente vai vir aqui em páginas todas as páginas o WordPress já vem com duas páginas padrões esse página de exemplo que a gente pode clicar e clicar aqui na lixeira é assim que a gente faz para escluir uma página clica aqui e pronto ela já foi parar lá no lixo essa de políticas de privacidade a gente pode deixar vamos só clicar aqui em edição rápida e mudar aqui ó de rascun para publicado e atualizar E aí agora a

gente vai vai adicionar uma nova página fechamos aqui vamos dar o nome de home para a página Essa vai ser a página principal que é a página que vai aparecer quando a gente carregar o site tá aí você vai clicar aqui em cima em publicar e em publicar de novo são duas vezes sempre que for criar uma página clica duas vezes tá vamos clicar aqui no Símbolo do WordPress sempre que você clica no símbolo você volta aqui pro painel tá vamos criar a página blog agora clica e vamos colocar a página blog se você não

quiser um blog no seu site não precisa criar eu acho muito interessante ter Porque quanto mais conteúdo quanto mais informação você tiver no seu site além de te ajudar a converter mais vai te ajudar a aparecer nas primeiras posições do Google porque o Google ele gosta de entregar pra pessoa que tá pesquisando o mais certo possível daquela informação que ela quer então ele entende que sites que tem um blog são portais de informação então é mais fácil de você ser encontrado nas primeiras posições e hoje em dia com inteligência artificial você consegue escrever artigos muito

legais inclusive esse esses que eu vou te mostrar aqui eu mandei o chat de GPT escrever tá ó vou clicar em publicar duas vezes pronto volto aqui no WordPress se você acessar aqui a página home ou as outras páginas não tem nada é assim mesmo tá a gente ainda não criou Pronto agora nós vamos começar a criar o layout aqui das nossas páginas ó primeiro nós vamos instalar os plugins que a gente precisa vamos vir Aqui em plugins Adicionar novo um plugin é assim pessoal assim como o tema que a gente instalou é como se

fosse o sistema operacional que nem tem no no nosso celular os plugins vão ser como se fosse aplicativos que atribui funções que o WordPress não tem por exemplo seu celular não vem com banco você não consegue acessar uma conta né você precisa instalar um aplicativo de banco para funcionar mesma coisa aqui WordPress não vem com criador de páginas excelente que nem o que a gente vai usar que é o Elementor então a gente precisa instalar ele todo plugin e temas também tem função paga e função gratuita aliás todo não tem alguns que são 100% grátis

Mas enfim esse do Elementor ele tem uma parte grátis uma parte paga a gente vai usar só a parte grátis dele tá não vamos pagar por mais nada e neste tutorial para instalar um novo plugin você vem aqui na lupinha escreve o nome do Plugin ou então você pode vir aqui em populares tá que o Elementor ele fica aqui em mais usados tá vendo ó é esse aqui Elementor Website a gente vai instalar e depois ativar o Elementor é o sistema que a gente vai criar as nossas páginas ele é um criador de página pronto

Aqui você pode tá vendo aqui em cima ó daqui para cá você pode pagar deixar só WP-admin para voltar aqui pra página inicial aí agora a gente vai fazer a primeira configuração do layout que é a configuração padrão do tema Então a gente vai vir aqui em modelos modelos salvos tá vendo que aqui tem todos a gente vai clicar em todos tem aqui kit padrão né o kit padrão são as configurações que determinam o estilo das características do site então o tema que a gente escolheu que é o cava ele tem as configurações padrões dele

ó você pode perceber que as cores dele são esse azul claro esse tipo de fonte aqui tá vendo Então com essa configuração aqui do Elementor a gente Altera isso a gente deixa do jeito que a gente quiser então em vez de as nossas fontes e cores serem essas aqui a gente consegue colocar as fontes e cores que a gente quiser então aqui n kit a gente vai clicar em editar depois em editar com Elementor aí vai abrir a abinha do Elementor se aparecer um popup aqui você pode clicar em OK tá aí você vai vir

aqui em cores globais tá vendo ele já aparece aqui pra gente ó como que vai ficar todas as cores do site e todas as fontes Do site aí eu já tenho anotado aqui as cores que eu estou usando nesse projeto tá tem vídeo aqui no canal te ensinando a criar paletas de cores te ensinando como combinar cores que é bem legal para facilitar para você criar um layout bem bonito pro seu projeto Tá eu vou deixar esse vídeo no card na descrição ó a cor principal que que eu vou usar vai ser esse azul escuro

Então vou copiar o código da cor tá vendo tem as os quadradinhos é só você clicar cá ou você pode arrastar aqui mesmo vai arrastando ó de um lado pro outro aqui também você pode ir arrastando e encontrando a cor que você quer ou se você souber o código da cor você clica e tem aqui esse campo para você colar a cor estava errada é essa cor aqui então vamos lá vou copiar a cor aqui de novo e vou colar a cor certa que é essa Mais Escura o secundário também vou colocar essa cor azul

no texto vou deixar essa cinza mesma e na cor de destaque eu vou deixar esse Dourado tá para ser as cores de link botão e tudo mais vou criar também cores personalizadas Então vou adicionar uma cor aqui vou mudar o nome dela tá colocar Branco só para poder já ficar lá selecionado eu posso mudar lá você vai ver pra Cor que eu quiser mas eu já deixo aqui as cores pré-determinadas para eu não ficar colocando o código da cor toda hora posso só clicar em cima da cor então vou clicar em branco a eu vou

selecionar o branco aqui mesmo arrastar bem aqui para cima ó e também vou criar a cor cinza claro o o que é o nome e aqui eu vou colocar o código da cor que é esse aqui pronto atualizar e pronto agora a gente clica nessa setinha aqui em cima de voltar vamos clicar aqui em cima em Fontes globais e Vamos alterar as nossas Fontes ó por enquanto as fontes São essas a fonte primária cliquei aqui em cima do lapizinho Sempre que você quiser editar alguma coisa em cima do lápis tá vou escolher essa fonte aqui

que chama krial ó a família da fonte a gente escolhe aqui aparece uma lupinha pra gente escrever ver aí que eu quero é essa questrial tamanho 47 peso 600 né pronto o secundário vai ser tamanho 22 peso 600 e questrial também aliás é 19 o de texto vai ser tamanho 15 fonte nunito peso 500 ó tá vendo você consegue acompanhar aqui a alteração e o destaque vai ser questrial 15 ó questrial 15 peso 600 peso a espessura a grossura tá pronto eu vou criar uma personalizada aqui que é um subtítulo dois ó cliquei n em

adicionar estilo vou colocar sub do e vou mudar aqui para questrial 22 peso 600 tá vai ter dois tipos de subtítulo pronto vou clicar em atualizar agora eu vou voltar aqui nos botões também já vou deixar configurado só que a gente não vai conseguir ver o raio da borda né o arredondamento vou deixar 30 para ficar arredondado e a cor de fundo tá vendo que tem aqui ó tipo de fundo cor aí eu vou pegar tá vendo quando eu clico aqui no mundinho se tem coisas definidas que nem eu fiz a as cores aí eu

consigo pegar aqui tá vendo ó aí eu vou pegar esse esse dourado e a cor que é a cor do texto eu vou clicar e vou pegar o branco aliás vou clicar e vou pegar o azul pronto e a tipografia eu vou clicar e vou escolher essa de destaque pronto vou clicar em atualizar aí eu posso clicar aqui no X para fechar aí agora nós vamos criar o nosso menu e o nosso roda pé pra gente criar o nosso menu a gente tem que vir aqui em aparência menu e primeiro eu vou te explicar o

que que é menu menu são esses links que ficam aqui tá vendo que a gente consegue Clicar e ir pra parte do site que a gente quiser então para poder criar esse conjunto de links a gente tem que criar isso que chama menu que fica aqui em aparências aí aqui a gente vai dar o nome pro nosso menu porque a gente consegue criar vários aqui no site se a gente quiser eu vou colocar o nome de menu principal pode ser o nome que você quiser vou clicar em criar menu aí tá vendo que aqui tem

a as páginas a gente pode selecionar as páginas que tem no site ó e clicar em adicionar menu elas já ficam aqui é só a gente mover para elas ficarem na ordem que a gente quer esses outros links do menu não são páginas são links âncoras né que a gente clica e eles vão pro lugar onde é que a gente quer que ele fique então pra gente criar eles a gente tem que colocar aqui em links personalizados aí Aqui é onde vai ficar o texto que é o que vai aparecer aqui no menu tá vendo

que nem aqui tem sobre né então eu vou escrever aqui ó em texto escrever sobre e aqui eu vou colocar o link do meu site ó o link do meu site e com a barra tá tem que copiar com a barra aqui no final e aí depois da Barra eu vou colocar hashtag e o mesmo nome que eu coloquei aqui que é Sobre só que aí você coloca minúsculo e sem nenhum acento nem nada tá ó sobre aqui você pode escrever com acento pontuação e tudo mais aqui não aqui é só minúsculo sem acento sem

pontuação Aí eu clico aqui em adicionar o menu aí aí ele já cai para cá aí eu vou criar outro que vai ser áreas de atuação aí eu vou colar o link do meu site também colocar hashtag tá vendo vou colocar areas de atuacão sem aceito vou clicar em adicionar menu Pronto agora é nossa equipe né então vou escrever equipe se você tiver equipe se não tiver pode ser outra outras coisas que você queira colocar no site outras sessões você quiser fazer igualzin aqui depois mudar tem como só vir aqui e mudar o nome também

tá então vou colar o link do meu site # equipe adicionar blog já tem né e agora contato vou escrever contato link do site # e contato e adicionar o menu aí eu vou só mudar o blog aqui para antes do contato fiz todas as alterações agora eu vou clicar em salvar o menu Pronto agora eu vou criar o layout do meu meu menu tá eu criei só os links só o que a gente consegue fazer para para chamar o site ó se eu vier aqui no site eu não vou conseguir ver esse menu se

eu Determinar ele aqui ó como como menu principal e adicionar novas páginas automaticamente eu vou salvar aí ele já vai estar aparecendo aqui em cima tá vendo ó tá aparecendo aqui só que isso não vai adiantar nada porque a gente vai fazer o layout dele é com Elementor tá então a gente criou só isso aqui só os nomes para clicar o layout dele bem bonito igual está aqui a gente vai criar com Elementor tá então Ó pra gente criar o layout dele que é o visual a gente precisa instalar outro plugin que é gratuito também

então vamos vir aqui em plugins Adicionar novo Vamos pesquisar por este nome Elementor header e footer escreve igualzinho senão não aparece tá então Ó olha bem certinho aqui para ver se o nome tá certo aí vai aparecer esse plugin Você vai clicar em instalar e depois em ativar pronto agora a gente vai passar o mouse aqui em cima de aparência aí já vai ter aqui Elementor header e footer vamos clicar vamos clicar em adicionar um novo aqui você pode clicar em Skin que é pular aí aqui a gente vai dar o nome aqui pro nosso

modelo meu vou chamar menu tá ou você pode colocar um nome de modelo de menu coloca o nome que você quiser só pra gente identificar aí Aqui a gente vai dizer qual que vai ser o tipo né vai ser um cabeçalho ó isso aqui os links se chamam menu agora o layout de tudo que tem nessa parte aqui de cima se chama cabeçalho tá então o que a gente vai criar aqui é um cabeçalho aqui onde que vai ficar esse cabeçalho né a gente vai colocar ent o Website que é em todo o Website né

todas as páginas e vamos clicar em publicar Pronto agora a gente pode clicar aqui em cima e editar com Elementor pra gente criar vamos clicar pegar um contêiner que tem uma setinha pro lado vamos clicar aqui em avançado em padding ou preenchimento que é a mesma coisa a gente vai colocar 10 aí vamos vir aqui nesse quadradinho onde tem a biblioteca ó todos os widgets do Elementor todos os itens visuais do Elementor fica aqui a gente vai arrastar uma imagem para cá vamos ir em resolução da imagem colocar completo vamos clicar em cima dela E

aí fica disponível aqui pra gente arrastar uma imagem para cá ou clicar aqui e selecionar do nosso computador a imagem da Nossa logo como eu falei todas as imagens que eu tiver usando aqui no site vão ficar disponí para vocês no nosso material de apoio o link do Material de apoio tá aqui na descrição do vídeo tá mas se você quiser aqui dentro do site também você consegue só clicar aqui com o botão direito e salvar imagem como que aí ela já vai salvar aí no seu computador Ok então Ó vou clicar aqui em selecionar

arquivo vou pegar a imagem da logo que eu quero clicar em Abrir clicar em selecionar e clicar em atualizar pronto aí vou clicar aqui na biblioteca pra gente criar uns menu a gente vai precisar instalar outro plugin e a gente vai usar ele em outras partes do site a gente vai voltar aqui no painel administrativo do WordPress né Lembrando que para voltar é só colocar seu link barra wp-admin quando você tiver logado você vai cair aqui no painel vamos em plugins Adicionar novo Vamos pesquisar pelo plugin Royal AD esse aqui vamos clicar em instalar e

depois em ativar alô e continue Pronto agora vamos voltar lá no nosso editor do Elementor podemos recarregar a página lembre-se de clicar em atualizar aqui primeiro tá se você não atualizar pode acabar perdendo o que você já fez então fiza primeiro recarreguei agora eu vou volar aqui na biblioteca né seus quadradinhos vou escrever menu esse Edit Aqui ó nave menu com R rzinho Azul vou arrastar para cá também vou vou vir aqui na biblioteca vou pegar o idet de redes sociais que é esse aqui vou arrastar para cá se você não tiver conseguindo arrastar para

lá você arrasta no meio depois pega o menu e arrasta para cá pronto aí eu vou clicar aqui nesse contêiner principal quando eu falar contêiner principal é esse aqui tá esse de cima que fica o conteúdo principal Onde fica tudo aí eu vou vir aqui estilo tipo de fundo vou clicar clicando aqui no mundinho vou selecionar essa cor azul escuro que eu tinha configurado agora eu vou clicar aqui no contêiner de novo vou vir em layout e eu vou mudar para grade que é uma configuração que eu quero ter mas ela não tá aparecendo aqui

então a gente tem que voltar lá no painel administrativo e ativar Vamos ir em Elementor configurações recursos aí vai ter aqui ó container grade vamos ativar Pode ser que seja escrito em inglês pode ser que seja escrito Grid contêiner também você ativa e salva atualiza tá aqui para não perder nada e clica em recarregar pronto vou vir aqui no contêiner aí agora tem aqui largura do contêiner eu vou mudar para grade aí agora eu Consigo controlar quantas colunas quantas linhas eu quero E aí aqui em linhas eu vou tirar deixar um aqui em colunas eu

vou mudar aqui ó pra pro lapizinho aí tá vendo que tem um FR é o tamanho de cada uma dessas as colunas eu vou mudar aqui para esse do meio que é onde que fica o meu menu para 3 FRS que aí eu quero que ele fique mais largo tá aí agora vamos configurar o layout do menu vamos vir aqui tá vendo que quando a gente passa o mouse fica um tracinho em cima eu quero que fique dois tracinhos assim isso chama Pointer aí pra gente mudar isso a gente vem em menu item aí vai

ter aqui ó Hover effect que é a função de passar o mouse aí a gente vai mudar para Double Line que é essa aqui ó Double line tá vendo é quando a gente passar o mouse vai ter dois tracinhos tem outros aqui também que você pode escolher esses outros aqui são grátis você pode escolher testar tá aí vai ficar assim agora eu vou vir aqui no estilo a cor do texto vou mudar para branco e a tipografia da fonte eu vou mudar para essa de destaque mas vou vir aqui e vou mudar o peso para

400 para ficar menor pronto aqui Rover né que é ação de Passar o mouse eu vou mudar essas duas cores para Dourado para mudar tanto a cor da letra quanto a cor desse traço OK aí eu vou vir em conteúdo vou vir aqui em Aline né alinhamento vou mudar aqui pra direita para ele ficar alinhado para cá acho que eu vou voltar aqui estilo em tipografia vou aumentar para 500 tô achando que ele tava muito fino aqui e tamanho 16 Pronto agora eu vou vir aqui nas redes sociais aqui a gente consegue mudar só clicar

aqui em cima e clicar em cima de ícone que você consegue escolher o ícone só você pesquisar Tá eu vou colocar por exemplo Instagram aí nesse aqui eu vou mudar o ícone para WhatsApp e Facebook né que é o que já estava aí eu posso alterar a ordem aqui também se eu quiser tá vou deixar o do Instagram primeiro depois do WhatsApp que são mais usados aí aqui a a forma que a gente quer que fique eu vou querer que fique círculo aqui em estilo cor eu vou mudar para personalizado aí aqui em cor primária

eu vou escolher Branco cor secundária eu vou escolher branco também e aqui na cor primária que é do branco eu vou arrastar essa setinha para cá Essa setinha de cima é da cor e essa de baixo é da Transparência tá então vou arrastar para cá tá vendo para ficar um branco transparente aí eu vou vir aqui em borda tipo de de borda eu vou colocar sólido aqui na largura da borda eu vou deixar um e a cor vou deixar essa mesmo aí aqui na cor da borda eu vou deixar de dourado e na cor primária

eu vou deixar de dourado ele vai ficar assim quando a gente passar o mouse S aqui ne ação a passar o mouse eu vou deixar grow que é crescer tá vendo da gente passar o mouse ele vai crescer vou voltar aqui em Icone e vou diminuir o tamanho do meu ícone vou deixar tamanho 20 Pronto agora eu vou clicar aqui no cont aqui em cima vou vir aqui em alinhamento dos itens né vou deixar eles alinhados ao centro ó porque estamos para cima outras para baixo né E aqui na minha logo eu vou vir aqui

em estilo e vou configurar a largura dela ó deixar mais ou menos tamanho 70 vou vir aqui em conteúdo vou deixar ela alinhada aqui para a esquerda ó vai ficar assim tá vendo que tá tendo um espaço aqui embaixo a mais que não era para ter a gente tem que vir aqui no contêiner e vira aqui onde tem fluxo automático e mudar para Colunas pronto aí não vai ter mais aquele espaço tá uma configuração Zinha que eu fiz aqui na logo é que se a gente passar o mouse tá vendo que ela diminui a a

opacidade então a gente vem aqui em estilo ao passar o mouse tá estilo aqui na L clica no lapizinho estilo ao passar o mouse e aqui na opacidade eu posso controlar por aqui ó tá vendo eu diminuí bem pouquinho aqui dela só para dar um efeito aí a gente vai colocar um link aqui na nossa logo de modo que quando a pessoa clicar em cima da logo ela volte pra página inicial que é a página home Então aqui tem link a gente vai selecionar aqui URL personalizado e vai pegar a página home ó só você

escrever que vem a página home aqui aí você vai colocar aqui ou você pode colar o link também tá vamos clicar em atualizar pronto se a gente acessar o nosso site agora a gente vai ver que já tem o nosso menu aqui funcionando vou clicar aqui em home ó ele já tá funcionando só que se você perceber tá vendo que tem um link esquisito aqui em cima index.php a gente vai corrigir isso agora vamos entrar aqui dentro do painel Vamos ir em configurações links permanentes e vamos mudar o link para Nome do post e vamos

clicar em salvar ó voltando aqui no site Pronto agora já tá o nome da página certinho né se a gente clicar em blog também já tá o nome da página certinho beleza voltando aqui para nosso menu agora a gente vai configurar a parte do mobile que são configurações para dispositivos móveis como celular e tablet tá então a gente vai clicar aqui nesse ícone aí a gente vai selecionar o celular né que é no mobile aí vamos clicar aqui nesse contêiner vamos fazer aqui as configurações das colunas ó vamos clicar aqui e clicar no lapizinho aí

a gente vai colocar 3fr e um FR porque essa coluna aqui ocupar como se tivesse ocupando duas colunas a mesmo tempo e essa aqui uma coluna só tá E aí a gente vai vir aqui fluxo automático Vamos mudar para colunas de novo e aí nós vamos vir aqui neste item de redes sociais vamos vir em avançado vamos vir em responsivo e vamos desativar ele para tablet e para celular tá para aparecer aqui pra gente somente a logo e o menu Então a gente vai vir vamos voltar aqui no contêiner aí aqui em linhas a gente

vai uma linha vamos clicar aqui em cima da nossa logo vamos clicar Em estilo largura e vamos deixar o tamanho dela de 100% eu saí no meio da edição aqui do menu você tiver feito isso também precisado salvar e voltar depois só você acessar aqui o site Tá colquer parte aqui do site passar o mouse ali em cima vai ter menu aí você clica em cima de menu para voltar aqui para editor do Elementor Vamos colocar no mobile de novo só clicar aqui esse ícone de modo responsivel e clicar no celular pronto vamos clicar aqui

em cima do contêiner aqui onde tem colunas a gente vai apagar e deixar só três colunas aqui embaixo em fluxo automático a gente vai mudar para coluna e vamos vir aqui nesse item das redes sociais e vamos tirar ele não queremos que ele apareça no no celular então vamos vir aqui em avançado responsivo vamos deixar aqui ocultar no tablet e ocultar no celular para ele não aparecer vamos clicar em atualizar aí quando a gente oculta tá vendo que ele fica meio transparente indicando que ele não está aparecendo no modo celular quando a gente fecha essa

abinha que a gente consegue ver como realmente está ficando ó assim a gente consegue ver tudo que tá no editor e assim a Gente consegue ver como realmente tá ficando tá vendo e aí assim que vai ficar só com a logo e o menu aí a gente vem aqui na logo vamos vir aqui n estilo diminuir um pouquinho o tamanho dela e vamos fechando e vendo como que ela vai ficando aqui de tamanho ó assim tem o tamanho legal agora vamos modificar o menu vamos clicar nele Vamos ir em estilo aqui em toget buttle aqui

na cor Vamos mudar para branco Ó já mudou ali e na cor de borda aqui ó borda widget a gente vai colocar um que ele vai ficar com a bordinha Branca aqui tá vendo agora nós vamos clicar aqui em Rover Rover é a ação de passar o mouse Tá vendo quando a gente passa o mouse vai ficar azul Então vamos mudar para esse dourado aí quando a gente passar o mouse vai ficar assim Dourado ó por enquanto tá ficando assim quando a gente clica ele abre o menu assim menorzinho a gente vai vir aqui em

conteúdo vira aqui em menu mobile aí aqui a gente consegue controlar onde que a gente quer que fique tá vendo o texto a gente vai deixar aqui no meio aqui o toget align a gente pode deixar o ou para lá ou para cá aí a gente só vai conseguir ver essa diferença dele para lá ou para cá quando a gente Deixar ele assim fechado e a gente consegue ver ó assim ou assim aí a gente vai conseguindo ver a diferença porque aqui ele vai ficando só no canto né aí pra gente deixar ele mais largo

a gente vai clicar aqui em aqui onde tem full wided né largura total e vamos deixar Custom wided que aí ó tá vendo ele já fica um pouco mais largo aí a gente consegue controlar essa largura por aqui ó a gente diminui um pouco para ficar de um tamanho que fique do tamanho da palavra da palavra maior que tiver mas não fique passando muito porque senão tá vendo que aqui a embaixo abriu uma barrinha ele fica deslizando o menu pro lado o site inteiro pro lado então é interessante que ele não fique assim para não

ficar assim tá vendo ó deslizando a tela aí a gente vai vir aqui ó em drop Down align e vamos deixar aqui na direita ó que aí quando a gente abrir ele desce aqui para a direita de onde que ele está e não aparece aquela Barrinha embaixo que fica bagunçando o site tá então lembre-se Ó aqui no drop Down Aline tem que ficar à direita aqui em item Aline no centro e aqui em to Aline no centro também tá aqui tem que ficar Custom widget e eu deixei tamanho 205 Mas você pode aumentar se você

quiser que fique maior aqui Voltamos no estilo aqui n mobile menu ni Folks né que é também é ação de passar o mouse aqui de baixo a gente vai mudar essa cor azul pra cor dourado ó aí quando a gente passar o mouse vai ficar assim aí vamos fechar pra gente ver ó fica assim quando a gente passa o mouse ele fica assim pronto vamos clicar em atualizar aí vamos mudar aqui para tablet só clicar aqui no tablet e ver como é que ele vai ficando vou clicar aqui no contêiner vou vir aqui em fluxo

automático vou mudar para colunas também e aqui em colunas a gente vai mudar para 1 FR e 3 FR PR ficar o espaço de uma coluna na logo e três colunas aqui no menu a gente vai clicar aqui em cima do menu vai vir aqui em espaço horizontal e vai diminuir o espaço dele entre os itens tá vendo para ele não quebrar a linha pronto ficou assim aí na logo a gente pode clicar em cima dela vir em estilo aumentar um pouquinho o tamanho pronto ficou assim podemos clicar aqui no menu vir em conteúdo e

deixar ele alinhado aqui pra direita para ele ficar mais para cá e beleza ficou assim o nosso menu no tablet tá aí vamos clicar em atualizar bom se a gente Voltar pro computador ele continua do jeito que a gente configurou porque cada cada telinha que a gente configura se a gente não excluir nada não mudar nada de lugar arrastando cada coisa que a gente configura só fica para aquele tipo de tela tá então não altera um não altera o outro e aí beleza tem essa função aqui também ó do menu ficar transparente em cima do

Banner e mudar de cor na rolagem mas a gente vai fazer isso depois quando a gente já tiver construído essa primeira página aqui tá ok então finalizamos o nosso menu agora vamos para o rodapé vamos pra criação do rodapé vamos entrar aqui dentro do painel vir em a aparência Elementor header footer builder vamos clicar aqui em Adicionar novo vamos dar o nome de roda pé pro nosso modelo vamos selecionar aqui opção de roda pé se tiver escrito em inglês no seu é footer aqui a gente vai escolher entry site e vamos clicar aqui em publicar

agora vamos clicar aqui em editar com Elementor e vamos começar a criar o nosso rodapé eu já tô com o outro modelo pronto aqui né pra gente ficar vendo e copiando os textos a aqui eu tenho 1 2 3 4 colunas né então eu vou clicar aqui Vou clicar em flexbox e vou pegar um flexbox que tenha quatro que é esse aqui vou clicar nele vou vir em avançado Vou colocar aqui 50 de padding padding é o espaço de dentro tá vou vir aqui no estilo tipo de fundo cor vou pegar essa cor primária que

é esse verde escuro vou clicar em atualizar vou vir na biblioteca vou pegar um Edit de imagem trazer para cá aqui em resolução da imagem vou deixar completo e vou selecionar a imagem da logo aí vou vir aqui em link né vou colocar URL personalizado e vou colocar o link da página home que é a página principal e vou clicar em atualizar agora vou vir aqui na biblioteca vou arrastar o edit de título para cá vou vir aqui né aí eu vou copiar esse título que eu tenho aqui que é se é importante para você

é importante para nós Vou colar aqui vou vir em estilo cor do texto vou mudar para esse dourado e vou mudar a tipografia ó Lembrando que para mudar como a gente configurou já fez as configurações padrões está aqui no mundinho se você não fez volta um pouco o vídeo vou pegar esse secundário vou diminuir o peso dele né ó cliquei no lapizinho aqui em peso vou diminuir para 500 vou vir em conteúdo e vou Deixar alinhado ao centro vou voltar na biblioteca vou pegar outros ícones de redes sociais arrastar Aqui para baixo vou configurar esse

aqui para Instagram lembrando pessoal acho que eu esqueci de falar isso lá em cima tá aqui estão os ícones para você colocar o link para a pessoa clicar aí para rede social sua é aqui tá vendo ó o link tem a caixinha aqui então por exemplo ó tenho aqui o meu Instagram né descomplicando sites inclusive se você não me segue vai lá me seguir eu pego o link e colo aqui mesma coisa com o Facebook né Você vai colocar o link do seu Facebook aqui e também aqui a gente vai colocar o WhatsApp né aí

Aqui você pode ir em qualquer site gerador de link você digitar no Google gerar link do WhatsApp aí vai gerar o link você cola o link aqui OK beleza vamos ir aqui em forma vamos deixar círculo Vamos ir em estilo a gente vai mudar para personalizado aí aqui na cor primária a gente vai deixar desse mesmo verde escuro e a cor secundária que é a cor do ícone né a gente vai deixar de branco a a gente vai vir em tipo de borda vamos deixar sólido E aí aqui na cor da borda a gente a

gente vai deixar de dourado aí na largura da borda a Gente vai deixar um e aqui no ícone ao passar o mouse a gente vai mudar para grow né de forma que ele aumente quando a gente passar o mouse e aqui na cor primária a gente vai mudar para dourado e aí vai ficar assim e vamos voltar aqui em ícone e no tamanho dele Vamos diminuir pronto vamos deixar assim a minha logo também eu vou clicar aqui em cima de estilo e vou diminuir um pouco o tamanho dela vou clicar em atualizar agora vamos fazer

essa paste aqui ó já vou copiar esse título aqui chamado institucional vou clicar aqui na biblioteca pegar no Edit de título arrastar para cá vou colar aqui deixar Centralizado vou vir aqui em tipografia e vou pegar essa tipografia secundário e vou vir na cor e vou pegar essa cor dourada na verdade eu posso pegar essa mesma configuração desse que tá aqui ó vou clicar aqui clicar em copiar clicar aqui com o botão direito clicar em colar estilo e aí eu vou clicar nele vou vir em conteúdo vou deixar ele em aliado pra esquerda vou só

deixar ele um pouco maior Então vou vou clicar vou vir em tipografia vou deixar tamanho 20 aí eu vou vir na biblioteca vou pegar o Idi de lista de ícones vou arrastar para Cá ele tem que ficar bem embaixo desse vou vir aqui em estilo na cor do texto eu já vou mudar a cor para branco pra gente conseguir ver né E aqui em conteúdo vou excluir todos os itens Vou deixar só um vou abrir ele e excluir o ícone né Eu quero que fique só o texto tá então ó para mudar o texto é

só vir aqui nessa caixinha apagar e aí a gente vai escrever a gente vai fazer como se fosse o menu ali em cima tá vendo ó aí vamos escrever todos os itens que tem no menu que é home sobre nós equipe Então vou escrever ess aqui ó home aí aqui embaixo no link eu vou pesquisar pela página home quando ela aparecer aqui eu vou clicar a eu vou duplicar ó quando eu clico aqui eu duplico abro aí vou mudar para sobre nós como eu já tenho o menu configurado né Ó vou primeiro atualizar vou voltar

ali pra minha minha página inicial Tá vendo aí eu já tenho o menu aqui configurado eu posso só copiar o link que tá nesses menus por aqui então clico com o botão direito e clico aqui em copiar endereço do link tá vendo que aí eu vou colar certinho ó tá aí eu clico aqui em duplicar agora é área de atuação E aí eu venho Clico com o botão direito Copi endereço do link venho aqui ó excluo esse E substituo aí depois blog que eu pulei um né tinha que ser equipe Mas tudo bem aí excluo

substituo equipe que faltou e por último contato faço aqui contato copio com botão direito excluo e substituo pronto sempre clicando aqui em atualizar para não perder nada ok aí beleza fizemos aqui vamos fazer essa parte de áreas de atuação vamos clicar em copiar aí aqui a gente clica aqui em cima desse título institucional vamos clicar em duplicar arrastamos ele para cá clicamos em cima desse duplicamos e arrastamos ele para cá também aí a gente vai mudar o título para áreas de atuação né E aí eu vou excluindo E aí aqui eu vou aproveitar que já

está aqui vou copiando cada um doss títulos e colando lá né aí aqui é a hora de você colocar suas especialidades o link que você vai colocar vai ser todos esse aqui da área de atuação então vou clicar copiar o endereço do link vou colar ele aqui e aí todos vão ser o mesmo né que São Cares Daí vão levar pro mesmo lugar então vou colocar aqui né Direito Civil direito da família aí você vai fazendo a mesma coisa vem e substitui clica Aqui em duplicar vem e substitui o título Tá eu vou fazer isso

em todos que eu tenho aqui pronto agora podemos clicar neste Vamos ir aqui em estilo espaço entre os itens Vamos aumentar para três aí podemos clicar com o botão direito copiar clicar nesse e colar o estilo para ele aumentar o espaço entre eles também agora vamos para essa parte aqui ó que é a parte de contato vamos clicar aqui nesse título clicar em duplicar arrastar para cá clicar aqui nesse duplicar arrastar para cá e aqui vamos Excluir todos vamos começar do início aí aqui eu coloquei um telefone fictício tá telefone e-mail é tudo fictício aqui

só para ensinar você vocês no projeto E aí no seu caso você vai colocar o telefone Real seu né o seu telefone de contato aí é só você vir aqui né mudar excluir aquele título que tava colocar E aí aqui vamos usar ícones então vou clicar aqui em cima vai abrir a biblioteca de ícone do Elementor e eu posso pesquisar os ícones por aqui aí você pesquisa os ícones em inglês tá que no caso é fone com ph aí eu vou pegar este fone aqui aí agora eu vou Duplicar pro WhatsApp vou deixar o mesmo

número né vou clicar no ícone e procurar o ícone de WhatsApp que é este vou duplicar e aqui eu vou colocar o e-mail contato @ Zeus advogados.com aqui você coloca o seu e-mail Profissional ou o e-mail que você está acostumado a usar Eu recomendo que você faça um e-mail profissional que é esse e-mail assim que tem o link aqui do seu site Tá vendo Depois do arr tem vídeo aqui no canal ensinando você criar um e-mail profissional com seu domínio tá aí vou duplicar vou colocar agora o endereço ó o endereço p o endereço fictício

aqui também eí no seu caso vai colocar endereço se você tiver um negócio físico né Beleza não está aparecendo os ícones Porque eles estão com a mesma cor do fundo a gente vai vir aqui em ícone e a gente vai vir aqui n ícone a cor do ícone Vamos mudar para branco e em tamanho do ícone Vamos aumentar vai ficar assim espaçamento Vamos aumentar um pouquinho ah tá eu tinha esquecido de mudar os icones então aqui eil eu vou clicar e vou mudar para envelope que é o Iconezinho de e-mail e nesse aqui eu vou

mudar pro ícone de mapa que É esse aqui pronto vou em atualizar vou vir aqui no estilo espaço entre os itens vou aumentar um pouco mais Ah eu tinha colocado a cor do ícone ali de dourado Então vou mudar essa cor para Dourado pronto e cliquei em atualizar Beleza agora vamos criar essa parte aqui de baixo ó vou copiar esse texto vou clicar vou pegar um flexbox container vou pegar esse aqui que tem uma setinha pro lado vou vir aqui avançado padding ou preenchimento né Colocar 10 vou vir em estilo tipo de fundo pegar esse

esse azul e vou diminuir um pouco a opacidade dele bem pouquinho só para ele dar uma diferença de cor aqui tá vendo Beleza vou pegar esse título aqui duplicar arrastar ele aqui para baixo aí vou copiar esse texto aqui é para você colocar né o seu copyright então aqui você vai mudar pro nome do seu projeto né de sua empresa deixa o ano aqui que você tá agora e deixa todos os direitos reservados eu vou duplicar isso e aqui eu vou colocar política de privacidade né É muito importante que tenha políticas de privacidade no site

então vou colocar aqui l de privacidade e a gente vai colocar um link aqui pra página de políticas de privacidade que tem no site ó começa Escrever políticas que ela aparece aqui vamos clicar em atualizar aí eu vou clicar nesse vou vir em estilo a cor eu vou deixar Branco a tipografia eu vou deixar essa de texto vou clicar aqui com botão direito copiar clicar com o botão direito colar o estilo vou vir aqui no contêiner vou vir em layout aí aqui em justificar conteúdo eu vou deixar esse aqui ó espaço entre que é para

V ficar de um lado e o outro do outro beleza vou clicar em atualizar Ó ficou assim agora a gente vai clicar aqui em modo responsivo Vamos colocar aqui no celular e vamos configurar só vai precisar da gente vir aqui nesse contêiner vir em avançado e o padding Né que é o preenchimento aqui de dentro Vamos mudar para 20 para não ficar muito espaço o restante do texto tá ok aí esse aqui a gente vai Vamos colocar eles alinhados ao centro aqui notificar conteúdo a gente vai deixar centro vamos clicar em atualizar E aí beleza

aqui no tablet a gente vai mudar também aí aqui no tablet a gente vai vir aqui no contêiner vamos vir em avançado vamos deixar 20 de padding aí aqui a gente só vai precisar mudar alguns tamanhos aqui na logo eu vou aumentar um pouquinho o tamanho Dela vou deixar 100% mesmo aqui nesse título vou vir em estilo em tipografia vou diminuir o tamanho dele para não quebrar tanto a linha aqui no caso do tablet caso o seu esteja assim como o meu tá vendo que o e-mail ele está passando para cá a gente vai ter

que fazer algumas configurações para consertar isso porque senão ele tá deixando o site deslizando pro lado tá vendo tem essa Barrinha essa Barrinha não pode aparecer aqui embaixo Então vamos clicar aqui nele vamos aqui ícone estilo ícone né Vamos diminuir um pouco o tamanho e diminuir o espaçamento mesmo assim ainda tiver como está aqui a gente vai ter que dar uma diminuída no tamanho da da fonte Então vamos clicar aqui clicar em texto clicar em tipografia e diminuir o tamanho da fonte se a gente perceber que vai ficar muito pequeno e portanto desproporcional a gente

tem que voltar né pro pro tamanho que tava então aqui eu vou clicar no mundinho vou clicar nessa de texto e aí a gente tem que configurar mesmo o o layout da do Contender Então vamos clicar aqui em cima vou mudar aqui o layout para grade aí aqui em colunas a gente vai deixar quatro em linhas a Gente vai deixar uma aí V Vamos ir aqui em cada um dos contêiners de dentro tá vendo ó esses quadradinhos aqui ó cinza Esses são os contêiners de dentro vamos clicar nele aqui em largura do coner a gente

vai deixar em caixa ou em Box se tiver escrito em inglês no seu aí você pode clicar com o botão direito copiar clicar com o botão direito e colar o estilo em todas as outras Pronto agora a gente vai clicar nesse principal que é esse Rosa aqui de cima aqui em colunas a gente vai clicar n frr vai mudar pro lapizinho e aqui nesse último FR né Essa última coluna A gente vai alterar para dois para ele ter um espaço de duas colunas pronto que aí ele vai pegar aqui o espaço todo sem quebrar a

linha tá E aí a gente vem aqui nos ícones vem estilo tamanho dá uma diminuída no tamanho dos ícones aqui n título estilo tipografia aí diminuímos o tamanho do título também para não ficar tão quebrando a linha e aí o restante a gente pode deixar como está só os espaçamentos aqui que a gente pode dar uma diminuída Então vamos clicar aqui no contêiner principal nesse Rosa aí Aqui no espaço ó espaçamentos a gente vai desenc os valores ele vai tirar os espaços que tinha em entre as entre os contêiners tá vendo pronto aí vamos clicar

em atualizar Beleza vai ter dado uma bagunçadinha então a gente precisa ajustar só duas coisas primeiro a imagem aqui da logo se tiver ficado grande demais pode clicar nela vir em estilo e dar uma diminuída e atualizar e aqui no desktop né que é no computador você vem aqui no contêiner principal nesse aros aqui de cima vem aqui em colunas e muda para qu e vem em linhas e muda para uma aí vai voltar a ficar com a mesma proporção que esta antes Ok e slic em atualizar aí se a gente acessar aqui o noso

site de novo a gente vai ver tem o Men e o rodapé aqui embaixo isso em todas as páginas Beleza agora nós vamos começar a criar o layout da nossa página home pra gente editar a nossa página home a gente vai clicar aqui no menu em cima de home vamos clicar aqui em cima em editar página depois vamos clicar aqui em editar com Elementor só a primeira vez que a gente precisa fazer isso tá nas próximas vezes quando você for acessar o site ó vocês estando aqui em cima da home Você pode clicar direto em

editar com Elementor clicar aqui em cima de editar mesmo não é aqui embaixo não tá É aqui em cima que aí você já vai cair aqui no editor do Elementor novamente tá primeira coisa vamos ir aqui embaixo nessa engrenagem em configurações em layout da página a gente vai deixar em Elementor a largura total para assumir aquele título que fica aqui em cima agora A gente vai clicar em atualizar agora nós vamos fazer essa parte aqui do Banner tem vários vídeos aqui no canal te ensinando a criar banner essas imagens que estão aqui eu vou te

ensinar a criar nesse vídeo mesmo tá então a gente vai acessar primeiro o freepic o freepick é um site que é um banco de im imagens e artes tem várias imagens que são pagas e várias que são gratuitas também e você pode acessar tem imagens de todo tipo então eu vim aqui pesquisei por advogado e aí foi esta imagem aqui que eu usei tá Se tiver de verde assim você consegue baixar de graça se tiver com botão Amarelo você só consegue baixar Se você pagar tá então se tiver com botão Amarelo você procura outra que

não esteja aí você baixa essa opção aqui ó a large tá só você clicar Aqui que vai baixar no seu computador aí você vai acessar aqui o canva vai clicar em criar design tamanho personalizado Vamos colocar um tamanho de 1920 de largura por 650 de altura e vamos clicar em Criar novo design Pronto agora a gente vai arrastar para cá aquela imagem que a gente baixou fo essa aqui só arrastar do seu computador para cá agora a gente vai clicar em cima dela e clicar aqui embaixa em definir imagem como plano de fundo e aí

você pode clicar duas vezes em cima dela para você ir ajustando que eu quero que fique bem aqui este martelo né E lembrando que eu vou deixar todas as imagens já prontas lá no nosso material de apoio para você que fica aqui na descrição do vídeo ok mas eu tô te ensinando Porque se você tiver criando para outro tipo de projeto né que não seja de advogado e com outra paleta de cores também aí já vou te ensinar a fazer como que faz no seu aí a gente vai colocar um filtro de cor vamos clicar

em cima da imagem clicar em editar foto vamos vir aqui em D Tone Ó Desce aqui para baixo aqui vai ter efeitos você vai arrastar pro lado e vai ter D Tone se for pago aí para você essa função você paga tá Porque é muito barato o canva 34 por mês inclusive você pode ativar e depois cancelar compensa muito o canva ser o seu melhor amigo aqui pra criação dos designs Tá ok a gente vai clicar em cima desse aqui eu escolhi esse porque já é um filtro azul eu posso só modificar para ficar do

jeito que eu quero se a suas cores se aproximarem dessas outras aí você escolhe outra mas de qualquer forma que na cor você consegue tá vendo alterar pra cor que você quiser nessa cor aqui que é mais escura e que vai fazer as sombras aqui do nosso da nossa imagem eu vou colar aquela cor azul que é a cor que a gente tá usando no projeto e ela junto com esse azul que já está aqui vai deixar essa cor bem bonita aí eu vou clicar aqui em compartilhar e clicar aqui em baixar aí você clica

aqui em baixar novamente pronto aí nós vamos voltar aqui pro nosso editor né Vamos clicar aqui nesse mais clicar em flexbox e a setinha para baixo vamos vir em avançado Vamos colocar aqui 50 de padding Vamos ir em estilo clicar aqui em tipo de fundo e em imagem a gente vai clicar em enviar arquivo e vai arrastar para cá a imagem que a gente acabou de criar ó vamos arrastar ela para cá vamos ver Se que ela tiver aqui você pode alterar aqui em título para ficar mais amigável para se tá bom então aqui tá

vendo como design sem nome aí você pode escrever por exemplo banner home Zeus advogados para poder facilitar lá na busca no Google também ok aí você vai selecionar a imagem que você quer vai clicar em selecionar vai vir aqui e em layout altura mínima Vamos colocar 650 de altura tá vendo vamos voltar aqui para estilo aqui em tamanho a gente vai deixar cobrir para ele ficar esticado na tela toda vamos clicar em atualizar ó aí o banner vai ficar assim aí agora a gente vai colocar esse título aqui já vou copiar ele vou vir aqui

vou pegar um Edit de título arrastar para cá vou colar o meu texto aqui vou vir em estilo cor do texto vou mudar para branco tenho esse subtítulo que eu já vou copiar vou clicar com botão direito duplicar colar vou vir aqui no estilo vou vir em tipografia eu vou pegar esse secundário só que eu vou diminuir um pouco o peso dele para 500 OK aí vou vir aqui na biblioteca vou pegar um Edit de Botão vou arrastar para cá aqui eu tinha escrito agendar uma reunião aí para você Mudar o texto aqui do botão

é aqui em texto tá eu vou escrever agendar uma reunião vou colocar um ícone pro ícone aqui ícone a gente vai clicar nessa bolinha vamos procurar por Arrow que é o ícone de seta e aqui em posição do ícone eu vou colocar depois pronto vou vir aqui em tamanho vou deixar tamanho médio vou vir aqui em estilo ação a passar o mouse aqui em animação vou deixar Grow ele vai ficar assim quando passar o mouse vou clicar em atualizar a ficou assim o nosso botão vou vir aqui nesse contêiner principal vou vir em layout vou

vir em justificar conteúdo vou deixar alinhado pro centro e aí eu quero deixar esse título quebrando as duas linhas então eu vou clicar nele vou vir em avançado aqui em largura eu vou mudar para personalizado e vou de diminuir a largura dele vou deixar 60 mais ou menos tá vendo para quebrar as duas linhas OK ficou assim aí para mudar a cor desse iconz que tá branco diferente aqui do botão vou clicar e aqui em cor do texto eu vou mudar para essa mesma cor que está né que é a cor azul escuro Pronto agora

a gente vai para essa parte aqui que é a parte do sobre nós né também vou te ensinar a fazer essa imagem É bem tranquilo eu também peguei essa imagem lá no free pick tá então você vai lá vai pesquisar pelas imagens do jeito que você quer vai arrastar para cá aqui no upload já fica algumas imagens que eu UPI para cá tá vendo toda imagem você Opa no freepic fica aqui e aí eu já tenho ela que é essa daqui só vou clicar que ela aparece aqui aí vou clicar com botão direito clicar aqui

definir imagem plano de fundo aí se você quiser ajustar você clica duas vezes aqui e aí você vai arrastando para ficar do jeito que você quer vou deixar assim mesmo você clica em cima da imagem clica em editar foto aí esse aqui você pode ir em filtros Ó tem filtros preto e branco aqui se você quiser ó aí você escolhe um filtro do jeito que você quiser ou então você pode ir lá em D Tone também que ele também vai ter aqui preto e branco que aí você pode alterar né vou deixar esse aqui E

aí você vem aqui em elementos vamos vir aqui em formas Vamos pegar esse quadrado aí a gente vai redimensionar ele el para ficar do tamanho da tela inteira pronto aí vamos clicar em cima vamos ir aqui na cor vamos ir na cor vamos colocar Branco aí a gente vai vir e vai clicar aqui em Gradiente Pra gente transformar em Gradiente aí Aqui onde tá cinza a gente vai alterar para Branco E aqui onde está Branco a gente vai arrastar essa Barrinha para cá para ficar transparente tá vendo Então a gente quer que aqui desse lado

fique transparente e aqui desse lado fique mais branco aí vamos clicar aqui no mais para criar um outro ponto de cor branca e esse aqui que é o do meio que fica bem aqui no meio a gente vai diminuir só um pouquinho a transparência dele para que ele fique mais branco aqui e aí vai diminuindo a opacidade até ficar 100% transparente nessa ponta pronto ficou assim você vai baixar clica aqui em compartilhar baixar e baixar aí você vai vai voltar no editor vai clicar no mais clicar em flex Box dessa vez a gente vai pegar

um duplo aqui né que tem esses dois Dent Vamos ir em avançado Vamos colocar 50 de padding Vamos ir em layout altura mínima 650 de altura aí eu vou clicar aqui em estilo sobreposição de fundo tá é em sobreposição de fundo dessa vez não em plano de fundo ok sobreposição que é essa segunda opção vou clicar em tipo de fundo e vou arrastar a imagem para cá eu já tinha arrastado ela aqui antes de gravar Você arrasta do seu computador para cá Aí você vem aqui em tamanho e deixa cobrir para ele ficar no tamanho

completo tá agora a gente vai pegar o edit de título arrastar para cá eu vou copiar o título que tá aqui que é o nome né da empresa aí vou substituir para cá pode ser o seu nome o nome da empresa também vou pegar um Edit de texto arrastar para cá Aí você copia todo o texto aqui aí aqui na hora de colar você pressiona contrl shift V que aí ele vem sem lixo de CSS tá aí ficou assim ou se você não tiver achando essa tecla aí no seu no seu teclado é só você

vir aqui no bloco de notas cola o texto aqui depois copia e cola aqui de novo tá porque se a gente colar direto ele vem com alguns lixos de CSS HTML e assim ele vem Limpo pronto vamos vir aqui de novo no contêiner vamos vir em sobrep de fundo e aqui em posição vamos deixar Centralizado ele ficar dá mais esse espaço do branco aqui embaixo da da da letra né tô achando que aquela ali tá maior vou clicar aqui clicar na tipografia eu vou aumentar o tamanho dela para 16 e esse cinza também eu vou

escurecer um pouquinho pronto atualizei agora eu vou vir na biblioteca vou pegar o ess widget de divisor arrastar tá aqui Para cima aí eu vou escrever né o escritório você pode escrever sobre nós aqui também escrever aqui o seu nome ou o nome da empresa Tá eu vou clicar aqui em texto aí Aqui é onde a gente consegue colocar o texto vou colar o que eu quero aqui vou deixar alinhado para a esquerda vou vir aqui no estilo o peso né com a espessura do traço eu vou deixar três esse espaçamento eu vou diminuir para

zero que é o espaço aqui que o item ocupa vou vir aqui em texto vou mudar ele aqui para a esquerda pronto aí vou voltar em conteúdo e aí na largura desse traço eu vou diminuir para ele ficar só um detalhe assim vou voltar em estilo cor do divisor vou mudar para dourada aí ficou assim agora eu vou vir aqui na biblioteca vou pegar um Edit de imagem arrastar para cá resolução da imagem eu vou deixar completo atualizar essa imagem aqui eu fiz uma montagem dessa imagem né mas aí no caso a intenção é você

colocar uma foto da sua empresa ou uma foto sua então você vai pegar uma foto sua e vai arrasta para cá se ela não tiver numa dimensão assim quadradinha você pode vir aqui no canva né clicar em tamanho personalizado Aí você coloca 1000 por 1000 por Exemplo que aqui fica mais quadrada né Aí você arrasta sua imagem para cá né vamos supor que seja essa imagem aqui mesmo aí você clica com o botão direito definir imagem como plan de fundo aí você pode clicar duas vezes e arrastar ela para redimensionar e depois clica em compartilhar

e em baixar Ok para ficar desse tamanho a gente vai subir a imagem para cá eu já tenho ela aqui lembre-se de renomear aqui na parte de título tá vou clicar em selecionar Pronto agora eu vou vir aqui em estilo raio da borda vou deixar 10 e aí pra gente fazer essa sombrinha que tem aqui a gente vai vir aqui ó em sombra da Caixa vamos deixar né ativo só clicar em cima aí aqui na cor a gente vai mudar para essa cor dourada vou clicar aqui vou copiar essa cor dourada Voltei vou colar o

código da cor dourada aqui e aqui onde tem horizontal vou trazer ela um pouco pro lado e aqui onde tem desfocar eu vou tirar tudo vou deixar que a gente consegue ver a cor normal aí aqui em vertical vou abaixar um pouquinho e na horizontal vou aumentar mais e aí vai ficar esse detalhe assim pronto vou clicar Em atualizar agora eu vou vir aqui nesse contêiner de dentro tá vendo nesse quadradinho aqui vou vir em avançado em padding primeiro eu vou colocar 10 depois eu vou clicar aqui para desencar os valores e aqui na esquerda

vou colocar 80 para ficar com um espaçamento legal aqui agora eu vou clicar no contêiner principal aqui em cima vou vir em layout e vou deixar aqui ó alinhados ao centro aí ficou assim agora eu vou vir aqui em estilo sobreposição de fundo vou diminuir um pouquinho a opacidade dessa imagem ó diminuir para 0.45 e ficou assim a nossa sessão de sobre agora nós vamos pra sessão de áreas de atuação esses efeitos de movimento eu vou ensinar no final tá que aí eu vou ensinar em todos agora vamos fazer a áreas de atuação aqui a

gente vai clicar vai clicar em flexbox Vamos pegar esse com a setinha para baixo Vamos ir em avançado Vamos colocar aqui 50 de padding Vamos ir em estilo tipo de fundo vamos pegar essa cor azul vamos voltar aqui na biblioteca arrastar um Edit de título para cá colocar Centralizado estilo na cor vamos deixar Branco vamos vamos copiar o título que está aqui aí vamos colar ele aqui nessa outra nós podemos até copiar esse subtítulo que já Tem ó vou clicar em copiar vou clicar aqui e clicar em colar e vou copiar esse subtítulo e colar

ele aqui e deixar Centralizado Vou atualizar sempre atualiza para não perder nada tá vou voltar na biblioteca arrastar o idit de contêiner para cá aí nós vamos vir aqui no contêiner aqui em layout nós vamos mudar para grade agora nós vamos ir aqui na biblioteca Vamos pegar uma caixa de ícone essa aqui ó caixa de ícone E aí nós vamos mudar os ícones assim ó a gente não vai mais escolher os ícones que tem aqui no Elementor porque eles não tem muitas opções de ícones assim bonitas como a gente quer né então a gente vai

usar alguns ícones personalizados esses ícones que eu estô usando aqui eu vou deixar para vocês no material tá Tem vários sites que deixa vocês baixarem ícone svg tá tem que ser ícone svg gratuito tem até um vídeo aqui no canal como baixar ícone svg gratuito E aí eu vou indicar esse vídeo para você ir lá ver vários Fes para você baixar Tá bom olha aí você vai baixar o o ícone né do seu computador vai clicar aqui em enviar ícone svg apenas na primeira vez que você for fazer isso vai aparecer esse popup você clica

em ativar aí Nas outras vezes você vai clicar e já vai vir para cá direto tá aí você vai pegar os ícones que você baixou vai arrastar para cá vai clicar em inserir vai atualizar se você tiver feito como eu e arrastado vários de uma vez eles não ficam todos aqui você precisa atualizar a tela para recarregar Pronto agora se eu clicar aqui vão estar os ícones aqui é este aqui que eu qu aí selecionei vou vir aqui em estilo ícone vou mudar a cor para Branco vou vir aqui em conteúdo cor vou mudar para

branco e vou vir aqui na cor do conteúdo vou mudar para branco também vou vir aqui na aba de conteúdo e vou colar o texto e o título vendo que aqui no meu caso eu tenho esse título aqui ó da especialidade né E aí no seu caso você vai colocar as suas especialidades as áreas de atuação que você tua né esses textinhos aqui pessoal todos eu pedi pro chat GPT Criar e é muito interessante porque aí ele cria pra gente textos do mesmo tamanhozinho e aí se você achar que tem alguma coisa que não tá

batendo você pode alterar o texto né geralmente ele faz um texto muito bom eu recomendo que você vá lá no chat de APT peça para ele criar se você Não tiver com Muita criatividade tá bom que vai ficar bem legal e você vai fazendo isso vai copiando o texto colando aqui por enquanto a gente vai fazer isso só a gente Clica com o botão direito duplica Clica com o botão direito duplica clica duplica até ficar com seis ó como a gente já configurou aqui em grade né deixou aqui em grade ele já vem pro padrão

com três colunas e duas linhas aí você vai só clicando em cima de cada um ó tô aqui nesse segundo substitui o título e copia o texto e substitui o texto também eu vou fazer isso aqui em todos Pronto já coloquei todos aqui os meus textos aí agora falta só mudar os ícones os ícones é que nem eu te falei clica aqui em enviar ícone svg e é só escolher o ícone que você quer no meu caso é este ícone aqui aí você vai clicando vai escolhendo vai mudando eu vou colocar em todos os meus

aqui agora a gente vai clicar em cima dele vai clicar em cima de conteúdo aqui em título na cor a gente vai colocar esse Dourado em tipografia a gente vai pegar esse sub dois a aí no do texto é o de texto mesmo que já está vamos vir aqui em avançado em padding a gente vai deixar 20 vamos Clicar aqui para desencar e o de cima a gente vai deixar 40 e o de baixo vamos deixar 40 tá superior e inferior então de um lado e do outro é 20 e em cima e embaixo 40

OK agora no nosso ícone nosso ícone ó nós vamos voltar aqui em estilo ícone cor vamos colocar Dourado também vamos vir aqui em avançado vamos vir aqui em borda ó a gente vai conseguir ver quando a gente colocar assim raio da borda a gente vai deixar 10 e aqui em plano de fundo a gente vai clicar aqui em Gradiente aí vamos mudar essa cor Aqui de baixo para essa cor verde mesmo e a cor de cima a gente vai deixar branco e vamos deixar bem transparente bem transparente só para criar um um degradê mesmo ó

aí vai ficar assim ele quase sumindo vamos deixar um pouco mais transparente Ó ficou assim e na ação de passar o mouse a gente vai colocar uma cor então a gente pode pegar essa cor azul e subir ela um pouquinho só para ficar um pouquinho mais claro então quando passar o mouse na caixa ó tá vendo ele vai ficar todo dessa cor mas ainda tá um azul muito claro V deixar mais próximo do azul que é ó assim tá vendo só para dar uma luz OK aí vamos clicar com o botão direito clicar em copiar

E nos outros nós vamos clicar com botão direito colar estilo Clica com o botão direito clica em colar estilo aí vamos fazer isso em todos tá vendo que legal você precisa configurar só um como os outros são iguais aí a gente já cola o estilo e já aproveita as configurações Ó ficou assim vamos clicar em atualizar agora vamos para essa parte aqui de blog e só uma coisinha que faltou aqui nos casos foi a gente colocar uma sombra em volta dele para ele ficar mais desprendido Aqui do fundo tá se você tiver gostado assim Pode

deixar mas eu vou te ensinar como fazer a sombra você clica vem avançado vem em borda aqui vai ter sombra da Caixa ó se a gente tirar a gente já consegue ver só que assim fica muito feio tá fica bem grosseira essa sombra assim Escura então o que que a gente vai fazer vai vir na cor vai arrastar para cá para diminuir a a opacidade da cor deixar mais transparente né ele já vai ficar mais Sutil e a gente vai aqui em desfocar e vai aumentar um pouquinho para dar uma desfocada ó para ficar mais

Sutil e vamos vir aqui no vertical vamos abaixar um pouquinho só pra sombra ficar mais concentrada aqui embaixo e ó a cor ainda tá escura a gente Pode diminuir o um pouquinho mais dessa opacidade dessa cor diminuir um pouquinho mais a opacidade ó aí ficou legal tá vendo que dá só uma desprendida do fundo Clica com o botão direito copiar Clica com botão direito colar estilo colar estilo colar estilo colar estilo colar estilo pronto e agora os czin estão assim a parte do blog é muito importante um site eu te Recomendo muito que você faça

porque como eu falei no início do vídeo o Google ele tenta entregar para quem tiver pesquisando a informação mais precisa possível quando você tem um blog no seu site ele entende que o seu site é um portal de informações que as pessoas vão conseguir achar o que elas precisam mais fácil em sites que tem blog Além disso vai aumentar a percepção de valor a percepção de autoridade de você perante o usuário e fazer com que você Feche mais clientes e venda mais e hoje em dia com as inteligências de artifici iis você nem precisa se

preocupar tanto em escrever os conteúdos né Você pode separar os tópicos e pedir para as inteligências artificiais criarem para você inclusive todos esses posts que eu vou mostrar para você aqui eu pedi pro chat GPT criar O texto e eu nem pedi para ele elaborar tanto pedi para criar Um textinho aqui só para poder ensinar vocês tá vendo mas você pode pedir para ele criar com 1 palavras com três cinco parágrafos o quanto você quiser só você dar mais detalhes aí para ele tá bom bom então ó primeiro eu vou te ensinar como encontrar as

imagens Tá novamente eu uso o site freepic tem imagens gratuitas e imagens pagas E aí você vem aqui e pesquisa então aqui eu pesquisei por conflito Se não me engano aqui no no freepic E aí tinha várias imagens né você vai encontrar a imagem que você quer por exemplo E aí você vai baixar a imagem aqui no freepic quando tem aqui aqueles botões com tamanhos diferentes de imagem você baixa já no tamanho no tamanho tamanho legal a partir de 1000 tá só não pode ser menos do que 1000 de largura ou então mais do que

2.000 tá senão fica muito grande então mais ou menos 1000 ali de largura tá então quando tem aqueles tamanhos você clica neles quando não tem você pode baixar a imagem normal aqui e aí você redimensiona você pode redimensionar no campas se você quiser que as imagens fiquem todas nos tamanhos iguais você pode redimensionar pelo canva então você Pode vir aqui no canva Criar novo design colocar por exemplo tamanho personalizado todas as imagens 1000 por 800 E aí você vai arrastar para cá a imagem que você tiver baixado vai clicar com o botão direito definir imagem

como plan de fundo e pode clicar duas vezes para poder ajustar a posição dela na tela se você quiser e aí você vai duplicando e as outras imagens você vai fazendo a mesma coisa né vai arrastando as imagens para cá clicando com o botão direito substituir de fundo né vai ajustando aqui a posição do jeito que você quer e aí depois que você tiver feito todas tá lembrando que para duplicar é só clicar aqui nesse ícone tá vendo duplicar a página vendo cada uma dessas é uma página diferente uma imagem diferente e aí você vem

coloca a imagem aqui né arrasta a imagem do seu computador para cá clica e substitui né então depois que você tiver feito isso com todas as imagens que você quer você clica aqui em compartilhar baixar pode deixar selecionado baixar todas as imagens e clica em baixar E aí vai ser direcionado aqui vai ser baixado pro seu computador uma pasta zipada ó ela vem escrito design sem nome tá vendo você Clica com o botão direito clica em extrair tudo e aí as imagens vão estar aqui tá vão estar todos aqui uma outra alternativa também mais rápida

que você não precisa fazer todo esse trabalho aqui no canva é você ir no site I love imagens ó chama I love img.com tá aí você vem aqui em redimensionar na imagem que é ess abinha aí você arrasta todas as imagens para cá ó vou arrastar várias imagens aqui de uma vez arrasta todas as imagens para cá deixa aqui por Pixel e aqui você coloca de largura o tamanho que você quer que fique aí você pode dimensionar só a largura coloca 1000 de largura e aí o restante ele completa automaticamente tá vendo Então ele vai

redimensionar todas as imagens para pelo menos 1000 de largura aí você clica em redimensionar elas só não vão ficar em tamanhos iguais né só de largura de altura vai ficar diferente ó e aí também vai ser baixado uma pasta zipada só que aí a pasta zipada vai vir com o nome de I love imagem tá vendo Clica com o botão direito extrair tudo ok as imagens vão estar aqui e Elas costumam vir com tamanho menor né de peso do que aquelas outras se você quiser deixar elas um pouco mais leve você Pode também passar Aqui

ó em comprimir imagem tá mas tem vídeo aqui no canal ensinando você comprimir imagem não vou ensinar completamente essa parte não para não ficar muito grande Tá então você vai lá pede pra Inteligência Artificial te ajudar a Gerar os posts anota né título post imagem pronto aí para criar o post aqui dentro do seu site você vai vir né dentro do painel administrativo vai vir em posts Adicionar novo poste E aí aqui você vai colocar o título ó vou clicar aqui para ficar a gente conseguir ver vai copiar aqui o título E vai colar aqui

De preferência Cola pressionando Control shift V que aí ele tira o lixo do CSS tá então você vai colar aqui o título vai copiar aqui também o texto e vai colar o texto tá então você vai colar essas informações aqui aqui no meio também se você quiser colocar imagem pode colocar ó se você clicar aqui nesse maizinho vai ter vários widgets que você pode usar aqui você pode colocar imagem aqui no meio do texto também tá mas aqui nesta parte a intenção é que você apenas coloque as informações você vai colocar título a imagem destacada

e o texto a imagem destacada ela vai ficar aqui nessa Parte ó onde tem post aí vai ter aqui embaixo imagem destacada que é essa imagem que aparece aqui a primeira imagem que aparece e também é a imagem que aparece nesses cards que a gente usa para chamar os posts tá então você vai definir a imagem destacada aqui quando você subir a imagem né arrastar a imagem do seu computador para cá você pega o mesmo título que tiver aqui e você coloca aqui na parte de título da imagem tá para ela subir com o título

pode colocar o título aqui em legenda e em descrição também para ajudar no su tá para não ficar uma imagem com nome esquisito aí você clica em definir imagem destacada pronto ó vai estar aqui e outra coisa que a gente tem que colocar também é a categoria Então tá vendo que aqui ó tem aqui a categoria que vai servir pra gente poder filtrar e também aparece aqui em cima ó tá vendo ó direito trabalhista contratos né então serve pra gente poder dividir os posts em grupos e depois né se a gente quiser a gente consegue

filtrar para essas categorias então é importante colocar aí tá aqui na abinha de categorias aqui embaixo tá vendo você clica se você não definir nenhuma categoria ele pega essa Categoria chamada blog aqui e se você quiser colocar uma categoria destacada você clica aqui em adicionar nova categoria E escreve né Então essa daqui ela está como direito trabalhista essa categoria vou até copiar aqui esse texto Então você vai vir aqui e vai escrever né E vai dar enter pronto isso você só vai precisar fazer uma vez se você for postar outro post que tem essa mesma

categoria vai ficar assim para você tá vendo Vai est todas as categorias aqui e você vai precisar só clicar para selecionar Qual que você quer e aí você depois que você tiver colocado tudo você vai clicar aqui em cima em publicar e publicar de novo tá publicar duas vezes e aí pronto se você for ver o post ó ele já vai estar disponível vai ter o título já vai ter a imagem e o textinho aqui depois a gente só vai customizar Ok então é assim que você vai fazer os post para voltar pro painel só

clicar no ícone do WordPress aqui em todos os posts vão estar todos os posts que você criou WordPress traz por padrão esse post chamado olá mundo você pode clicar em lixeira nele tá se você tiver excluído alguma coisa sem querer vai ficar aqui em cima em Lixo é só você clicar aqui e clicar em restaurar Ou se você quiser excluir permanentemente pode excluir tá ó todos os posts ficam aqui em todos e aí você vai vir vai criar todos os seus postes depois que você tiver criado aí a gente volta ali pro layout eu vou

criar aqui os meus e já voltamos para fazer essa parte aqui dos cards do blog eu optei por instalar um outro plugin que eu achei bem legal essas configurações dele então você vai vir aqui dentro do seu painel administrativo né olha só já fiz todos os meus posts aqui fiz un seis e aí para instalar o plugin a gente vai vir em plugins Adicionar novo aqui na lupa Vamos pesquisar por Ultimate post kit É este aqui ó Ultimate post kit addons for elemental vamos clicar em instalar e depois ativar Pronto agora você pode aqui dentro

do editor do Elementor né clicar em atualizar e recarregar a página normal que às vezes demora um pouquinho para carregar ali tá quando instalar o plugin novo vamos clicar no maizinho clicar em flexbox clicar na setinha para baixo vir em avançado aqui em preenchimento né ou padding vamos colocar 70 vamos vir aqui na biblioteca Aliás podemos aproveitar um que já está aqui vamos pegar o título desse clicar em copiar clicar aqui dentro clicar em colar clicar aqui em centro e a a gente vai colocar esse título nosso blog também podemos pegar esse subtítulo aqui clicar

em copiar clicar aqui clicar em colar vi em estilo cor vamos deixar essa com azul OK aí a gente vai substituir o substituto por este que a gente está usando na parte de blog tá agora a gente vai vir na biblioteca vamos vir aqui embaixo em Ultimate post kits Ó aqui está todos os widgets desses posts aí a gente vai usar esse Alex Grid Então você vai arrastar ele para cá tá a gente vai usar aqui ó em layout Style né estilo do layout a gente vai mudar para dois tá só que aqui tem vários

se você quiser escolher outro pode escolher ó esse Alice é desse esse jeito e aí tem outros modelos aqui dele tá vendo você pode ir escolhendo tem esse outro aqui que também é bem legal que é esse amox aqui ó ele tem vários estilos tem esse outro aqui que é esse esse Alice ó que você passa o mouse e ele fica assim e aí tem outros estilos também ó tá então você vai escolhendo o que você quiser eu vou escolher este Que foi o que eu mais gostei para essa proposta que ele se chama Alex

Grid tá então se atente ao nome Alex Grid porque tem vários lá né tem a Alice a Mox então é esse aqui Alex tá beleza e o estilo que a gente vai escolher vai ser o dois aqui em resolução da imagem a gente vai marcar completo porque senão ela fica embaçada aí quando a gente marca completo Ela fica mais nítida aqui em adicional né aditional a gente vai tirar algumas coisas então tá vendo que aqui tem o autor e o nomezinho do autor eu não quero que aparea eu vou desmarcar para não aparecer a minha

data aqui tá aparecendo diferente daqui porque lembra que a gente configurou lá no no WordPress para ela aparecer neste formato se você tiver gostado mais assim é só você voltar lá no site configurar ó vai voltar lá no painel configurações geral e aqui o formato da data tá só deixar naquela dali que aí ela vai começar a aparecer assim depois que você recarregar Beleza agora vamos vir aqui em estilo aqui no título a gente vai configurar pr pra tipografia aparecer secundário aqui em categoria A gente vai vir aqui na tipografia ó tipografia sempre onde configura

o texto tá E Vamos escolher este do texto e o restante a gente pode deixar como está ó as cores tudo a gente pode deixar como está só vamos ir aqui em itens e border rádios vamos deixar cinco para ele ficar leve mente com a ponta arredondada Ok vamos clicar em atualizar Pronto agora nós vamos aqui no contêiner Vamos ir em estilo tipo de fundo aqui a cor vamos pegar esse cinza claro que a gente tinha configurado atualizar vamos vir aqui na biblioteca em básico vamos arrastar o edit de botão aqui para baixo vamos deixar

ele aqui Centralizado e vamos escrever ver todos os posts pessoa ir lá pra página de blog que é onde vai ter todos os posts Ah tá uma coisa que eu esqueci de falar aqui em conteúdo você configura quantos posts você quer que aparecem então aqui ó aqui em Query né que é consulta tem aqui item limite seis né significa que a gente vai deixar os últimos seis posts aparecer aqui se você quiser que apareça só três por exemplo é só você configurar tá E aí o que passar da quantidade de posts que tiver aqui a

pessoa só consegue ver lá na página de blog né por isso que a gente vai colocar esse botão de ver todos Os pushes beleza vamos vir aqui no botão de novo né vamos vir aqui em estilo tipo de fundo aqui na cor vamos colocar esse mesmo cinza que foi a mesma cor que a gente colocou aqui de fundo aqui em preenchimento que é o espaço de dentro Vamos colocar zero vamos vir aqui na tipografia clicar no lapizinho em transformação vamos deixar maiúscula e também em decoração vamos deixar pra pessoa saber que é um link né

para clicar aqui em a passar o mouse a gente vai deixar grow para que quando passa o mouse cresça vamos voltar aqui em conteúdo Vamos colocar o ícone de seta vou colocar essa setinha aqui Virado pro lado Lembrando que set é Arrow aí a gente escreve assim tá a você já acha inserir aqui na posição do ícone vamos deixar depois el vai ficar assim Vou tirar ver todos os posts Vou deixar só ver todos igual tá lá no site pronto vamos clicar em atualizar aí aqui o link que vai ser o link para onde a

gente pessoa a pessoa vai clicar vai se chamar a página de blog né então se você escrever blog você já acha a página aqui e você seleciona ela e clica em atualizar agora nós vamos fazer essa sessão de nossa equipe primeiro eu vou te ensinar A fazer essa imagem de fundo Ah não na verdade essa imagem de fundo aqui é igualzinha a essa daqui de cima só fiz com uma imagem diferente né mas as mesmas configurações lá no canva então não vou ensinar não tá Eu Já ensinei lá em cima você vai clicar com o

botão direito flexbox vai pegar uma setinha para baixo vai vir em avançado Vamos colocar 50 de padding Vamos pegar esse título aqui clicar em copiar clicar aqui clicar em colar Vamos pegar esse subtítulo clicar em copiar clicar aqui e clicar em colar tá aí a gente vai substituir né pelo título de nossa equipe se você não tiver uma equipe pode ser mais informações sobre você sobre a sua carreira tá o importante é que você entenda como que funciona que a estrutura para se você precisar colocar conteúdos aqui nesse formato você consiga também a gente vai

vir aqui na biblioteca vamos vamos pegar aqui em layout um contêiner arrasta para cá vamos clicar aqui dentro desse contêiner interno e mudar para grade né ou Grid aí a gente volta na biblioteca vamos pegar o edit de caixa de imagem arrastar para cá E aí aqui você Vai colocar o título né ou o nome aqui de cada um dos dos integrantes da equipe e Um textinho sobre eles até isso você consegue pedir pro chat GPT ou alguma Inteligência Artificial criar para você esses daqui também eu fui pedindo pro chatGPT crie um texto sobre um

advogado cria um texto sobre um paralegal cria um texto sobre um assessor jurídico sabe E aí ele pode te dar um Norte Às vezes a gente não sabe muito bem como descrever mas tendo esse Norte assim você sabe pelo menos como alterar as palavras para ficar mais de acordo com a real função né então Ó você vai copiar o título e o texto e vai fazer isso em todos os cartos eu vou fazer em todos aqui pronto e para deixar as imagens arredondadas assim você pode vir aqui no canva criar um novo design tamanho personalizado

aqui nós podemos colocar tamanho 500 por 500 E aí depois quando você for otimizar as imagens você regula tamanho certo tá a você vem aqui em elementos procura aqui Onde tiver aqui Onde tiver molduras e pega um círculo E aí você posiciona e redimensiona ele aqui para ele pegar toda a dimensão aqui da tela Cuidado para não ficar assim tá porque se ficar muito colado ele fica cortado Ali então você tem que dar um espaçozinho ó entre as extremidades tá para ele não ficar cortado mas também não deixa passando muito senão fica com espaço em

branco desnecessário E aí você UPA né arrasta do seu computador uma imagem para cá eu já tenho uma aqui então vou só clicar em cima dela E aí é só você clicar e mover pra frente que ele vai entrar dentro do desse círculo que a gente colocou aí você pode clicar duas vezes para você ajustar tá vendo do jeito que você quiser se você quiser por exemplo que apareça mais só o rosto você pode aumentar a imagem ó e puxar para baixo que aí vai aparecendo mais só o rosto depois você clica fora aí você

duplica e vai fazendo dos outros vai colocando outras imagens aqui e vai redimensionando depois que você tiver feito isso feito todas as imagens que você quer tem um detalhe importante quando você for baixar Você vai clicar em compartilhar baixar tem que estar marcado isso aqui ó fundo transparente é muito importante porque senão não fica um círculo transparente assim que você pode colocar em qualquer coisa ele fica transparente mas fica com esse quadrado branco que é esse fundo tá então Você tem que marcar aqui fundo transparente e aí depois você baixa Ok então você vai fazer

isso com as imagens que você quiser usar aqui e aí você vai colocar aqui né vai vir aqui na caixa de imagem vira em conteúdo clicar nesse ícone de imagem e arrastar para cá todas as imagens eu já tenho elas aqui aí você só arrasta para cá e vai selecionando tá vou fazer isso em todos aqui Pronto agora vamos ir nesta caixa vir aqui estilo imagem em largura da imagem nós vamos aumentar aqui no meu caso né porque eu quero que fique maior se você não quiser ir no seu pode deixar menor Vamos ir em

conteúdo tipografia vamos deixar aqui no secundário nesse secundário o meu eu vou aumentar o peso para 600 que acho que eu tinha mudado lá sem querer Ok vamos vir aqui em avançado vir aqui em padding Vamos colocar 20 de padding descer aqui embaixo em borda Vamos colocar uma sombra na caixa e aqui nessa cor de da sombra a gente vai diminuir bastante para ficar bem clarinho ó vai ficar um Tonzinho assim aí a gente vai clicar de novo vai clicar aqui para mover um pouquinho pra vertical e vai desfocar um pouco essa sombra E aqui

em border rádios né que é o raio da borda o arredondamento da borda da Caixa ó a gente vai colocar 10 para ficar assim arredondador a gente vai colocar a imagem de fundo aqui que eu tinha esquecido né vamos vir aqui no contêiner principal estilo sobreposição de fundo tipo de fund fundo e vamos arrastar nossa imagem para cá que eu Já ensinei vocês a criar essa imagem aqui que eu vou usar pronto vamos voltar aqui na sobreposição de fundo Vamos diminuir um pouquinho só a opacidade Pronto agora vamos voltar aqui neste Card vamos vir aqui

em plano de fundo ou tipo de fundo se tiver no seu vamos clicar aqui em Gradiente e aqui embaixo a gente vai deixar de branco e aqui em cima a gente vai vai colocar branco mas vai puxar um pouquinho pro lado para ficar transparente para ficar um degradê de branco mais escuro com transparente para ficar um degradê assim e aqui no ao passar o mouse né que é a ação de passar o mouse a gente vai clicar nesse lapizinho e vai colocar a cor branca que aí quando a gente passar o mouse ó vai fazer

esse efeito aqui na verdade vamos pegar essa cor branca e Vamos diminuir um pouquinho só para que não fique totalmente Branco pronto vai ficar assim agora a gente vai vir aqui estilo imagem espaçamento Vamos diminuir um pouco o espaçamento aqui do texto com a imagem e vamos clicar com o botão direito clicar em copiar e clicar com o botão direito clicar em colar estilo nas outras e fazesse em todas as outras caixas pronto sempre atualizando para não perder nada e pronto já criamos aqui a nossa sessão de equipe agora vamos para essa nossa sessão de

depoimentos nós vamos fazer um ajuste aqui nessa seção tá vendo que a imagem tá se repetindo aqui no fundo a gente esquece eu de configurar tem que vir aqui no contêiner principal estilo sobreposição de fundo aqui tamanho a gente vai deixar cobrir e aqui na posição a gente vai deixar centro que aí vai ficar assim OK sempre Salv para não perder nada para fazer aqui essa sessão de depoimentos a gente vai precisar instalar outro plugin eles são depoimentos que são puxados pelo Google então é legal que você possa incentivar as pessoas a comentar lá no

seu perfil do Google meu negócio né aquele pefil que aparece lá na parte de mapas Então A gente vai puxar as avaliações lá daquele perfil Quando você atender um cliente é bom que você peça ele para avaliar lá que além de ajudar a ranquear e fazer com que as pessoas encontrem você mais fácil passa mais autoridade né então vamos voltar lá no nosso site pelo painel administrativo Vamos ir em plugins Adicionar novo e vamos escolher o plugin chamado revisão revisão do Google esse aqui ó widget de revisão do Google vamos clicar em instalar e depois

em ativar agora para se conectar lá na na sua conta do Google é bem simples você vai acessar aqui o a sua conta no Google Maps não precisa nem tá logado por exemplo eu vou puxar as informações do Uberlândia Shopping que é um shopping aqui da minha cidade vou escrever ass Maps colocar Maps do Google aí aqui você escreve o endereço né que vai puxar o perfil vou colocar Uberlândia Shopping pronto puxou o perfil aí esse link que aparece aqui ó no navegador Você vai clicar em cima vai copiar Aí você vem aqui clica em

conectar vai abrir esse popupzinho aí você vai colar esse Link aqui aí vai aparecer né se for o perfil certo né o seu perfil você vai clicar em conectar E aí pronto ele vai conectar E aí aqui a gente vai escolher qual que vai ser o estilo que a gente vai querer do Carrocel O que eu escolhi foi esse daqui né que é um Carrossel com os balões cinza Então você vai escolher tem vários Vários vários ó tem um que é assim aqui é só um exemplo tá aqui vai ficar a sua logo o nome

da sua empresa quantas avaliações teve do lado e os comentários aqui aqui os comentários dessa forma olha só tem vários Vários vários estilos mesmo tá assim um abaixo do outro você vem aqui e escolhe o que você tiver gostado mais eu gostei deste Carrosselzinho achei que ficou bem elegante bem interessante aqui pro site vou clicar em selecionar aí aqui ele ainda dá mais algumas opções né quando a a gente escolhe Carrocel se a gente quer cinza mesmo se a gente quer só com a bordinha se a gente quer aqui com a sombra com fundo colorido

então você vem aqui escolhe que for leg seu layout vou escolher essa primeira mesmo V clicar em selecionar e a aqui algumas configurações tá perguntando se você quer que mostre tudo ou s as melhores avaliações né Por Exemplo qu e c eu acho mais interessante Então eu vou dear para filtrar quro e c o idioma né coloquei português o tipo de data aqui se você quer ocultar avaliações sem comentários se você quer ocultar texto sem avaliação né só texto sem as estrelinhas fonte animação então aqui você pode ir determinando o que que você quer e

aí você escolhe aí eu vou deixar do jeito que tá mesmo acho que as configurações padrões ficam legais qu mudar só a quantidade de estrelas eu vou clicar em salvar aí vai gerar esse código aqui pra gente você vai clicar em copiar aí você vai vir aqui vai pegar um contêiner um flexbox com a setinha para baixo vai clicar em avançado em preenchimento você vai colocar 50 vai clicar em atualizar vai vir na biblioteca vai pegar o widget de short code vai arrastar para cá e vai colar o seu short code aqui e vai E

aí a gente vai vir vai clicar com o botão direito copiar clicar com o botão direito e colar né pra gente usar esse título eu vou arrastar ele aqui para cima ó e também vou pegar esse subtítulo vou clicar com botão direito copiar clicar com Botão direito colar e atualizar vou substituir né para depoimentos esse título principal e o subtítulo pra essa frase aqui confira a opinião dos nossos clientes atualizei é normal aparecer aqui desse jeito desconfigurado mas aí quando você acessa o site olhando aqui fora do editor ele fica normal tá olha só ó

tá aparecendo certinho OK e agora nós vamos para essa sessão aqui vamos descer pegar um contêiner um Flex box com a setinha para baixo vamos vir em estilo tipo de fundo aqui no mundinho vamos pegar a com azul vamos vir em avançado padding Vamos colocar 30 Vamos ir aqui na biblioteca arrastar um Edit de título para cá deixar ele Centralizado vamos escrever aqui a frase que a gente quer eu exesso aqui vou copiar colar vou vir no estilo a cor do texto eu vou mudar para Branco a fonte a gente vai mudar para essa ó

se você escrever quew ela vai aparecer é essa daqui tá que é uma fonte mais desenhada aí nós vamos duplicar E aí aqui embaixo vou escrever a autora de quem falou essa frase vou vir estilo a cor eu vou deixar de dourado e a tipografia eu vou pegar essa de destaque aliás vou pegar essa Secundário vou só mudar aqui para 500 o peso Ok Pronto agora vamos fazer a nossa sessão de contato vamos clicar aqui vamos clicar em flexbox Vamos pegar esse duplo que tem dois dentro vamos clicar em avançado Vamos colocar 50 de padding

vamos vir em estilo tipo de fundo imagem essa imagem aqui aqui a mesma coisa que eu fiz aqui no banner tá só peguei uma imagem e fiz um filtro de cor então você pode repetir o mesmo processo com o outra imagem neste aí você vai arrastar sua imagem para cá vai clicar em selecionar vai vir aqui em posição vai deixar centro e vai vir em tamanho e vai deixar cobrir agora você vai vir aqui em cima onde tem esse título Branco clicar com o botão direito clicar em copiar vai vir aqui nesse container do lado

clicar com o botão direito clicar em colar e vou deixar ele alinhado à esquerda agora eu vou mudar o título né vou colocar Fale Conosco vou copiar esse daqui também Clica com o botão direito copiar Clica com o botão direito colar e vou copiar este subtítulo e vou deixar ele alinhado à esquerda vou colar Vou atualizar agora a gente vai fazer esse formulário que a gente já tem a função dele instalada que foi o do Plugin Royal addons então aqui ó onde tem Royal adons a gente vai descer ou então vamos pesquisar aqui na linha

por form é esse aqui ó form Builder a gente vai arrastar ele aqui para baixo e esse formulário aqui do Royal addons ele só nos permite ter na versão grátis três Campos que aí eu resolvi colocar aqui nome telefone e a mensagem aí aqui você muda né ó tá escrito em inglês name aí você vai mudar para nome e aqui é o que vai aparecer dentro do campo quando tiver Place holder é o que vai aparecer aqui dentro do campo eu vou escrever seu nome nesse de baixo eu vou mudar aqui em Type tá para

telefone hoje em dia telefone tá mais importante do que o o e-mail né pessoa conseguir entrar em contato Mas se você quiser deixar por exemplo só nome e-mail e telefone também pode sem o campo de mensagem tá se você quiser fazer o formulário bem mais completo com vários Campos tem um vídeo aqui só sobre formulário Com Elementor free que eu te ensino a fazer isso tá como esse aqui é o institucional que geralmente precisa só de informação de contato aí eu vou deixar só esses e aqui no Type você vai mudar pro telefone aí aqui

em Label você vai colocar telefone Label é o título e aqui você vai colocar seu telefone aqui no ID Vamos mudar para telefone em minúsculo e nesse aqui a gente vai traduzir também no título mensagem e aqui escreva sua mensagem e aqui embaixo mensagem pronto aqui em buttons né que é Onde é os são os botões aqui em submit a gente vai conseguir mudar o texto eu vou colocar enviar pronto aqui settings né que é configurações a gente configura as mensagens que aparecem quando a gente preenche o formulário aí aqui eu vou colocar assim formulário

enviado com sucesso nesse aqui de baixo eu vou colocar o envio falhou tente novamente pronto aqui no e-mail a gente vai configurar então assim é como chega para você esse e-mail aqui é o e-mail que chega para você dono do site tá tá você vai Receber essas informações aqui lá no seu e-mail E aí vai chegar pra você o assunto né aí eu vou mudar pra contato vindo do site se você tiver vários sites você coloca contato vind do site Zeus blá blá blá tá aí Aqui você não mexe que aí já vai pegar todos

os dados que tiver aqui e aqui em ó que você vai mudar o e-mail Então o meu ele já pegou o e-mail que eu fiz como administrador E aí ele já vai automaticamente enviar para esse e-mail tudo que eu preenchi no formulário se esse e-mail aqui não foi o e-mail que você mais costuma usar Você pode trocar aqui para outro e-mail ou se alguém tiver atendendo para você se tiver um comercial algo do tipo você vem aqui e troca para quem for ficar responsável por receber esses e-mails Ok E aí o restante pode deixar como

está e vamos clicar em atualizar pronto aliás vamos voltar aqui em settings tá E aqui n show Filter labels que são os títulos eu vou desativar eu quero que apareça o texto só dentro aqui dos Campos vou voltar aqui em estilo vou vir aqui em Campo aqui na cor do texto eu vou deixar nesse azul a cor da borda eu vou deixar de branco só Que aí eu vou pegar esse branco e vou arrastar um pouquinho para cá para diminuir a opacidade aliás eu errei aqui na cor do texto a cor do texto é branco

e a cor de fundo é azul e aí eu vou pegar esse azul também e arrastar um pouquinho para diminuir a opacidade dele aqui nesse branco da borda vou diminuir mais ainda a opacidade dele ele ficar mais só um risquinho mesmo e aqui na tipografia vou pegar essa tipografia de destaque só que aí eu vou mudar o peso para 500 pronto a border rádios eu vou deixar 30 de arredondamento e aqui em padding vou deixar 15 aqui de padding ok aqui no botão eu vou colocar em dourado e a tipografia eu vou pegar essa de

destaque só que eu vou mudar para 500 vou aumentar um pouquinho o tamanho desse botão tamanho desse texto do botão Ok ficou assim para essa parte aqui do mapa a gente vai vir na biblioteca vai procurar por um idet chamado Google Maps a gente vai arrastar para cá aqui você vai colocar o seu endereço eu vou colocar Uberlândia Centro né porque É fictício aqui então vou colocar qualquer endereço Centro Uberlândia Aí você pode colocar o endereço completo e aqui você pode dar zoom tá vendo que se a gente deixa menor aqui ele pega bem de

cima aí se a gente der um zoom ele vai mostrando as ruas ó mostra mais perto paraa pessoa conseguir se situar melhor e aqui a gente configura a altura tá aí eu vou vir aqui e vou atualizar Vou acessar o nosso site aqui pelo lado de fora né fora do editor do Elementor vou passar o mouse em cima de Elementor e vou clicar aqui em roda pé pra gente pegar essas informações aqui de baixo que já estão prontas no rodapé Então vamos clicar em cima dela clicar em copiar voltar clicar em cima do nosso mapa

e clicar em colar pronto aí aqui eu vou vir de estilo espaço entre os itens vou aumentar um pouco o espaço vou vir em texto tipografia e vou aumentar para tamanho 16 aumentei demais o espaço vou diminuir um pouco vou vir aqui no mapa aqui em altura vou aumentar um pouco de forma que ele fique alinhado aqui a o término do formulário vou voltar aqui no mapa vou vir em estilo em CSS e em saturação vou diminuir a saturação para ele ficar preto e branco Beleza vou vir aqui em avançado vou vir em borda e

em raio da borda eu vou deixar 10 Para ele ficar arredondado ó vai vai ficar assim e vou clicar em atualizar pronto essa parte aqui da home a gente já vai ter terminado no desktop ó já fizemos aqui tudo agora a gente vai colocar os efeitos de movimento tá que são esses efeitos que aparecem quando a gente carrega a página ó então tem aqui tá vendo esses efeitos de movimento aqui vamos vamos fazer eles tá para fazer os efeitos de movimento vai ser sempre assim você vai clicar em cima dos itens que você quer vai

vir em avançado e vai ter aqui efeito de movimento aí você vai escolher Tem vários tipos de efeito esse que eu vou colocar aqui vai ser esse ó que é o de aparecer chama F in e ele só aparece depois que a gente coloca em lento ó tá vendo que ele aparece assim gradualmente eu vou colocar em todos ó vou vir em feit de movimento in lento aqui no botão eu vou escolher outro outro tipo vou vir avançado efeito de movimento e vou colocar esse aqui ó pul in que aí ele vai aparecer assim pulsando

tá esse aqui como são três coisas e eu quero que fique todos iguais eu vou clicar direto aqui no contêiner vou vir em avançado efeito movimento Fade in e lento que aí vai aparecer Tudo aqui de uma vez e aqui na imagem também vou vir em avançado efeito de movimento f em lento e neste aqui na na imagem vou vir em passar o mouse para ficar um efeito vou vir aqui em opacidade vou diminuir um pouco a opacidade aí quando a gente passar o mouse aqui ó opa vou diminuir só um pouquinho tá vendo vai

mudar um pouquinho de cor pronto nesses daqui também Onde tiver os textos eu vou vir e avançado efeit de movimento F in e vou deixar lento aqui também avançado efeito de movimento Fade in e lento E aí aqui eu vou deixar assim ó avançado efeito de movimento aqui nos cards né aí eu vou escolher o mesmo do botão que vai ser esse aqui de Pulse lento ó vai ficar assim aí eu vou clicar em copiar e clicar com o botão direito clicar em colar estilo em todos os outros encho aqui também vou vir em avançado

efeito de movimento Fade in e lento aqui no título também avançado efeito de movimento Fade in e lento nesse aqui ó vou atualizar tá para não perder nada vou voltar aqui na nossa página inicial vamos ver ó aqui tá ficando ok aqui ok ah tá ainda não tá ativo o efeito não que nesse aqui é nele mesmo que a gente vai Configurar o efeito a gente vai clicar aqui aí que vai ter assim ó entries Animation aí a gente vai ativar aí vai ser essa animação aqui tá e já vou clicar em atualizar aqui eu

vou fazer aquela mesma quando são fontes iguaizinhas do mesmo tamanho que nem a gente já configurou aqui a gente pode só clicar com o botão direito copiar clicar aqui com botão direito colar estilo nesse aqui também clicar com o botão direito copiar clicar com o botão direito colar estilo que ele já vai puxar a animação tá E esse aqui a gente vai clicar efeito de movimento Zoom in aliás Pulse né esse aqui Pulse e lento e vamos copiar e colar o estilo pronto aqui também como é igual ó Cobi cola o estilo a gente tá

fazendo isso para ficar mais bonito e também para ajudar no carregamento tá quando as coisas aparecem gradualmente carrega mais rápido o site do que quando tem que carregar tudo de uma vez aqui é é é diferente então vou vir em avançado efeito de movimento Fade in e lento aqui no texto Também aqui como tem várias coisas vou clicar direto no contêiner avançado efeito de movimento F in e lento aqui também efeito de movimento faz em e Leto pronto atualizei ó agora se a gente atualizar vamos ver aqui aqui faltou Ah tá vendo esse botão aqui

não sei se a gente tinha configurado isso aquela hora ó tá com o ícone Branco a gente tem que vir em estilo cor do texto e deixar de azul tá E aí também vamos configurar o efeito de movimento dele efeito de movimento faz aliás esse aqui é o é para pulsar né então vamos descer até Pulse e lento pronto o restante tá aparecendo pronto aí agora a gente vai configurar pros outros dispositivos né que a gente fez aqui pra página home agora a gente vai só dar uma adaptada pro celular pro tablet Então a gente

vai vir aqui a gente vai clicar aqui no modo responsivo vai colocar aqui na função de celular aí a gente vai clicar aqui no contêiner nesse contêiner principal vai vir em avançado e o padding Né que é o preenchimento o Espaço de dentro a gente vai colocar 20 e vamos vir aqui nesse título Vamos colocar ele aqui em largura Vamos colocar a largura total né avançado largura largura total e vamos vir aqui em estilo tipografia Vamos diminuir um pouco o tamanho deste título pronto vamos ir aqui também novamente no contêiner vamos vir em layout a

altura mínima a gente pode diminuir pode deixar assim mais ou menos e vamos deixar o conteúdo dele alinhado pro fim porque a gente vai precisar dessa parte aqui porque a gente vai colocar o nosso menu aqui em cima para ele ficar transparente em cima do Banner aqui também no contêiner principal a gente vai vir vai vir em avançado vai vir em padding ou preenchimento né Vamos deixar 20 aqui no texto a gente vai vir na largura a gente vai aumentar um pouquinho que é a largura Onde tá o ponteiro aqui nos títulos a gente vai

vir no estilo aqui para ajudar um pouquinho a gente vai fazer o seguinte vamos clicar em atualizar vamos vir aqui nessas três Barrinhas configurações do site Fontes globais aí que essa fonte primária que é esse título Vamos diminuir o tamanho dela né Vamos deixar ela tamanho 38 e vamos clicar Em atualizar aí vamos fechar agora que a gente voltou os títulos a gente não precisa ajustar mais só clicar aqui pegar o primário que ele já vai diminuir sozinho para 38 só isso aqui que a gente pode diminuir um pouquinho mais para não quebrar tanto a

linha né 37 esse aqui beleza o restante do texto tá ok aqui nesse contêiner a gente tinha vindo aqui em avançado e colocado um preenchimento de 80 né mas nós não vamos colocar mais vamos deixar preenchimento aqui de 15 e vamos vamos desenc os valores e no inferior Vamos colocar 35 para dar um espacinho aqui para baixo vamos vir nesse contêiner avançado Vamos colocar 20 de padding o restante do texto tá com tamanho ok aqui nesse também avançado 20 de padding o restante do texto tá com tamanho ok aqui também avançado 20 aqui também avançado

20 aqui já está 20 que a gente colocou e aqui também avançado 20 o restante dos tamanhos já está ok a gente não precisa mexer e vamos clicar em atualizar aí a gente vai fazer a mesma coisa aqui no no tablet né Se tiver alguma coisa precisando Ajustar a gente vai ajustar aqui o título a gente vai clicar vai vir em avançado largura Vamos colocar largura 100% altura nós vamos clicar aqui clicar aqui em altura e diminuir um pouco a altura deste banner pode ser assim vamos deixar-los alinhados aqui ah pode deixar alinhado o centro

nesse caso aqui aqui a gente pode clicar nesse contêiner vir em layout mudar a direção dele para baixo para ficar o texto em cima e o conteúdo embaixo só que a gente tem que vir nesse contêiner vir aqui em layout do conteúdo deixar ele em caixa ou em Box se tiver escrito em inglês no seu a mesma coisa com esse contêiner Aqui de baixo clica nele vem aqui em layout Deixa ele em caixa e vamos vir aqui em avançado e tirar esse espaçamento que tá aqui então vamos deixar só 10 mesmo aí nós podemos clicar

aqui na imagem e diminuir um pouquinho o tamanho dela para não ficar tão gigantesca assim na tela né pronto estes daqui a gente pode mudar a disposição do grade né Então clicamos nesse contêiner aqui ele está com aqui em colunas né ele está com três a gente vai mudar para duas colunas e uma duas Três linhas ó Então põe dois aqui e três aqui ó ele vai ficar Assim vai ficar melhor aqui tá ok a gente pode só diminuir o tamanho desse título né que tá ficando muito grande então vamos unir título tipografia Vamos diminuir

aqui o tamanho dele acho que 15 Tá ok vamos diminuir o peso para 500 beleza aqui também vamos fazer a mesma coisa nessa grade Vamos colocar duas colunas e três linhas aqui em depoimentos Está ok Aqui também tá ok Aqui também tá OK pode deixar Prontinho Então já configuramos aqui o nosso site para dispositives móveis tá pode testar no seu celular se você vê que alguma coisa no celular não tá ficando austad você corre aqui ajusta mais ok agora nós Vamos fazer as configurações aqui da nossa página blog quando a gente clica não aparece nada

era para aparecer todos os nossos posts aqui isso porque a gente não associou a nossa página blog a essa página aqui né Nós não associamos os nossos arquivos a essa página Então a gente vai entrar aqui dentro do painel administrativo do WordPress vamos vir aqui em configurações leitura aí nós vamos fazer duas coisas aqui agora definir né a nossa página como p página inicial que ó se você observar aqui no site se você acessar o site Olha o que que tá Aparecendo aqui tá aparecendo os postes e era para est aparecendo a nossa página home

E aí a gente vai mudar vamos colocar página home para ser a página principal para que quando a gente acessar o nosso site apareça ela e a página de blog Vamos mudar para cá né então estando aqui em configurações leitura a gente vai mudar assim ó sua página inicial exibe para uma página estática e página inicial nós vamos escolher a home que é onde a gente criou todo esse layout e a página de posts nós vamos mudar para blog e vamos clicar em salvar alterações Pronto agora se a gente mudar pra página home nem aparece

aqui em cima escrito home mais né porque já é a página principal E se a gente clicar em blog Olha só está aparecendo os nossos postes Tá então vamos configurar aqui a nossa página de postes para isso a gente vai pass passar o mouse ali em cima de personalizar e vai clicar vamos escolher um modelo então nós vamos vir aqui ó configurações do blog vamos clicar em blog E aqui no layout tem vários estilos para você escolher eu gosto de usar esses aqui em grade e para cada uma dessa desses estilos aqui ó em lista

eles vão ficar um Abaixo do outro em grade eles ficam um do lado do outro tá vendo cada um desses aqui tem vários Estilos diferentes tá então por exemplo em grade fica um do lado out tem o estilo um tem o estilo do Ó que fica assim o que eu mais gostei foi o estilo seis que fica até parecido com o layout que tá lá na página inicial né então vou deixar ele eu vou clicar aqui em contagem de palavras para reduzir um pouquinho essas palavras que aparecem aqui quando a gente passa o mouse ó

para aparecer menos E aí vou clicar aqui em cima publicar para salvar aí a gente vai clicar aqui para voltar voltar vamos vir aqui em esquema de cores pra gente mudar essas cores aqui eu vou pegar aqui no editor essa cor dourada que é que eu tô usando aqui no projeto e vou mudar onde tem a Azul para essa cor dourada que ele tá usando azul em todas as partes que tem link aí pronto mudou para dourado e agora vou mudar as ó vou clicar em publicar também para não perder nada aí vou voltar agora

eu vou mudar aqui em tipografia aqui no H1 eu vou mudar pra fonte questrial vou clicar em publicar você vai conseguir ver essas alterações não só aqui na página de blog mas Também na página do post Então quando você clica aqui para ver o post ó tá vendo a gente consegue ver as mudanças que a gente faz lá também vão se alterar aqui tá aí aqui no H2 eu vou escolher a fonte questrial também que é a fonte que eu tô usando para títulos vou clicar em publicar ó se a gente recarregar aqui ela vai

ter mudado para cá E aí as outras fontes também eu vou fazendo isso ó já mudei de algumas aqui e se você quiser mudar a espessura delas ó a espessura você muda por aqui tá a grossura o tamanho também você muda por aqui e clica em publicar aí eu vou mudar aqui também a fonte de texto tá vendo ó texto corpo B é a fonte que fica aqui é a fonte que fica nesse texto que tá aqui eu vou mudar pra fonte que a gente tá usando que é a Nito essa aqui eu vou clicar

em publicar ele vai alterar aqui já alterou e também na página de poste ó vai ter alterado aqui também nos títulos a gente já alterou tudo tá então você faz essas alterações muda aí paraas Fontes que você achou legal de usar Ah tá vamos voltar aqui no blog Que faltou a gente configurar uma coisa aqui na parte de blog ó configurações de blog blog aqui tá vendo ó texto do botão mais tem escrito só mais eu vou deixar leia mais mesmo escrever um leia aqui na frente e vai ficar assim leia mais eu vou clicar

em publicar pronto tá assim pronto já configuramos aqui a página de blog e a página individual de post e vamos fazer uma coisa aqui que é opcional que é a questão do nosso menu transparente que muda de cor na rolagem nesse modelo aqui que eu tava olhando para criar para vocês pode perceber que ele tem o menu transparente na hora que rola a tela ele muda de cor mas aí na parte do blog ele fica esse menu mesmo aqui que está escuro né de fundo então a gente precisa criar um outro menu para poder ficar

só na parte de blog tá se você não quiser que o menu fique assim ó que ele fique transparente em cima do Banner você tiver gostado dele dessa forma aqui não precisa fazer mais nada pode deixar o menu desse jeito aí mas pro final da aula só vou te ensinar a linkar né as partes aqui do menu porque você pode perceber que a gente clica e elas não estão linkadas né mas Se você não quiser fazer essa parte não precisa fazer Ok se você quiser fazer eu acho bem legal porque fica um layout bem bonito

a gente vai entrar dentro do nosso painel administrativo do WordPress Vamos ir em plugins Adicionar novo vamos procurar pelo plugin Stick Header effect preste atenção como está escrito o nome aqui tá você escreve com uma letra errada você não consegue encontrar ó Effects com dois F tá é esse plugin aqui você vai clicar em instalar e depois em ativar Pronto agora vamos voltar aqui pro nosso site vamos passar o mouse aqui em cima de Elementor e clicar em menu vamos clicar aqui no contêiner vir aqui em avançado aí vai ter aqui ó Stick Header Effects

É esse aqui não é esse que tem o r tá é esse aqui vamos clicar em enable que significa ativar vamos deixar ativo para todos os dispositivos E aí se você não quiser que ele fique transparente em cima do Banner Pode só deixar assim que aí ó olha só ele vai ficar só assim ó vai ficar só assim fixo na tela mas se você quiser quer que ele fique transparente aí você vai ativar esse aqui ó transparente header e Background color aí aqui você vai colocar a mesma cor que que estava ali que é esse

azul ou então a cor que você quer que mude Se você quiser mudar que mude para outra cor você tem que vir aqui no estilo e colocar aqui essa mesma cor pra qual você quer que mude tá E ó ele vai carregar aíe fica transparente ele mesmo se puxa para cima do ban E aí quando você rola a tela ele muda pra cor que a gente colocou OK aí ficou assim se você quiser que ele mude a da logo tem como também ó faz uns filtros na cor da logo então você vem aqui em avançado

Stick header effect aí vai ter aqui ó Change log color né mudar a cor da logo aí você pode mudar para branco que aí ele vai mudar tá vendo ó para todo branco na hora que você rolar a tela só na hora que você rolar a tela tá ou então para preto que ele vai mudar para preto é legal quando você quer o fundo fique todo branco né ou fazer um Blur que ela ficar embaçada Ok e vamos clicar em atualizar pronto aí Dessa forma não dá certo no blog Tá vendo porque olha só como

é que fica aqui fica em cima e agora não dá para ver nada do menu então o que que a gente vai fazer a gente vai fazer um outro menu para ser usado só Na parte de blog para não se misturar com esse aqui aí nesse aqui a gente pode clicar aqui em cima dele clicar em copiar fechar vamos aqui dentro do P vamos aqui em aparência Elementor header foter vamos adicionar o novo aí vamos dar o nome de menu do blog selecionar a opção cabeçalho selecionar a opção blog page e vamos clicar em publicar

e vamos clicar em adicionar mais um que é aqui em a post né que é para ficar na página de blog na página de todos os pushes vamos adicionar mais um aqui na página de todas as categorias também vamos clicar em atualizar agora a gente vai clicar aqui em editar com Elementor vamos clicar com o botão direito colar esse menu aqui vamos vir aqui em avançado vamos desativar essa opção de menu transparente né vamos vir aqui em shtick header desativar clicar em atualizar e agora se a gente acessar a página blog vai estar com esse

menu só que tá vendo que ele tá ficando colado no topo vamos vir nesse menu aqui que a gente tá vamos ir em avançado layout incl Lor de padding e aqui no inferior a gente vai colocar 50 e atualizar e vamos recarregar ó tá vendo que aí ele mesmo já vai colocar um espaço aqui em cima Aí vamos clicar também aqui no post individual pra gente ver olha só ele tá ficando aqui em cima ó parece que esse post aqui eu esqueci de pôr o texto aqui nele depois eu vou corrigir dos outros estão ó

com imagem título e texto tudo certinho aí nós precisamos também configurar aqui no rodapé para que ele não fique grudado só que aqui a gente não vai configurar no modelo de rodapé a gente vai fazer assim ó vamos vir aqui em personalizar vamos clicar em CSS adicional e você vai colar um código que eu vou deixar aqui na descrição e também lá no material de apoio que é um código pra gente afastar esse formulário desse rodapé aí você vai colar esse código aqui e pronto ó ele vai ficar afastado do rodap pé agora você vai

vai clicar em publicar ó vamos lá então o nosso menu já tá ok aqui na página de blog ele tá ok na página individual Tá ok tem o espaço aqui e tem o espaço aqui embaixo agora a gente precisa fazer dois ajustes aqui na nossa página inicial primeiro é que eu percebi que eu tinha colocado uma linha muito grossa aqui né Então deixa eu ajustar aqui de novo se você tiver gostado assim Pode deixar ó vou clicar aqui aí você vai vir Aqui em estilo Onde tiver aqui w tá vendo ó ele tá mais grosso

aí eu vou diminuir para um para ficar mais fino e mais Sutil pronto atualizei posso fechar agora a gente vai configurar para ele chegar nas partes que a gente quer né para isso a gente vai abrir o editor do Elementor era aqui da página eu estou aqui dentro da página é só clicar em editar aí percebe que quando a gente clica aqui aparece hashtag e o ID que a gente colocou quando a gente criou o menu Então a gente vai Você pode até copiar esses esses ids aqui para ser igualzinho você vai pegar bem ele

vai vir aqui em cada sessão que pertence por exemplo esse aqui é a sessão de sobre né vou vir aqui na sessão de sobre vou vir em avançado e vou vir aqui em ID aí eu vou colar só o nome tá sem o o hashtag aqui pra parte de áreas de atuação vou copiar vou vir aqui em área de atuação avançado id e vou colar aqui na parte de equipe vou copiar ou escrever se você quiser vou vir aqui avançado id e vou colar e pra parte de contato vou copiar vou descer até aqui vou

clicar em avançado id e vou colar Pronto agora posso atualizar aí se eu clicar em sobre ele vai vir para cá se eu clicar Em área de atuação para cá equipe e contato e aí a de blog vai ficar na página que é de blog mesmo agora vamos fazer os ajustes finais tá vendo que tá sublinhado aqui em todas essas áreas não era para estar era para estar só no que tá ativo eu percebi que a gente tem que passar o mous aqui em cima vir aqui na área de menus e mudar os links do

nosso menu tá vendo a gente colocou o link direto da página inicial depois da Barra você vai colocar assim home posso até copiar isso daqui colocar em todos os outros Ó depois dessa barra home e barra tá aí em todas você vai fazer isso aqui a pgina de blog não precisa e a página de contato também a gente colocou aqui o link da página home pronto ó agora sim tá ativo só a página home quando a gente passa o mouse mostra e também fica ativo quando a gente clica em cima OK Vamos fazer um outro

ajuste que é colocar o ícone do nosso site percebe que quando tem qualquer site na internet sempre tem um ícone no navegador pra gente conseguir identificar então a gente consegue fazer isso aqui também vamos clicar aqui em cima em personalizar Vamos ir em identidade do site Vamos ir aqui em configurações Gerais do site favicon ó aqui e aqui a gente vai subir o ícone da nossa logo você vai clicar aqui em selecionar se a sua logo tiver espaço ó que nem aqui na minha se eu selecionar aqui ela vai cortar ele seleciona bem um quadradinho

mesmo se eu selecionar aqui ela vai cortar Então você tem que redimensionar o ícone da sua logo para ficar um quadradinho assim OK eu já tenho o meu o meu ícone então eu vou subir ele já cortado então eu vou subir ele para cá vou arrastar ele para cá pronto ó ele já muda ali aí você clica em publicar uma outra correção que ficou faltando é que aqui na parte do menu na área de blog eu esqueci de deixar ele fixo né eu desativei a transparência acabei desativando tudo então você vai passar o mouse em

cima de Elementor vai clicar aqui em menu de blog tem que estar na página do blog para você conseguir clicar e aí a gente vai voltar aqui no contêiner principal Vamos ver em avançado Stick header Effects e vamos ativar aí a gente vai desativar só essa opção aqui de Transparência e background color e a vamos atualizar agora vamos ver ó aqui da página inicial continua normal e aqui na página de blog Está escuro no fundo não fica transparente mas ele fica fixo na rolagem a mesma coisa se a gente entrar aqui em algum post ó

fica fixo na rolagem agora Prontinho Já terminamos aqui o nosso site olha como ele ficou bonitão Lembrando que essa barra preta aqui só aparece para você porque você está logado se você não tiver logado mais ele não aparece pro usuário ele não aparece então você pode passar o mouse aqui em cima clicar em sair ó ir para os advogados n com a página inicial tá vendo ó página inicial não aparece aquela barra ali em cima só aparece para você quando você está logado Ok então é assim que o seu site aparece aí para a pessoa

que acerar tudo configurado pros dispositivos móveis também site tudo ok e agora que já terminamos de criar o nosso site o terceiro passo vai ser algumas indicações que eu tenho de vídeo para vocês para que você deixe o seu site ainda mais completo tá tem várias coisas que eu Já ensinei aqui no canal como por exemplo seo que são configurações que a gente faz no site para que ele aparece nas primeiras posições nas pesquisas do Google mais rápido então tem esse vídeo aqui te ensinando tem Vídeo de otimização que são configurações que a gente faz

pro site ficar rápido para acessar tá então sabe quando você acessa um site ele fica demorando um tempão para carregar Então você resolve isso fazendo uma otimização tem vídeo aqui e vai estar o link aqui na descrição tá lgpd lgpd é a lei geral de proteção de dados é uma coisa obrigatória de ter nos sites porque os sites estão sempre captando informações né da pessoa que acessa E aí sempre que você entra no site tem um popupzinho assim pedindo para você aceitar os cooks né de consentimento e é isso que eu te nesse vídeo sobre

a lgpd cadastrar nas ferramentas do Google né como o Google Analytics o Google Search console que são ferramentas que você usa para medir a quantidade de pessoas que estão acessando Que tipo de pessoas são e com base nisso montar sua estratégia de marketing tem playlist de design também no canal eu já citei em algumas partes do vídeo que eu ensinei fazer banner que eu ensino fazer várias coisas no canva e em outros softwares também né Então a nossa playlist de design ela tá muito boa eu recomendo se você ainda não tiver criado as suas Imagens

vale a pena playlist de marketing também tem vídeo ensinando a criar Pixel do Facebook Pixel do Google então se você pretende fazer campanhas de tráfego Paga pro seu site saiba que tem vídeo aqui no canal ensinando também plugin de segurança é muito importante tá desses daqui noos outros você só teria uma performance ruim né mas a lgpd que é obrigatório e o plugin de seguranças são indispensáveis para você tá você configurar um plugin de segurança para evitar que se site se invadido aconteceu algum problema e junto com isso o vídeo de como fazer um backup

é importante que você faça um backup no seu site pelo menos de uma vez por mês para se acontecer alguma coisa seu site foi invadido foi infectado por vírus algo do tipo você ter uma cópia limpa dele para você só subir lá na sua hospedagem novamente e não precisar criar ele do zero tá inclusive agora que você acabou de fazer o site já faz isso já corre lá assiste o vídeo de como fazer o backup faz um backup do site aqui que tá pronto que aí se acontecer alguma coisa você tem uma cópia igualzinha como

ele estava você consegue usar para recuperar Ok Lembrando Que todo o material dessa aula imagens ícones código a gente vai deixar aqui na descrição só você clicar em mais que vai aparecer o resto da descrição aqui abaixo do vídeo Nós também somos parceiros e afiliados da Hostinger Então se você for comprar hospedagem não deixe de nos apoiar comprando com o nosso link nós temos o cupom de desconto mostrei lá no início do vídeo como comprar Como usar o nosso cupom Ok, comenta aqui o que que você achou desse tutorial. Se você curtiu deixa um like

no vídeo, se inscreve no canal, me segue nas redes, um abraço, até a próxima, tchau.