Neste vídeo eu vou te ensinar como criar um site profissional usando o WordPress e o Elementor Free. Fala pessoal, tudo bem? aqui é a Micaela do Descomplicando Sites e antes de partir pro tutorial eu quero pedir para você deixar um like no vídeo que ajuda demais o nosso canal a crescer e para você se inscrever no canal então é isso vamos lá pra tela do computador agora antes de começar a nossa aula tem alguns avisos muito importantes primeiro se você tiver achando que o vídeo está indo rápido ou devagar demais aqui no YouTube tem essa
engrenagem que você consegue clicar clicar aqui em velocidade de reprodução e deixar o vídeo ou mais rápido ou mais devagar se a legenda estiver te atrapalhando nesse ícone aqui você consegue clicar e desativar a legenda outra coisa também nós sempre vamos indicar outros vídeos para você de outros itens que a gente tenha ensinado aqui no canal e todas essas indicações a gente deixa aqui na descrição do vídeo o material de apoio também que a gente sempre deixa material de apoio com códigos ícones imagens que a gente Esteja usando aqui e também fica aqui na descrição
links de plugins e plataformas que a gente indicar também a gente deixa aqui então aqui tem essa descrição breve se você clicar em mais você vai abrir ó descrição completa inclusive nós temos a minutagem então se você quiser voltar no vídeo e ir para um capítulo específico a parte do menu a parte do rodapé vai estar aqui é só você clicar que você vai direto ali pra parte do vídeo o material de apoio ele fica aqui então ó baixa o material de apoio você clicando você vai pro drive e os nossos links de afiliados também
ficam aqui então você vai ver que no passo um a gente vai comprar a hospedagem de um domínio que é a única coisa que a gente vai precisar comprar aqui nesse tutorial porque são as ferramentas pra gente criar o nosso site e o nosso link ele fica aqui na descrição e nós temos também um cupom de desconto de 10% se você comprar com o nosso link você nos ajuda a trazer mais conteúdo relevante importante aqui para você e ainda ganha 10% de desconto com o nosso cupom tá bom então vamos lá pessoal o primeiro passo
então vai ser a compra do nosso domínio e da nossa hospedagem domínio para quem Não sabe é o link do nosso site né o endereço do nosso site na internet como esse domínio aqui dessa Landing de Page que eu também ensinei vocês a criar aqui no canal tem vídeo aqui no canal também ensinando tá se você quiser esse domínio aqui é um domínio personalizado com o nome desse projeto e para você ter um domínio com o nome da sua marca ou do seu projeto você precisa pagar pelo direito de usá-lo não se preocupe não é
caro a gente paga anualmente e eu vou te ensinar uma forma de conseguir o primeiro ano gratuitamente aqui na Hostinger mas você tem que ter ciência que é um gasto recorrente que você vai ter para sempre que você quiser que o seu site fique no ar já a hospedagem são mega computadores que hospedam os arquivos que acompanham o nosso site e ficam transmitindo ele paraa internet pra gente acessar de qualquer lugar e aí como hospedagem a gente precisa também pagar pelo direito de usar aí tem várias formas de pagar manualmente mensalmente vários anos então tem
várias maneiras de você gerenciar esse gasto mas outro gasto que você tem que ter ciência que é para sempre que você quiser que o seu site fique no app a empresa De hospedagem que a gente indica é a hospedagem Hostinger que é uma empresa multinacional ó nosso link fica aqui na descrição do vídeo você clica você é redirecionado pro site deles é uma empresa multinacional tem suporte em português tem equipe aqui no Brasil e tem inclusive servidor aqui no Brasil o que faz com que os sites carreguem ainda mais rápido então quando você clica no
nosso link você vem pra página inicial aqui do site deles e eles já deixam alguns planos disponíveis aqui pra gente que são os planos que mais são usados eu recomendo que você compre a partir desse plano premium por quê o plano premium ele nos garante direito a usar até 25 sites nesse plano ele suporta mais ou menos 25.000 visitas mensais isso aqui é uma estimativa tá não é um número exato mas é em torno de 25.000 visitas mensais então se você for fazer por exemplo uma campanha de tráfego se você for impulsionar um post ou
fazer algum tráfego que gere mais visitas no seu site é importante que o seu plano de hospedagem comporte isso e esse daqui que é o plano single né ele te dá direito a criar apenas um site e isso porta até 10.000 1000 visitas mensais aproximadamente então Pelo menos esse plano aqui ele contempla mais visitas então o seu site pode performar melhor nele além disso se você comprar neste plano aqui 12 meses você ganha o primeiro ano do domínio de graça então você não precisa pagar por isso além de vários outros recursos que ele tem a
mais também né e se você tiver fazendo um site você espera muitas visitas você já tem uma estimativa ou você vai fazer uma campanha de tráfego vai investir bastante dinheiro para ter várias visitas seria interessante que você pegasse planos maiores então por exemplo ó tá vendo aqui ó comporta até 200.000 visitas mensais aproximadamente fora isso você vier aqui em serviços e em hospedagem cloud você vai ver planos que comportam até mais visitas mensais então aquele plano lá que a gente viu é esse daqui que é o startup o professional tem mais recursos ainda o Enterprise
tem mais recursos ainda então se você precisa de um projeto muito grande tem outros planos aqui que comporta esse tipo de de projeto também ok então você vai escolher qual plano que você quer vai clicar aqui em escolher o plano aí quando você faz isso ele te pergunta aqui quanto tempo você quer comprar Eu recomendo que você compre pelo menos 12 meses porque primeiro se você fizer as contas sai muito mais barato do que se você comprar mês a mês porque olha só se você comprar um mês só saia 45 por mês se você comprar
12 meses cai para R$ 7,99 por mês então assim cai para menos da metade é um desconto muito bom se você comprar mais tempo você ganha ainda mais desconto ó cai para R$,99 por mês você compra do anos eu vou comprar aqui pelo menos 12 meses paraa gente pegar a promoção do domínio aí paraa gente ter um pouco mais de desconto ainda eu vou clicar aqui em tem um cupom de desconto vou vir aqui vou copiar o meu cupom ou você pode escrever também descomplicando os sites que é o nosso cupom clica aqui em aplicar
ó já vai ter baixado mais 10% e o valor final ficou 194,29 então fica muito barato para você ter 12 meses aí de domínio e de hospedagem né lembrando que depois desses 12 meses aí você precisa começar a pagar pelo domínio mas pelo menos nesse primeiro ano você não precisa se preocupar com ele aí você vai clicar aqui em continuar para fazer uma nova conta aqui na Hostinger já vai aparecer aqui o campo de e-mail e de senha aí você coloca aqui E clica aqui em registrar se você já tiver uma conta você clica aqui
em entrar se atente ao seu e-mail que eles enviam e-mail para você poder confirmar o seu e-mail confirmar a sua conta então é sempre bom você ficar atento ao e-mail que você colocou aqui como cadastro aí depois disso ele vai puxar os seus dados você vai clicar em continuar se não tiver puxado seus dados você vai preencher os dados vai escolher qual que vai ser o método de pagamento eu vou escolher cartão de crédito mesmo vou clicar aqui para poder aceitar os termos de uso vou clicar em enviar o pagamento aqui você vai colocar os
dados do seu cartão e aqui você vai escolher se você quer parcelar tá vendo como é muito melhor você comprar 12 meses porque mesmo que você queira parcelar ainda fica bem mais barato do que se você deixasse para descontar mês a mesa só que assim compromete né esse valor todo aqui do seu cartão de crédito então eu vou selecionar uma parcela vou conferir aqui os meus dados colocar meu CPF e clicar em pague agora pronto o pagamento já foi confirmado aí você pode clicar aqui em começar você vai clicar aqui em criar um novo site
vai clicar Em próxima vai clicar em WordPress e clicar em próxima isso é muito importante tá não clica aqui no criador de site da Hostinger não esse tutorial a gente tá fazendo com WordPress então você precisa clicar aqui e clica em próximo aqui ele já vai fazer a instalação do WordPress então a gente já vai colocar o login e a senha para logar no WordPress o WordPress é uma plataforma que aqui dentro da hospedagem ela é gratuita para fazer tudo que a gente quer fazer fora ela é gratuita mas você não consegue editar do jeito
que eu vou editar aqui não te deixa instalar plugin nem nada então aqui dentro da hospedagem ela é gratuita e é a forma como você vai logar no seu site esse login senha aqui que a gente está criando então ele pega por padrão aqui o seu e-mail e algumas sen que tiver no navegador mas você pode vir aqui e trocar a senha escolho o idioma também o meu já tá selecionado vou clicar aqui em próximo vamos clicar em criar site vazio e aí aqui ele vai nos pedir para escolher o nosso domínio a gente tem
um domínio gratuito né que ele vai nos permitir escolher aqui só que antes de escolher esse domínio eu peço que você faça uma pesquisa Aqui no site da Hostinger então abro uma outra aba volta aqui no site da Hostinger vem em serviços eh registro de domínio e faz uma pesquisa por aqui porque aqui você consegue visualizar melhor e ver se o domínio que você quer está disponível eu vou querer comprar o domínio Morgana Nutri é só você escrever e clicar aqui em procurar olha esse domínio aqui está disponível a extensão.com.br e a extensão.com isso é
muito importante porque primeiro o que que é a extensão extensão é tudo que vem depois do ponto né o seu domínio é esse aqui e a extensão é o que vem depois do ponto existem várias extensões o .com várias só que as mais comuns são .com.br e poncom pom é um tipo de extensão internacional então em todos os países você vai ver esse tipo de domínio aqui já as que tem pbr br significa Brasil então são extensões de domínios que indicam que aquele site é brasileiro isso é muito bom você criar um site com extensão.br
porque o Google ele tenta entregar pra gente o mais próximo do que a gente está pesquisando então se você tá no Brasil e pesquisando alguma coisa ele vai tentar te entregar conteúdos do Brasil para que você Consiga encontrar a exatamente aquilo que você está procurando então isso daqui pode te ajudar a ranquear mais tá só que por outro lado o que eu recomendo na verdade é que você compre os dois porque primeiro é barato não vai fazer diferença assim na sua vida olha só esse domínio aqui no primeiro ano é R$ 29,90 um ano inteiro
depois muda para R$ 79,90 por ano então é muito barato para você manter esse daqui também é a mesma coisa R$ 29,90 no primeiro ano e depois R$9,90 lembrando que né vai ganhar um deles aqui de graça do plano que a gente escolheu e você evita que outra pessoa tenha a mesma ideia que é você e compre um domínio igual ao seu né então pode acontecer da pessoa ter o mesmo nome que o seu e comprar extensão.com você comprou só acom.br e aí a pessoa fica competindo diretamente com você no Google com o nome igualzinho
o seu né então eu indico sempre que você compre os dois tem vídeo aqui no canal inclusive ensinando como comprar domínio dentro da hostinger mas enfim a princípio a gente aqui nessa parte é só pra gente escolher o nome do do domínio escolhemos aí você vai pegar vai voltar para cá e vai jogar o nome desse domínio aqui e aí você Vai clicar aqui e vai pegar o domínio o meu tá mostrando economiza aqui não tá mostrando gratuito porque eu já antes de pausar o vídeo eu já tinha pego um outro domínio aí não gravou
mas é assim vai estar escrito grátis aqui com a extensão que você quer você vai clicar e vai clicar de próximo aí quando você clicar para escolher o domínio clicar no próximo vai vir para essa terlinha para você concluir o registro do seu domínio aí você vai confirmar os dados que tiver aqui se tiver alguma coisa errada você clica aqui no lapizinho editar e clica em concluir registro do domínio pode ser que chegue um e-mail para você pedindo para você confirmar alguns dados então você tem que ficar de olho no seu e-mail e também na
parte de spam do seu e-mail tá para você confirmar algum dado que precisar e aí já vai começar a instalação do WordPress quando você faz a instalação do WordPress o a Rosting já te joga logada aqui para dentro do site aí você tem que se atentar aqui em cima se o seu domínio tiver bonitinho assim escrito o nome do seu domínio certinho você está na instalação correta agora se tiver com o nome todo estranho grande é porque ainda não Concluiu o registro do domínio e ele te mandou provisoriamente para um WordPress aqui instalado num domínio
provisório se isso acontecer se você vê que não tá escrito aqui essa primeira parte o domínio certinho que você escolheu você vai voltar dentro da Hosinger vai logar lá na Hosinger ó clica aqui em entrar loga e aí aqui no início vai ter o seu plano de hospedagem eu tenho vários planos porque eu fico comprando aqui para ensinar para vocês mas no seu caso deve ter só um aqui na parte de hospedagem aí você vai clicar aqui em gerenciar aqui em cima vai estar escrito o nome do seu domínio se você tiver escolhido um.com.br brode
demorar para ser propagado esse domínio então geralmente fica um aviso aqui em cima escrito que o domínio ainda não foi registrado para você esperar um pouco e isso é normal só você esperar um pouquinho que aí depois já vai estar tudo certo mas se não tiver nenhum aviso se tiver aqui esse botãozinho aqui de admin WordPress você clica você vai ser redirecionado para dentro do WordPress já logado tá outra maneira também de você logar dentro do WordPress sem precisar entrar dentro da Hostinger todas as vezes é você fazer Assim ó eu vou deslogar aqui para
você ver o seu site por enquanto ele está assim você acessando o seu domínio né e está correto seu site já está no A tá eu falo isso porque muita gente no final do vídeo fala: "Ai como que eu faço para colocar o site no A agora?" A partir do momento que a gente instalou depressa ele já tá no A ele é isso daqui aí pra gente transformar ele nesse site aqui a gente tem que ir lá e criar as páginas né mas por enquanto ele está assim já estando a Aí para logar é só
você vir aqui na frente do domínio e colocar /wp-admin paraa página de login aí você coloca seu login sua senha e pronto aí você já cai dentro do painel perceba que se você tiver na página WP-admin tiver logado você está dentro do painel administrativo se você não tiver logo aí cai aquela página lá para você logar tá então aqui é o lado de dentro do seu site é onde você vai fazer as edições para que apareça lá no seu site e para você ver o seu site é só você passar o mouse aqui em cima
clicar em visitar site ou acessar o link direto dele que é esse daqui tá então agora que fizemos a compra do domínio hospedagem vamos fazer as configurações do nosso WordPress Primeiro nós vamos mudar o tema vamos vir aqui em aparência temas tema é como se fosse o sistema operacional do nosso site assim como o celular tem o sistema operacional iOS o Android por exemplo e cada um deles tem características diferentes e funcionalidades diferentes aí no seu celular assim é aqui com o seu WordPress então o tema vai determinar essas características principais o que a gente
vai usar aqui vai ser o Hello Elementory então a gente vai vir em aparência temas adicionar temas se você vier aqui ele já deve aparecer de primeira que é isso daqui se não aparecer você vem aqui nessa lupinha e pesquisa pro hello aí a gente vai instalar depois ativar e aí esses outros três temas que vem padrão já instalado no WordPress a gente vai clicar e vai clicar em excluir e em OK nos três para não ficar temas desnecessários pesando o nosso site pronto vai ficar só isso daqui depois disso a gente vai instalar o
nosso plugin chamado Elementor elementor é um plugin e plugins são como se fosse aplicativos assim como no seu celular por exemplo assim que você compra ele você não consegue acessar o banco você precisa instalar um Aplicativo para isso assim é aqui no WordPress tem alguns recursos que não vem padrão você precisa instalar um plugin para funcionar como esse tema ele já depende do Elementor ele já pede a gente para instalar esse plugin aqui em cima já aparece a notificação você pode clicar aqui em instalar depois em ativar por aqui ou então você pode vir aqui
em plugins adicionar plugin pesquisar aqui por Elementor ou então vir aqui em populares que ele vai est aparecendo aqui e aí para instalar um plugin é sempre assim clica em instalar ele vai instalar aí depois você clica em ativar que ele vai ativar no site aí o Elementor te joga para uma outra página você pode clicar aqui na setinha para voltar lá para dentro do painel aí você vai perceber que abriram mais duas abinhas isso é comum toda vez que você instala num plugin geralmente ele traz outras abas aqui no seu painel para você mexer
nas configurações dele então conforme você for instalando mais plugins vai aumentando essas abinhas aqui tá agora a gente vai fazer as configurações de idioma se o seu tiver vindo em inglês você vai vir aqui em configurações vai clicar Nessa primeira configuração que é a geral vai procurar por esse ícone aqui que é o de idiomas e vai escolher o idioma português do Brasil aqui também você consegue fazer a configuração da data vou escolher essa daqui que é a padrão do Brasil e a configuração da hora vou escolher essa também de 24 horas que é padrão
do Brasil e vou clicar em salvar aqui é o título do seu site o título é essa frase que aparece aqui na parte de cima da aba tá vendo então eu vou mudar aqui o meu para doutora Morgana Morais e a descrição é o texto que aparece depois desse título tá vendo tem um tracinho tem outro texto então esse é o texto que aparece e é muito importante você colocar um texto que agregue aqui que fale um pouco do seu site porque ajuda a ranquear no Google e é o textinho que aparece também é lá
nas pesquisas se você não tiver mudado então eu vou mudar aqui a descrição para emagrecimento saudável e definitivo aqui você vai colocar o ícone do seu site percebe que nessas outras três aulas que a gente tem aqui todas tem um iconezinho desenho então é o que a gente chama de fiveon que é um ícone que representa o nosso site aqui em cada abinha Para isso é só você salvar o ícone da sua logo ou um ícone que represente a sua logo em formato quadrado e aí você vai escolher esse ícone e colocar aqui no site
primeiro eu vou salvar aqui vou clicar aqui em buscar o ícone é só você arrastar do seu computador para cá e depois clicar em definir como ícone do site e clicar em OK essa parte aqui dos links você não pode mudar de jeito nenhum por aqui tá senão vai quebrar o nosso site vai tirar o nosso site do A se você não tiver gostado do domínio quiser mudar para outro domínio tem como fazer isso mas é de outra maneira tem vídeo aqui no canal ensinando como mudar o site de domínio não mexe aqui senão vai
estragar o site tá aqui você pode mexer se você quiser que é o endereço de e-mail administrador é onde vai ficar chegando notificações para você é onde vai ficar chegando os e-mails do formulário então se você quiser trocar você pode trocar para outro e-mail aí depois de todas as alterações você clica em salvar alterações prontinho já fizemos aqui o nosso passo um agora vamos para o passo dois nós vamos criar a página home que é a nossa página principal e a página de blog que são as Únicas duas páginas que a gente tem aqui no
site o restante aqui do menu são ligações dessa mesma página ó se a gente clicar em sobre ele nos leva aqui para essa parte em depoimentos nos leva para cá em FAC nos leva para cá e em contato nos leva para cá então vamos criar as nossas páginas vamos vir em páginas todas as páginas por padrão ele já vem com a página de política de privacidade você inclusive pode clicar aqui em editar nela e clica aqui em publicar depois tem vídeo específico só sobre como fazer essa página de política de privacidade certinho tá mas é
legal deixar ela publicada pra gente poder puxar ela depois e aí se você quiser modificar o texto dela para português você clica aqui em edição rápida vamos colocar políticas de privacidade todo o site deve ter tá copia e cola aqui também e clica em atualizar beleza agora para criar a página home sempre que você quiser criar uma nova página você vai vir aqui em adicionar página vai colocar aqui o título vai chamar home clicar aqui em cima no botão de publicar duas vezes ó 1 do pronto já publicou a página vamos criar a página de
blog clica em adicionar página e escreve aqui blog Clique em publicar duas vezes prontinho agora que nós já criamos as nossas páginas vamos definir a nossa página home como página principal e inicial o que que isso quer dizer quando a gente passa o mouse aqui em cima da página home clica em ver ó se a gente não coloca ela como inicial fica aqui escrito barra home e o que a gente quer é que quando a pessoa acesse o nosso site ela vá diretamente para essa página home que não apareça escrito home aqui que seja a
nossa página principal ou seja a página que aparece quando a pessoa acessa o nosso link para isso a gente vai vir aqui em configurações leitura vamos marcar uma página estática vamos selecionar a página home e aqui em página de posts nós vamos selecionar a página de blog e vamos clicar em salvar e aí dessa forma quando as pessoas acessarem aqui o nosso site elas vão se deparar com a página home ainda não está mostrando a página home aqui tá vendo que tá mostrando arquivos essa aqui é a página de blog a gente não consegue ver
ainda a página home aqui ó essa aqui é a página de blog quando tem escrito arquivos é a página de blog por conta desse plugin que tá instalado a gente vai desinstalar ele por Enquanto vamos vir em plugins plugins instalados aqui no L Speedcast vamos clicar em desativar ele é um plugin de otimização que deixa o site mais rápido ele é muito importante só que no início aqui da criação a gente vai deixar desativado porque senão ele fica atrapalhando a gente como está atrapalhando agora então vamos desativar ele ó aí já dá para ver a
página home como página principal agora a gente vai definir a nossa paleta de cores e as nossas fontes padrões do site porque quando a gente define as cores e a paleta a gente não precisa ficar colocando as cores e as fontes em cada coisinha que a gente fizer como já tá configurado vai andar muito mais rápido o nosso processo para fazer isso a gente vai passar o mouse aqui em cima de rel vai vir aqui em página inicial aí vai ter aqui ó cores do site você vai clicar e aí você vai ser redirecionado aqui
para essas configurações padrões a gente vai definir as nossas cores ó ele vem aqui com as cores primário secundário texto e realce que significa link ou botão esse aviso do elementor pro que a gente pode fechar aqui no primário eu vou colocar essa cor pessoal lembrando que todas as fotos e códigos E tudo que a gente for precisar para essa aula vai estar disponibilizado lá no nosso material de apoio tá que fica no link aqui na descrição do vídeo todas as coisas que a gente precisar durante a aula vão estar aqui na descrição do vídeo
ó vou adicionar uma uma outra cor aqui personalizada vou colocar o branco pra gente poder puxar o branco como padrão também vou adicionar mais um colocar esse cinza mais claro e vou adicionar mais um e vou colocar esse alaranjado mais claro também nesse aqui eu vou pegar essa mesma cor alaranjado mais escuro e vou deixar como cor de real e vou clicar em salvar alterações aí a gente clica aqui na setinha e vamos configurar as nossas fontes aqui no primário que você os títulos principais a gente vai clicar aqui no lapizinho e vai usar a
fonte chamada Sora ó aqui você escolhe a família da fonte né o nome o tipo da fonte tem vários aqui você pode ir escolhendo ó conforme você vai mudando você vai conseguindo ver aqui então vou escolher a que chama Sora e o tamanho vai ser 35 peso 800 a secundária vai ser Poppins 14 peso 400 então vou pôr aqui tamanho 14 e a fonte vai se chamar Sora e aqui na fonte de textos Aliás corrigindo não é só que vai ser aqui não vai ser poppins pronto na fonte de texto também vai ser Poppins tamanho
14 peso 400 e na fonte de reals que é a fonte dos links vai ser Poppins 16 peso 500 pronto vamos criar mais alguns títulos personalizados aqui como um subtítulo a gente vai escolher a fonte Sora tamanho 30 e o peso peso a espessura a grossura da que vai ficar a fonte esse peso vai ser 800 aí vamos adicionar um outro que vai ser sora tamanho 18 e o peso vai ser 700 pronto vamos clicar em salvar aí depois disso a gente vai fechar aqui as alterações e lembrando que tanto este site quanto todos os
outros que a gente ensina a criar no canal nós disponibilizamos a venda aqui na nossa loja então se você não quiser criar tudo passo a passo você pode comprar o template e só ir modificando tem vídeo aqui também ensinando você como adaptar os templates vou deixar o link da loja no card na descrição se você quiser ir lá conferir agora nós vamos criar o nosso menu e o nosso rodapé que que é menu menu são esses links aqui que a gente usa para navegar pelo site tem uma diferença entre o menu e o cabeçalho o
menu são apenas esses links O cabeçalho é toda essa estrutura aqui que compõe essa parte de cima do site então tô falando isso porque às vezes a gente confunde muito que a gente acostumou a chamar isso aqui tudo de menu mas não é o menu é só essa parte a gente vai fazer o menu primeiro que são os links e depois vamos fazer o cabeçalho que é esse layout todo aqui que compõe essa parte e vamos fazer o rodapé que é essa parte aqui de baixo do site tá então vamos lá para fazer o menu
que são os links a gente vai vir aqui em aparência menus vamos dar um nome pro nosso menu vou colocar menu principal vou clicar aqui em cabeçalho vou clicar em criar menu aí aqui eu vou clicar em ver tudo aí vou selecionar a página home a página blog vou clicar em adicionar aí quando você adiciona aqui você pode arrastar e fazer como você quiser ó vou arrastar home para cima agora eu vou colocar links personalizados que são esses links ó que vão direto paraos lugares onde a gente quer aí para isso eu vou clicar aqui
em links personalizados vou colocar aqui o título que eu quero por exemplo sobre vou escrever aqui sobre e aqui eu vou colocar o link o link é o meu link né o link da página principal então vou copiar vou Colar ele aqui ele já vem com a barra se não tiver no seu você coloca a barra então depois da barra a gente coloca hashtag e o ID né a categoria classe o nomezinho que vai representar aquela sessão como aqui vai ser sobre tá eu vou clicar em adicionar o menu vamos fazer a mesma coisa com
depoimentos ó vou escrever depoimentos vou colar o link aqui #depoimentos quando você for escrever aqui em título você pode escrever com letra maiúscula pode escrever com acento pode escrever do jeito que você quiser agora aqui no link você só pode escrever minúsculo e sem assentos tá e sem pontuação também vou fazer aqui também a parte de contato hashag contato adicionar o menu e vou também fazer a parte de faq eu vou clicar em adicionar aí agora você ajusta do jeito que você quer vou colocar primeiro sobre depois depoimentos depois fac e por último contato depois
que você organizou clica aqui em salvar menu pronto agora que criamos o nosso menu né o nosso link se a gente acessar aqui o site a gente até consegue ver esse link aqui agora a gente vai criar o layout do nosso cabeçalho para isso a gente vai precisar instalar um plugin porque o Elementor Gratuito né que a gente tá usando por padrão ele não permite que a gente edite o cabeçalho então a gente vai precisar do plugin Royal Adons a gente vai vir aqui em plugins adicionar plugin vamos escrever aqui Royal vamos instalar e ativar
esse plugin vamos clicar em allow e continue agora a gente vai clicar aqui em time builder ó você atende que tem que estar nessa aba de header header é cabeçalho em inglês você clica aqui em create template dá um nome eu vou colocar modelo de menu vou clicar em criar template vou clicar em adicionar condições ó vou deixar em iter em todas as páginas e vou clicar em salvar condições agora a gente vai começar a criar o nosso layout e aqui eu vou passar uma breve explicação para você antes da gente seguir é muitíssimo importante
você não pule essa parte tá se você for iniciante então olha aqui é a nossa área de trabalho do plugin Elementor quando a gente clicar aqui a gente vai selecionar os nossos contêiners conttainêers são as abas que vão dividir cada um aqui dos itens que a gente for criando na página sempre vai ter o contêiner principal que é esse aqui de cima ó caracterizado por essas bolinhas esse X então Quando você quiser editar o contêiner principal é aqui então sempre que eu falar contêiner principal vai ser aqui por que principal porque ele pega a extensão
da tela toda então se eu colocar uma cor aqui por exemplo ele vai ficar na tela toda nós temos também os contêineres internos que a gente pode vir aqui na biblioteca e arrastar eles para cá tá vendo ó sempre tem esse quadradinho aqui então quando eu disser conêiner interno é esse aqui então o contêiner interno ele edita só essa parte dele a gente pode pôr mais de um contêiner tá vendo ó esse coniner interno esse contêiner aqui então quando for principal esse e interno é esses aqui a gente consegue pegar contêineres com divisões ou seja
que tem outros contêiners dentro então quando eu disser dois contêiner dentro você pega esse aí já vem com dois dentro tá vendo outra coisa aqui no mais vai ser a nossa biblioteca do Elementor é aqui que vai ter os widgets widgets são esses itens que a gente vai puxando e arrastando para cá e modificando tá toda vez que você quiser modificar alguma coisa é só você clicar em cima ou nesse lapizinho rosa que aí vai abrir todas as configurações aí tem Aqui a configuração de conteúdo e estilo que é onde você coloca cores e tudo
mais e a avançado então sempre que você quiser editar é dessa forma quando você quiser excluir alguma coisa procure sempre o xizinho ou então se for um item você clica e procura excluir se você quiser duplicar clica duplica clica copia arrasta para lá e para cá então tem todo esse dinamismo OK então vamos lá vamos clicar aqui clicar em flexbox pegar um que tem apenas uma setinha pro lado vamos vir aqui em estilo tipo de plano de fundo vamos colocar uma cor é quando a gente quiser pegar uma cor padrão que foi aquelas que a
gente configurou a gente vai clicar aqui no mundinho ó sempre que você clicar aqui nesse mundo nesse globinho você vai encontrar todas as configurações padrões então vou pegar essa cor alaranjada vou vir aqui na biblioteca que é no mais vou arrastar um idit de botão para cá e vou escrever fale conosco pode ser trabalhe conosco acho que aqui vai fazer mais sentido a gente mudar para fale conosco aqui no link a gente vai colocar depois o link da página de contato tá depois a gente volta a linkar aqui ou pode ser o link também do
WhatsApp é só você colar o link Aqui vou vir aqui em estilo a cor eu vou clicar na cor e vou arrastar para cá para deixar a barrinha transparente e aqui em preenchimento vou deixar zero não quero que ele tenha nenhum espaçamento aqui na tipografia vou deixar como está né o tipo de fonte que está mas vou vir aqui em decoração vou deixar sublinhado pra pessoa entender que é para clicar tá agora eu vou voltar aqui na biblioteca vou pegar o widget de redes sociais só você pesquisar sociais aí você arrasta para cá se não
tiver conseguindo arrastar exatamente para ali você pode arrastar para cá clica em com botão direito copiar clica aqui com o botão direito e clica em colar que aí ele fica bem do lado aí esse aqui você já pode apagar aí você clica aqui coloca as redes sociais que você quiser você pode excluir adicionar outras ou então você pode clicar e ir mudando eu vou colocar aqui é vou adicionar mais uma vou colocar aqui Instagram só você pesquisar aqui o ícone aí você cola o link aqui né vou adicionar uma outra aqui que é o do
WhatsApp e esse do YouTube eu vou mudar para TikTok que hoje tá bem comum né clica aqui em todos os ícones e escolhe aqui o TikTok pronto você pode arrastar E modificar aqui da forma que você quiser ó vou deixar primeiro WhatsApp Instagram TikTok aí aqui a gente vai vir em estilo de cor oficial a gente vai mudar para personalizado e aqui na cor primária ó você consegue mudar a cor do fundo eu vou querer que fique transparente porque eu vou querer só a cor dos ícones então vai ficar assim e a cor secundária vai
ser a cor branca e aí o tamanho a gente vai diminuir vou deixar mais ou menos o mesmo tamanho do meu texto do botão vou deixar só um pouquinho maior e aqui em ícone ao passar o mouse vou colocar animação de brow que aí quando a pessoa passar o mouse vai fazer essa animação aí vou vir aqui no contêiner principal vou vir em layout vou vir aqui em espaço entry e vou clicar que aí eles vão ficar nas extremidades vou vir aqui em centro para alinhar todos ao centro tá vendo que antes o botão estava
mais para cima agora a gente alinhou e ficou todos aqui no centro vamos clicar vir em flexbox pegar um flexbox com a setinha pro lado vamos vir aqui na biblioteca vamos arrastar um widget de imagem para cá deixar aqui o tamanho completo vamos clicar e vamos arrastar para cá a nossa logo Eu já tenho a logo aqui no meu computador e está também para vocês lá no nosso material de apoio só arrastar para cá clicar em selecionar vamos clicar em mais vamos pesquisar aqui por nave menu né que é menu de navegação vamos arrastar para
cá ó ele já selecionou o nosso menu principal se não tiver você seleciona aí aí a gente vai clicar vai vir aqui em estilo aqui em tipografia a gente vai escolher tipografia de de texto vamos dar só uma ajustada aqui em text color a gente vai escolher essa cor secundária e aqui na ação de passar o mouse a gente vai mudar ó o que a ação de passar o mouse está dessa cor a gente vai mudar só pro tom de alaranjado mais claro ó que ele vai dar só uma desbotadinha quando a gente passar o
mouse a gente vai clicar aqui no contêiner principal vamos vir aqui vamos colocar espaço enter e vamos deixar alinhados ao centro agora vamos vir aqui na nosso logo e vamos vir aqui em avançado largura personalizado e vamos diminuir a largura da nossa logo aí vamos deixar assim vamos clicar aqui no menu e aí a gente pode vir aqui em interior horizontal e dar uma afastada na distância entre esses nossos links aqui pronto ficou assim vamos Clicar em publicar agora se a gente acessar aqui o nosso site já mudou o cabeçalho tá vendo já está assim
eu vou na verdade desativar essa opção de pointer ó vou vir aqui em conteúdo vou vir em menu itens e vou deixar non então quando passar o mouse não vai aparecer o pointer vou clicar em publicar pronto agora tá certinho agora nós vamos clicar aqui no celular que a gente vai fazer a edição para mobile né que é o ajuste que a gente faz do layout para diferenciamento de tela então aqui a gente ajusta pro celular e depois para o tablet tá então vamos colocar aqui no celular a parte de cima aqui tá ok aqui
na parte de baixo a gente vai só clicar aqui na logo vai vir em avançado aqui em largura personalizada a gente vai mudar para porcentagem e vai aumentar o tamanho da nossa logo aqui no menu a gente vai clicar vai vir aqui em estilo aqui em tog button aqui na corjado aqui em hover que é a ação de passar o mouse para esse alaranjado mais claro e quando a gente abre ó ele está com hover que é a ação de passar o mouse azul isso a gente corrige aqui em mobile menu itens a gente vai
vir em folks e aí aqui a gente vai escolher a cor alaranjado ó aí Quando passar o mouse vai ficar com essa cor se você quiser você pode mudar o espaçamento entre os itens espaçamento horizontal deixar mais para lá mais para cá você pode vir aqui em conteúdo deixar alinhado ao centro aqui em menu mobile você pode deixar customizado ó aí fica para cá e aí você vem e aumenta o tamanho que você quer você pode deixar fulled que aí fica na tela toda que é como eu mais gosto e você pode deixar o ícone
um que é esse o ícone dois que é esse ou algum desses outros ícones então você tem três opções vou deixar esse aqui que é o mais comum vai ficar assim e aqui no tablet tem a opção de ficar assim também com esse menu que é o menu que a gente chama de hambúrguer ou então se você quiser mudar você clica aqui vem aqui e coloca mobile que aí fica o menu aberto tá vou deixar o menu aberto mesmo então está assim para computador assim para tablet e assim para mobile tudo redondinho vamos clicar em
publicar e agora nós vamos para o nosso rodapé para isso a gente vai vir aqui dentro do painel administrativo sempre que você quiser só você passar o mouse clicar aqui em painel e você vai vir aqui por dentro do painel administrativo Vamos clicar em Royal Adons ir para a aba builder vamos colocar em footer footer é rodapé inglês tá então se atende que tem que estar nessa abinha aqui vamos clicar em criar vamos dar um nome vou colocar rodaapé vou clicar em criar template adicionar condições e tre site né que é para aparecer em todo
o site e salvar condições agora a gente vai criar o nosso modelo de rodaapé a gente vai clicar aqui em mais vai pegar um flex com dois contêineres dentro vamos vir aqui em avançado vamos colocar 50 de padding ah esqueci de dar essa explicação no início nós temos aqui os espaçamentos de preenchimento que eu também chamo de padding porque antes a ferramenta era inglês então eu sempre acostumei chamar de padging agora traduziu para preenchimento mas é a mesma coisa então preenchimento é o espaço de dentro e margem é o espaço de fora tá então sempre
que eu falar padding é o espaço de dentro e margem é o espaço de fora ok então 50 de pad vamos vir aqui em estilo tipo de plano de fundo vamos pegar essa cor é alaranjado mais claro que já está configurado agora vamos vir aqui na biblioteca arrastar o widget de imagem para cá deixar aqui completo Vamos pegar a imagem da nossa logo ah uma coisa que eu esqueci de fazer também no menu vamos lá vamos voltar aqui já tô com ele aberto uma coisa também pessoal se você quiser voltar a editar os layouts ó
por exemplo quero editar o menu de novo é só você passar o mouse em cima de Elementor que vai estar aqui ó modelo de menu de rodapé então é só você clicar em cima do menu que você vai ser direcionado pro editor novamente tá então uma coisa que eu esqueci clica aqui na logo clica em link coloca o RL personalizado e aí você vai puxar o RL da página home né vai puxar o link da página home você pode colar o link aqui também que aí quando a pessoa clicar aqui ela é redirecionada pra página
home tá vamos fazer a mesma coisa aqui no nosso rodapé ó link e vamos puxar a página home vamos vir aqui em avançado largura largura personalizada e vamos diminuir um pouco o tamanho da nosso logo vamos vir aqui na biblioteca vamos arrastar um ido para cá e aí nós vamos colar este textinho que eu pedi o chat aptri pra gente com um pouquinho de SEO então ó pessoal principalmente para sites e negócios locais é interessante que você coloque o nome da cidade para que seja Melhor ranqueado no Google muita gente pesquisa nutricionista Uberlândia nutricionista perto
de mim nutricionista que atende Unimed por exemplo que é um plano de saúde muito forte aqui na minha cidade então se você atende plano de saúde se você eh atende fisicamente numa cidade é interessante que você coloque aqui se você atende online é interessante que você coloque também ao longo do site essas frases então eu coloquei aqui ó emagrecimento com equilíbrio né atendo presencialmente em Uberlândia e também online para todo o Brasil então se a pessoa pesquisar nutricionista que atende online vai facilitar pro Google entregar o seu site tá então vou selecionar aqui emagreça com
equilíbrio e vou deixar bold né vou deixar a espessura mais grossa ficou assim vou aproveitar que eu estou com o meu modelo de menu aberto e vou copiar os meus ícones vou clicar em copiar vou clicar aqui vou clicar em colar vou clicar aqui vou vir em estilo aí na minha cor secundária eu vou deixar aliás na cor primária eu vou deixar este alaranjado aqui em tamanho eu vou aumentar um pouquinho o tamanho vou vir aqui em conteúdo em forma vou deixar círculo e vou deixar Ele aqui alinhado para a esquerda agora aqui nesse outro
contêiner a gente vai clicar vai vir aqui no estilo tipo de plano de fundo vamos deixar a cor branca vamos vir aqui em borda vamos deixar sólido aqui em cor da borda vamos deixar esse cinza bem clarinho e aqui em largura vamos deixar um e aqui no raio da borda a gente vai deixar 15 para ficar assim um pouco mais arredondado pronto ficou assim agora a gente vai vir na biblioteca vai pegar uma caixa de ícone vamos arrastar para cá vamos clicar com o botão direito clicar em duplicar vamos clicar aqui neste contêiner principal vir
em layout e vamos colocar assim ó na linha horizontal para que todos os itens fiquem um abaixo do outro a gente vai clicar vai enviar um arquivo de ícone SVG svg é uma extensão de arquivo para ícone eu vou deixar os que eu estou usando aqui para vocês o nosso material de apoio mas tem vários sites que você consegue baixar o flat ícon por exemplo é um deles tem a parte de ícones aqui gratuitos tem a parte de ícones pagos e tem vários outros sites que você consegue baixar ícones SBG tem um vídeo aqui no
canal como baixar ícones SVG gratuito tá vou arrastar para cá os ícones que eu estou Usando nesse site vou selecionar esse aqui se você não quiser colocar um ícone e customizado como esses é só você clicar aqui em cima que você abre a biblioteca de ícones do Elementor ó que tem vários ícones eu gosto de usar ícones SVG porque tem uns bem mais bonitos né aí fica mais customizado aqui eu vou colocar assim nesse título eu vou colocar telefone nesse aqui eu vou colocar WhatsApp e nesse outro eu vou colocar endereço aqui eu vou colocar
o número de telefone fictício né só para poder simular aqui para vocês aqui nesse outro também vou colocar o mesmo telefone e aqui eu vou colocar o endereço fictício também rua B 1 2 3 Uberlândia então aqui eu vou clicar em cima vou vir aqui em todos os ícones vou pesquisar pelo ícone do WhatsApp aqui endereço vou enviar o arquivo SVG vou pegar esse ícone aqui agora eu vou clicar aqui neste primeiro vou vir em estilo vou vir em conteúdo na cor do conteúdo vou deixar essa cor de texto e aqui no título vou pegar
este último de subtítulo vou dar só uma aumentada nele aqui deixar tamanho 20 eu vou clicar com o botão direito copiar clicar com o botão direito colar o estilo em todos vou Clicar aqui nesse contêiner vou clicar aqui em alinhar todos o centro e vou clicar aqui para deixar espaço ent vou clicar neles também vou vir em avançado vou colocar 30 de pad vou clicar aqui vou vir em estilo vou vir em avançado vou vir em borda vou deixar sólido vou clicar aqui para desvincular os valores então quando está assim eh tudo que você vai
colocar ele vai ir para todas as extremidades se você clicar aqui para desvincular aí você consegue mexer em apenas um dos lados então é isso que eu quero fazer eu quero colocar aqui só na parte direita então vou deixar um de borda na direita vou clicar com o botão direito copiar clicar com o botão direito colar o estilo tá vendo que aí eu quero colocar aqui também e esse aqui também colar o estilo só que esse aqui eu vou clicar e vou vir aqui em avançado vou vir borda e vou tirar essa borda vou deixar
padrão aqui na borda eu vou deixar de uma cor mais clara então vou vir aqui avançado borda aqui na cor da borda eu vou deixar esse cinza claro clicar com o botão direito copiar clicar com o botão direito colar o estilo eu deixei muito espaçamento vou vir aqui vou vir avançado vou mudar para 20 ligar Com botão direito copiar colar nesse aqui eu vou trocar direto para 20 e vou vir aqui nesse contêiner vou clicar vou deixar ele aqui 55% vou vir nesse aqui e vou diminuir para 45 que aí este vai ter um pouco
mais de espaçamento e vai ficar assim ó esse aqui faltou eu tirar a borda ele foi também a borda deixa padrão pronto vou clicar em publicar aí ficou assim agora vamos clicar aqui vi com flexbox com a setinha pro lado vou vir na biblioteca vou arrastar um widget de título para cá vou colar este texto vou mudar para 2025 agora né vou duplicar este texto do outro lado eu vou colocar políticas de privacidade então eu vou vir aqui e mudar esse texto e aí aqui neste política de privacidade eu vou selecionar a página de políticas
porque aí quando a pessoa clicar ela vai ser redirecionada para lá vou clicar aqui vou vir em estilo na tipografia eu vou pegar a tipografia de realce aqui também ó vou clicar com o botão direito copiar clicar com o botão direito colar e vou mudar a cor para branco clicar com o botão direito copiar clicar com botão direito colar estilo vou clicar aqui vou clicar em tipo de plano de fundo vou selecionar esse alaranjado vou Vir aqui avançado vou deixar 20 de preenchimento vou vir aqui em layout vou deixar todos alinhados ao centro e espaço
entre que eles vão ficar um para um lado e outro para o outro tá vou clicar em publicar agora vamos colocar aqui no celular né no mobile vamos vir avançado no contêiner principal a gente vai deixar 20 de preenchimento vamos desvincular e na parte superior a gente vai deixar 30 e na parte inferior a gente vai deixar 30 também vamos vir aqui na logo aqui em largura personalizada vamos deixar 100% o texto tá com tamanho OK os ícones a gente vai vir e vai clicar em alinhamento e deixar alinhado ao centro aqui a gente vai
vir vai fazer um ajustezinho vamos clicar vamos vir aqui em avançado em largura vamos deixar 100% vamos clicar aqui avançado largura 100% clica aqui avançado largura 100% aqui a gente vai clicar vai vir em layout vai deixar aqui alinhado ao centro vai vir aqui nesse texto e vai deixar alinhado ao centro aqui em alinhamento vamos clicar em publicar aí vamos clicar aqui para ver como está ficando no tablet no tablet para deixar ela da lado vai ficar meio feio então a gente vai vir aqui no contêiner principal vamos ir Em layout vamos deixar aqui ó
envolver que é para quebrar a linha para baixo e a gente vai vir nesse contêiner aqui em largura vamos deixar porcentagem vamos deixar 100% aí vamos vir neste contêiner em largura vamos deixar porcentagem vamos deixar 100% que aí eles vão ficar alinhados para baixo aí a gente pode fazer uns ajustes ó vamos ver aqui em estilo espaçamento entre o conteúdo aqui no ícone a gente pode diminuir um pouquinho também voltar aqui encaixa e diminuir espaçamento entre o ícone clicar com o botão direito copiar clicar com o botão direito e colar estilo em todos os outros
e aí ficou assim vamos clicar em publicar então ó no computador tá assim no tablet assim e no celular assim tudo funcionando direitinho então finalizamos o nosso menu rodapé agora vamos de fato começar a criar o layout da nossa página home então todas as coisas que estão aqui ó nós vamos criar agora e aí para criar aqui o layout da página home separei aqui também em cada uma das sessões pra gente e a primeira que a gente vai criar a primeira dobra né que é o banner com a headline que é o o título os
títulos aqui no caso e o CTA que é a chamada Para ação então sempre num site você vai ver isso daqui esse banner eu já ensinei vocês a criar no Canva então sempre que eu solto um projeto aqui eu solto um vídeo ensinando a criar as artes no Canva e vai ter esse vídeo aqui específico então se você ainda não fez o seu banner vai lá assistir esse vídeo e também tem outros vídeos aqui no canal se você vier aqui no canal nessa lupin jogar banner de Canva você vai encontrar olha só vários vídeos porque
praticamente todos os projetos que eu faço eu venho aqui e ensino vocês a criarem o banner então se você gostou de outro estilo de banner só você vir aqui e fazer mas os dessa aula aqui vão estar todos também o material de apoio se você quiser fazer igualzinho tá então vamos lá vamos em páginas todas as páginas vamos vir aqui na nossa página home clicar em editar clicar aqui em cima em editar com Elementor vamos clicar aqui na engrenagem vamos vir aqui em layout da página e vamos escolher elementor largura total para sumir com esse
título aqui da página ela ficar toda em branco agora a gente vai clicar aqui no mais vai clicar em flexbox vai pegar um com dois contêineres dentro vai vir aqui em avançado vamos Colocar 50 de preenchimento vamos ir em layout vamos deixar 650 de altura vamos ir em estilo tipo de plano de fundo vamos escolher imagem e vamos arrastar a imagem que a gente quer para cá vou arrastar essa minha imagem do banner para cá quando você trouxer uma imagem pro seu site não deixe ela com o nome assim aleatório que é o nome que
a gente geralmente salva coloca o nome do seu projeto coloca o seu nome para que isso contribua para ranquear melhor no Google então vou colocar Morgana nutri colocar Nutra Nutricionista Uberlândia por exemplo tá coloca aí o nome que você quiser coloca nas outras partes também e clique em selecionar pronto aí aqui em tamanho de exibição você vai deixar sempre cobertura em posição vamos deixar centro ao centro agora vamos ir na biblioteca vamos arrastar um widget de título para cá vamos copiar esse título que está aqui e colar ele vamos vir aqui em estilo cor do
texto vamos deixar essa cor cinza e pra gente colocar algumas imagens destacadas de laranja a gente vai usar um pequeno atalho em vez da gente ter que escrever os códigos ó arrasta para cá o texto cola o título aqui e Aí as palavras que você quer você seleciona então por exemplo emagrecimento você vai selecionar aqui emagrecer de verdade sem sofrimentos ó emagrecer de verdade se o seu não tiver aparecendo tudo você clica aqui pr abrir o espector todo aí você clica aqui clica em personalizado e aí você cola a cor que você precisa neste campo
eu vou colar essa cor alaranjada que eu tô usando aí você clica fora clica em OK e pronto aí sem sofrimento também vou selecionar já vai estar a cor aqui é só você clicar aí isso aqui vai gerar um código você clica aqui em código vai copiar esse código vem aqui no id de título vem o conteúdo aí você cola o código inteiro ele vai ter aplicado nas palavras esse ID de texto aqui a gente vai continuar porque a gente vai pegar este outro texto que a gente tem e vai colar ele aqui aí as
palavras que você quer destacar você vai selecionar ó seleciona e clica aqui no B para deixar em bold aí eu vou selecionar outras também e pronto agora vamos colocar um botão vamos arrastar o widget de botão para cá aí a gente vai escrever aqui: "Quero emagrecer saudável agora para ser o texto de dentro" você pode Colar aqui no link um link vai pro seu WhatsApp você pode colar também a linkagem aqui para sessão de contato ó que é o que eu vou fazer vamos vir aqui em estilo em preenchimento vamos deixar 20 em raio da
borda vamos deixar cinco aqui na cor a gente vai mudar para gradiente e essa cor de baixo a gente vai deixar aquele alaranjado mais claro e vai mudar o ângulo da cor ó para que esse mais claro fique aqui e o mais escuro fique para cá vamos deixar ele esticado e vamos vir aqui em avançado largura vamos deixar personalizado e vamos diminuir um pouco a largura desse botão também vou vir aqui em estilo tipografia vou aumentar um pouquinho o tamanho pronto vai ficar assim agora a gente vai vir aqui em sombra vou pegar o código
da cor que eu quero que fique que é uma cor bem clarinha aí eu vou deixar aqui 8 - 8 10 8 aqui em vez de ficar o -8 aqui do focado 10 e aqui -5 que vai ficar só essa sombra meio 3D pronto o título também eu vou aumentar um pouco vou deixar tamanho 38 vou vir aqui no contêiner principal vou vir em layout vou deixar alinhado ao centro e vamos clicar em publicar lembre-se pessoal de toda vez que você For fazendo alterações clique em publicar porque se acontecer alguma coisa se computador desligar a
energia cair você não perde as alterações que você fez tá outra coisa vamos vir aqui na biblioteca vamos vir em lista de ícones vamos arrastar uma lista para cá vamos excluir deixar só um aqui vamos enviar vg vamos pegar esse ícone que eu já vou ter deixado para vocês aí a gente vai copiar esta frase é uma frase aqui para mostrar credibilidade vamos vir aqui em estilo vamos vir em ícone vamos aumentar o tamanho desse ícone vamos vir aqui na cor vamos deixar uma cor cinza mas vamos dar uma clareada nessa cor opa mexi foi
na cor do ícone né é na cor do texto que eu quero deixar cinza vamos dar uma clareada nessa cor e aqui no texto vamos deixar o texto de realce que é o texto de botão né que é maior então vai ficar assim o nosso banner agora a gente vai para essa parte aqui que é uma parte dos diferenciais né a gente vai clicar vai pegar um contêiner com a setinha para baixo vai vir em avançado vamos colocar 50 de preenchimento vamos ir aqui em estilo vamos deixar a cor do fundo de branco vamos vir
aqui copiar com o botão direito né Clica com o botão direito clica em copiar vem aqui dentro clica com o botão direito clica em colar vem aqui em estilo vamos deixar aqui alinhado ao centro e aqui a gente vai mudar o nosso texto e a gente pode arrastar um widget de texto para cá pra gente poder fazer aquele esquema de novo das palavras né a gente cola aqui o texto que a gente quer e a gente destaca só as palavras que a gente quer aqui no meu caso perder peso vou destacar vou copiar essa cor
alaranjada aqui primeiro pronto ó perder peso clico aqui personalizado clico fora e vou selecionar a nova vida e vou clicar aqui aí vou vir aqui copiar o código vir aqui e colar pronto aqui nesse texto também eu vou vir aqui em estilo deixar alinhada ao centro vou copiar vou vir aqui vou colar aqui eu quero fazer uma quebra de linha então eu vou vir aqui na palavra perder vou colocar assim ó sinal de maior sinal de menor e no meio a tecla BR aí faz a linha ir para baixo aqui também vou fazer a mesma
coisa na palavra sua aí eu vou clicar aqui em código né na palavra sua sinal de maior sinal de menor e no meio br que vai ter quebrada a linha pronto agora vamos vir aqui na biblioteca vamos arrastar Um widget de grade para cá grade é um tipo de contêiner que já tem os espaços pré-definidos tá vendo e a gente consegue definir tudo por aqui ó quantidade de colunas a quantidade de linhas inclusive eu vou mudar a quantidade de linhas para um e aumentar a quantidade de colunas para quatro aí eu vou vir aqui na
biblioteca pegar uma caixa de ícone arrastar para cá aí aqui é muito simples você vai copiando os títulos que tem aqui ou então vai escrevendo o título que você quer e vai colocando uma descrição tente colocar uma descrição do mesmo tamanho tá porque tem site que foi feio demais que um card é só uma frase outro card é uma bíblia né de texto então tente reduzir e deixar tudo mais ou menos com o mesmo tamanho se você não conseguir você pode pedir pro chat apt fazer para você você joga lá os tópicos e fala: "Olha
crie os esses tópicos aqui com as descrições com o mesmo tamanho com a mesma quantidade de palavras que aí ele vai fazer isso para você" pronto agora a gente vai vir cada um dos cards e vai colocar os ícones né eu estou usando ícones SVG eu vou deixar todos que eu estou usando nesse projeto para vocês mas Você pode ir também no site do Flaton por exemplo e pegar os ícones que você quer e se você quiser você pode usar os ícones aqui do Elementor só que eles não são tão bonitos e tão customizados quanto
outros ícones quando você baixar um ícone e ele vier assim ó não vier com a cor ele está com algum bugzinho aí você pode voltar lá onde que você baixou e baixar outro ícone da mesma maneira que não esteja com esse bug escolher esse aqui vamos ver se ele vai vir certinho ó esse ficou certinho ficou da cor vamos clicar aqui em um dos contêiners vamos ir em avançado vamos colocar 30 de preenchimento vamos ir em estilo conteúdo tipografia eu vou deixar essa de Opa peguei foi a de baixo essa aqui é a de a
de texto essa aqui ó de do título vamos deixar essa só que eu vou dar uma aumentada para tamanho 21 pronto vamos vir aqui em conteúdo aqui no ícone a gente vai mudar para empilhado que é quando tem uma cor de fundo vamos vir aqui em estilo em ícone na cor primária a gente vai deixar essa cor cinza e na cor secundária que é a cor do ícone a gente vai deixar esse alaranjado e aqui em tamanho nós vamos diminuir vou vir aqui nessa cor primária e Vou dar um uma diminuída na opacidade dela para
ficar bem sutilzinha pronto ficou assim tamanho do ícone aqui eu vou dar uma aumentadinha aqui em conteúdo na cor do título eu vou deixar de cinza vou vir aqui em avançado vou vir em borda vou deixar sólido na cor da borda eu vou deixar esse cinza mais clarinho e em largura eu vou deixar um às vezes dá esse bugzinho mesmo do card lá para baixo mas isso é comum tá não tem problema não e aqui no raio da borda eu vou deixar 10 aí eu vou clicar em publicar ó se você tirar aqui o seu
editor e tiver assim só você recarregar a página depois de ter publicado tá para não excluir as coisas para sair o bug tinha colocado a cor errada aqui da borda por isso que não tá aparecendo tá clara demais essa cor aqui pronto aí agora aparece a corzinha da borda a gente vai clicar com o botão direito copiar clicar com o botão direito e colar em todos os outros só que nessa daqui a gente vai fazer algumas mudanças vamos vir aqui vamos vir em avançado vamos ir em plano de fundo aqui no tipo de cor a
gente vai colocar essa cor primária esse alaranjado primário e aqui ao passar o mouse no tipo de cor a gente vai colocar esse alaranjado Mais escuro que aí fica um alaranjado mais claro mas quando a pessoa passa o mouse fica mais escuro aqui na cor a gente vai vir aqui em estilo no ícone a gente vai mudar a cor primária para branco e a cor secundária para branco também mas aqui na cor primária a gente vai diminuir a opacidade pr deixar ela bem clarinha e aqui na cor secundária que é a cor do nosso ícone
mesmo a gente vai deixar de branco não tá aparecendo aqui porque tá com algum bugzinho de CSS mas já já conerta vamos ir em conteúdo e a cor do texto a gente vai deixar de branco a cor da descrição a gente vai deixar de branco também vamos vir aqui em avançado em borda a cor a gente vai deixar esse alaranjado mais escuro vamos clicar com o botão direito clicar em copiar clicar com o botão direito e clicar em colar vamos clicar aqui em publicar e vamos acessar a nossa página por fora pra gente ver só
clicar aqui no olhinho que a gente consegue ver ó tá vendo então as cores estão sendo aplicadas certinho só tá esse bug aqui dentro do próprio elementor lembrando pessoal que isso daqui é a visualização então por exemplo se eu altero qualquer coisa aqui dentro do elementora ó e Publico a página ela até recarrega sozinha paraa gente poder ver as atualizações mas esse aqui não é o link da sua página não é o link que você vai mandar pras pessoas eu falo isso porque tem muitas pessoas que me chamam no Instagram para falar que o site
não tá funcionando aí quando vou ver tô acessando esse link esse link aqui só o editor que é você que tem acesso se você for ver o site sem logar é o link principal aqui da sua página que você tem que acessar tá vendo então beleza outra coisa que você pode fazer também para recarregar você não tem que recarregar a página ó clica aqui com botão direito clica em duplicar que aí ele já puxa as configurações certas aí você pode escolher esse que está errado pronto agora nós vamos para esta outra sessão que é a
sessão de quem sou vamos criar flexbox vamos pegar um contêiner com dois avançado vamos colocar 50 de preenchimento vamos ir em layout vamos deixar 650 de altura vamos ir em estilo tipo de plano de fundo vamos escolher uma cor eu vou pegar essa cor meio alaranjada meio clara vou clicar com o botão direito clicar em copiar clicar com o botão direito clicar em colar aí aqui eu vou copiar esse título né quem é Dra Morgana vou vir em estilo vou deixar alinhado pra esquerda e vou fazer a mesma coisa eu vou pegar o widget de
texto vou copiar aqui esse título colocar no widget de texto colar ele aqui e aqui onde tem Drautora Morgana vou selecionar esse nome clicar no espectro de cor personalizado colar a cor clica fora OK vem código copia o código vem no título cola o texto aqui pronto vou duplicar também esse título e aqui em cima eu vou escrever só conheça e vou arrastar aqui para cima aqui eu vou vir em estilo vou deixar a cor alaranjado aqui na tipografia vou deixar a tipografia de realce vou vir aqui em tipografia e vou deixar transformação maiúscula vou
só aumentar um pouquinho agora eu vou vir aqui no texto que eu quero vou copiar vou vir aqui no widget de texto vou colar ele aqui vou colar ele aqui e se você quiser destacar algumas coisas lembra que é só você vir e selecionando o que você quer e colocar em bold como Dra morgana aqui que a gente seleciona e coloca em bold pronto agora eu vou pegar uma lista de ícones vou arrastar para cá vou excluir todos vou deixar só um e ir configurando ó coloquei aqui aqui eu vou enviar Um ícone SVG para
cá ou então você pode vir aqui ó pesquisar por exemplo o ícone que eu vou usar o de check você pode por exemplo pegar um ícone de check por aqui eu vou escolher um ícone aqui do flaticon que eu acho que fica mais bonito que é esse aqui vou baixar enviar o arquivo SPG e arrastar para cá lembrando que esses ícones e tudo vai estar disponível lá no material de apoio gratuitamente para você na descrição do vídeo tá e para duplicar você vai clicando aqui nessa caixinha que aí você vai abrindo e colocando o texto
que você quer e trocando o ícone pronto vou duplicar esse texto aqui de cima arrastar ele para baixo e vou colar o texto que eu quero aqui pronto agora aqui neste eu vou clicar aqui na lista de ícone né vou vir em ícone vou aumentar o tamanho do meu ícone vou vir em texto e vou mudar pra cor de texto vou vir aqui em lista vou aumentar o espaço entre os itens e vai ficar assim agora eu vou vir aqui na biblioteca vou arrastar um widget de imagem aqui pro lado vou deixar ele completo e
vou arrastar para cá a minha imagem opa lembrando de eu sempre colocar o título correto da imagem aqui vou clicar em selecionar Aí aqui ó presta atenção vou clicar em publicar tá vendo que a imagem ela está flutuando ela está solta ó ela está solta aqui no meio isso aqui deixa o site muito amador só tem sempre que deixar a imagem aqui rente ao final do contêiner e aí para fazer isso aqui a gente vai vir no contêiner principal vai vir em avançado vamos clicar em desincular os valores vamos vir aqui no inferior e vamos
deixar zero vamos vir aqui neste contêiner vamos ir em avançado vamos ir em preenchimento vamos deixar zero e vamos vir aqui neste contêiner layout e vamos deixar aqui ó alinhado ao fim que aí a imagem ela vai ficar bem na extremidade do contêiner ok agora nós vamos vir aqui clicar com o botão direito clicar em copiar clicar com o botão direito e clicar em colar para esse botão vir para cá vamos vir aqui no contêiner vamos aumentar a nossa altura a gente pode deixar em 750 de altura e aí nós vamos vir aqui neste contêiner
principal e vamos deixar o conteúdo alinhado ao centro aí vai ficar assim a nossa imagem e para não cortar e deixar esse daqui desalinhado em telas menores vamos vir aqui nesse contêiner vamos ir em avançado vamos colocar aqui zero de preenchimento Vamos desvincular e no inferior vamos deixar 40 e aí vai ficar assim a nossa imagem nós vamos clicar vamos deixar ela 100% aqui no título a gente vai clicar vai vir em estilo vamos diminuir para que não haja quebra de linha e agora nós vamos para esta sessão que é a sessão dos depoimentos vamos
clicar no mais clicar em flexbox pegar um contêiner com a seta para baixo vira em avançado vamos colocar 50 de preenchimento vira em estilo vamos colocar a cor de fundo esse alaranjado mais claro vamos vir aqui na biblioteca arrastar um widget de título para cá vamos ir em estilo deixar ele alinhado ao centro na cor vamos deixar a cor branca e a gente vai copiar esse título que eu coloquei aqui e vai colar você pode escrever outro título também que você quiser vamos clicar com o botão direito duplicar vamos ir em estilo vamos mudar aqui
o tamanho parece do realce vou só aumentar deixar um pouquinho maior deixar tamanho 18 e vou copiar aqui este subtítulo que eu tenho e vou colar ele aqui prontinho agora paraa gente poder colocar essas avaliações aqui de cima que são as avaliações puxadas do Google Meu Negócio ou do Google Maps a gente vai precisar Instalar um plugin a mais é um plugin gratuito também e se você ainda não tem o seu perfil lá no Google Maps né no Google Meu Negócio eu recomendo muito que você faça porque ajuda demais a ranquear o site e lá
as pessoas podem deixar os comentários né as avaliações direto lá no Google então o Google tende a entregar como resposta sites melhores avaliados tá aí para isso a gente vai entrar dentro do painel administrativo do site vamos vir aqui em plugins adicionar novo você vai pesquisar por revisão a gente vai pegar o widget de revisão do Google que é esse aqui vamos clicar em instalar e depois em ativar nós vamos usar a versão gratuita então a versão gratuita ela não nos deixa fazer todas as edições ela faz com que a gente eh tem que vir
aqui e clicar para atualizar por exemplo ela mostra os as avaliações que tiveram agora mas se daqui 30 dias tiver novas tem que entrar aqui no site clicar em atualizar só clicar no botãozinho de atualizar para poder puxar as novas avaliações tá você a versão gratuita tem essas coisinhas mas dá para usar super bem ou se você quiser você pode pagar a versão pro dela eu acho que essa gratuita super funciona então você Vem aqui em plugins plugins instalados aqui em widget de revisão você clica em definições vai clicar aqui para conectar vai abrir uma
janela você vai escrever o seu nome ou no endereço lá do do local seu ou só o nome seu que está aqui no Google Meu Negócio vou colocar Center Shopping Uberlândia que é aqui da minha cidade só para como exemplo pra gente pegar aqui aparece você vê se é o seu mesmo se tá certo clica em conectar aí ele já vai puxar automaticamente as avaliações você vai escolher o estilo que você quer de carrossel tem vários vários asos pode ser carrossel então pode ser uma lista ó como tem nesses módulos aqui de baixo eu vou
escolher um carrossel vou escolher esse estilo aqui de layout ó esse primeiro vou clicar em slide aqui eu vou escolher a cor que eu quero vou escolher essa daqui vou clicar em selecionar aí aqui você pode fazer algumas modificações se você quiser aqui em vez de mostrar tudo eu vou colocar mostra apenas avaliações de quatro e cinco estrelas clicar em salvar o código clicar aqui em copiar vou vir aqui no nosso editor vou vir aqui na biblioteca vou pegar o widget de short code vou arrastar para cá vou colocar O código aqui e ele já
vai puxar o nosso carrossel vou clicar em publicar se tiver todo bugado aqui é normal tá se você for na sua página logada você vai perceber que vai ter puxado tudo certinho aí a gente vai vir aqui na biblioteca também eu vou arrastar um outro widget para cá que é esse widget de carrossel de testemunha né carrossel de avaliações que é um widget aqui do Royal Adons aqui você pode fazer as suas avaliações manuais então você pode pegar avaliações que os seus clientes mandaram para você e aí aqui você muda ó aqui você vai colocar
o nome da pessoa por exemplo vou colocar Maria Freitas aqui você coloca o nome da pessoa aqui com que ela trabalha ou se você não quiser você pode excluir deixar 100 aí aqui o nome aqui você pode colocar o título né da avaliação da pessoa se você quiser você pode deixar é sem título também aqui eu tô colocando por exemplo ela perdeu 12 kg né aí você vem aqui e coloca né aqui no caso para ser os seus cases de sucesso e aí aqui nessa parte da descrição aqui embaixo você vem e cola o depoimento
da pessoa aí aqui você coloca a foto dela e tudo mais você pode ir excluindo tudo que você fez aqui e também Pode ir clicando aqui para duplicar tá então você faz todas essas configurações depois disso eu vou vir aqui em estilo aqui em navegações eu vou mudar a cor para este cinza mais claro e a cor de background eu vou mudar para branco e aqui no border rádios eu vou deixar 30 e aqui na cor no tamanho do ícone eu vou deixar bem clarinho né vou mudar a cor aqui para este alaranjado opa é
isso aqui vou mudar para este alaranjado então vai ficar essa bolinha mais discreta e aqui ao passar o mouse eu vou deixar para esse alaranjado mais escuro vai ficar assim aqui em paginação que são essas bolinhas eu vou deixar a cor com esse alaranjado mais escuro e a cor ativa com este branquinho e a gente vai vir aqui em meta vamos vir aqui em border rádios vamos deixar 30 e aqui na cor a gente vai deixar de branco e aqui na tipografia a gente vai deixar essa tipografia do realce e aí o restante a gente
pode deixar como está se você quiser você pode vir aqui em cada um dos itens e ir ajustando eu vou deixar aqui como está agora nós vamos fazer essa sessão aqui que é a sessão das especialidades a gente vai vir aqui no editor vai clicar vai pegar um contêiner com a Seta para baixo vai vir em avançado vai colocar 50 de padding vai vir aqui na biblioteca vai arrastar um mid de texto para cá vai vir aqui em estilo deixar alinhada ao centro vai vir aqui na cor vai deixar de cinza e aí a gente
vai colocar essa frase aqui aí a gente vai fazer aquele mesmo esquema das cores né vamos ir na biblioteca pegar um widget de texto vamos colar o widget de texto aqui aí o que a gente quer que no caso é o nome do Morgana a gente vai selecionar vai clicar aqui no espectro de curso lembrando que o seu tiver assim é só clicar que abre aqui cliquei em personalizada vamos copiar a cor laranja colar aqui e clicar em OK aí vimos aqui no código copia vem aqui no widget de texto e cola pronto agora podemos
duplicar esse título vamos pegar este subtítulo copiar colar ele aqui aí vamos vir em estilo vamos deixar esse do realce e a cor a gente vai deixar aliás vamos vir aqui em cima que já tem um subtítulo assim clica o botão direito copia clica com o botão direito e cola o estilo ah aqui era um widget de texto né vamos clicar com o botão direito copiar clicar com botão direito colar aí a gente copia e cola aqui não deixa nenhum espaço tá Para não ficar espaço desnecessário pronto agora a gente vai arrastar um de grade
para cá vamos vir aqui em cima vamos clicar aqui para copiar um desses widgets de caixa de ícones vamos arrastar para cá colar vamos clicar com o botão direito e duplicar até que fiquemos com seis cards aqui vai ser assim vai ser três mesmo de cada lado já tá praticamente tudo configurado agora a gente vai mudar o texto né dos títulos das descrições e também vamos mudar os ícones os ícones é igualzinho no outro é só você clicar aqui arrastar o ícone para cá e eu já deixei todos esses ícones para vocês no nosso material
de apoio então só você clicar no ícone arrastar para cá alterando vou fazer isso aqui em todos os meus agora a gente vai fazer umas modificações vamos clicar nesse aqui vir aqui em V e mudar para padrão né vamos tirar o empilhado vamos vir em estilo a cor do ícone a gente vai deixar esse alaranjado mais escuro e o tamanho do ícone a gente vai aumentar aqui encaixa o espaço entre o ícone e o título a gente vai diminuir e o espaço entre conteúdo e o texto a gente vai diminuir também aí a gente vai
vir aqui em avançado vamos vir aqui em plano de Fundo ao passar o mouse e vamos colocar essa cor alaranjada aí quando a gente passar o mouse vai ficar com essa corzinha alaranjada outra coisa que a gente vai fazer também é mexer na borda para quando a gente passar o mouse colocar uma borda só que uma borda de sombra então vamos vir aqui em sombra ao passar o mouse vamos colocar sombra vamos colocar essa cor aqui que é uma corzinha mais transparente eh lá na largura da borda a gente vai deixar sólido vamos colocar um
vamos colocar essa cor aqui e na sombra a gente vai colocar essa cor aqui vamos colocar - aqui no outro zero e o arredondamento a gente vai colocar 20 então ó quando a gente passar o mouse vai ficar assim vai arredondar mais e também vai mudar de cor e vai colocar uma sombra vamos clicar com o botão direito copiar clicar com o botão direito e colar o estilo em todos os outros vamos clicar aqui nesse ó no contêiner todo ó que é o contêiner interno e vamos clicar em duplicar ó pra gente ver aí clica
nesse de cima exclu e quando a gente duplica sabe a gente gera um atualizado então a gente não precisa atualizar a página inteira pra gente parar de ver os bugs Ó prontinho também faltou eu fazer isso aqui no de cima né nesse card aqui de cima que eu fiz aqui nesses coloridos né aí neste daqui faltou então vou vir aqui em avançado plano de fundo ao passar o mouse e vou mudar para essa corzinha alaranjada só que aí aqui eu vou só mudar pra corzinha não vou colocar para poder ficar mais arredondado não só esse
aqui que vai ter este efeito agora nós vamos para a parte de blog coloquei essa parte de blog aqui mas ela é opcional se você não quiser não precisa fazer mas eu recomendo muito que você faça por quanto mais conteúdo quanto mais texto relacionado ao que você faz você colocar no seu site mais material o Google vai ter para entregar o seu site pras pessoas que estão buscando então vai ser mais fácil de você rankear né ou seja de você aparecer nas pesquisas lá no Google então blog é a maneira mais eficaz de fazer isso
e paraa gente poder criar o layout dos posts primeiro a gente precisa criar eles aqui dentro do site é bem tranquilo você vai vir aqui em posts adicionar post aí você vai colocar o título do post aqui vou abrir esse post aqui pra gente pegar as informações dele vou copiar aqui o texto que eu Quero e aí o texto você vai colar ele aqui e aqui você pode colocar emoji você pode colocar fotos aqui no meio se você quiser se você quiser linkar algumas dessas palavras você seleciona clica aqui em link cola um link aqui
tá vendo vou linkar isso aqui pra página home você pode arrastar fotos para cá ó você clica aqui clica por exemplo em imagem arrasta uma foto para cá então isso aqui é bem versátil e você pode fazer várias coisas aqui nesse editorzinho do WordPress também mas o mais importante é isso aqui título conteúdo e aqui ó nessa parte tá vendo onde tem esse iconezinho e na parte de postir as outras configurações primeiro a imagem destacada que é essa imagem que aparece aqui quando a gente abre o post e também aquela imagem que aparece como card
ó essa imagem que aparece aqui chamando posting ela se chama imagem destacada e aí você vai arrastar essa imagem para cá arrastar ela para cá e aí é sempre interessante que você eh coloque aqui as imagens com os nomes né que elas representam não traga ela com nome genérico assim para poder melhorar o seu se aí você clica aqui em definir imagem destacada aqui em categoria você vai colocar o nome da categoria Aqui eu coloquei a categoria emagrecimento que aí é fácil de você poder aglomerar esses tipos de posts ó é só você escrever e
dar enter que aí já vai ficar selecionado o próximo post que você fizer você não vai precisar escrever mais já vai ter emagrecimento aqui é só você marcar com a caixinha se você quiser adicionar tags também mas por enquanto eu vou deixar só esses então são só essas quatro coisas principais né título conteúdo imagem destacada e categoria aí a gente vai clicar aqui em publicar duas vezes pronto aí se você vier aqui em posts já vão estar aqui exclui esse post chamado Hello Wat que é o post que vem como padrão sabe só pra gente
ver então vai ficar assim aí você vai vir aqui clicar em adicionar novo post e vai adicionar todos os outros posts que você quer eu vou fazer isso aqui no meu pronto já fiz todos os meus posts agora eu posso vir aqui no editor do Elementor pegar um contêiner com a seta para baixo vir em avançado colocar 50 de preenchimento vou vir aqui nesse título clicar em copiar vir aqui clicar em colar vou vir nesse título aqui clicar em copiar vir aqui clicar com o botão direito clicar em colar e arrastar Ele para cima aí
eu vou vir aqui em estilo vou deixar alinhado ao centro e vou copiar este meu subtítulo e vou colá-lo agora também vou copiar o meu título né confira o nosso blog aí esse daqui como é duas palavras só vou só em especialidades d Eu vou substituir pela palavra que tá em cinza e blog eu vou substituir pela palavra doutora Morgana Morais pronto já vai ficar aí eu vou só colocar um espaçozinho pronto agora eu vou vir na biblioteca vou pegar o edi de grid grid magazine que é esse daqui ó que ele já faz um
formatinho com os poxas aí o que que a gente vai fazer aqui nesse texto a gente vai colocar nenhum post encontrado né traduzir para português aqui em layout só tem essas essas daqui da parte de baixo ó para você mudar a definição então tem esse daqui tem esse aqui que é o é o padrão que já veio tem esse daqui que fica bonitinho também tem esses que ficam tudo um do lado do outro também achei bem legal ficar esticado esse aqui que é o tamanho convencional e esse aqui de dois em dois vou deixar esse
daqui e aí aqui você aumenta a altura do contêiner né altura que vai ficar o seu post eu Vou deixar assim aqui em elementos você pode tirar o que você não quiser que apareça por exemplo eu vou tirar o autor tava aparecendo aqui eu vou tirar o separador aí vai ficar somente a data agora vamos vir aqui em estilo aqui no overlay né que é essa cor azul que está aparecendo eu vou mudar para a cor alaranjada que aí vai ficar assim esse alaranjado um pouco é mais claro né para ficar melhor que vai ficar
assim agora aqui em taxonomia que é onde fica a categoria ó o vamos lá taxonomia estilo um aqui no rover tá azul tá vendo se a pessoa passa o mouse então eu vou mudar para esse alaranjado e aqui também tem como eu não fiz no outro mas se você quiser tem como deixar destacado ó então por exemplo aqui no normal né eu deixo o background com tom de alaranjado e deixo a cor do texto mesmo de branco e aí tem como a gente vir aqui aumentar o padding ó vamos deixar 10 por exemplo aí a
gente desvincula e em cima né inferior e superior a gente diminui para ele não ficar tão alto e se quiser border rádios ó dá para deixar ele bem arredondado ó e aí fica assim aqui no mé overlay tem como a gente mudar esse ângulo ele fica aqui embaixo mas se você quiser você pode Vir aqui e mudar só para cima só para um lado só para outro tem tem como a gente vir e dar essa configurada a localização dele também dá paraa gente aumentar ó aqui ele tá bem transparente mas se a gente for diminuindo
dá pra gente deixar ele um pouco mais sólido acho que até fica legal porque aí dá para ver o texto com mais nitidez né aí falando em título vou vir aqui no título na tipografia já coloquei estoura e no tamanho eu vou diminuir um pouco ó vou deixar tamanho 20 aqui na data eu não gostei que ela ficou muito chegada para cá vou vir aqui na margem vou desvincular e aqui na margem esquerda eu vou aumentar um pouco ó coloquei 30 foi demais vamos para 20 também ó o 20 deu certinho aí ficou alinhado com
o nosso título então ficou assim agora nós vamos para essa parte aqui que é a parte do fac né de perguntas que também é muito interessante e é uma oportunidade a mais de você colocar mais texto aqui no seu site vamos clicar pegar um contêiner com dois contêiners dentro vira aqui em avançado colocar 50 de preenchimento vira em estilo tipo de fundo vou pegar a cor cinza vou arrastar um widget de título para cá vou fazer aquele mesmo esquema Aliás vou pegar esse aqui vou copiar e vou colar que aí ele já tá com o
CSS pronto né aí vou clicar aqui vou substituir a palavra confira o nosso por perguntas e a palavra blog por frequentes e aqui depois de perguntas eu vou colocar sinal de maior sinal de menor e dentro eu vou colocar BR para fazer uma quebra de linha vou vir em estilo vou deixar alinhado pra esquerda vou vir em tipografia vou aumentar o tamanho vou vir aqui vou clicar com o botão direito clicar em copiar clicar com o botão direito clicar em colar vou vir em estilo vou deixar alinhado ao centro vou aumentar o tamanho da fonte
e vou copiar este texto que eu tenho aqui vou colar este texto aqui e aí aqui desse outro lado nós vamos colocar as perguntas e aí a gente vai vir aqui na biblioteca vai pegar o widget de sanfona vai arrastar para cá e aí aqui vai funcionar o seguinte quando você abre aqui você consegue colocar o título da pergunta né que eu vou colocar essa pergunta colar a pergunta aqui podemos fechar e excluir por quê aí a nossa resposta a gente vai colar um widget de texto aqui a gente arrasta o widget de texto para
cá e aí a nossa resposta a gente escreve aqui e aí aqui como É um contêiner que você consegue colocar várias coisas dentro se você quiser pode pôr até imagem pode pôr vídeo pode pôr várias coisas aqui aí você só vai duplicando e vai mudando né escrevendo os títulos e escrevendo as respostas aqui tá vendo então ó aqui você abre aí você clica e muda a resposta ó de novo mais uma vez vou fazer nesse aqui de baixo nesse terceiro vou mudar o título né que é a pergunta ó mudei o título e a resposta
eu clico aqui clico aqui em cima do texto e colo aí beleza aí pra gente poder fazer essas configurações aqui ó a gente vai vir primeiro aqui em estilo aqui em espaço entre os itens a gente vai aumentar aqui no tipo de plano de fundo a gente vai clicar aqui né para abrir o espectro de co a gente vai colocar o fundo de branco que no raio da borda a gente vai deixar 30 aqui em cabeçalho na tipografia a gente vai mudar para tamanho 18 peso 500 e poppins aliás podemos diminuir um pouquinho vamos deixar
também 16 e aí ao passar o mouse a cor do texto a gente vai deixar de branco e o ativo a gente vai deixar de branco também e aí aqui na sanfona ao passar o mouse a gente vai clicar aqui e vai mudar para Alaranjado e o ativo também a gente vai mudar para alaranjado aí quando passo o mouse tá vendo muda o tom do fundo quando a gente clica para abrir também muda então vai ficar assim vamos vir aqui na biblioteca vamos pegar uma lista de ícone vamos arrastar para cá e vamos colocar essa
frase ó vamos excluir deixar só um e aí aqui a gente vai colocar esse ícone aqui de informações você vai clicar em enviar ícone SVG e vai colocar o ícone que você quiser ou então você escolhe o ícone aqui do Elementor aí eu vou vir aqui em estilo espaço entre o ícone vou aumentar vou aumentar o tamanho do ícone vou vir aqui no texto na tipografia vou deixar peso 500 e na cor eu vou colocar a cor vermelha para chamar mais atenção aqui nessa parte aí vou vir aqui no contêiner vou deixar alinhado ao centro
e vou vir aqui neste contêiner nesse primeiro contêiner interno vou diminuir o tamanho dele para 40 e esse segundo contêiner eu vou aumentar o tamanho dele para 60 aí vai ficar assim aí a gente vai fazer uma configuração para na hora que a gente abrir o texto aparecer assim subindo aí para isso a gente vai clicar aqui onzin avançado efeito de movimento aí a gente Vai colocar finding up ó para aparecer assim aí você clica com o botão direito clica em copiar vai abrindo um por um e vai clicando com o botão direito e clicando
em colar estilo pronto ficou assim agora a gente vai duplicar esse item aqui de lista de ícone vamos arrastar aqui para cima aí a gente vai escrever fac e vai mudar o ícone vou colocar um ícone aqui de dúvidas né de informações pontos exclamação aí eu vou vir aqui em avançado pano de fundo cor aí eu vou colocar essa cor alaranjada vou vir aqui no estilo na cor do ícone eu vou deixar de branco vou vir aqui em texto na cor do texto eu vou deixar de branco aí eu vou voltar aqui em avançado vou
vir aqui em borda vou deixar 30 de arredondamento vou voltar aqui em estilo ícone no tamanho do ícone eu vou diminuir vou vir aqui em avançado em preenchimento vou deixar tamanho 15 vou vir aqui em largura vou deixar personalizado e vou diminuir a largura desse meu item aliás tô achando que tá ficando muito grosso então vou vir aqui vou desvincalar os valores de preenchimento no inferior vou deixar oito e no superior vou deixar oito também aí vai ficar assim e aí eu posso aumentar um pouquinho Esta largura vou deixar também alinhado ao centro ó aentar
mais ó então vai ficar 31 e aqui estilo texto vou aumentar o peso né a espessura da fonte para para 600 e vou aumentar o tamanho para 17 aí vai ficar assim também vou colocar uma borda vou vir aqui em borda tipo de borda sólido aí a cor da borda eu vou deixar esse alaranjado mais forte e vou deixar um só de espessura aí vai ficar assim pronto agora sempre clicando aqui em publicar e agora vamos para essa parte aqui a gente vai vir aqui vai pegar um contêiner com dois contêiners dentro vai vir avançado
colocar 50 de preenchimento vamos vir aqui na biblioteca arrastar um widget de título para cá vamos copiar o nosso texto colocar o texto aqui aí pra gente colocar em bold aqui essas palavras a gente vem aqui antes e depois delas coloca o sinal de maior sinal de menor letra B no final sinal de maior sinal de menor e dentro barra B tá é importante colocar o barra aqui aqui a gente começou e aqui a gente finalizou aí vamos vir aqui em estilo cor vamos deixar a cinza que esse cinza aqui vamos deixar ele um pouco
mais claro vamos vir aqui na tipografia e vamos deixar peso 500 Aqui depois de peso a gente vai colocar sinal de maior sinal de menor e dentro BR que é para quebrar a linha vamos vir aqui em estilo tipografia e vamos diminuir o tamanho do nosso texto vai ficar assim agora a gente vai vir aqui nesse título vai duplicar arrastar ele para cá vamos copiar esse teus que a gente já tem aqui vamos colar ele aqui e vamos fazer esta parte a gente vai vir na biblioteca aí vamos pesquisar por barra de progresso vamos arrastar
para cá e aí a gente vai colocar o que que a gente quer simbolizar vou clicar aqui aqui em título eu vou colocar a facilidade de manter a dieta aqui no texto eu vou tirar não vou deixar nada e aqui na porcentagem eu vou deixar 80% para ser concluído vou vir aqui em estilo vou vir aqui em estilo do título a cor eu vou deixar de cinza e a tipografia eu vou deixar essa de item só que aí a cor eu vou deixar mais clara vou vir aqui em barra de progresso em rai da borda
eu vou deixar 30 e aí nessa cor de fundo eu vou deixar aquela cor mais alaranjada mais clara aí é só clicar aqui em duplicar em todos aí vou clicar aqui vou clicar em estilo aqui na cor do texto eu vou deixar a mesma Cor do fundo para não ficar aparecendo esses 80% aqui tá vendo ó eu posso até clicar com o botão direito copiar clicar com o botão direito e colar o estilo aí esse aqui eu vou modificar bou vir aqui em conteúdo vou deixar 70% por exemplo e nesse aqui eu vou deixar 50%
que aí vai ficando um diferente do outro mas você deixa aí do jeito que você achar melhor vou vir aqui em cima vou copiar esse botão clicar com o botão direito clicar em copiar e aqui abaixo vou clicar com o botão direito e clicar em colar vou clicar aqui no contêiner vou vir em layout vou aumentar a altura para 500 vou vir aqui em ajuste vou deixar alinhada ao centro vou vir aqui no contêiner principal vou vir aqui em layout em espaçamento aqui da coluna vou desvincular os valores e vou colocar 30 de espaçamento porque
eu acho que tá ficando muito grudado um com o outro vou vir aqui neste contêiner vou deixar ele maior vou deixar ele tamanho 60 e vou deixar este aqui tamanho 40 e aí com isso eu posso aumentar o tamanho desse título pronto sempre publicando agora nós vamos para esse daqui uma parte é uma parte opcional é uma sessão para você colocar uma newsletter Né que é uma lista onde as pessoas se inscrevem aqui com e-mail né você captura os dados dela os dados de e-mail e aí você se comunica com ela depois você fica enviando
promoções você fica enviando e-mails informativos então é uma maneira legal de você capturar os dados aqui da pessoa para poder converter ela como cliente depois né pode ser também uma outra sessão em vez de colocar aqui uma newslet você pode colocar fale conosco e colocar um botão de WhatsApp né uma sessão bem interessante também então vamos lá pra fazer ela a gente vai vir pegar um contêiner com dois contêiners dentro vir em avançado colocar 50 de preenchimento vamos vir aqui neste contêiner e vamos ver em estil fundo vamos pegar essa cor cinza claro vamos vir
aqui na biblioteca vamos arrastar o widget de imagem para cá vamos colocar a imagem completo e vamos selecionar a imagem que a gente quer lembrando sempre da gente colocar um nome aqui que se refere ao nosso projeto pra melhora do SEO agora a gente vai copiar esse título que eu tenho aqui vamos arrastar um widget de título para cá e também vamos arrastar um widget de texto pra gente fazer aquele esquema Das duas cores cola o texto aqui e aí o texto que a gente quer deixar de duas cores daquele mesmo jeito né que no
caso é exclusivas e emagrecer com saúde então a gente vai pegar a palavra exclusivas vai clicar aqui no espectro de cor vai clicar em personalizado vai pegar aqui o o código da cor vai colocar aqui clicar fora e aí vai selecionar outra palavra e vai selecionar a cor a gente vai vir em código vai copiar vai vir aqui no título vai colar esse texto aqui vai vir em estilo cor do texto e vamos deixar essa cor cinza agora para este texto que tem aqui embaixo vou copiar já vou aproveitar o widget de texto que está
aqui vou selecionar o texto excluir e colar um novo texto vou duplicar esse título e vou escrever em cima newsleted inclusive pessoal tem uma dica muito legal para vocês sobre newslet para você vincular o seu formulário de e-mail a uma campanha de e-mail para você enviar informações pro seu cliente para o seu lead você precisa vincular este formulário a uma empresa de e-mail marketing que é uma plataforma onde você vai lá e consegue disparar campanhas pros mais diferentes propósitos e aqui no canal já ensinei vocês a usar a ferramenta da Omniscend Que é uma ferramenta
de e-mail marketing muito legal e além disso ela é fácil de usar o editor de e-mail dela é semelhante a esse editor Arrasta e Solta do Elementor então para você criar os e-mails é muito fácil tem vários tipos aqui já ensinei até colocar ela em loja já ensinei em fazer e-mail de boas-vindas colocar popup no site entrega ebook e o melhor de tudo é que você pode começar gratuitamente colocar até 250 contatos na sua lista aí só depois que passar disso que você assina um plano se você quiser nós somos parceiros e afiliados da Omnic
temos o nosso link na descrição do vídeo então na descrição de todos os nossos vídeos olha nesse vídeo aqui eu tava ensinando a criar um e-mail na descrição de todos os nossos vídeos ó você clica em mais tem todas as informações necessárias e tem o nosso link da Omniscend que é este link aqui ó e você clicando e você fazendo a conta com o nosso link você nos ajuda a trazer mais conteúdo relevante para você aqui no canal tá então fica uma dica que dá para você converter muitos clientes usando as plataformas de mail marketing
voltando aqui para o tutorial vamos vir aqui em newsleter na cor Desse título a gente vai deixar esse alaranjado e aqui na tipografia a gente vai deixar essa de item vamos vir aqui no contêiner vamos ir em avançado vamos colocar 60 de pad depois a gente vai vir aqui em layout vamos configurar aqui o conteúdo ficar alinhado ao centro vamos vir aqui na biblioteca vamos pegar o widget de formilder que é um widget de formulário do próprio Royal Adons a gente vai excluir todas as partes e vai deixar só a parte de e-mail a gente
vai clicar vamos vir aqui e tirar a parte de label né que é a parte do título vamos deixar somente o e-mail escrito aqui dentro do item e aqui em botões a gente vai mudar para inscreva-se ou inscrever aqui em campus a gente vai vir vai deixar tamanho 75 e vamos vir aqui em botão e aqui em largura da coluna nós vamos deixar 25 para um ficar do lado do outro agora vamos vir aqui em estilo a distância aqui e a altura a altura vertical nós vamos colocar em zero para ficar tudo alinhado aí aqui
em campo em border rádios a gente vai deixar 30 pro campo ficar arredondado e em padding eu vou deixar 12 na tipografia eu vou pegar essa tipografia de realce e aqui nos botões na cor de fundo eu vou deixar Essa cor alaranjada mais claro e aqui em border eu vou deixar sólido e na cor da borda eu vou deixar esse alaranjado mais escuro na largura da borda eu vou deixar um e em raio eu vou deixar 30 para ficar arredondado também e aqui no padding vou deixar tamanho 12 para ele se igualar com outro campo
e aí vai ficar assim e aqui no hover eu vou deixar em background color esse alaranjado mais escuro que aí quando a pessoa clicar ela vai ver essa transição de cor agora eu vou vir aqui no contêiner vou deixar ele tamanho 65 vou deixar esse outro contêiner tamanho 45 vou vir aqui neste contêiner nesse primeiro contêiner vou vir em estilo borda vou desincular os valores e aí na esquerda eu vou deixar 10 e na superior eu vou deixar 10 também ó que aí a gente vai arredondar só essas partes e vou vir aqui neste contêiner
vou clicar vou vir em avançado vou desincular os valores de imagem e a margem aqui na esquerda vou deixar 150 para que ela fique mais chegada para cá nesse contêiner eu vou clicar vou vir aqui em avançado vou desenclar os valores de imagem e aqui na direita eu vou colocar também uma margem de 180 para não ficar grudado com essa imagem aqui Também vou vir aqui nesse contêiner vou vir em avançado vou deixar zero de preenchimento eu aumentei a margem negativa desse contêiner aqui para -180 que ele ficou mais chegado para cá e também recarreguei
a página porque mesmo que eu tivesse colocando vários aqui imagem negativa não tava chegando o suficiente aí eu constatei que era um bugzinho do Elementor recarreguei a página ó tá vendo que aqui fica assim mas se a gente for olhar ela carregada aqui pelo lado de fora ó tá vendo aqui vai estar certinho então você recarrega aí a página no seu que vai estar tudo certo aí agora a gente vai fazer essa sessão aqui que é a sessão de contato OK vamos clicar vamos pegar um contêiner com dois contêiners dentro vamos vir em avançado vamos
colocar 50 de preenchimento aí já vou copiar esse título aqui vou clicar com o botão direito duplicar este arrastar para cá vou colar esse título aqui contatos vou mudar a cor para o alaranjado vou copiar este subtítulo que eu tenho aqui vou duplicar esse texto vou arrastar para cá vou colar esse texto que eu peguei aqui vou vir na biblioteca vou pegar uma lista de ícones vou arrastar para cá e aí eu vou Colocar aqui essas informações né o endereço ó você pode excluir ir colocando um por um aí aqui você vai mudando os ícones
eu vou clicar aqui vou escolher um ícone por exemplo de map que é esse daqui aí eu vou duplicar e colocar o ícone do telefone aí o telefone eu vou colocar esse daqui aí é só a gente mudar o ícone para phone vou colocar também o do WhatsApp mesmo telefone só que vou colocar o botão do WhatsApp e aí é só você colocar o link do WhatsApp aqui que que se a pessoa clicar ela vai lá para o WhatsApp aí não está colando aqui né eu não copiei eu não copiei o número o e-mail vou
colocar aqui o e-mail se é um e-mail fictício tá vou mudar aqui para não ficar tão grande mudei aqui para contato Morgano Nutria vou mudar o ícone para envelope que simboliza o e-mail aí vai ficar tudo assim agora eu vou vir em estilo texto vou colocar o texto de assentado e o ícone eu vou aumentar este tamanho agora eu vou vir aqui em lista em espaçamento vou aumentar e aqui no texto também eu vou aumentar o tamanho desse meu texto pronto agora a gente vai vir aqui na biblioteca pegar um widget de map vamos arrastar
para cá Aqui a gente vai colocar o nosso endereço vou colocar centro Uberlândia só para só para aparecer o endereço aqui aí se você quiser deixar aparecendo as ruas você aumenta o zoom ó quanto mais você aumentar o zoom mas vai aparecendo aqui as ruas aí se você quiser você pode aumentar a altura também eu vou deixar a altura padrão mesmo vou vir aqui em estilo em filtro o CSS no normal eu vou deixar a saturação baixa ó para ele ficar preto e branco e aí quando passar o mouse vou deixar a saturação normal que
aí ó quando passar o mouse ele vai ficar colorido tá também vou vir aqui em avançado vou vir em borda em raio da borda vou deixar 10 e vai ficar assim nosso mapa vou vir aqui no contêiner vou vir aqui em layout vou vir aqui em espaçamentos desvincular e no da coluna eu vou colocar 30 para não ficar tão grudado esse texto aqui do nosso mapa eu vou clicar em publicar ó vamos ver tá tudo certinho tudo certinho aí agora vamos clicar aqui no contêiner vamos vir em layout e vamos deixar alinhado ao centro vamos
clicar em publicar pronto agora a gente vai colocar alguns efeitos de movimento igual tem aqui nesse site eu coloquei Alguns efeitos de movimento na extensão do site inteiro ó então vai aparecendo gradualmente os itens e a gente vai fazer tudo isso aqui agora então vamos começar aqui de cima tudo que a gente for colocar de efeito de movimento é do mesmo jeito a gente clica no item vem em avançado vem aqui em efeito de movimento e aí aqui tem vários tipos de efeito de movimento pra gente escolher nesses textos aqui eu vou colocar o find
que é aparecer para cima vou colocar esse em todos os os itens inclusive nesse textinho aqui de baixo e no botão vou colocar um zoom ó feito de movimento zoom in quem vai ficar assim vamos lá aí tá vendo ficou assim nesses daqui eu vou colocar efeito de movimento de up também ó fidinha up o texto também fidin o efeito de movimentos dá todo um charme né pra pro site e aqui nos itens eu vou deixar metade aparecendo de um lado e metade aparecendo do outro então esse daqui vou vir em avançado efeito de movimento
e vou colocar finding eu sempre confundo é isso mesmo finding left esse daqui também eu vou vir em fade movimento vou colocar finding left e esses daqui eu vou colocar Finding right f movimento finding right ó vamos lá então aqui ficou assim e aqui ficou assim beleza esse daqui também ó eu vou mostrando aqui para você e aí você vai deduzindo deixa eu ver se tem algum diferente aqui que eu preciso te mostrar novo ó todos são basicamente os que eu já te mostrei então você vai indo em item por item vai colocando então na
imagem você coloca fighting right aqui você coloca finding up nos textos no botão aquele do zoom aqui nos up aqui o up também aqui ó finding left aqui zoom in e aqui finding right tá vendo que esse aqui vai aparecer com um zoom e esse daqui vindo da esquerda e esse vindo da direita olha só isso que faz esse movimento aqui combinado e o restante ó um vem do lado outro vem do outro então é basicamente isso você pode ir em todos os itens e ir colocando esses efeitos eu vou colocar em todos aqui vou
gravar tudo para não ficar muito grande né o único que eu vou colocar diferente vai ser esse daqui que eu vou colocar ele girando então vou vir em fio de movimento vou colocar assim ó rotação que aí vai ficar um efeito legal também vamos lá ver como é que ele vai ficar Ó todos os efeitos olha como fica legal prontinho agora que a gente já criou todas as abas aqui da nossa página home nós vamos adaptar para mobile né para dispositivos diferentes tamanhos de tela então vamos colocar primeiro para celular aqui no primeiro contêiner a
gente vai clicar vai vir em avançado vamos colocar 20 de preenchimento vamos vir aqui no nosso título vamos ir em estilo e vamos diminuir o tamanho dele vou deixar tamanho 30 o restante do texto está OK o botão eu vou vir aqui e vou deixar ele ó vou vir em avançado largura vou deixar ele em 100% o restante dos títulos está OK a gente só precisa mudar agora o nosso banner né eu tenho já a versão de banner para mobile aqui e também no vídeo onde eu ensino a criar os banners eu já ensinei para
vocês vai ficar no nosso material de apoio e você vai clicar aqui no contêiner vai vir estilo vai clicar aqui e vai arrastar para cá a imagem correspondente ao banner para celular tá só que assim pode ficar tranquilo que a gente alterou a imagem aqui né mas o Elementor ele tem essa configuração de que quando você tá no editor do celular se você alterar a imagem de fundo altera só no celular se Você colocar aqui no computador ó continua a mesma imagem que que tinha pro computador tá então tá aí alterou aqui a imagem vamos
deixar aqui a posição centro ao centro vamos vir aqui em layout vamos aumentar a altura vamos mudar a direção para baixo isso já vai fazer o texto subir ó tá vendo e aí você altera a altura de modo que a cabeça aqui da pessoa não fique eh embaixo do texto né para não ficar uma leitura ruim e também não deixe muito espaço ó tiver ficando muito espaço ali em cima você pode diminuir e aí a gente vai clicar aqui e vai deixar aqui ó alinhado no início que aí o texto ele vai automaticamente ficar lá
em cima também então ficou assim o nosso banner para mobile agora é só a gente ajustando cada um dos contêiners a gente vai colocar 20 de preenchimento e aqui nos títulos a gente vai clicar e vai ir diminuindo o tamanho deles tá esse daqui eu vou colocar tamanho 28 o restante está OK do jeito que está esse daqui eu vou clicar vou vir em avançado vou deixar 20 de preenchimento também vou vir aqui no tamanho desse texto vou deixar tamanho 30 aqui nesse botão também eu vou vir em avançado largura vou deixar largura 100% aqui
nesse contêiner tá Faltando a gente ajustar né porque aqui tá ficando o espaço então a gente vem aqui no contêiner principal desincula os valores e no inferior a gente deixa zero para que a nossa imagem consiga encostar aqui na extremidade vou vir aqui vou vir em avançado vou colocar 20 de preenchimento aqui no título eu vou vir em estilo e vou diminuir para 28 a vou diminuir para 28 esse aqui vou deixar como está o restante também e vou vir aqui vou vir em avançado aqui no contêiner né vou colocar 20 de preenchimento nesse título
aqui também eu vou diminuir para 30 o restante está OK aqui também vou vir no contêiner preenchimento 20 e vou vir no título vou deixar tamanho 30 aliás isso aqui eu vou diminuir para não haver quebra de linha então vou deixar tamanho 27 aí aqui eu vou clicar vou vir em conteúdo vou mudar o estilo aqui desse layout ó vou mudar ele para esse estilo aqui deixa eu só ver porque esse aqui não é do Elementor deixa eu só ver se no se ele ficou certinho aqui não aí tá vendo que ele alterou também no
computador então vamos fazer o seguinte como esse aqui não tem a configuração nativa ele até tem mas é para o pro né então a gente vai fazer o seguinte Vai duplicar aí esse aqui eu quero que apareça só no celular então vou clicar aqui vou vir em avançado vou vir em responsivo e vou ocultar para desktop né que é computador e esse outro aqui eu quero que apareça só no computador então eu vou vir em avançado responsivo e vou ocultar para tablet e para celular tá vendo que aí ó só aparece um que é esse
aqui e aí eu vou colocar aqui no desktop né no modo de computador tá vendo que ele fica meio cinza é assim mesmo aí eu vou clicar vou vir em conteúdo e vou alterar o layout pro que eu quero que era aquele de cinco né eu vou clicar publicar sempre clicando em publicar tá então aqui ficou assim não pode excluir esse aqui tá é porque ele fica assim ó o que tá oculto para celular fica assim e o que tá oculto pr para computador ele fica assim tá vendo mostrando que está oculto é assim mesmo
aí vou vir aqui no contêiner vou vir em avançado 20 de preenchimento o título também eu vou diminuir para tamanho 30 e aqui eu vou vir na nesse item vou vir aqui em avançado largura personalizada e vou deixar largura 100% aliás vou deixar personalizado e vou diminuir um pouco ó deixar o tamanho do texto pronto Aqui tá OK do jeito que está vou vir nesse contêiner vou vir em avançado vou colocar 20 de preenchimento o título também eu vou diminuir para 30 o botão eu vou vir em avançado largura deixar 100% o restante tá OK
aqui eu vou vir no contêiner vou vir em avançado vou colocar 20 de preenchimento aqui dentro desse contêiner eu vou vir em avançado vou desvincular os valores e aí aqui na esquerda vou deixar 20 na direita eu vou deixar 20 no superior eu vou deixar 20 e aqui no inferior eu vou colocar 80 aqui no texto vou vir em estilo tipografia vou deixar tamanho 30 também e vou vir aqui nesse contêiner ó que a gente não tá conseguindo pegar ele aqui ó a gente não tá conseguindo pegar ele aqui mas eu vou colocar no computador
ó pra gente conseguir clicar aí voltar para celular ele já tá clicado aí a gente vai vir de avançado vamos desvincular aqui os valores e a gente vai subir ele então a gente vai clicar aqui e vai colocar uma margem negativa dessa vez ó vamos colocar bastante aqui também vamos tentar o mesmo -0 pra gente ver ficou muito - 150 vamos vir aqui nesse contêiner de cima vir em avançado vamos colocar 180 de padding ó para ele ficar com Mais espaço aqui aí ficou legal e vamos vir aqui no formulário vamos clicar vamos vir em
conteúdo vou duplicar esse aqui eu vou deixar ele para celular ó responsivo então eu vou ocultar esse aqui para computador e esse aqui eu vou ocultar para celular avançado responsivo ocultar para celular e para tablet e aí esse aqui vou clicar vou vir em conteúdo vou vir aqui no item largura da coluna eu vou deixar 100% e vou vir aqui no botão largura da coluna eu vou deixar 100 também e aqui eu vou vir em estilo em distância vertical vou aumentar um pouquinho pronto ó então vai ficar assim depois você checa se está com esse
espaço aqui a borda também a gente tem que alterar vou vir em estilo vou vir em borda desse aqui eu vou deixar tudo 10 mesmo para ele ficar arredondado até embaixo pronto nesse aqui eu vou clicar vou vir em avançado vou deixar 20 de preenchimento vou vir no título vou vir em estilo vou deixar tamanho 30 o restante vou só diminuir o ícone vou vir em estilo ícone diminuir o tamanho aqui está OK então está todo configurado a nossa parte de mobile aqui da nossa home um outro ajuste pra gente fazer aqui é tirar essa
margem que tem que está ficando meio Feia então antes da gente continuar vou tirar ela aqui com essa margem aqui da pergunta vou clicar vou clicar aqui no item de sanfono vou vir em estilo em conteúdo em tipo de borda vou deixar nenhum aí vai ficar legal ó f espaço vamos voltar aqui né paraa nossa configuração do tablet então aqui eu vou clicar no contêiner principal vou vir em estilo a imagem eu vou deixar a mesma mas vou configurar deixar posição centro ao centro e aqui nesse contêiner eu vou vir em largura e deixar porcentagem
e aumentar a largura deste meu contêiner vou vir aqui no título vou vir em estilo vou diminuir o tamanho desse título para 30 também vou vir aqui no contêiner vou vir em layout vou deixar o conteúdo alinhado ao início que ele vai subir aqui que tem um espaço melhor né e não fica totalmente aqui em cima da mulher fazendo com que a visão fique ruim acho que eu vou diminuir um pouco mais o tamanho desse título deixar tamanho 26 o botão também eu vou clicar vou vir em estilo tamanho do texto vou diminuir vou deixar
tamanho 16 vou vir em avançado em largura personalizada e vou aumentar a largura vou deixar ele 100% pronto esse texto também eu vou clicar vou vir Aqui em estilo tamanho do texto vou diminuir e vai ficar assim também vou clicar aqui vou vir em altura mínima e vou diminuir um pouco a altura pronto agora vou vir ajustando o restante também vou vir aqui basicamente nos títulos vou mudar para tamanho 30 também e aqui nesses cards eu vou clicar vou vir aqui nas colunas e vou deixar duas colunas que aí assim vai ficar melhor aqui eu
vou clicar vou vir aqui em layout vou modificar com a setinha para baixo para ficar um contêiner abaixo do outro vou vir nesse contêiner vou vir em largura vou colocar porcentagem vou colocar 100% de largura e aí aqui vou clicar nesse contêiner vou vir em largura vou deixar porcentagem vou colocar 100% vou vir aqui no tamanho dessa imagem e vou diminuí-la vou deixar aqui 50% tamanho dela não aliás deixar 60% pronto aqui no texto né no título também vou deixar tamanho 30 aqui também vou deixar tamanho 30 aqui também vou modificar vou vir aqui vou
deixar duas colunas e três linhas aqui deixa eu ver quantas linhas que são duas linhas ó vou modificar aqui para duas linhas também pronto aqui no título também eu vou mudar para tamanho 30 aqui eu vou clicar Vou vir em conteúdo vou vir em layout vou vir em altura do contêiner e vou diminuir vai ficar assim aqui eu vou clicar no contêiner vou vir em layout vou deixar com a setinha para baixo vou vir aqui nesse contêiner vou vir em largura deixar porcentagem e vou deixar 100% aqui nesse contêiner também vou vir em largura eu
vou deixar porcentagem e vou deixar 100% esse aqui eu vou deixar vou vir aqui vou vou clicar vou vir no título vou deixar tamanho 26 o botão vou vir aqui em largura personalizado vou deixar largura 100% vou vir em estilo e vou diminuir o tamanho para 18 aqui eu vou clicar vou vir em layout vou deixar com a setinha para baixo vou vir nesse contêiner vou vir em layout vou vir aqui em largura deixar porcentagem vou deixar 100% a mesma coisa eu vou fazer aqui com esse contêiner vou deixar porcentagem em largura e vou deixar
100% pronto ficou assim aqui eu vou clicar nesse contêiner vou vir em layout em largura vou deixar porcentagem vou deixar 100% e no da imagem também vou vir em largura vou deixar porcentagem vou deixar 100% e aqui eu vou vir no contêiner principal e vou mudar pra vertical né para Ficar uma setinha abaixo da outra agora eu vou colocar no desktop para eu conseguir selecionar esse contêiner voltei pro tablet e agora nesse contêiner aqui a gente vai clicar vai tirar esse aí a gente vai desincular os valores da margem e aí a gente vai colocar
uma margem negativa superior aí a gente tem que fechar para poder ver se tá dando certo ó não tá dando ah outra coisa que faltou também aqui eu tinha colocado um padding né um padding aqui na minha direita então vou mudar para 60 para ficar mais largo assim né e vou desencar os valores e no inferior vou colocar 160 para ficar um espaço hábil pra gente poder subir essa imagem para cá aliás vou colocar 180 vai para ficar mais espaço ainda aí vamos fechar pra gente ver ó tá ficando assim acho que uma coisa que
a gente podia fazer é vir nesse contêiner aqui e diminuir ele um pouco pronto que aí não precisaria a imagem ficar tão grande assim aí vamos vir aqui nela vamos diminuir o tamanho dela também pronto aí vamos fechar ó precisa de mais vamos colocar mais ó um 180 de imagem negativa e aí aqui no editor ele tá meio bugado mas aí você pode testar no navegador ou no seu no Seu tablet se você tiver ó tá mesmo aqui mesmo no computador ó você vem até aqui clica botão direito inspeciona aí aqui tá vendo ó aqui
eu pus para celular mas é só você vir aqui e mudar para o tipo de dispositivo que você quer vou colocar por exemplo um iPad né que é tablet ó aí no iPad a gente consegue ver ó aí que a gente consegue ver que ele ainda tá para fora então vamos vir aqui vamos ver em avançado vamos colocar uns 280 de espaço e aqui vamos vir e vamos colocar uns 280 de margem negativa e vamos ir nesse contêiner e aumentar a largura dele publicar aí vamos ver ó tá quase hein ah faltou uma coisa também
a gente vira nesse contêiner aqui vira aqui em estilo borda e colocar 10 em todas as extremidades vamos ir no contêiner de cima também vamos mudar para 320 de pad inferior e vamos clicar em publicar vamos ver se vai dar certo ainda faltou um pouco vamos clicar aqui no de baixo vamos colocar 320 - 320 hum 320 ficou legal pronto aí aqui nesse aqui do contato tá com espaçamento OK a gente não precisa alterar então ficou assim nosso site tá assim no tablet assim no computador ó e você vai conferindo se as mudanças Que você
fez não surtiu nenhum outro efeito tá aí você vai você vai conferindo se tiver tudo OK você só publica agora uma coisa que faltou a gente fazer aqui a linkagem dos links dos menus para as partes que a gente precisa e a configuração do menu ficar fixo na rolagem e ficar com esse efeito aqui ó de fosco né de vidro fosco então vamos lá pra gente fazer a linkagem primeiro a gente vai colocar aqui no desktop para ficar mais fácil e a gente vai determinar o primeiro a parte de sobre que é essa parte aqui
a gente vai vir aqui no contêiner vai clicar aqui em avançado vai vir aqui em ID e vai escrever o nome da classe que a gente quer que aqui no caso é sobre aí o próximo é depoimentos aí a gente vai vir aqui em depoimentos no contêiner vai vir em avançado e vai escrever a classe lembrando que essa classe aqui tem que ser o mesmo nome que você colocou tá vendo ó que você colocou quando você foi criar o menu tá vendo ó tem que ser o mesminho para dar certo agora a gente vai colocar
o fac e o contato o fac é esse aqui a gente vai vir aqui vai colocar fac aqui você não põe hashtag tá você põe só o ID e o contato a gente vai pôr aqui Ó dessa maneira a lincagem ela já está sendo feita ó quando você clica ele já rola lá para baixo onde você selecionou agora a gente vai fazer esse efeito aqui aí a gente vai passar o mouse aqui em cima vai clicar em modelo de menu e pra gente conseguir ter acesso aos efeitos que eu quero a gente vai ter que
vir aqui dentro do painel vir em plugins adicionar plugin e pesquisar pelo plugin Stick Header Effects for Elementor que é esse plugin aqui a gente vai clicar em instalar depois em ativar aí vamos vir aqui no modelo de menu vamos recarregar a página vamos clicar aqui em cima nesse contêiner do menu que a gente quer que role para baixo vamos vir em avançado em stick sessions que é a configuração do próprio Adon né ele vai vir assim você vai clicar para ativar vai deixar aqui por enquanto em parent pra gente testar e vamos vir aqui
em stick header effects e vamos ativar aí aqui ó aqui ó em shering header a gente vai deixar ativo vamos deixar 70 mesmo aqui em shiring logo a gente vai deixar ativo vamos deixar 85 aí vai diminuir o tamanho da logo para ela vai Ficar 85% do tamanho também vamos ativar o blur que é o que vai dar aquele efeito aí aqui no blur a gente vai deixar 21,8 mesmo e vamos publicar e vamos recarregar aqui o nosso site pra gente ver ó ó ele mesmo já faz o efeito de pular e de diminuir a
logo se você não quiser que diminua a logo não precisa tá é só se você quiser aí já ficou assim o nosso menu vamos ver se está funcionando no mobile também ó no tablet ficou assim e vamos mudar aqui para o celular ó celular também ficou assim só que aí o celular tá ficando muito em cima né então vamos mudar aí vamos diminuir um pouco aqui a distância vamos deixar 13 eu vou me recarregar ó agora deu certo então 13 deu certo e aí aqui no no tablet está OK e aqui no computador vamos ver
se ficou OK também ó ficou tudo certinho então agora que nós já finalizamos já adaptamos a nossa página home e o menu rodapé vamos criar o layout da nossa página blog por padrão a nossa página de blog ela vem assim com esse tema né com as imagens do texto todo jogado para criar uma bonitinha a gente vem aqui pelo painel vem aqui em Royal Tem Builder aí vamos vir Aqui em arquivo e vamos clicar em create template aí a gente vai colocar aqui o nome de página de blog vamos clicar em criar adicionar condições deixar
aqui para todos os arquivos clicar em salvar vamos clicar aqui pegar um flexbox com a setinha para baixo ver em avançado vamos colocar 50 de preenchimento vamos vir em layout vamos colocar 300 de altura vamos vir em estilo tipo de plano de fundo vamos arrastar uma imagem para cá lembrando que essas imagens estão todas no nosso material de apoio e tem vídeo no canal se não tiver eu vou lançar ensinando a fazer todos os banners deste projeto tá ó tem duas opções de banner aqui tem essa que tem um desenho só de um lado e
tem uma outra que tem os desenhos dos dois lados desenhos as fotos quer dizer né tem essa que tem desse lado desse lado vou deixar essa daqui que tem só de um lado a gente vai vir aqui em tamanho de exibição vamos deixar cobertura e em posição vamos deixar centro mudei para uma outra que tem o a foto mais afastada agora vamos ir na biblioteca arrastar o widget de título para cá aí a gente vai escrever nosso blog Só que vamos fazer daquele jeito lá que a gente pega o texto escreve nosso blog aqui vamos
já pegar o código da cor que a gente quer que é esse alaranjado blog a gente seleciona clica aqui na cor cola o código da cor clica fora e clica em OK vem aqui copia o código vem aqui no título e cola o código aí a gente vem aqui no título vem em layout e vamos colocar a cor cinza ah uma coisa aqui a gente não consegue né como são configurações do Royal a gente não consegue puxar as configurações padrões tá vendo então é legal que a gente tenha uma página aberta pra gente ficar copiando
algumas coisas que a gente queira como o código aqui da cor cinza aí eu vou duplicar esse título aqui embaixo eu vou colocar um outro título que eu tenho um título normal vou vir em estilo tipografia vou deixar a fonte popins tamanho 18 peso 500 e a cor vou deixar uma cor mais clara também vou vir aqui na biblioteca vou pegar um botão aí vou escrever assim: "Voltar ao início." Aí aqui a gente vai puxar o link da página home vamos vir aqui vamos colocar o item de arrow né Que é a setinha aí a
gente escolhe uma setinha que a gente queira pro lado esquerdo né simbolizando que é para voltar vamos vir aqui em estilo a cor de fundo a gente vai deixar transparente a cor do texto a gente vai deixar com esse cinza escuro e vamos vir em preenchimento vamos deixar zero ficou assim a gente pode vir aqui no contêiner vir em layout deixar tudo alinhado ao centro e deixar tudo alinhado ao centro aqui também aqui nesse título eu vou diminuir um pouco mais deixei mais fino e aqui nesse botão vou clicar ao passar o mouse na cor
do texto eu vou mudar para essa cor alaranjada agora aqui paraa parte dos posts vamos clicar pegar um contêiner com dois dentro aí nesse primeiro contêiner a gente vai vir vai deixar 70% e nesse outro a gente vai vir e vai colocar 30% aí nesse aqui a gente vai puxar o widget de grid slider vamos ir na biblioteca vamos pesquisar por grid slider é esse primeiro aqui que é o post grid slider aí OK aqui a gente vai definir quantos posts que a gente quer que apareça aqui nessa primeira página vou colocar nove aqui em
layout a gente vai definir quantos posts que a gente quer que apareça por linha eu vou deixar dois Resolução da imagem vou deixar completa o texto eu vou deixar alinhado aqui pra esquerda mesmo aqui média vai ler vou deixar do mesmo jeito aqui em filters a gente vai traduzir né então tá o post nós vamos deixar todos os posts e aí aqui ele está puxando todas as categorias que a gente cadastrou eu cadastrei todos só essas duas categorias mas se você tiver mais categorias cadastradas ele vai puxar todas as categorias aqui tá aí vamos vir
aqui em estilo aqui em border rádios nós vamos deixar 20 aqui em border type vamos deixar sólido vamos deixar um e de pedem nós vamos deixar 20 no superior vamos desvincular na direita vamos deixar 10 no inferior vamos deixar 30 e na esquerda vamos deixar 10 ó e aí vai ficar assim ah uma coisa que faltou vamos vir aqui em conteúdo em elementos aí vamos tirar vamos tirar comentários vamos tirar esse aqui que é o resumo vamos deixar só o título o leia mais e também aqui a data aqui em leia mais a gente vai
abrir e vai mudar para saber mais ou leia mais vamos colocar saber mais vamos vir em estilo aqui em grid em border r a gente vai deixar 20 vamos desincular os valores só no inferior e na esquerda que nós vamos deixar zero tá vendo que aí A gente arredonda só a parte de cima da imagem e a de baixo fica reta aqui em média overlay já está configurado né uma cor aqui no título a gente vai deixar um cinza mais escuro mais claro quer dizer que é esse daqui aqui em content aqui em tipografia eu
vou mudar para Poppins tamanho 15 aqui em saiba mais eu vou mudar a cor para esse alaranjado pegar o tom de alaranjado aqui vou vir aqui na tipografia vou deixar poppins tamanho 15 peso 500 e decoração sublinhado pra pessoa saber que é para clicar aí aqui em margem na esquerda eu vou deixar um espaço ó vou deixar um espaço suficiente para ficar bem rente ao texto então 20 foi muito vou deixar 15 e aqui no inferior eu vou deixar 10 aí ficou assim aqui no título eu vou mudar a tipografia vou deixar a fonte poppins
também aí eu vou diminuir o tamanho dela vou deixar tamanho 17 peso 600 aí vai ficar assim vou vir aqui vou vir em margem vou clicar e no inferior eu vou colocar 20 para dar um espaço entre o título e o restante vou voltar aqui na no leia mais né que é o read more e vou em hover e vou colocar essa mesma cor do alaranjado só que um pouco mais clara aí eu vou mudar a opacidade Vou diminuir a opacidade pronto aí assim vai ficar mais clicado a parte aqui dos filtros ó filters aqui
no na cor eu vou deixar de branco na background color eu vou deixar o alaranjado no hover no background color eu vou deixar um alaranjado só que um pouco mais claro e o ativo também vai ficar assim aí aqui na border rádios eu vou deixar de 30 para ficar todo arredondado e na tipografia eu vou deixar a fonte poppins vou deixar tamanho 14 e aí o peso eu vou deixar peso 400 e aí vai ficar assim agora aqui no padding eu vou diminuir um pouco aqui na esquerda e na direita eu vou deixar aliás vou
aumentar um pouco na esquerda e na direita eu vou deixar 20 e superior inferior eu vou deixar cinco pronto ficou assim ah uma coisa que não era para eu ter feito aqui em filtros é que o background era para eu deixar branco mesmo e o color em cinza que aí fica melhor deixando só o hover e o ativo com a cor de fundo pronto ficou assim agora vamos para essa parte de cá a gente vai vir aqui vai pesquisar por search que é o widget de pesquisa aí aqui nós vamos escrever vamos mudar essa palavra
search Para pesquisar que aí quando tiver muitos posts a pessoa consegue pesquisar por aqui vamos pegar esse título copiar clicar com o botão direito colar é que a gente vai escrever sobre a e aqui no lugar de blog a gente vai escrever doutora Dora Morgana Moraes aqui no search a gente vai clicar vai vir em estilo vai vir aqui em border rádios vamos deixar 30 vamos desincular e aqui na direita e na inferior a gente vai deixar zero agora no botão a gente vai mudar para essa cor para essa cor alaranjada que a gente tem
aqui não tô conseguindo pegar vou pegar a cor por aqui e no hover é a mesma coisa eu vou aumentar um pouquinho a intensidade desse laranja ó pr quando a pessoa passar o mouse ela ver que é clicável também vou diminuir um pouco a largura desse botão vou deixar vou desvincular os valores de border e vou deixar arredondado no inferior e na esquerda opa na esquerda não na direita pronto que aí vai ficar todo arredondado assim aqui no título vou clicar vou vir em estilo vou vir em tipografia vou deixar tamanho 30 vou vir aqui
na biblioteca vou arrastar um widget de texto para cá vou colar um pequeno texto aqui falando sobre né a especialista A gente vai vir aqui na biblioteca vai arrastar o widget de contador para cá para baixo aí aqui a gente vai colocar por exemplo mais de 1000 que aqui a gente vai pô o número o prefixo a gente vai colocar o sinal de mais colocar 1000 mais de 1000 aí a gente coloca assim no título clientes sitos feitos aí a gente duplica e coloca esse aqui com os anos que a gente tem de experiência a
gente coloca mais deí vai ficar sete aí a gente coloca anos de experiência aí vamos duplicar e vamos colocar aqui esse aqui colocando só de exemplo tá pessoal sucesso né que aí seria sucesso com resultado né processo de sucesso enfim só dando uma ideia aqui para vocês aí você pode colocar o que você quiser aí a gente vai clicar opa cliquei e apaguei né a gente vai clicar vai vir aqui em estilo vai vir aqui no número vai vir em tipografia vai deixar a fonte poppins vai deixar um peso bem grande para poder ficar mais
robusto aí aqui no título né no subtítulo a gente vai deixar uma cor cinza mais escura e na tipografia a gente vai deixar fonte popins também agora vamos vir aqui em avançado vamos colocar 30 de padding vamos vir aqui em Borda vamos colocar sólido desinclor os valores e aí no superior e na lateral esquerda a gente vai deixar uma borda de dois e a cor a gente vai colocar essa cor alaranjada que a gente já tá usando aqui aí em border rádio a gente vai deixar 20 e vamos vir aqui em plano de fundo vamos
pegar essa cor alaranjada que a gente tá usando mas vamos clicar aqui nela e vamos diminuir bastante a opacidade vai ficar assim aí a gente clica o botão direito clica em copiar clica o botão direito e colar o estilo nos outros pronto agora a gente vai pegar um botão on da biblioteca arrastar um botão para cá e aí a gente vai colocar por exemplo entrar em contato agora marcar sua consulta vamos clicar aqui selecionar o ícone do WhatsApp aí vamos colocar um espaço entre o ícone e o texto vamos vir aqui em estilo o botão
vamos deixar esticado a cor nós vamos deixar degradê vamos vir aqui vamos colocar um tom de verde um pouco mais claro e vamos vir aqui na de baixo e colocar um tom de verde um pouquinho mais escuro aí nós vamos mudar esse essa localização ó aí vai ficar assim vamos vir aqui em rai da borda vamos deixar 20 e aqui em preenchimento vamos deixar 20 também Aqui em ao passar o mouse a gente vai deixar grow para quando a pessoa passar o mouse fazer esse efeito e vamos colocar os efeitos de movimento vamos clicar aqui
nesse item avançado efeito de movimento aí vamos deixar aqui finding right esse aqui também efeito de movimento fiding right e vamos fazer isso em todo o texto todo texto todos os itens aqui nesse item vamos clicar vamos ver em avançado efeito de movimento vamos colocar finding up e nesses daqui também agora nós vamos vir nesse contêiner principal vamos vir aqui em espaçamento e em espaço entre as colunas a gente vai deixar 25 porque eu achei que tava ficando muito grudado o texto com o nosso com os nossos itens agora também nós vamos voltar aqui neste
item vamos vir em conteúdo em layout e aqui em espaço horizontal a gente pode aumentar para 22 para não ficar tão juntinho assim também os puxas aí você acabou colocando um espaço a menos aqui no no lei a mais então vamos voltar em estilo vamos vir na data e aí na data a gente vai vir aqui em margem desvincular e no inferior a gente vai deixar 10 que ela vai dar um pouco mais de espaço aqui e vamos clicar em publicar agora vamos modificar Pro celular aqui nesse contêiner nós vamos clicar vamos vir em avançado
vamos deixar 20 de preenchimento vamos vir em layout vamos deixar todos alinhados ao centro vamos ir aqui nesse texto estilo deixar alinhado ao centro aqui nesse contêiner vamos clicar vamos ver avançado deixar 20 de preenchimento nesse contêiner aqui também está tudo correto então vamos vir aqui nesse item estilo número e aí o tamanho do nosso número nós vamos diminuir para 35 vamos clicar com o botão direito copiar clicar com o botão direito e colar o estilo nos outros itens vamos ver aqui no tablet como está ficando aqui no tablet a gente pode vir em contêiner
deixar os itens alinhados aqui no início vir aqui nesse texto vir em avançado largura personalizar e deixar ele com menos espaço para ele não ficar em cima daquele desenho aqui nós vamos vir contêiner vamos vir aqui em layout vamos deixar alinhado aqui eh na vertical vamos vir aqui nesse contêiner em largura vamos deixar porcentagem e vamos deixar ele 100% aí nós vamos vir aqui nos itens vamos clicar conteúdo nós vamos vir aqui em layout aí aqui ó você pode deixar com três colunas que aí fica um tamanho legal vamos Ir nesse contêiner vamos deixar a
largura 100% e vamos deixar aliás largura em porcentagem vamos deixar 100% aí aqui a gente pode vir em avançado colocar uns 30 de preenchimento aí nesses daqui a gente vai fazer o seguinte vamos vir aqui vamos pegar o edi de grade e arrastar eles para cá vamos vir aqui na grade vamos deixar colunas três e linhas um e vamos vir aqui em um dos itens vir em estilo o número a gente vai diminuir bastante de tamanho e o nosso título também vamos diminuir de modo que não quebre a linha aí vamos clicar com o botão
direito copiar clicar com o botão direito colar o estilo nos outros itens aí vamos só modificar aqui no celular porque ele vai ter dado uma alteração né no celular tá OK vamos ver no computador aqui no computador nós vamos clicar vamos deixar apenas uma coluna e três linhas pronto ficou tudo certinho publicar então a nossa página de blog já está funcionando ó se a gente acessar aqui ó clicar em blog e for acessar a página já está funcionando uma coisa que ficou faltando pro menu e o rodapé aparecerem aqui na página de blog post é
a gente vir aqui royal time builder aí vir aqui no modelo de header né que é O o modelo de menu clicar em manage e adicionar essa configuração aqui para aparecer nas páginas Canva aí a gente salva e aí vemos no footer que é o rodapé clique em manage condition se o seu não tiver assim ó ented side você clica para aparecer e ativa essa condição pronto aí depois de salvar a gente pode recarregar aqui o menu e o rodapé vão estar aparecendo aqui agora pra gente criar o modelo de post individual que é esse
aqui ó que é o modelo que abre quando a gente clica para ler mais sobre o post a gente também vai ter que vir aqui em Royal Adons Builder Single vamos clicar em criar template vamos colocar assim modelo de post e vamos clicar em criar template adicionar condição aparecer em posts all né que é todos e vamos clicar em salvar condições para economizar um pouco de tempo a gente pode vir aqui no nosso modelo de blog vamos copiar este banner porque a gente vai usar o mesmo banner né o banner bem parecido ó clica aqui
no mais clica em colar aí aqui a gente vai vir na biblioteca vai fechar as abas e vai pesquisar aqui pelo pelo post título ó post título a gente vai arrastar para cá podemos copiar e tentar colar o estilo aqui ó não foi Então vamos ajustar né vamos ir em estilo a cor a gente vai deixar essa cor alaranjada e a fonte a gente vai deixar a sora tamanho 35 peso 500 a gente vai vir aqui no título vamos vir em avançado em largura vamos deixar personalizado e vamos colocar uma largura média ó 67% para
não ficar um texto muito extenso até a largura da nossa página toda vamos excluir esse subtítulo que tem aqui e aí aqui na parte de baixo vai pegar um contêiner com a seta para baixo vai vir em avançado vamos colocar 50 de preenchimento vamos vir aqui e pesquisar pela imagem do post que é esse aqui é o post tamb ele já vai puxar a imagem sozinho resolução da imagem vamos deixar completo e estilo aqui tipo de borda vamos deixar sólido vamos desvincular os valores e aí no superior e na esquerda nós vamos colocar dois e
aí vamos puxar essa cor alaranjada para ser a nossa borda e aqui no border rádios nós vamos deixar 20 a nossa imagem ficou assim aqui largura da imagem vamos deixar customizada vamos colocar uma largura média ó mais ou menos assim agora vamos na biblioteca vamos pegar o widget de meta post que é onde puxa as informações aí a gente vai deixar a taxonomia Né que é a categoria e a data se você quiser você pode colocar mais informações aqui comentários horário tá vou deixar só esses dois vou deixar aqui alinhado na horizontal você pode colocar
um ícone também se você quiser aqui na categoria e um ícone também se você quiser aqui na data ó basta você vir aqui e colocar vou vir aqui e pegar um id tag para taxonomia e vou vir aqui e vou pegar um widget de calendário para a data agora vamos vir aqui em estilo afastar os nossos itens aqui em ícone a gente vai alinhar o tamanho e vamos vir aqui Elementor de data vamos colocar essa cor alaranjada opa col laranjada não Elementor de data vamos deixar de cinza e aqui na tipografia vamos deixar pops tamanho
15 e aqui no emagrecimento né que é de categoria nós vamos colocar essa cor alaranjada no hover no hover a gente pode deixar assim mesmo e na tipografia a gente vai deixar poppins tamanho 15 também aqui no ícone a gente vai também deixar essa cor alaranjada nos dois pronto ficou assim agora a gente vai vir aqui na biblioteca vai pegar o widget de post que é o texto né de fato que a gente escreve lá por dentro do pressa aí ele já vai puxar tudo A gente vai vir aqui em estilo na tipografia só vamos
mudar pra nossa fonte que é a fonte poppins fonte de texto eu vou deixar tamanho 15 pronto vai ficar assim vamos vir aqui na biblioteca arrastar o widget de título para cá título normal e aí a gente vai escrever: "Está gostando do conteúdo?" Aqui eu já vou colar direto o código tá você já sabe como é que faz vou vir aqui em estilo vou deixar aquela cor cinza vou duplicar e aí vou escrever assim: "Compartilhe com os amigos" nesse segundo título aí esse daqui eu vou deixar poppins tamanho 15 peso 500 aliás deixar tamanho 20
peso 500 e a cor eu vou deixar um cinza mais claro aqui eu vou deixar a fonte sora tamanho 30 e o peso eu vou deixar este tamanho mesmo aí vou vir aqui vou pesquisar por sharing buttons né que é são botões de compartilhamento aí aqui você pode modificar e deixar os botões do jeito que você quiser por exemplo eu vou deixar aqui o botão do WhatsApp vou adicionar outro vou deixar o botão do Facebook vou adicionar vou deixar o botão por exemplo do e-mail vou adicionar vou deixar o botão do Pinterest vão ficar esses
aí eu vou vir aqui em estilo e border Rádios eu vou deixar 30 aqui em estilo vou usar a cor customizada e vou usar a cor alaranjada pronto vai ficar assim e no hover também vou usar a cor alaranjada só que vou deixar ela um pouco mais escura opa um pouco mais clara e aí vai ficar assim pronto agora vamos configurar para dispositivos móveis né no celular vamos clicar pendente contêiner vamos ver avançado vamos colocar 20 de preenchimento aqui no título a gente vai vir vai vir aqui em avançado vai vir aqui em largura personalizada
vamos deixar 100% vamos vir aqui em estilo tipografia vamos deixar tamanho 28 também do título restante da OK aqui a gente vai clicar no contêiner vamos deixar 20 de preenchimento a imagem a gente vai clicar vamos deixar uma largura de 309 o texto já está OK esse daqui a gente pode diminuir o tamanho do título também para uns 28 esse aqui também para não haver quebra de linha e pronto o restante já está OK só clicar em publicar agora vamos pra parte do tablet ó o tablet tá praticamente tudo certinho só vamos vir aqui nesse
título vamos vir em conteúdo vamos deixar ele alinhado pra esquerda e pronto Ó tudo certinho aqui então vamos lá vamos testar a nossa parte de blog ó se está tudo certo vamos testar a nossa parte de post individual ó tudo OK aqui na página home também tudo OK então ficou faltando aqui só a gente configurar a nossa página de políticas de privacidade ó que tá com esse texto estranho a gente vai clicar aqui em cima editar página vamos clicar em editar com Elementor vamos vir aqui na engrenagem vamos vir em configurações vamos deixar tela do
Elementor vamos excluir isso daqui opa não é tela do Elementor não é Elementor largura total confundi pronto clica aqui vem em Flexbox pega isso com a seta para baixo vem avançado colocar 50 de preenchimento vamos vir aqui vamos pegar um título colocar aqui vamos escrever políticas de privacidade e vamos pedir para o chat PT gerar o nosso texto de políticas de privacidade aí pessoal o interessante é que você gere uma um texto política de privacidade direitinho conforme as determinações da sua profissão dos seus serviços seus produtos tá tem um vídeo aqui no canal te ensinando
a colocar inclusive da forma mais correta possível seguindo a lei de proteção Geral Eh segurança de dados né que é a LGPD e colocando esse aviso de consentimento de cookie tem um vídeo específico só sobre isso eu vou deixar o link aqui na descrição se você quiser ir lá aprender tá e aí é só você vir aqui na biblioteca pegar um texto colar o texto das políticas que você quis aqui e aí o que você quiser destacar ou que você quiser colocar link você coloca então por exemplo esse aqui da Morgana o nome do site
eu vou deixar e também vou colocar o link do site então vou clicar aqui e vou adicionar o link do meu site aqui se você quiser colocar alguma cor também você seleciona aqui e coloca uma cor né então você vai colocando aqui os seus dados clica em publicar vamos colocar aqui no mobile ó vamos vir em avançado deixar 20 aqui de preenchimento o texto vamos colocar aqui no computador eu quero vir em estilo e mudar ele para um cinza e pronto vamos ver se no tablet tá OK tá tudo certinho prontinho já fizemos adaptação para
dispositivos móveis né agora eu vou te ensinar como editar e divulgar o seu site se você tiver acessando alguma página como por exemplo a página home ou a página de políticas é só você clicar em cima de Elementor Que você abre o editor dessa página se você quiser modificar os modelos que nem a gente tem os modelos aqui de menu rodapé se você tiver aqui ó na página home é só você passar o mouse em cima que aparece menu rodapé aí você clica com o botão direito clica em abrir outra página que você vai abrir
o modelo agora o modelo de blog você tem que clicar na página de blog que aí é só você passar o mouse ó vai ter ele aqui você clica em cima e você edita de post individual clica para abrir um post que aí vai estar o modelo você passa o mouse em cima clica aqui você vai conseguir editar e para você divulgar o link do site é o link normal do seu site falo isso porque tem gente que vem aqui olha o link desse olhinho que a gente fica clicando para ver o modelo do site
antes de ficar pronto e aí divulga esse link ou então vai tentar acessar esse link ó e dá nisso isso aqui não é para quem não está logo vê mesmo isso aqui é só para você que é o editor o link do site normal é o link sem o editor que é isso aqui por exemplo blog é esse a página home é esse aqui tá vendo então é esse link aqui normal de quando você clica no menu que é o link que você vai usar Para divulgar ok e lembrando que tanto este site quanto todos
os outros que a gente ensina a criar no canal nós disponibilizamos a venda aqui na nossa loja então se você não quiser criar tudo passo a passo você pode comprar o template e só ir modificando tem vídeo aqui também ensinando você como adaptar os templates vou deixar o link da loja no card na descrição se você quiser ir lá conferir outra coisa vou te dar algumas dicas para deixar o seu site melhor converter mais ó se tem vídeo aqui no canal te ensinando que são configurações para deixar o site melhor ranqueado no Google otimização que
é para deixar o site mais rápido LGPD que é a Lei Geral e Proteção de Dados que é obrigatório tem vídeo aqui no canal te ensinando configurar também te ensina a cadastrar as ferramentas do Google para fazer seu marketing como Analytics, search console playlist de design para você aprender a fazer banners imagens combinar cores playlist de marketing para você aprender a instalar pixel no Facebook plugin de segurança que é muito importante para você evitar que o seu site seja invadido ou que contraia vírus E o mais importante de todos que é para fazer backup no
seu site para se acontecer alguma coisa você ter uma cópia do site funcional para você só upar o site lá de novo e não precisar criar tudo outra vez então pessoal este foi o site que você fez espero que você esteja orgulhoso se você gostou tem alguma dúvida deixa aqui nos comentários 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.
![Como Criar uma LANDING PAGE no WordPress e Elementor Grátis [Página de Vendas Passo a Passo]](https://img.youtube.com/vi/0uIqBzY7_gs/maxresdefault.jpg)
![Como Criar Um BLOG no WordPress, Elementor Free e Royal Addons Grátis [Passo a passo do Zero]](https://img.youtube.com/vi/v8tVpvye72I/maxresdefault.jpg)
![Como Criar LANDING PAGE de SERVIÇOS com Elementor e WordPress [Passo a Passo do Zero]](https://img.youtube.com/vi/ur1KmGAp9Wo/maxresdefault.jpg)
