Como criar uma Landing Page para Advogado ( Completo )

Nesse vídeo eu vou te mostrar como você pode criar um site como esse aqui que é uma Landing Page para um escritório de advocacia Olá meu nome é Caroline Cristian eu sou Web Designer e nesse canal eu te mostro como você pode criar um site de forma simples e sem estresse e nesse vídeo eu vou te mostrar todo o passo a passo completo desde o início vou te falar tudo que você precisa para criar o site vou te mostrar todo o passo A passo vou te mostrar como a gente vai editar as imagens da forma

correta como você pode escolher as cores certas para o seu site vou te mostrar como criar cada parte do site do zero vou te mostrar como adaptar esse site para celular e no final a gente vai publicar ele aqui na internet então esse vídeo tá realmente completo e eu peço que você fique até o final para pegar todas as configurações e se você gostar desse conteúdo deixe um like Para apoiar o Nosso trabalho e se inscreva no canal para não perder os nossos próximos vídeos Então agora eu vou te mostrar na tela do meu computador

todo esse passo a passo Então vamos lá e é esse site que a gente vai construir nesse vídeo A aqui eu desenvolvi esse site para que ele seja bem simples mesmo para que qualquer pessoa consiga desenvolver essa página aqui ele tem um visual simples mas ao mesmo tempo é elegante é bonito e também tem um visual bem profissional então a Gente vai construir esse site aqui a gente vai utilizar a ferramenta WordPress e a gente precisa de alguns elementos antes da gente construir esse site tá para você ter acesso a essa ferramenta Você vai precisar

de um domínio e de uma hospedagem já vou te mostrar o passo a passo de como você você vai adquirir esses dois itens mas quero te fazer uma pequena explicação aqui do que que significa domínio e hospedagem e vamos começar pela Hospedagem a hospedagem é basicamente o local onde você vai armazenar os arquivos do seu site Calma que isso não é complexo tá a hospedagem é o servidor que vai colocar o seu site online se você não tiver uma hospedagem por exemplo o seu site não vai funcionar ele só vai funcionar no seu computador e

você não vai conseguir divulgar PR as pessoas então a Ed agem ela tem esse trabalho de colocar o seu site na internet para que qualquer pessoa no Mundo consiga acessar as suas páginas entenda que a hospedagem é como se fosse o terreno de uma casa você tá ali construindo a sua casa você precisa primeiro de um terreno para que você possa colocar a sua casa e olha só a hospedagem ela é muito importante para o bom funcionamento do seu site se a sua hospedagem for ruim por exemplo ela pode deixar o seu site lento prejudicar

o acesso das pessoas nas suas páginas pode tirar o seu site do ar pode trazer Problemas de segurança para os dados do seu site e muitos outros tipos de problema então é muito importante ter uma boa hospedagem E por que que eu tô te falando isso porque tem várias opções de hospedagens aqui na internet só que você tem que tomar cuidado para escolher uma hospedagem boa para que isso não prejudique o funcionamento do seu site e o domínio é o nome do seu site é o endereço então se a hospedagem é o local onde você

coloca o seu site site o Domínio é o endereço e você vai registrar esse endereço e vai entregar PR as pessoas para que essas pessoas consigam acessar o seu site então por exemplo google.com youtube.com é mercadolivre.com.br amazon.com todos esses nomes que eu acabei de te falar são domínios e se você pegar esse domínio Se você pegar esses endereços você consegue acessar nos sites dessas empresas porque você tem o endereço do site então por exemplo se a gente vier Aqui ó no no navegador e colocar amazon.com a gente consegue acessar a loja da Amazon o site

da Amazon porque a gente tem esse endereço aqui que é o endereço do site e para você criar um site Você vai precisar de um domínio e também vai precisar de uma hospedagem e agora eu vou te mostrar o passo a passo de como você vai ter acesso à hospedagem e o domínio para você construir o seu site tá Não precisa se preocupar que não é nada complicado e é só você seguir Todo esse passo a passo que não tem erro tá pode ficar Fica tranquilo que não é nada complicado a gente vai utilizar aqui

nesse vídeo os serviços da hosting que é uma das melhores empresas disponíveis aqui na internet quando o assunto é contratação de hospedagem e registro de domínio eu super recomendo porque utilizo nos meus projetos e também nos projetos dos meus clientes Então vamos utilizar o serviço deles aqui nesse tutorial e para que você não Tenha nenhum problema clica no link que eu vou deixar aqui na descrição que você vai ter acesso a esse site aqui que é o site oficial tá e utilizando esse link você também apoia o nosso trabalho e ajuda a gente a continuar

produzindo conteúdos gratuitos como esse aqui aqui no YouTube tá então clica no link aqui na descrição que você vai ter acesso a esse site aqui aí você pode navegar aqui pela parte de hospedagem e você pode clicar aqui em hospedagem de sites e Aqui embaixo nós temos os planos de hospedagens que você pode escolher aqui embaixo você pode dar uma olhada nos principais recursos de cada plano mas o ideal o que eu mais recomendo na verdade é o plano Business que aqui nós temos os recursos essenciais para construir o nosso site temos aqui 200 GB

de armazenamento que é muito bom e-mails gratuitos O que é essencial para qualquer empresa que queira se posicionar aqui na internet e o Principal O melhor é que você vai ter um domínio gratuito para utilizar no seu site durante o período de um ano e depois você só paga a renovação depois de um ano tá super recomendo esse plano por conta disso e essa questão aqui do domínio gratuito é ótimo para quem tá criando o primeiro site e isso aqui já é uma vai ter economia quando a gente vai construir o nosso site tá então

super recomendo que você utilize esse plano e caso você esteja com o orçamento contado Aí você pode utilizar o plano Premium tá ele tem menos recursos do que o plano Business Mas funciona muito bem também e Fica como opção para você tá um desses planos aqui que já está ótimo e eu vou seguir esse tutorial utilizando o plano Business pra gente seguir com as configurações é só clicar aqui para adicionar o carrinho e Aqui nós temos mais algumas informações e vamos concluir o nosso pedido aqui você vai escolher o seu período de assinatura né O

período de assinatura que você quiser Geralmente eu coloco aqui 12 meses ou 24 meses fica a sua escolha vou seguir aqui com essa opção e aqui embaixo a gente vai criar uma conta recomendo que você coloque aqui um e-mail seguro que você tem acesso e se você já tinha conta na hosting antes recomendo que você utilize um novo e-mail para que não tenha nenhum tipo de problema tá Vou colocar aqui o meu e-mail e vou colocar aqui uma senha pra gente seguir pra parte do pagamento Pronto coloquei aqui a minha conta e agora agora a

gente vai seguir pra parte do pagamento aqui a gente tem um resumo de tudo que a gente tá contratando e um desconto aqui que é a primeira contratação tá aqui embaixo nós temos o valor total e aqui você escolhe como você quer fazer o pagamento vou selecionar aqui a opção de pix e Vou preencher aqui com os meus dados pra gente seguir para o pagamento Pronto já preenchi aqui com os meus dados e agora A gente vai seguir para o pagamento só clicar aqui embaixo pronto eu cheguei aqui nessa tela e a gente vai gerar

o código Pixel vou colocar aqui o meu CPF depois a gente vai clicar aqui para gerar o código e finalizar o pagamento detalhe que você não precisa se preocupar que esses dados são armazenados de forma segura tá então você pode colocar o seu CPF ou seu CNPJ se você preferir Mas pode ficar tranquilo que todos esses dados são Armazenados de forma segura e ele só pede isso aqui para registrar a hospedagem no seu nome então não precisa se preocupar vou seguir aqui com o meu CPF e depois vou clicar aqui e finalizar o pagamento pronto

finalizei aqui o pagamento vou clicar aqui para continuar e depois que eu cliquei em continuar ele chegou direto nessa tela aqui onde nós temos as primeiras configurações da hostinger para começar a construir o seu site aqui a gente já tá dentro do painel Principal de configurações da hosting tá mas se por algum motivo você não conseguir chegar nessa tela aqui e aconteceu algum problema Você perdeu o link alguma coisa do tipo não se preocupa tá você vai pegar aquele e-mail que você utilizou lá quando você estava fazendo o pagamento e você vai acessar as mensagens

que a hostinger enviou para você aqui nós temos a primeira mensagem recomendo que você Verifique o seu e-mail tá só clicar aqui fazer o login Com a sua conta e verificar o seu e-mail Aqui nós temos o status do pagamento para você acompanhar e temos aqui a mensagem de bem-vindo com o botão aqui de login você pode clicar e acessar o site da hosing tá E caso você tenha alguma dúvida você pode também acessar o site da hosting e aqui na lateral você tem a opção de login onde você pode fazer o login na sua

conta tá aí você vai chegar no painel de configurações da hosting vou te mostrar como que funciona Para que você não tenha nenhuma dúvida aqui vai mostrar essa mensagem para você melhorar a segurança da sua conta vou clicar aqui para cancelar por enquanto e aqui vai aparecer o painel principal da hosting esse aqui é o painel principal é aqui que você vai fazer todas as configurações da sua hospedagem e do seu domínio tá e provavelmente vai aparecer para você configuração pendente E aí você vai clicar aqui para configurar e você vai Chegar nesse passo a

passo que eu tinha te mostrado bem aqui aí agora a gente vai seguir com os primeiros passos pra gente começar as configurações da sua hospedagem e registrar o seu domínio Então vamos começar aqui com as configurações só clicar aqui para começar e vai aparecer um pequeno questionário aqui isso aqui não não impacta no seu site tá então não precisa se preocupar Vamos colocar aqui para mim vou colocar aqui que eu tô criando vou Colocar Business e aqui você pode colocar Não obrigado pra gente começar aqui com as configurações aqui vai aparecer essas duas opções Mas

você pode clicar aqui para pular e criar o seu site do zero e vai aparecer essa tela aqui para você definir o nome do seu site que é justamente o seu domínio aí você pode comprar um domínio novo se você quiser ou você pode utilizar um domínio existente caso você tenha registrado em um outro local aí você Pode clicar aqui para selecionar E aí você vai seguir com as configurações de domínio existente se você tiver alguma dúvida em relação a isso eu vou deixar um vídeo aqui na descrição para que você possa acompanhar essa opção

aqui tá no meu caso eu vou utilizar essa opção de domínio gratuito porque a gente contratou a opção de Business né opção Business aqui da hosting E caso você tenha contratado a Premium você também tem acesso ao domínio gratuito Então Vamos clicar aqui para selecionar e aqui embaixo você vai ter a opção para colocar o domínio que você quer registrar aqui eu recomendo que você coloque o nome da sua marca ou alguma informação que esteja relacionada ao seu segmento ou seu nicho de mercado no meu caso eu vou utilizar esse domínio aqui que eu já

tinha visto que ele tava disponível pegar aqui colocar bem aqui vou retirar esse P com e aqui na lateral você consegue Escolher a extensão de domínio para complementar o seu domínio você pode colocar aqui p com.com.br P online tem várias opções aqui que você pode escolher eh a minha recomendação é que você Dê preferência a opção pon comom e pcom.br porque são as mais famosas aqui no Brasil mas você pode escolher aquela que que mais combinar com o seu projeto caso você esteja criando um outro projeto por exemplo pont Shop enfim você pode Escolher aqui

a que você achar mais interessante só evite extensão como ponto xyz e outras aqui que pode acabar prejudicando a reputação do seu site no geral de preferência opção pcom ou.com.br tá essa é dica geral assim quando a gente fala sobre domínios e aqui você vai digitar o domínio que você quer registrar colocar aqui p com e detalhe tá esse domínio aqui ele precisa ser único então só uma pessoa no mundo pode registrar um domínio é com um único Nome tá então não tem como duas pessoas terem o mesmo nome então aqui pode acontecer de você

tentar registrar um nome que que outra pessoa já esteja utilizando por exemplo se eu colocar aqui advocacia.com com certeza vai ter uma pessoa com esse nome Ó esse domínio já está em uso pode ser que apareça essa mensagem aqui para você e se isso aparecer para você você precisa modificar esse nome ou você vai buscar Uma variação ou você precisa e criar algum outro nome tá vou utilizar aqui essa outra opção que eu vi que tava disponível Pronto coloquei aqui o domínio vou clicar aqui para pesquisar e apareceu aqui ó o domínio está disponível Então

você vai testar as opções aqui até aparecer essa mensagem para que você possa registrar o domínio no seu nome tá E aí depois disso vamos clicar aqui para continuar para seguir pras próximas etapas aqui você vai Completar o registro do domínio Então você pode colocar aqui é no nome de quem que esse domínio vai ser registrado vai colocar aqui como pessoa ou uma empresa aí você escolhe aqui o que fica melhor para você clica aqui para próximo passo e aqui você vai colocar as suas informações é importante colocar isso aqui para que você registre o

domínio no seu nome então não se preocupa que essas informações são seguras são armazenadas de forma segura e você pode colocar aqui O seu endereço o seu CP o seu o seu CPF CNPJ não precisa se preocupar eles só pedem isso aqui para registrar o domínio no seu nome tá então vou preencher aqui com os meus dados e vou clicar aqui para finalizar o registro pronto preenchi aqui com os meus dados e agora vou clicar aqui para finalizar vai aparecer essa tela aqui para você aí você clica aqui para concluir as configurações vai aparecer essa

tela aqui para você você pode clicar aqui para gerenciar o site e Aqui nós temos o painel de controle da hosing eu vou diminuir esse banner aqui aqui embaixo a gente tem as configurações da hospedagem e aqui e provavelmente vai aparecer para você o status do domínio Pode ser que demore um tempinho para que o domínio fique disponível tá isso aqui é totalmente normal você pode aguardar aqui em alguns instantes que depois o domínio vai ser e ativado com sucesso tá se você tiver algum problema em relação a isso aqui de Ficar com alguma dúvida

alguma coisa do tipo você pode entrar em contato com o suporte da hossinger tirar suas dúvidas que com certeza eles vão saber te ajudar tá Mas no geral is aqui é normal e a gente pode aguardar alguns instantes para concluir as configurações mas é no geral você pode dar uma olhada aqui no no painel de controle tá pode dar uma explorada aqui n nas informações e aqui embaixo também vai aparecer essa mensagem aqui isso aqui é normal o Domínio ele tá sendo ativado e pode demorar um tempinho para que essa configuração seja concluída tá então

vou aguardar aqui em alguns instantes pra gente seguir pras próximas configurações pronto aquela Barrinha saiu eu acho que nem deu 3 minutos eu cliquei aqui para recarregar e o painel é voltou aqui com com as informações todas ATIV adas e tá tudo funcionando normalmente então agora a gente vai seguir pras próximas configurações e a gente vai instalar o WordPress tá para fazer a instalação do Word Prise é super simples aqui na hostinger a gente vai fazer o seguinte vamos vir aqui na lateral aqui em site e aqui você vai encontrar essa opção de auto instalador

você pode clicar aqui em WordPress ou você pode utilizar essa opção de auto instalador que aqui nós temos a opção de WordPress clica aqui para selecionar e aqui a gente vai criar o nosso usuário para acessar a ferramenta o WordPress recomendo que Você coloque um e-mail seguro um usuário seguro e uma senha segura para evitar riscos de invasão no seu site então evite colocar aqui senha 1 2 3 senha admin ou 1 2 3 4 evite isso tá Coloque uma senha segura porque isso vai evitar riscos de invasão no seu site isso aqui é muito

importante tá porque o acesso do WordPress é o acesso total do seu site então se alguma pessoa mal intencionada a acessar o Word Prise ela consegue acabar com o seu site Então vou colocar Aqui as minhas informações vou criar um usuário aqui rapidinho pra gente seguir pras próximas etapas Pronto já coloquei aqui as minhas informações de usuário e detalhe aqui recomendo você colocar um usuário forte tá evite colocar só ADM ou admin alguma coisa assim coloa um usuário forte para evitar os riscos de invasão no site e aqui em cima você pode colocar qualquer nome

coloquei aqui nome do site pode colocar qualquer nome porque você pode editar essas Informações aqui depois então não precisa se preocupar aqui embaixo temos mais algumas informações Se você não souber mexer nisso aqui não precisa mexer Pode fechar aqui e clicar aqui para seguir pros próximos aqui a gente vai colocar recomendado pode deixar assim mesmo e aqui você vai escolher um idioma de sua preferência Vou colocar aqui português esse aqui não é o idioma do site tá esse aqui é o idioma do painel de configurações então aqui você Pode colocar qualquer idioma de sua preferência

aqui embaixo a gente não precisa mexer deixa com recomendado e clica aqui para instalar e assim que você concluir aquelas configurações você vai chegar nessa tela aqui onde vai aparecer o nome do site e mais essas configurações aqui embaixo aí para você acessar o WordPress Você vai clicar aqui em painel de administrador E aí você vai chegar nessa tela aqui que é o painel do WordPress e essa aqui é a ferramenta que A gente vai construir o nosso site detalhe fica uma dica para você sempre que você quiser acessar esse painel aqui do WordPress você

pode fazer o o seguinte pode vir aqui ó aqui em cima colocar o nome do seu domínio colocar uma barrinha aqui WP tro admin se você digitar esse endereço aqui e clicar em Ok você vai chegar no painel do WordPress que é o mesmo painel que a gente viu aqui tá esse aqui é o painel onde a gente vai fazer as configurações E agora a gente vai seguir com as primeiras configurações para começar a construir o seu site bom e as primeiras coisas que a gente precisa fazer aqui no WordPress é vir aqui em configurações

aqui você consegue modificar o título do site e aqui você pode colocar uma breve descrição recomendo que você coloque porque às vezes essas informações aparecem aqui em cima ou quando você envia o site para alguém ou aparece lá no Google então é legal você preencher Isso aqui não modifique essas informações aqui embaixo e se você quiser você pode modificar o e-mail de administrador aqui embaixo você não precisa mexer pode deixar dessa forma e podemos clicar aqui para salvar alterações e agora a gente pode vir aqui em links permanentes aqui eu recomendo que você coloque no

nome do post pro link do seu site ficar bonito recomendo que você deixe dessa forma clica aqui para salvar alterações e agora a gente Pode vir aqui pra parte de aparências Aqui nós temos os temas pode selecionar por aqui Mas no geral a gente vai chegar nessa tela aqui ao clicar em aparências e aqui você consegue escolher um tema o tema é basicamente a base do site é como funciona como se fosse um pacote de configurações tá no geral isso aqui não impacta tanto no visual do site mas eu recomendo que você utilize esse tema

aqui que é o Hello e esse aqui é um tema leve é um tema que não tem muitas Configurações que podem pesar o site Então vai deixar o seu site mais rápido e é um dos melhores temas pra gente utilizar com o elementor que é a ferramenta que a gente vai utilizar para construir o site tá então no geral recomendo que você utilize esse tema aqui só que detalhe se vocês tinha um site antes que já tinha sido configurado enfim você contratou uma pessoa para fazer alguma coisa do tipo toma cuidado com essa mudança de

de tema tá porque Esses temas aqui eles impactam no visual do site na estrutura como um todo então se você tinha um site antes e você modificar o tema pode acontecer desse site ficar desconfigurado ficar com algum problema no visual dele então se você se preocupar com isso não mude o tema tá se segue com o tema que você já tem aqui que não tem problema mas se você tá começando o seu site do zero recomendo que você utilize o tema Hello que é um dos melhores temas pra gente Utilizar aqui no L press vou

clicar aqui para instalar e vamos clicar aqui para ativar pronto o tema vai aparecer aqui para você e você pode excluir esses outros temas aqui tá só clicar aqui para excluir aqui também podemos deixar só um tema aqui mesmo e Podemos seguir aqui pra parte de plugins os plugins eles funcionam como se fossem aplicativos aqui no nosso site tá então por exemplo quando você vai adicionar um um quando você quer um novo Recurso no seu celular você pode ir lá na Play Store e adicionar um novo aplicativo funciona exatamente dessa forma aqui nos plugins então

por exemplo você quer adicionar um um formulário de contato no seu site você pode vir aqui em adicionar plugins e você pode adicionar um plugin para isso para adicionar esse formulário de contato nas suas páginas Então os plugins funcionam dessa forma Sempre que você quiser uma nova funcionalidade ou quiser Desbloquear alguma configuração nova você pode vir aqui e instalar um plugin existem plugins p e existem plugins gratuitos tá nesse vídeo aqui a gente só vai utilizar um plugin que é um plugin gratuito Então você vai vir aqui em adicionar plugins e aqui você vai digitar

elemento vou deixar o nome aqui na descrição Tá mas é esse plugin aqui que tem 5 milhões de instalações então é um dos melhores plugins pra gente utilizar para construir o site e esse Plugin vai ajudar a gente a construir o visual do site tá toda essa parte visual aqui a gente vai fazer utilizando só esse plugin Então vamos clicar aqui para instalar agora e aqui você vai clicar para ativar apareceu aqui O plugin Pode ser que apareça uma tela para você com os primeiros passos tá aí você pode vir aqui na lateral que vai

aparecer um X para você clicar e pular aquelas etapas Mas no geral é só você seguir aquele passo a passo e você vai chegar nessa Tela aqui só você clicar aqui para e acessar plugins instalados e você vai acessar essa lista com os plugins aqui eu recomendo que você Clique em configurações do elementor clica aqui em Recursos e aqui é interessante você confirmar PR ver se essa configuração está ativada se tiver verdinho assim significa que tá ativo mas é sempre bom confirmar e colocar aqui Como ativo tá aí você clica aqui para salvar alterações inclusive

se você quiser você Pode desativar esses outros plugins aqui tá só você clicar aqui para desativar que a gente não vai utilizar aqui nesse vídeo então a gente pode desativar para não ficar pesando no site a você pode clicar aqui para excluir e vamos seguir apenas com o plugin elemento aí agora a gente pode vir aqui na aba de páginas e aqui você vai encontrar uma lista de todas as páginas do seu site aqui você pode adicionar Quantas páginas você quiser tá vamos clicar aqui para adicionar nova página e aqui você vai colocar um título

recomendo que você coloque um título que faça sentido tá pode colocar aqui escritório advocacia E por que que eu falei que você precisa de um título que faça sentido porque essa informação aparece aqui em cima então é interessante você colocar um título que faça sentido com a sua página Além disso nós temos aqui na lateral a opção de URL Então aqui você também consegue modificar o link dessa página aqui por exemplo ó nós temos um link enorme esse aqui seria o link da página Mas a gente pode retirar essa informação e só deixar início que

ele fica bem curtinho e fica mais interessante Então podemos deixar dessa forma e agora é só clicar aqui para publicar e agora a gente pode clicar aqui para editar com elemento e esse aqui é o painel do elemento é aqui que a Gente vai fazer a configuração da parte visual do seu site tá nós temos aqui na lateral um painel com todos os elementos que a gente pode utilizar no site como por exemplo título imagem vídeo e o elementor ele funciona com o sistema de arrasta e solta Então sempre que você quiser adicionar alguma coisa

aqui na sua página Você vai clicar e vai arrastar para cá tá é basicamente assim que funciona e detalhe e vai aparecer essa informações aqui para você então é Interessante que você clique aqui em configurações e aqui você vai colocar layout de página como elementor Canvas a página vai ser atualizada e vai ficar em branco assim para você e é desse jeito que a gente precisa tá pra gente seguir com as configurações clica aqui para atualizar para salvar as configurações dessa forma e agora a gente vai começar com a construção da sua página Então vamos

começar e a primeira coisa que a gente vai fazer é Criar essa sessão aqui de cima tá eh a gente vai seguir esse tutorial criando uma sessão por vez Então a gente vai começar aqui com a sessão de cima depois com a sessão de início a sessão sobre a empresa e assim por diante tá E é legal de você entender que cada parte da nossa página é uma sessão diferente então nós temos blocos de sessão aqui esse aqui é um bloco de sessão esse aqui é outro bloco esse aqui é outro bloco e assim por

diante e sempre que a gente e sempre Que você quiser criar uma uma nova sessão criar uma colocar uma nova informação na sua página você vai criar uma nova sessão e essa sessão é um contêiner aqui na ferramenta do elemento você vai ver aqui essa opção de contêiner Então sempre que você quiser adicionar uma nova informação você vai utilizar o contêiner para criar uma nova estrutura de sessão tá E aí como que funciona aqui o elemento nós temos os containers e nós temos os elementos Então e a gente pode dizer por exemplo que o contêiner

é um agrupamento de de elementos Sempre que você quiser adicionar alguma coisa você vai adicionar dentro de um contêiner não tem como por exemplo você adicionar uma imagem aqui no canto ou em qualquer lugar aqui da da sua página você precisa adicionar um contêiner primeiro para depois colocar um elemento tá então recomendo que você siga essa linha de de raciocínio essa estrutura para ficar Mais fácil para você e aí como que a gente vai fazer nós estamos essa primeira sessão aqui vamos clicar aqui nesse Mazinho para criar uma estrutura e aqui a gente vai colocar

a setinha para o lado tá Daqui a pouco eu vou te mostrar a diferença entre a setinha pro lado e a setinha para baixo vai colocar aqui a setinha pro lado e agora a gente vai voltar aqui ó clicando aqui nesses quadradinhos e você vai colocar uma imagem bem aqui vamos voltar vamos vir Aqui na na aba de estilo e aqui você vai diminuir o tamanho dessa imagem dessa forma aqui aqui em conteúdo você pode colocar o alinhamento pra esquerda para ficar posicionado aqui na esquerda e agora a gente vai colocar uma imagem para colocar

uma imagem recomendo que você pegue a sua logo né a sua marca com o fundo transparente tá é importante estar com o fundo transparente e aí você vai clicar aqui em escolher imagem vai vir aqui na pasta e arrastar essa imagem Para cá dessa forma aqui agora você vai clicar aqui para selecionar detalhe que essa imagem deve estar em formato png tá então se você contratou uma pessoa para fazer a marca por exemplo peça a logo em formato p g e com fundo transparente para que você possa colocar no seu site aí você vai colocar

aqui selecionar e a gente pode ajustar o tamanho o tamanho vai depender do tamanho da sua logo algumas Logos t a fonte um pouco maior né o texto um pouco maior o símbolo Maior Então você vai ajustar isso aqui de acordo com o tamanho da sua logo aqui em largura você consegue fazer isso e por enquanto vamos deixar apenas com a logo tá porque essa configuração aqui de menu de navegação ela é um pouco mais detalhada um pouco mais complexa eu vou deixar mais pro final do vídeo para que eu possa te explicar e você

entender com mais facilidade tá então vou deixar mais pro final do vídeo e aí o que a gente vai fazer aqui é só um pequeno ajuste no Espaçamento do contêiner que é essa parte Rosa aqui né Você vai clicar aqui no meio para você selecionar o contêiner e aqui em avançado Você vai vir em pading vai desvincular esses valores e no superior você vai colocar 10 e o inferior V colocar 10 também o que a gente fez aqui é criar um espaçamento entre o a imagem né e o contêiner Então veja aqui ó a imagem

e essa Barrinha rosa se a gente aumentar aqui ó a gente aumenta o espaçamento interno entre esse Entre o o a imagem e a borda tá a gente vai utilizar muito isso no decorrer do vídeo então se você não entendeu como que funciona aqui Não se preocupa tá Coloca essa configuração e no decorrer do vídeo eu vou explicar mais sobre isso aqui tá Então vamos seguir pra próxima sessão que é a sessão de início é essa sessão aqui onde a gente apresenta a nossa marca os nossos serviços a nossa empresa e faz uma apresentação que

faz com que a pessoa continui na sua página Né então é muito importante que você coloque aqui o que do que que você trata o seu serviço o que que você entrega e se possível coloque o seu diferencial para que você possa se destacar da sua concorrência então se você por exemplo for especializado em alguma área do direito Coloque aqui para você chamar a atenção das pessoas que realmente precisam daquele serviço você vai colocar aqui uma pequena apresentação pode colocar aqui um título uma Descrição e uma sub um subtítulo aqui só para complementar então basicamente

você vai fazer uma apresentação inicial do seu trabalho e é importante que você dedique tempo para montar esses textos aqui porque essa primeira sessão é super importante para que a pessoa ela ela tenha interesse em continuar na página tá porque se isso aqui não tiver legal a pessoa ela vai olhar vai ver que não é aquilo que ela procura e vai sair aí da sua página então é interessante você Dedicar tempo para montar esses textos aqui Então como que a gente vai fazer essa estrutura vamos adicionar aqui uma nova estrutura aqui clicando nesse maizinho e

aqui a gente vai colocar a setinha para baixo tá vamos voltar aqui no menu e você vai clicar aqui no título vai arrastar para cá aqui no texto a mesma coisa vamos adicionar aqui o botão e vamos adicionar um texto em cima do título só você posicionar aqui cima e basicamente vai ficar dessa forma aqui Aí vamos posicionar esses elementos no centro da página Então você vai clicar aqui no contêiner para você selecionar esse segundo contêiner e aqui vamos alinhar os itens aqui no centro e só para você entender o que que significa essa essa

configuração aqui de direção você pode clicar aqui na horizontal ó e você vai ver que a posição dos elementos ela se modifica né E aqui basicamente você tá falando pro sistema que você quer que os elementos fiquem um embaixo Do outro então aqui a gente coloca elementos um embaixo do outro e aqui na horizontal a gente coloca um ao lado do outro tá essas outras setinhas aqui é a mesma coisa só que aqui é invertido então aqui na setinha para baixo você fala quero que os elementos fiquem um embaixo do outro na setinha para cima

você inverte isso você muda a posição dos textos e aqui na horizontal você só vai inverter o lado também ele simplesmente faz esse movimento aqui tá Basicamente as setinhas que a gente mais utiliza é setinha aqui na horizontal e aqui na vertical para baixo né aqui PR horizontal pra direita e aqui para baixo é são essas duas que a gente mais utiliza e aqui nesse caso vamos utilizar a setinha para baixo você coloca aqui alinhado no centro para ele ficar assim e aqui só para confirmar você deixa aqui Centralizado também só para ficar tudo certinho

basicamente é essa estrutura que a gente precisa aqui na parte da Largura não recomendo que você modifique pode deixar desse jeito aqui mesmo e na altura a gente não vai não vai colocar nenhum valor aqui porque a gente vai modificar a altura depois com uma outra configuração então pode deixar dessa forma aqui e agora você pode colocar os textos aqui nos elementos de texto Então vou pegar aqui o meu texto que eu já tinha separado Você vai clicar aqui em cima do elemento que você quer editar e aqui nesse Campo você vai colocar o Texto

que você quer adicionar Vou colocar aqui ó colar o texto Desse jeito vou pegar aqui o o outro texto já já vou aproveitar e vou modificar todos aqui na na opção de texto o visual é um pouquinho diferente mas as configurações são basicamente as mesmas tá vou tirar aqui vou colocar um ponto e aqui em cima também esse texto aqui de cima também basicamente assim que funciona sempre que você quiser editar alguma coisa é só você clicar em cima do Elemento e aqui na lateral você vai ter as configurações daquele elemento tá agora eu vou

clicar aqui no botão eu vou vou modificar esse texto aqui também aqui você modifica o seu texto e aqui a gente vai colocar o link e depois eu vou modificar o link vou te mostrar passo a passo como que a gente faz isso aqui e aqui no ícone a gente pode clicar aqui ó em biblioteca de ícone e aqui você pode colocar o WhatsApp inserir e vai aparecer aqui o WhatsApp se você não Quiser usar o WhatsApp você pode utilizar uma seta também também funciona super bem pode colocar aqui a setinha pro lado ou algo

do tipo vou deixar aqui o WhatsApp mesmo e aqui o espaçamento do ícone vou colocar em 10 depois a gente vai finalizar a configuração desse botão Mas vamos voltar aqui pro texto que a gente precisa editar o visual desse texto Então recomendo que você coloque aqui o alinhamento Centralizado desse jeito e aqui em estilo você consegue Colocar a cor do texto modificando desse jeito aqui aqui temos as configurações de tip que é o visual desse texto para que a gente possa ajustar de acordo com a sua marca de acordo com o visual e que você

trabalha na sua marca tá vamos modificar aqui a cor do texto e eu tô utilizando esse site aqui para separar as minhas cores vou utilizar ele no decorrer desse vídeo eu coloquei aqui os códigos das minhas das cores da marca do daquele site fictício que a gente tá Criando então recomendo que você faça isso também pega as cores que você utiliza na sua marca no seu Instagram e na sua divulgação coloca aqui vai clicar aqui ó nesse maizinho vai vai adicionar aqui a cor ó você consegue modificar dessa forma aqui acabei modificando na cor não

acho que voltou a normal são essas cores aqui mesmo mas caso você queira modificar você pode mover aqui ó você consegue explorar outras cores para ir definindo as cores que você vai Utilizar no seu site tá recomendo que você faça isso separe suas cores inclusive você também consegue utilizar esse site para montar novas cores Então vou vou duplicar aqui ó só pra gente gente não perder essas cores se você quiser você pode vir aqui na lateral e aqui você clica em explorar Aí temos várias paletas aqui que você pode utilizar você pode clicar aqui ó

e ir dando uma olhada nas opções de cores aí se você quiser modificar alguma Deixar um pouco mais intenso modificar aqui alguma cor você vai montando aqui a sua paleta de acordo com o visual que você quer é expressar com a sua marca tá de acordo com o posicionamento da sua marca e tudo mais com toda sua estratégia então você pode explorar aqui essa paleta para ter algumas ideias e ir montando as cores do seu site tá vou utilizar essa paleta vou deixar aqui na lateral para eu conseguir acessar e recomendo que você utilize eu

vou deixar O link desse site aqui na descrição para ficar mais fácil para você acessar Então vou copiar aqui as cores vou vir aqui em cor do texto e aqui você coloca o código da cor vou colar aqui pronto vou utilizar essa cor vou deixar preto por enquanto mas depois a gente vai modificar o fundo né então nem precisava colocar o código da cor aqui depois a gente vai colocar esse fundo aqui é azul e aí a cor do texto precisa estar em branco né então vamos deixar vou deixar Dessa forma aqui mesmo depois a

gente modifica E aí vamos seguir aqui pro visual do texto né o texto em si clicando aqui em tipografia a gente consegue pegar essa opção aqui de família e Aqui nós temos várias opções de estilo de letras né tipografia basicamente o estilo de letra você pode colocar aqui por exemplo é a mão de serrar aqui a mão des errar pode colocar por exemplo a times times nenhum desse jeito temos a Arial caso você goste da Arial aética Então temos várias Fontes muito boas aqui que você pode utilizar você pode explorar e o estilo da fonte

né o estilo do das Letras varia dependendo do posicionamento que você quer utilizar na sua marca então é importante você pensar nisso aqui também Porque dependendo do do estilo da fonte pode passar uma outra imagem sobre a sua marca tá e detalhe recomendo que você tome cuidado com fontes assim por exemplo são fontes Bonitas de certa forma mas elas são bem difíceis de ler Então você tem que tomar cuidado com isso procure usar Fontes que tenham essa estrutura aqui ó fique mais fácil de ler principalmente aqui quando a gente trabalha com sites e materiais digitais

né então busque famílias de fontes que tenham tenham fácil leit evite Fontes assim por exemplo eu vou utilizar nesse caso aqui uma fonte chamada Bona nova uma fonte que eu achei bem Interessante para esse esses esse tema aqui de advocacia eu acho interessante se você quiser você pode utilizar também aqui em tamanho você pode definir um tamanho vou deixar 32 como tamanho você pode colocar aqui entre 28 e 32 e 36 dependendo do tamanho do texto mas geralmente 32 é um tamanho legal e aqui no peso a gente define a grossura dessa fonte Nem todas

as fontes TM e muitas opções de peso então aqui por exemplo ó nós estamos apenas duas opções se eu não Me engano temos aqui esse fino e Aqui nós temos o com uma grossura maior são só essas esses dois formatos Mas dependendo da fonte você vai ter mais opções aqui nesse caso aqui eu vou utilizar a fonte com tamanho mesmo semin e posso deixar dessa forma o peso da fonte é interessante para você destacar aquele texto Então é é legal a gente colocar em títulos aqui em transformação a gente não vai modificar aqui você pode

colocar em Maiúsculo e e capitalizado assim dessa forma Geralmente eu coloco aqui padrão mesmo e aqui o estilo você pode colocar em Itálico algumas Fontes elas acabam bugando tá vendo é Acaba acontecendo esse erro aqui mas podemos colocar aqui normal que vai funcionar normalmente aqui em decoração não recomendo que você utilize senão o texto fica um pouco poluído não é tão legal e aqui é em Line he nós temamos a altura de linha aqui não vamos mexer por enquanto vamos Deixar dessa forma aqui que não tem necessidade de mexer aqui no caso dos títulos e

o que a gente vai fazer aqui é virem avançado e aqui em largura Vamos colocar largura personalizada e aqui você vai conferir para ver se está em porcentagem tá que é a segunda opção vai colocar aqui 50% porque dessa forma a gente delimita o espaço que aquele texto Ali vai ocupar tá vendo ó se a gente colocar aqui pequenininho a gente tá falando que o texto só deve ocupar 30% Do nosso contêiner E aí o espaço fica bem pequenininho é interessante fazer isso para você colocar o texto desse jeito aqui ó quebrado em duas linhas

porque senão ele vai ficar esticado desse jeito né Eu acho interessante Colocar assim porque aí fica com visual bem organizado fica legal que o texto é curtinho então fica bem interessante podemos deixar aqui 40% aí você vai e você vai ajustar de acordo com com o tamanho do seu texto e aqui só para Confirmar você coloca aqui o alinhamento Centralizado porque pode ser que o texto fique assim ó tá é interessante você deixar Centralizado aí você vai encontrar essa opção aqui na parte de conteúdo então é basicamente assim que funciona a edição do texto tá

e a gente vai seguir essa mesma linha de raciocínio aqui na descrição e no subtítulo Então vamos continuar aqui com a descrição vamos vir aqui em estilo eu vou deixar preto por enquanto porque Depois a gente vai modificar eh vai modificar a cor para branco né como como está aqui e aqui no alinhamento Vamos colocar Centralizado e a tipografia vamos modificar a tipografia assim como a gente fez ali no título aqui na família de fonte eu vou utilizar uma fonte diferente vou utilizar a Monte serrar que ela tem um visual bem interessante bem fácil de

de ler e é legal pra gente utilizar em textos de descrição Então vou colocar aqui nesse Texto o tamanho eu vou colocar 16 e o peso eu vou colocar normal detalhe recomendo que você sem sempre utilize o mesmo padrão de configuração em todos os textos da sua página então por exemplo se aqui você colocou essa configuração de texto aqui tamanho 16 peso 400 e a família mon serrar você vai utilizar esse mesmo padrão de configuração em todos os outros textos de descrição evite colocar e famílias diferentes tamanhos diferentes pesos diferentes Para que você não deixe

a sua página poluída né bagunçada então sempre utilize o mesmo padrão de configuração porque aí você cria uma padronização maior no seu site aqui é basicamente essas configurações que a gente vai fazer aqui na descrição podemos deixar esse jeito aqui em avançado a gente pode fazer aquela mesma configuração aqui em porcentagem Vamos colocar aqui eu não vou usar 40% vou colocar um pouquinho maior 50% só para ele ficar quebrado em Duas linhas desse jeito aqui podemos deixar dessa forma você poderia aumentar um pouquinho o tamanho do texto tá mas geralmente a gente utiliza o tamanho

16 mesmo vamos deixar assim e agora a gente vai vir aqui no subtítulo que é basicamente a mesma configuração aqui eu vou colocar amarelo que eu já tinha colocado amarelo e a gente não vai modificar essa cor depois vou colocar aqui a minha cor a gente coloca aqui Centralizado e Aqui em tipografia eu vou utilizar a fonte mon serrar também a minha recomendação é que você utilize no máximo duas fontes tá uma pro título e outra de suporte pras descrições E subtítulos caso você utilize Vou colocar aqui o peso um pouquinho mas vou deixar peso

médio aqui 500 e aqui em transformação não vou modificar porque esse texto aqui ele já está com maiúsculo né podemos deixar desse jeito Centralizado podemos deixar dessa forma e aqui em largura Vamos colocar 30% só para ele ficar definido aqui é basicamente assim que funciona a configuração desse ess desse texto e o que eu vou fazer é posicionar esse texto um pouquinho mais próximo do título para fazer isso você vai clicar aqui nesse texto de cima vai vir em avançado e aqui a gente vai trabalhar com a margem a margem é o espaçamento entre os

elementos tá aqui no pading a gente Define o espaçamento dentro do elemento o do elemento a parte interna do elemento aqui na margem a gente define o espaçamento externo Então vamos utilizar aqui a margem clica aqui para desvincular os valores e aqui no inferior você vai colocar um valor e um valor negativo podemos colocar aqui -2 o que você tá falando pro sistema é para ele retirar o espaçamento entre esses dois elementos por isso que acontece essa aproximação Então vamos colocar Aqui -20 e aí o texto vai ficar posicionado dessa forma vamos deixar assim por

enquanto depois a gente pode modificar caso seja necessário e agora a gente vai seguir pra configuração do botão que é bem simples vai clicar aqui no botão e aqui nós temamos o texto e o link é sempre que você quiser colocar um link aqui você vai retirar essa hashtag tá vai vir uma hashtag aqui padronizada aí você retira ela para que você possa colocar o link bem aqui e aí quando você For colocar colocar um link de WhatsApp por exemplo você vai utilizar um gerador de WhatsApp Geralmente eu utilizo esse site aqui que é bem

simples de utilizar você vai colocar o seu número bem aqui clica aqui para gerar o link E aí vai aparecer esse link aqui para você aí você vai copiar esse link desse jeito e vai colar bem aqui no link desse jeito aí depois você pode conferir para ver se esse link tá funcionando e tudo mais Mas no geral Sempre funciona coloca o link desse jeito aqui tira aquela hashtag senão não vai funcionar e aí você coloca o link desse jeito aí se você quiser você pode colocar aqui ó para abrir em nova janela que aí

quando a pessoa clicar ela vai ser levada pro seu WhatsApp mas não vai fechar o site então você pode colocar essa opção se for foi interessante para você aqui no alinhamento Vamos colocar Centralizado e aqui no ícone como eu te expliquei você pode modificar o ícone Desse jeito aqui nós temos o espaçamento Vamos colocar aqui 10 e aqui em estilo nós temos as configurações do botão temos aquela configuração de tipografia que funciona exatamente da mesma forma que o título e a descrição nesse caso eu vou colocar a mesma fonte do título só para ficar combinando

com o título que é a Bona nova que aí fica bem interessante o botão fica com o visual bem bem elegante então eu gostei de utilizar aqui no botão aqui a gente Pode colocar o tamanho de 16 ou até um pouquinho maior como 18 mas vou colocar 16 só para ele ficar com o mesmo tamanho do do texto da descrição aqui no peso a gente pode aumentar podemos colocar aqui em para chamar um pouco mais de atenção e aqui a transformação não vão mexer não vou mexer nessas outras opções aqui podemos modificar as cores Então

já vou pegar aqui a cor a cor que eu utilizei aqui é o branco é não vou modificar a cor Agora vou deixar aqui a Cor preta que depois a gente vai colocar aqui no na cor branca mas eu vou modificar a cor do texto vou pegar aqui o azul pra gente já colocar aqui na cor do texto para ficar dessa forma aqui aqui no arredondamento você pode definir uma pequena borda às vezes eu coloco assim ó fica bem interessante ou você pode colocar uma redondamento maior ele ficar assim então fica a sua escolha veja

o que fica mais interessante para o seu site aqui No pading você não vai mexer não tem necessidade de mexer e agora a gente pode deixar essas configurações aqui do texto e do botão desse jeito e agora a gente pode seguir pra configuração do contêiner Então vamos clicar aqui no contêiner principal vamos começar editando o espaçamento interno desse contêiner Então você vai vir aqui em avançado e aqui vamos vamos vir em pading porque a gente vai editar o espaçamento interno aqui no pading vou Colocar o tamanho de 80 Dá até para aumentar né vou colocar

150 desse jeito que a gente cria um espaçamento entre os os elementos aqui do centro do contêiner e a borda do contêiner basicamente assim que funciona essa configuração de pading tá sempre que você quiser editar o espaçamento interno você vai utilizar o pading Quando você quiser editar o espaçamento externo e aproximar os elementos aí você vai Utilizar a margem para fazer isso basicamente assim que funciona e agora vamos editar o fundo dessa sessão antes da gente seguir vamos clicar aqui em atualizar só para salvar essas configurações e você não perder nenhuma edição feito isso agora

a gente pode seguir pra configuração do fundo da sessão eu recomendo que você separe todas as imagens que você quer utilizar no seu site tá imagens do seu fotógrafo imagens da internet todas as imagens Coloca aqui numa pasta do computador aqui desse jeito aqui mesmo e aí você separa uma pasta com as imagens editadas para ficar mais fácil de você utilizar no seu site tá E aí como que você consegue essas imagens aqui você pode utilizar vários bancos de imagens aqui na internet temos bancos de imagens gratuitos Como por exemplo o freepic que é um

site muito bom pra gente pegar imagens de vários nichos vários segmentos diferentes você pode Colocar aqui por exemplo lawyer interessante você pesquisar em inglês tá Para que tenha mais opções aqui para você então nós temos imagens como Essas aqui que são imagens de alta qualidade que você pode utilizar e pode utilizar no seu site Sem problema nenhum tá são imagens gratuitas Com licença de uso e você pode utilizar no seu site sem problemas aí você vai clicar aqui em download e aí você vai baixar no seu computador só que detalhe você não pode Pegar essas

imagens e colocar direto no seu site tá Jamais faça isso porque essas imagens são muito pesadas aqui por exemplo temos essa imagem de 9 m Esse é um tamanho muito muito pesado tá se você não entende essa questão de tamanho de imagens eu vou deixar um vídeo aqui no card uma playlist completa onde eu falo mais sobre esse assunto E lá eu mostro todos os detalhes de como você deve editar uma imagem da forma correta e tira as principais dúvidas sobre essa Questão de tamanhos de imagem esse tamanho aqui é muito grande quando a gente

trabalha com megas a gente já tá trabalhando com tamanhos muito grandes e você não deve colocar imagens assim no seu site sen não vai pesar vai deixar sua página lenta e vai prejudicar o acesso das pessoas no seu site então Jamais faça isso o que você deve fazer é editar essas imagens antes de colocar no site Porque aqui nós temos imagens muito mais leves tá vendo 44 KB é uma imagem Bem leve 55 KB e assim por diante então O interessante é você fazer essa edição antes de colocar no seu site tá E aí para

você fazer essa edição você pode de utilizar vários vários programas pode utilizar o canva pode utilizar o Photoshop caso você tenha acesso se você for um designer recomendo que você usa o Photoshop e se você é iniciante ou ou não trabalha com design né você pode utilizar o photopia que é um programa gratuito que tem e configurações bem Similares ao Photoshop recomendo que você utilize porque aqui a gente tem opções bem legais para salvar as nossas imagens aqui você pode clicar em novo projeto e você pode colocar um tamanho de tela que você quer utilizar

podemos colocar aqui ó full HD que vai ser 1920 por 1080 podemos deixar esse jeito clica aqui é para deixar 72 tá e clica aqui em criar aí vai aparecer essa área branca aqui onde você pode colocar a sua imagem e aí você vai vir aqui em materiais ou Melhor você vai rear sua pasta e aqui você vai pegar a imagem que você quer utilizar no meu caso vou utilizar essa imagem aqui vou utilizar as mesmas imagens para ficar mais fácil da gente configurar aí você vai pegar aqui ó a imagem e vai arrastar para

cá desse jeito aqui vai clicar aqui em Ok para confirmar o envio e vai deixar desse jeito aí você pode vir aqui em em controle de transformação e você vai aumentar aqui ó você pode posicionar do Jeito que você quiser vai depender da imagem que você tá utilizando posiciona aqui clica em Ok para confirmar e aí você vai fazendo a edição aqui da sua imagem você pode fazer umas pequenas edições clicando aqui nessa bolinha e aqui você consegue ajustar o brilho por exemplo o contraste desse jeito aqui pode colocar em preto e branco caso você

queira utilizar esse efeito eu utilizei esse efeito aqui em alguma algumas imagens você pode colocar aqui o preto e Branco e ajustando a tonalidade fica bem interessante e basicamente são essas as edições que você pode fazer se você quiser explorar outras configurações você pode dar uma olhada aqui na ferramenta no geral a gente vai utilizar essa configuração Bem simples vamos vir aqui em file e aqui Export você vai colocar JPEG ou webp tá webp é um formato muito leve muito legal da gente utilizar no nosso site vou utilizar aqui o webp Inclusive eu recomendo e

aqui Você pode colocar uma qualidade de 60% 80% você pode ficar de olho aqui na qualidade da Imagem e aqui embaixo nós temos o tamanho então podemos aqui 60% que o tamanho já fica bem agradável uma dica é não passar de 200 KB tá 250 KB no máximo assim para você evitar da da página ficar lenta né então é interessante você utilizar um tamanho leve Vou colocar aqui até um pouquinho maior 70% clica aqui para salvar e aí você Salva no seu computador você vai pegar aqui aí você vai pegar aqui a sua imagem vou

jogar aqui na minha p pronto e aí podemos utilizar no nosso site agora a gente pode voltar aqui vai vir aqui em estilo lembra de selecionar aqui o contêiner clica aqui em estilo clássico imagem e você vai pegar sua imagem e vai arrastar para cá clica aqui e arrasta para cá pronto Aí clica aqui para selecionar e agora a gente vai colocar esse filtro de cor aqui azul por Cima da imagem você poderia criar esse filtro direto pelo fotopia tá ou pelo canva por qualquer outra outro programa de edição poderia vir aqui por exemplo ó

cor e aí você poderia diminuir aqui a opacidade fazer todo o efeito mas nós conseguimos fazer isso pelo próprio elemento Então vou utilizar aqui essa opção que fica mais fácil de editar podemos pegar aqui a nossa cor você vai clicar aqui em clássico e vai aparecer essa opção de cor e aqui a gente Consegue aumentar a opacidade dessa cor você também consegue adicionar um Gradiente desse jeito aqui é você pode pegar uma cor um pouco mais clara e aí a gente consegue criar esse efeito de brilho né Desse jeito aqui ó que fica bem legal

podemos aumentar um pouquinho mais a opacidade E aí o visual fica dessa forma aqui você pode modificar o ângulo se você quiser colocar aqui na lateral e Basicamente o nosso fundo tá pronto agora a gente só precisa ajustar os nossos textos podemos clicar aqui no texto vi aqui em estilo aqui em cor do texto A gente pode modificar para e aqui também branco e aqui no botão a mesma coisa aqui no branco pronto podemos deixar dessa forma e praticamente a nossa sessão ela tá pronta agora a gente pode fazer um pequeno ajuste aqui no botão

que eu tinha esquecido de fazer que é aqui ó no Hover aqui você consegue definir uma animação quando a pessoa passa o mouse por cima aqui por exemplo vai acontecer esse efeito aqui quando a pessoa passa Mouse por cima é interessante você explorar essa biblioteca e ver o o que que que que faz sentido Só toma cuidado para não colocar algo muito exagerado né e acabar prejudicando assim ó oo fica um pouco poluído né Eu acho eu não acho tão interessante geralmente a gente utiliza aqui a opção de grow ou de pop que fica Bem

interessante aí você pode escolher basicamente assim que funciona e a nossa sessão tá praticamente finalizada se você quiser fazer um ajuste no espaçamento por exemplo você pode vir aqui em descrição avançado e aqui você pode modificar o espaçamento entre esse esse texto e o botão você pode fazer esses ajustes tá vamos clicar aqui para atualizar para salvar suas configurações e agora a gente vai seguir pra próxima sessão e agora a gente vai seguir pra Próxima sessão e detalhe que eu demorei um pouquinho mais para criar essa sessão aqui porque eu fui te explicando e te

mostrando cada detalhe mas a partir de agora vou dar uma pequena acelerada e a gente vai criar essas próximas sessões aqui tá vamos continuar aqui com a sessão sobre empresa essa sessão é interessante para você apresentar um pouco mais sobre a sobre a sua empresa né sobre serviços que você oferece e também sobre o seu posicionamento sobre Seus diferenciais então é legal ter essa essa sessão de introdução aqui pra gente criar Ela é bem tranquilo vamos clicar aqui numa nova estrutura e aqui vamos colocar a setinha para o lado tá vamos deixar dessa forma mas

a configuração que a gente vai fazer aqui é um pouquinho diferente da outra vamos fazer o seguinte aqui vamos adicionar uma imagem e vamos adicionar um contêiner Vamos colocar o contêiner você vai ver que o contêiner ele vai aparecer aqui ó Vai aparecer essa Barrinha lá rosa e aí você vai soltar o contêiner bem aqui e aí o que que tá acontecendo aqui você tá colocando uma imagem ao lado de um contêiner e é por isso que a gente colocou a setinha para o lado que essa imagem aqui vai ser essa aqui e aqui nós

temos um contêiner agrupando esses textos por isso que nós colocamos um contêiner dentro de um contêiner tá tá espero que isso aqui é não fique confuso para você mas vamos seguir aqui que eu Vou te mostrar como que funciona agora o que a gente vai fazer é colocar um título dentro desse contêiner e vamos colocar também um texto de descrição e um texto de subtítulo aqui em cima já vou aproveitar e pegar esses textos para te mostrar na prática como que que a gente organiza essa sessão Vou colocar aqui esse título Vou colocar aqui esse

texto e aqui o subtítulo também Opa deix sem formatação pronto podemos Deixar desse jeito e nós já temos a estrutura pronta aqui aí o que que tá acontecendo nós temos essa imagem e nós estamos o contêiner agrupando os elementos se você tiver alguma dúvida de como que tá funcionando isso você pode clicar aqui em navegador que o navegador ele ajuda a gente a visualizar as informações da página então basicamente nós temamos esse contêiner principal principal que está agrupando todos os elementos é esse contêiner aqui Esse é o contêiner principal e dentro do contêiner nós temos

uma imagem e o contêiner secundário que que tem as informações de texto aí aqui dentro desse contêiner nós temos o subtítulo título e descrição basicamente assim que funciona tá vamos voltar aqui no contêiner principal vai clicar aqui no contêiner principal vai vir aqui justificar conteúdo vai colocar centro e alinhar itens no centro também é que Fique tudo posicionado no centro do contêiner a gente já vai aproveitar e vi aqui em avançado e aqui no pading Vamos colocar o tamanho de 150 150 não vamos colocar aqui o tamanho de 100 e aqui o inferior de 100

também para ficar com esse espaçamento em cima e embaixo desse jeito aqui e agora a gente vai fazer a configuração dos elementos você pode retirar aqui o navegador vou começar aqui pelos textos que é a parte mais simples né a gente vai basicamente Replicar as configurações de cima Então vamos clicar aqui no título avançado aqui eu vou colocar a cor azul que eu tô utilizando e aqui na tipografia Vamos colocar a fonte Bona nova o tamanho vou colocar 32 colocar até um tamanho um pouquinho menor 28 o peso posso deixar desse jeito e e agora

a gente pode seguir aqui no texto vou colocar o azul também alinhamento na esquerda e aqui na tipografia eu vou colocar a fonte mold Serrar como eu utilizei ali em cima e o tamanho 16 o peso 400 que foi o mesmo peso que eu coloquei aqui e Podemos seguir aqui no subtítulo Vamos colocar a cor azul também se não me engano Azul Opa voltar aqui colocar azul e aqui na esquerda e aqui em família podemos colocar Monte serrado aqui o tamanho 16 peso é um pouquinho maior para chamar um pouco mais de atenção e agora

eu vou só aproximar esse subtítulo ao título Principal vamos vir aqui em avançado eu cliquei aqui no subtítulo avançado margem e aqui no inferior vou colocar menos 20 ele aproximar um pouco colocar 25 para ele aproximar um pouco mais podemos deixar desse jeito e para criar essa Barrinha aqui ó do texto a gente vai vir aqui em início vamos clicar aqui no texto aqui vamos vir em avançado e aqui embaixo nós temos a opção de borda aqui vamos colocar border Type sólido você vai desvincular esses Valores e aqui na esquerda Vamos colocar CCO a cor

eu vou colocar azul e aí podemos ajustar aqui essa borda de acordo com o tamanho que que você quer utilizar no site essa borda aqui é opcional se você não quiser utilizar tu pode colocar aqui como padrão e retirar essa borda só que detalhe veja que o texto ele tá super colado na borda né então a gente pode modificar isso editando o espaçamento interno e aí ao invés da gente utilizar a margem aqui a Gente vai utilizar o pading Vamos colocar aqui cinco Vamos colocar 10 aqui na esquerda E aí só para você ver na

prática a diferença dessas duas configurações Vou colocar aqui zero ó no pading E se eu modificar aqui a margem veja o que acontece ó a gente tá editando o espaçamento externo do elemento por isso que ele não modifica a borda ele cria um espaçamento externo aqui no pad a gente cria um espaçamento interno entre a borda e o elemento Basicamente assim funciona e agora vamos clicar aqui para atualizar só para salvar e vamos editar a nossa imagem aí eu recomendo que você separe sua imagem que você quer utilizar E você vai vir aqui no programa

e vamos recortar essa imagem no tamanho correto e no tamanho menor vamos vir aqui em file New e aqui Geralmente eu utilizo o tamanho de 700 por 800 que ele fica ele não fica quadrado né ele fica com esse formato um pouco Mais alto eu gosto de utilizar as imagens dessa forma mas você poderia utilizar outros formatos recomendo que você utilize desse jeito aqui que fica com visual legal aí você clica aqui para criar joga sua imagem aqui no programa e aqui você clica em ok e agora você pode posicionar a imagem da forma que

você achar melhor de acordo com a sua imagem coloca aqui em Ok posicionar a imagem pode fazer algumas pequenas edições vindo aqui em contraste aumentando aqui Fazendo algumas pequenas edições eu posso deixar a minha imagem desse jeito podemos vir aqui em file exportar e aqui eu vou utilizar o JPEG para preservar as cores tá porque o webp ele acaba tirando um pouco a coloração da foto como essa imagem aqui vai aparecer aqui n nessa parte em branco é legal que ela tenha um pouco mais de cor para destacar um pouco mais a a nossa página

Então vou colocar aqui o formato JPEG e aqui você pode colocar um tamanho de 70% Só fica de olho para não aumentar muito o tamanho Então você vai preservar a qualidade e vai ficar de olho no tamanho dessa imagem colocar um pouco mais aqui dá até para avançar em 90% esse tamanho aqui já é aceitável podemos clicar aqui para salvar e eu posso pegar a minha imagem aqui no meu computador recortar minha imagem e posso colocar bem aqui nas imagens editadas Vou colocar Aqui agora a gente pode adicionar aqui no nosso site clicando aqui em

imagem e arrastando a imagem para cá pronto clica aqui para selecionar e a imagem vai aparecer aqui no seu site aqui no avançado Ou melhor aqui em estilo a gente consegue aumentar o tamanho dessa imagem você pode colocar aqui 100% e aqui no avançado a gente consegue definir o posicionamento dessa imagem é a quantidade de porcentagem que essa imagem vai ocupar do container então a Gente pode colocar aqui ó um pouquinho maior para equilibrar com a imagem e o texto posso colocar aqui 85 vou ajustar um pouquinho o tamanho só para não ficar muito exagerado

deixa colocar aqui 85% e essa posição aqui já tá bem agradável uma outra coisa que a gente pode fazer é modificar o arredondamento colocando aqui o arredondamento de 20 ou de 10 que cria essa borda bem Sutil aqui na nossa imagem Além disso é legal a gente Colocar uma sombra nessa imagem só para ter um efeito aqui na nossa página para isso você vai clicar aqui ó vir estilo Box Shadow e você clica aqui nesse lápis aí você pode modificar a intensidade da sombra aqui você muda a posição Geralmente eu coloco 88 e aqui o

borrar você cria esse efeito é legal que você deixe uma sombra bem Sutil tá para não ficar exagerado para não ficar poluído então deixa uma sombra Aqui bem Sutil para ficar com esse visual mais profissional tá e pronto temos aqui a nossa sessão clica aqui para atualizar e agora a gente pode seguir pra nossa próxima sessão que é a sessão das áreas de atuação que você pode detalhar um pouco mais sobre as áreas que você trabalha no seu escritório as suas especializações e assim por diante Então vamos criar aqui a nossa estrutura e nesse caso

Aqui nós temos uma configuração que ela é simples Vou te mostrar aqui passo a passo Mas basicamente nós temos aqui os textos subtítulo e título e Aqui nós temos um contêiner agrupando esses dois elementos e um outro contêiner agrupando esses dois elementos tá vou te mostrar passo a passo vamos clicar aqui em Nova estrutura setinha para baixo vamos adicionar aqui um texto e um subtítulo já vou colocar aqui Centralizado só para ficar posicionado Corretamente e vamos colocar aqui um contêiner abaixo do título para que a gente possa colocar esses dois elementos aqui vamos voltar aqui

no menu e aqui a gente vai utilizar um elemento chamado é ícone é o ícone mesmo que ele apareça aparece dessa forma aqui que é o ícone em cima título e descrição já vem tudo pronto né E aqui vamos utilizar essa posição aqui em estilo posição essa opção aqui na esquerda aqui em avançado vamos vir aqui em largura largura Total E aí agora o que você vai fazer é o seguinte você vai duplicar esse elemento para que ele fique é dessa forma aqui vamos vir aqui em contener e ao invés de colocar um elemento um

embaixo do outro você vai colocar um ao lado do outro tá E aí depois de criar essa estrutura aqui pode duplicar esse contêiner E aí vai ficar um contêiner de cima com esses dois elementos e o outro de baixo com esses dois elementos aí sempre que você quiser adicionar novos elementos você Pode duplicar esse contêiner E aí você pode ir ajustando os elementos tá e detalhe se você trabalha com criação de site se você é designer enfim tá tá buscando conhecimento para melhorar como designer saiba que existem outras configurações que a gente pode fazer para

criar essa sessão aqui de outra forma de uma forma forma mais otimizada mas se você tá começando se você é iniciante ou se você não trabalha com isso você pode fazer desse jeito aqui Que não tem problema assim fica mais fácil para você fazer toda a edição e é por isso que eu tô te mostrando aqui nesse vídeo mas então vamos seguir aqui com a configuração vamos ajustar esses textos e vou fazer o seguinte vou pegar esse texto aqui que a gente já tinha criado vou copiar tá clica com o botão direito clica para copiar

e aqui você vai clicar com botão direito e clica para colar estilo dessa forma o sistema vai replicar todas as configurações que Você fez aqui em cima e assim fica mais fácil para você editar o restante da página agora a gente só precisa ajustar os textos Então vou pegar aqui os textos que eu já tinha separado vou colar aqui embaixo Aqui em subtítulo vou colar aqui e pronto podemos deixar dessa forma aqui no contêiner vamos ajustar o espaçamento interno do contêiner clicar aqui container avançado padding e aqui você pode colocar 100 opa 100 e aqui

inferior 100 também e agora a Gente pode editar os elementos e eu vou modificar aqui os textos eu vou fazer um pequeno corte para já seguir aqui com os textos configurados Pronto já editei os textos aqui e agora a gente pode editar o visual para editar o visual do ícone é bem tranquilo vamos clicar aqui em ícone aqui você pode colocar qualquer ícone que você achar interessante de acordo com o o nicho que você trabalha né No meu caso eu vou colocar aqui a balança mesmo para ficar um pouco mais objetivo Assim em relação à

área de direito vou colocar aqui a balança aqui você pode modificar o texto né como eu comentei aqui no link não recomendo que você coloque links aqui tá pode deixar aqui em branco mesmo que não é interessante você colocar links aqui Aqui você pode colocar e você pode vir aqui em estilo e Aqui nós temos as posições de como você quer colocar o ícone você poderia colocar o ícone desse jeito aqui que ficaria interessante também vou deixar Aqui para esquerda pra gente seguir o visual e aqui recomendo que você deixe aqui superior e o alinhamento

na esquerda ficar posicionado dessa forma agora aqui no ícone você pode modificar a cor colocar aqui a cor que eu já tinha separado e aqui a cor amarela desse jeito aqui no espaçamento você pode editar Geralmente eu coloco aqui 20 20 é um tamanho legal e o tamanho a gente pode modificar um pouquinho Vou colocar aqui o tamanho de 50 mesmo aqui em conteúdo podemos colocar o espaçamento de 10 aqui na cor a gente vai definir a cor do título Desse jeito vou colocar aqui essa cor azul mesmo que a gente já tá utilizando e

aqui também segue as mesmas configurações que a gente fez ali em cima Então vou colocar a mesma cor vou colocar a mesma fonte aqui no caso eu tô utilizando a Bona né vou colocar a mesma fonte do título aqui a gente não precisaria Colocar o mesmo tamanho porque esse aqui é como se fosse um item dentro desse assunto aqui a gente poderia colocar 22 vou deixar aqui um tamanho maior só para destacar essa informação colocar aqui 26 esse aqui eu coloquei 28 vou colocar 26 nesse aqui aqui no peso eu vou deixar semin e nas

outras configurações Eu não vou mexer podemos deixar desse jeito na descrição Vou colocar aqui a mesma cor e a Fonte mon de serrar que eu tô Utilizando nas descrições aqui eu vou colocar o tamanho 16 o peso normal a já tá utilizando ali e aqui a altura de linha eu vou deixar aqui em e vou colocar 1.3 só para ele ficar com essa configuração agora o que que a gente vai fazer eu vou colocar essa borda aqui com essa sombra então vamos fazer isso vindo aqui em avançado isso aqui é opcional tá se você quiser

utilizar vamos vir aqui em avançado Aqui vamos vir em borda e aqui você vai colocar o box Shadow como eu te mostrei ali em cima vou colocar 88 e aqui o borrar Vamos colocar 20 vou diminuir aqui um pouquinho a sombra e vou diminuir o borrar também aqui dessa forma fica bem interessante aí você pode ir ajustando de acordo com a sua página podemos deixar desse jeito só que veja que a sombra ficou super colada com o conteúdo isso aqui não é legal para ajeitar isso A gente vai vir aqui em layout e Vamos definir

o espaçamento interno Então você vai colocar aqui o tamanho de 15 10 Opa 10 tamanho interessante vou deixar aqui 15 e também vou adicionar uma borda veja que aqui ó ficou ponte Agudo isso aqui não é tão interessante podemos vir em borda e o arredondamento Vamos colocar 10 para que fique desse jeito aqui fica super elegante fica bem legal e bem bonito na página agora vamos replicar essa mesma configuração para Todos os outros elementos vamos copiar aqui ó copia Clica com o botão direito copiar colar estil e aqui a mesma corisa colar estil e agora

é só modificar os ícones aqui V colocar balança aqui também vou colocar balança aí você poderia modificar os ícones tá de acordo com com o conteúdo Vou colocar aqui a balança só para ficar padronizado só para ficar certinho mas você poderia modificar os ícones e basicamente essa parte aqui do conteúdo Tá finalizada agora a gente só precisa colocar um fundo nessa sessão tá detalhe que a gente pode aumentar um pouquinho aqui esse texto só para chamar um pouco mais de atenção e Podemos seguir assim agora a gente vai editar o nosso fundo já separei aqui

a imagem para esse fundo e basicamente você vai fazer a mesma edição que eu te mostrei ali no início do vídeo quando a gente criou esse fundo aqui basicamente você vai adicionar a sua Imagem vai dar um ok aqui vai posicionar ela e aqui no meu caso como o fundo é branco eu coloquei essa imagem em preto e branco e diminuí eu até retirei aqui ó retirei a opacidade dessa imagem e aí ficou com essa configuração aqui desse jeito ó background em branco aqui a imagem e esse efeito de preto e branco tá e a

opacidade eu diminuir só pra imagem ficar Clarinha então basicamente vamos utilizar essa configuração de imagem vamos vir aqui em estilo aqui no Estilo do container background Type imagem e eu já vou utilizar essa imagem que eu já tinha editado aqui vou arrastar para cá selecionar e pronto a imagem apareceu aqui aqui a gente pode colocar centro Vou colocar aqui como padrão não repetir e cobrir que a imagem vai ficar desse jeito e aí detalhe eu tinha feito aquele efeito de opacidade mas ainda assim a imagem ficou um pouco exagerada né O que a gente pode

fazer aqui é vir em sobre a Posição de fundo background e aqui a gente vai colocar um filtro filtro branco por cima da imagem desse jeito aqui aí fica bem interessante fica bem Sutil e fica com visual bem legal desse jeito aqui e agora só para não prejudicar a leitura dos textos a gente vai colocar um fundo branco nesses elementos vamos vir aqui em avançado fundo para você colocar o fundo nos elementos tem que vir aqui em avançado fundo e aqui clássico você vai Colocar a cor branca dessa forma aí você pode replicar essa mesma

configuração nos outros elementos também E aí a sessão vai ficar desse jeito fica bem bonita fica bem legal recomendo que você faça essa configuração e agora é só clicar aqui para atualizar e a gente pode seguir pra próxima sessão Então vamos seguir pra próxima sessão que é a sessão das soluções aqui Você pode adaptar da forma que você achar melhor para apresentar o seu trabalho tá Mas Você pode colocar aqui como que funciona o seu processo de atendimento como que funciona como que funcionam as suas soluções pode destacar aqui diferenciais também então você pode adaptar

essa parte aqui do conteúdo da forma que você achar melhor para o seu negócio tá eu coloquei aqui soluções eficientes e personalizadas e aqui um pouquinho de como que funciona o atendimento então para criar essa sessão aqui é bem tranquila a gente vai seguir basicamente A mesma estrutura que essa aqui temos os textos e aqui um contêiner com os elementos dentro desse contêiner Então vamos lá vamos criar aqui uma nova estrutura vou colocar a setinha para baixo e aqui vamos adicionar um título e um subtítulo em cima do título agora a gente vai adicionar um

container desse jeito e o elemento que a gente vai usar aqui é a caixa de imagem aqui caixa de imagem vamos arrastar para cá aí o que eu vou fazer é o seguinte Vamos clicar aqui com o botão direito duplicar e duplicar novamente que vão ficar três itens aqui e agora vamos vir aqui no contêiner que a gente adicionou embaixo do título e aqui vamos adicionar essa opção de direção para o lado que aí a gente coloca os itens lado a lado então dessa forma a gente tem a nossa estrutura aqui né e agora Podemos

seguir aqui pra parte do coner Vamos colocar aqui Centralizado para ficar dessa forma e aqui o justificado em centro também Agora a gente pode ajustar o espaçamento vindo aqui em avançado pading e aqui a gente vai colocar podemos colocar 100 e 100 desse jeito aqui agora vamos adicionar os textos aqui nessa parte do do subtítulo você pode utizar um texto mais ou menos com essa linha de raciocínio op colocar aqui para colar sem formatação e agora vou colocar o conteúdo em cada um dos elementos antes da gente seguir com a edição vou fazer Um pequeno

corte aqui pra gente seguir com a edição Pronto coloquei aqui o conteúdo e agora a gente pode fazer a edição do visual desse texto eu vou aproveitar e vou pegar figuração aqui de cima vamos colar aqui embaixo Aqui em cima também desse jeito e aqui a gente não consegue colar o estilo porque esse aqui é um elemento diferente desse aqui então aqui a gente precisa fazer edição na mão mesmo vamos Vir aqui em estilo aqui você pode posicionar de outra forma mas o que fica melhor é esse aqui superior aqui você pode colocar o alinhamento

Centralizado e a imagem pode ser e configurada aqui na parte da largura para você aumentar a altura dela por enquanto vamos deixar assim daqui a pouco a gente vai adicionar uma nova imagem aqui vamos vir aqui em conteúdo e já vou aproveitar e colar a cor aqui que a gente tá utilizando Na verdade eu vou Utilizar o azul isso colocar o azul um pouco mais claro e aqui o espaçamento temos o espaçamento entre o título e essa descrição aqui pode colocar é o valor de 10 e aqui na tipografia eu vou colocar a mesma tipografia

dos títulos que é a Bona nova o tamanho 28 28 mais ou menos e aqui o peso médio vou deixar o peso médio para ele não ficar tão destacado porque o foco aqui é o título então aqui podemos deixar o item com um peso menor e aqui na Descrição a gente pode colocar a mesma cor e a Fonte família vamos colocar como monte serrar tamanho 16 e aqui o peso vou colocar normal mesmo podemos deixar dessa forma aqui na altura de linha esse Line H você pode colocar aqui em 1.3 desse jeito e agora podemos

vir aqui ó clica aqui no item vi vem aqui em avançado e aqui em largura recomendo colocar 100% tá pode colocar aqui largura Total 100% E aí agora vamos Replicar essa mesma configuração para os outros itens copiar e vou colar o estilo desse jeito tá Depois a gente vai adicionar essa borda aqui com sombra e tudo mais mas vamos adicionar as imagens Primeiro vamos clicar aqui na imagem vamos voltar aqui em conteúdo e aqui e as imagens aqui dessa sessão elas TM um formato um pouquinho diferente eu utilizei esse formato aqui de 700 por 600

então uma imagem que fica um pouquinho na horizontal ela não é Quadrada ela fica um pouco mais Evidente na horizontal tal Então vou utilizar aqui ó vou arrastar essas imagens para cá para já te mostrar na prática Então temos aqui o tamanho de 700 por 600 que você clica para selecionar e você pode utilizar outro formato você inclusive poderia utilizar o mesmo tamanho que a gente utilizou aqui em cima mas fica a sua escolha eu gosto de utilizar esse formato que ele fica com um encaixe um pouco melhor nesse item aqui então vou Utilizar esse

tamanho e vou aumentar um pouquinho aqui deixar aqui 90 PR ficar dessa forma e o arredondamento vou colocar arredondamento de 10 PR ele criar essa borda aqui então aumentar um pouquinho desse jeito então basicamente é essa estrutura aqui que a gente vai utilizar e a gente pode adicionar essa sombra então para fazer isso a gente vai utilizar a mesma configuração que a gente fez ali em cima vamos vir aqui em Avançado borda e aqui Box Shadow Vamos colocar 88 e aqui vou aumentar para 15 diminuir um pouco a intensidade dessa sombra desse jeito só que

veja que a sombra ela ficou bem colada com o conteúdo ISO que não é bacana a gente pode vir aqui em layout e aqui em pading Vamos colocar um espaçamento de 20 colocar 15 ficar dessa forma vamos verificar aqui agora ele Ficou ponte Agudo tá vendo vamos voltar aqui em borda e aqui no arredondamento a gente pode colocar o arredondamento de 15 mesmo desse jeito agora vou replicar essa mesma configuração para os outros itens e pronto agora a gente pode adicionar as nossas imagens aí você pode colocar as imagens de acordo com o conteúdo que

tá sendo falado aqui no no texto né imagens bem ilustrativas de acordo com o conteúdo do Tex poderia até aumentar essa imagem Aqui passada eu acho que já tá bem interessante e vamos pra próxima sessão que é a sessão de contato essa é uma sessão muito importante para você fazer a chamada né para você convidar as pessoas a entrar em contato com você solicitar um orçamento é tirar dúvidas ou alguma coisa do tipo vai depender do seu objetivo com essa página aqui mas é muito importante você colocar essa sessão porque também não adianta você Apresentar

o seu trabalho e não ter nenhuma opção de contato né então você coloca aqui o botão de WhatsApp o formulário o número de telefone ou e-mail ou alguma coisa do tipo mas dê sempre preferência para o botão de WhatsApp porque é o botão que as pessoas mais buscam aqui no quando vão acessar um site para entrar em contato logo com você então então provavelmente você vai ter mais resultado tendo um botão de WhatsApp aqui do que um formulário ou um Texto com o seu número de telefone tá então recomendo você utilizar essa estrutura e não

deixe de colocar esse tipo de sessão na sua página para criar essa sessão é bem tranquilo a gente vai criar uma nova estrutura aqui vamos colocar seta para baixo vamos adicionar um texto um título aqui o subtítulo também já vou pegar aqui o conteúdo e já vou colocar bem Aqui agora eu já vou ajustar aqui esse contêiner pra gente conseguir visualizar com mais facilidade Tá então vamos editar aqui o contêiner clicando aqui e aqui você vai fazer o seguinte vamos editar o espaçamento vindo aqui em avançado colocando o pading em 100 vou até colocar menor

colocar 80 e aqui inferior 80 também podemos deixar dessa forma vamos modificar esse fundo Então vamos colocar uma imagem aqui no fundo e um filtro de cor recomendo você Utilizar esse visual Você pode adaptar a cor pra forma que você achar melhor mas essa é uma estrutura bem legal de de visual que você pode trabalhar vou utilizar essa imagem aqui que eu fiz utilizando aquela edição simples que eu te mostrei no início do vídeo que é só imagem com o filtro em preto e branco aí eu salvei em JPEG nesse caso aqui você pode salvar

em webp também e aí você só presta atenção pra imagem ficar nesse formato leve tá lembrando daquelas dicas Que eu te mostrei ali no início do vídeo tá vamos arrastar a imagem para cá selecionar e aqui vamos colocar centro repetir não repetir Vamos colocar cobrir e pronto temos aqui a nossa sessão e agora a gente pode colocar aqui um filtro de cor vamos colocar aqui clássico eu vou pegar aqui a minha cor vou aumentar a opacidade e eu vou colocar um degradê só para ficar com um efeito aqui de luz bem aqui na lateral pronto

podemos Deixar dessa forma aqui vou só modificar aqui a cor do texto para você conseguir visualizar a configuração que a gente vai fazer colocar aqui branco e agora o que que vai acontecer a gente precisa colocar esse texto dessa forma né ele tá alinhado aqui com o centro e tá posicionado na direita então a gente precisa fazer isso e para fazer essa configuração a gente precisa clicar aqui nos elementos vi aqui em avançado largura personalizar 50% Vou colocar Aqui 50% em todos os elementos dessa forma aqui e vai ficar desse jeito aí agora você vai

vir no container e vai colocar o alinhamento no fim que ele vai posicionar os elementos aqui no final do contêiner desse jeito aqui é assim que a gente precisa aí agora a gente pode fazer os outros ajustes visuais inclusive eu tinha esquecido de pegar o botão V copiar aqui o botão e vou colocar aqui aí aqui ó veja Que ele ficou posicionado aqui na no cantinho né Isso aconteceu porque a largura ela tá como padrão então se a gente coloca aqui ó 100% o botão fica dessa forma se a gente coloca 0% ele fica daquela

forma ali o ideal a gente colocar 50% e posicionar ele aqui ó na esquerda o alinhamento na esquerda ele vai ficar certinho e assim que a gente precisa agora é só a gente fazer os ajustes no texto Vou colocar aqui a cor do texto a família de fonte Podemos colocar m de serrar tamanho 16 aqui tamanho médio e aqui na margem eu vou diminuir para aproximar o subtítulo do título Então vou colocar -20 mesma configuração que a gente fez nos outros elementos e aqui também temos que modificar a família de fontes aqui eu vou botar

a b na nova Vou colocar aqui o tamanho 32 aqui eu vou deixar com essa configuração e detalhe que você também pode pegar aqui ó a mesma configuração que você fez ali Em cima e colar no elemento aqui de baixo é que pode acontecer de de texto ficar um pouquinho diferente mas aí você só ajusta as configurações para ficar tudo certinho que por exemplo ó ele copiou aquela configuração centralizada que a gente colocou lá no início do site aqui no alinhamento nesse caso aqui dessa sessão a gente precisa colocar na esquerda para ele ficar posicionado

corretamente com os outros elementos mas é basicamente isso essa Essa sessão aqui é bem simples e agora a gente pode clicar aqui em atualizar e seguir pra próxima sessão a próxima sessão é aa são dos depoimentos então aqui você vai colocar alguns feedbacks Alguns depoimentos comentários que as pessoas fazem sobre o seu trabalho elogios né E aí você vai colocar aqui na sua página para aumentar sua autoridade aumentar a a confiança das pessoas no seu trabalho então é super importante colocar essa sessão aqui vamos colocar a Estrutura para baixo e essa é uma sessão bem

tranquila vou utilizar a mesma estrutura que a gente já fez aqui nas outras sessões colar aqui os elementos aí a gente só posiciona aqui ó PR ficar certinho e o contêiner a gente também pode utilizar as mesmas configurações que a gente já fez antes então a gente copia ali cola aqui pronto já temos a nossa estrutura agora vamos adicionar aqui um novo coner para colocar esses depoimentos aqui você Vai pesquisar aqui ó no elemento depoimentos vai aparecer aqui essa opção ou você pode pesquisar aqui também enfim depoimentos você arrasta para cá e aquele mesmo processo

você vai duplicar aqui vai vir aqui no contêiner secundário que a gente criou e vai colocar aqui na horizontal aí os elementos vão ficar um ao lado do outro agora é só a gente editar esse conteúdo aqui você vai colocar uma imagem né imagem do seu cliente importante que Você peça a autorização dessa imagem né sempre bom solicitar eu não tenho nenhuma imagem aqui Pronto consegui pegar uma imagem aqui e já fiz a edição dela de forma bem rápida aqui no Photoshop coloquei aqui a imagem recortei no tamanho 500 por 500 e já peguei aqui

a nossa imagem editada tamanho tá 19 KB então tá bem leve e Aqui nós temos a nossa imagem clica aqui para selecionar pronto adicionamos aqui a imagem do cliente aí você pode colocar Aqui o nome e aqui o cargo ou você pode colocar o nome da empresa qualquer informação que for relevante se for relevante ou você pode retirar também não tem problema interessante você adicionar aqui só se for relevante mesmo então podemos deixar desse jeito não recomendo colocar link e aqui você pode colocar o alinhamento é aqui posicionado na esquerda tá Para ficar desse jeito

aqui então agora podemos adicionar aqui eh o estilo né podemos ajustar aqui os Textos Então vamos modificar aqui a cor é ao invés de você ficar copiando a cor toda a hora você pode utilizar o conta gotas tá também é uma ótima opção que aí você pega aqui a cor ó e já seleciona e fica bem mais rápido aqui em tipografia podemos utilizar a mão de serrar Opa tamanho 16 aqui o tamanho 400 e aqui na imagem a gente pode ajustar o tamanho colocar aqui 65 o arredondamento você pode ajustar você pode deixar o tamanho

quadrado se você quiser ou um Tamanho mais arredondado fica a sua escolha vou deixar aqui um tamanho um pouquinho quadrado só para ficar um pouco diferente e aqui no nome vamos utilizar uma outra cor aqui o azul a tipografia eu vou colocar a mesma tipografia do título vou aumentar aqui o tamanho vou colocar 20 24 não nem tanto vou colocar 22 para ficar com esse tamanho aqui e aqui no título que é o cargo podemos colocar a Mesma cor e nesse caso aqui eu vou colocar a Monte serrar porque é um texto que ele não

precisa de ter tanto destaque Então vou colocar mon errar que é meio que uma descrição e aqui o tamanho 16 para ficar pequenininho então podemos deixar dessa forma e agora podemos fazer mais alguns ajustes colocando aqui uma sombra uma borda e esse espaçamento interno como a gente fez nos outros elementos ali no decorrer da página Então vamos vir aqui Em avançado borda Box Shadow e aqui vamos Vamos colocar 8 8 15 e diminuir essa intensidade aqui no arredondamento podemos colocar 15 assim e no layout Vamos colocar o pading com tamanho de 15 também que vai

ficar dessa forma agora vamos vir aqui em largura e aqui vamos colocar largura total 100% agora sim a gente pode replicar essa configuração nos outros elementos vindo aqui em Copiar clicando aqui em colar estilo e praticamente temos a nossa sessão pronta agora é só ajustar aqui as imagens dos seus clientes e aí se você quiser adicionar mais depoimentos você pode duplicar esse contêiner aqui e colocar os outros depoimentos tá então praticamente finalizamos essa sessão aqui percebi agora que eu não modifiquei o texto aqui dos depoimentos né então só fazendo um ajuste aqui R para ficar

tudo Certo classe sem formatação e tá ótimo Podemos seguir aqui pra próxima sessão e essa aqui é uma sessão com mais informações sobre o seu escritório aqui você pode falar um pouco mais sobre o seu trabalho sobre suas especializações ou algo do tipo é claro evitando colocar muito texto desnecessário tá foque em falar apenas o essencial e aquilo que as pessoas precisam saber aqui por exemplo você pode destacar os seus diferenciais pode destacar aqui e algum alguma alguma Forma como você atende os seus clientes alguma coisa do tipo algo específico que vai destacar você da

concorrência você pode falar aqui sobre você sobre o seu trabalho Ou sobre a sua equipe ou coisas nesse sentido Tá então vamos criar essa sessão aqui essa é uma sessão bem simples e ela segue a mesma estrutura que a gente já fez aqui em cima então a gente pode reaproveitar aquela sessão para economizar tempo então vamos voltar aqui no início vamos copiar essa sessão E vamos colar aqui embaixo essa é uma ótima forma de você e otimizar o seu tempo e facilitar ainda mais o seu trabalho na criação do seu site tá aqui vamos modificar

o fundo Então vamos vir aqui em estilo background e já vou colocar aqui a minha cor que eu tinha separado para isso nessa cor aqui e eu também vou colocar um degradê vamos clicar aqui em Gradiente e aqui conseguimos colocar esse efeito para que fique como um brilho né Aqui podemos Modificar a cor desse texto e aqui em cima também no subtítulo Eu poderia até colocar a cor desse texto com essa cor amarela aqui né Fica bem interessante aqui podemos colocar esse efeito também Amarelo aqui no no texto podemos vir aqui em avançado aqui em

borda e aqui a gente consegue encontrar essa opção para modificar a borda e aqui nesse caso eu inverti a posição né ao invés de colocar o texto desse lado eu inverti isso aqui é Opcional Você poderia colocar o texto nessa posição aqui mesmo tá mas para inverter é bem tranquilo você pode vir aqui em container layout e aqui você vai inverter simplesmente clicar aqui nessa setinha que fica bem fácil da gente inverter os elementos e basicamente temos a estrutura pronta vou só ajustar aqui os textos né vou pegar aqui os textos que eu já tinha

separado colocar bem aqui eu vou colocar o texto aqui em cima E aqui o subtítulo também pronto e agora podemos modificar essa imagem eu vou utilizar essa imagem aqui que eu já tinha separado vou adicionar aqui clicar aqui para selecionar e agora a gente pode adicionar esse outro item aqui que tem uma lista dos difer iis que você pode adicionar sobre o seu trabalho para adicionar aquele item vamos vir aqui e colocar lista de ícones vamos arrastar para cá vai aparecer desse jeito você Pode excluir esses itens aqui tá E aqui vamos colocar o ícone

de balança aqui eu já vou colocar o texto desse jeito aqui e agora a gente pode duplicar esse item aqui para ele copiar o mesmo ícone dessa forma aqui colocar o texto e agora a gente pode ajustar o visual vamos vir aqui em ícone vamos modificar a cor desse ícone colocar o amarelo podemos modificar o Tamanho tamanho de 28 e eu vou aumentar o espaçamento vindo aqui em lista espaçamento aqui 20 aqui é o espaçamento entre o ícone e o texto e aqui embaixo a gente consegue Editar o texto aqui podemos colocar a mesma Fonte

das descrições Então vou colocar m c aqui o peso em 400 e a cor vou colocar em branco aqui ele ficou bem fininho né vou aumentar um pouquinho esse peso desse jeito aqui para ele ficar um pouquinho mais Destacado e tá ótimo podemos manter dessa forma aqui e praticamente essa sessão tá finalizada você poderia fazer mais alguns ajustes aqui em relação a passamento clicando aqui no texto e editando aqui a margem colocando aqui uma margem negativa e basicamente fazendo esses pequenos ajustes agora a gente pode seguir pra próxima sessão vamos clicar aqui para atualizar para

salvar e vamos seguir pra próxima sessão que também é uma sessão de contato então Aqui fica bem fácil a gente pode simplesmente duplicar essa sessão aqui vamos copiar ela e vamos colar aqui embaixo para replicar né para duplicar e e Vai facilitar muito mais o a edição aqui da nossa página Vamos modificar esse fundo para ficar um pouco diferente colocar aqui essa imagem clica para selecionar e vamos modificar o nosso texto aqui vamos colocar o texto diferente aqui eu coloquei uma chamada Um pouco diferente inclusive você pode testar diferentes chamadas para ver o que que

funciona melhor que eu coloquei para agendar uma consulta e Aqui nós temos entra em contato e praticamente a nossa sessão está pronta agora a gente pode seguir pra última sessão que é o nosso rodapé o rodapé é super importante pra gente finalizar a nossa página e mostrar pra pessoa que ela chegou no final aqui a gente pode aproveitar esse espaço para colocar aqui os seus números De contato pode colocar aqui o endereço pode colocar aqui Uma Breve descrição do seu trabalho ou um texto chamativo algo do tipo e as informações aqui de redes sociais caso

você queira tá também é bem legal que aí a pessoa chega aqui no final e ela já encontra o seu Instagram o seu YouTube o Linkedin e assim por diante para criar a sessão do rodapé é super tranquilo vamos clicar aqui é na estrutura Vamos colocar nesse caso aqui eh a a setinha para o lado tá que a Gente vai utilizar dois contêiners para agrupar para agrupar esses dois itens aqui né esses dois grupos de elementos Então vamos lá vamos adicionar aqui um contêiner e duplicar esse contêiner que aí vai acontecer isso aqui ó vou

te mostrar aqui com o navegador que aí nós temos o nosso contêiner principal que é esse aqui grandão e Aqui nós temos dois contêiners menores que são os contêiners secundários Então já vou aproveitar aqui ó e modificar a cor desse contêiner para Facilitar a nossa visualização e edição Vou colocar aqui a cor escura no contêiner principal tá e já vou modificar aqui aqui o padding Vamos colocar aqui 50 e 50 PR ele criar esse espaçamento agora podemos adicionar os nossos elementos Vamos colocar uma imagem que vai ser a nossa logo essa logo precisa estar em

fundo transparente como eu já comentei no início Vou colocar aqui a cor branca a logo com a cor branca e vou diminuir essa logo aqui A gente pode colocar na esquerda para ficar aqui na lateral e podemos manter dessa forma agora vamos adicionar essas opções de de redes sociais né Vamos colocar aqui ó social ícones de rede social arrastar para cá vamos posicionar aqui na esquerda e aqui a gente pode diminuir o tamanho colocar aqui o padding é o espaçamento interno desses ícones e aqui temos o espaçamento entre os ícones basicamente é assim que a

gente precisa Vou colocar aqui o arredondamento em 50 para ele ficar redondinho e aqui vou colocar a cor personalizada Vou colocar aqui a cor branca como cor primária e uma cor escura como cor secundária para criar esse efeito e eu esqueci de comentar que aqui a gente consegue modificar então aqui nas redes sociais você pode colocar por exemplo Instagram pode colocar o Linkedin tem várias redes sociais aqui que você pode buscar Pode colocar o dribble dribble nesse caso aqui não se aplica né mas temos outras redes sociais aqui você pode explorar para ver o que

que funciona melhor temos o telegram inclusive então podemos colocar aqui você coloca a que se encaixar melhor para a sua marca tá podemos manter desse jeito e agora vamos voltar aqui nas configurações de estilo que a gente consegue adicionar uma configuração quando a pessoa passa o mouse por cima aqui em ionizar ou passar O mouse você consegue colocar uma animação assim como a gente fez ali no botão Vou colocar aqui a opção de pop para acontecer isso e a gente também consegue modificar a cor então quando a pessoa passar o mouse por cima vai acontecer

por exemplo esse efeito aqui desse jeito você pode modificar aqui para ver o que que funciona melhor no meu caso eu vou colocar com essa configuração desse jeito aqui e detalhe depois de você adicionar aqui as suas Redes sociais vai colocar aqui o ícone vai colocar o link aqui tá então é importante você acessar a sua rede social e pegar o link que aparece aqui em cima aqui por exemplo temos aqui o Instagram aí você copia aqui o link e coloca desse jeito aqui tá com Com todas essas informações aqui desse jeito e você vai

fazer isso para todas as redes sociais só você pegar o link que aparece aqui em cima depois disso vamos seguir aqui pras outras configurações quer Colocar esse texto esse texto é opcional tá se você quiser utilizar você utiliza se não quiser não precisa utilizar vamos colar aqui o texto vou copiar esse mesmo estilo que a gente fez aqui em cima colar e aqui a gente só precisa ajustar essa largura para colocar 100% que aqui a gente tá falando que o texto precisa ocupar Todo o espaço no contêiner e ele ficou com esse espaçamento invisível pode

clicar aqui ó no bloco E aí clicar aqui em delete que ele tira aquele Espaçamento invisível se isso acontecer com você bom temos aqui o nosso texto eu posso até diminuir um pouco esse texto para ele não ficar muito exagerado que é só um texto adicional Então não precisa de muita informação não precisa de muito destaque E além disso podemos adicionar essa informação aqui de copyright de todos os direitos reservados né Vamos colocar desse jeito aqui você pode até traduzir né Dessa forma aqui vou copiar aqui esse estilo vou colar aqui embaixo Aqui ele não

funcionou deixa só copiar esse texto excluir e vou colar sem formatação Pronto agora funcionou agora tá tudo certo e a gente pode seguir para a outra parte do bloco que aqui onde a gente vai colocar o nosso endereço e o contato então você pode voltar aqui colocar um título aqui vamos colocar endereço do Escritório e aqui vamos colocar o mesmo elemento que a gente utilizou aqui em cima então podemos copiar ele aqui copia cola aqui aí você exclui esses itens e aqui você vai colocar o item de mapa aqui você pode colocar map E aí

aparece aqui esse ícone pode escolher outros também clica aqui para inserir vai aparecer dessa forma você pooc endereço jeito aqui copiar esse genérico que eu tinha criado colocar aqui pronto retirar esse Número aqui prto deix dessa forma e vou diminuir esse tamanho aqui deone que não precisa ficar tão grande o texto também podemos diminuir um pouquinho ficar desse jeito vamos modificar aqui o estilo dessas letras colar aqui o meso estilo al de cima e vou diminuir esse texto tá colocar aqui um tamanho de 24 não precisa ficar tão grande e a cor eu vou colocar

o amarelo vai ficar desse jeito e agora a gente pode colocar as Informações de contato vamos copiar aqui colar Vamos colocar entra em contato e vamos colar essas informações aqui vou duplicar e aqui podemos colocar fone no seu número de telefone ou você pode colocar o WhatsApp também poderia colocar o ícone aqui de WhatsApp tá não tem problema e aí se você quiser você pode colocar o link do WhatsApp bem aqui além disso você pode colocar o o endereço de e-mail então aqui você pode colocar um Endereço comercial né um endereço profissional também com o

seu domínio e aqui no ícone colocamos o envelope para ficar dessa forma a gente pode aproximar um pouco mais esse espaçamento e praticamente temos aqui o nosso rodapé finalizado clica aqui para atualizar para salvar todas essas configurações e agora eu vou te mostrar como a gente vai adaptar essa página paraa versão para celular que é uma configuração bem rápido de se fazer recomendo que você Fique até o final para pegar todas as configurações e depois vou te mostrar como a gente vai publicar essa página e antes de te mostrar como fazer a adaptação da página

para celular eu vou te mostrar como a gente vai criar esse menu aqui de cima ó esse menu de navegação para fazer isso é bem tranquilo mas é uma configuração mais detalhada que a gente precisa fazer vamos lá vamos voltar lá no WordPress que a gente precisa baixar um plugin Rapidinho vamos clicar aqui ó aqui nessas Barrinhas clicar aqui para sair e aí você vai chegar aqui na página clica aqui na na logo do WordPress e vamos voltar aqui em plugins deix clicar aqui para adicionar plugin e aqui vamos adicionar o Essential ows pronto é

esse plugin aqui ó tem 1 milhão de instalações você poderia instalar outros plugins mas esse aqui é o que funciona melhor vamos utilizar Aqui vamos clicar aqui para instalar agora e vamos clicar para ativar pronto aqui vai aparecer um pequeno tutorial mas não precisamos fazer essas configurações clica aqui em recomendado mesmo aí aqui vão aparecer vários elementos para você mas o elemento que a gente a gente precisa esse aqui que é o menu simples você pode dar uma olhada nos outros elementos se você quiser mas o que a gente precisa é esse ele já está

ativo e a gente pode seguir eu não vou Finalizar aqui essa configuração para não perder muito tempo então vamos voltar aqui direto vamos vir aqui ó em aparências menus e Aqui nós temos a área de menu do WordPress é aqui que nós vamos criar essas opções aqui tá E nesse caso aqui o que eu vou fazer é criar uma opção onde a pessoa clica aqui nessa opção e ela vai ser levada direto para uma opção específica aqui da nossa página Deixa eu te mostrar aqui na prática como que funciona tenho aqui o Meu site por

exemplo temos aqui esse site e o que que acontece quando a pessoa clica aqui no menu ela vai ela é movimentada para um local específico aqui do meu site tá vendo a gente criou esse efeito aqui que fica super interessante você pode utilizar isso aqui é opcional ou você poderia colocar uma página uma nova página então por exemplo pessoa só clica aqui e ela é levada para uma outra página um outro endereço onde tem as informações da Minha empresa exemplo você você pode fazer isso também se no futuro você criar outras páginas página sobre página

serviço página de contato você pode colocar o link delas aqui nesse caso aqui do vídeo como eu não tenho outras páginas eu vou utilizar essa opção onde a pessoa clica e ela é arrastada direto para uma área específica da página tá enfim vou te mostrar aqui na prática como que funciona Vamos colocar aqui o nome do menu Você pode colocar aqui menu principal pode colocar qualquer nome clica aqui para criar menu e aqui na lateral vão aparecer as opções para você utilizar se você tiver outras páginas aqui no WordPress você pode clicar aqui e clicar

para adicionar no menu que aparece aqui no canto tá como eu não vou utilizar essa opção vou usar a opção de links personalizados aqui a gente pode colocar por exemplo início e aqui na URL a gente vai colocar apenas uma palavra tá Importante que seja uma palavra simples vou te mostrar depois por que precisa ser uma palavra simples vamos colocar aqui só início sem acento tá sem nada só início aqui a gente pode colocar início esse aqui é o texto que aparece é aqui pras pessoas Vamos colocar só isso aqui e vamos colocar para adicionar

no menu e agora a gente vai adicionar um outro texto que vai ser sobre aí aqui a gente coloca uma palavra simples sobre tá aqui Inclusive tem que ser com hashtag vamos clicar aqui para adicionar o menu e eu vou só e vou só ajustar aqui ó hash início Aí você coloca hash a palavra pode colocar início mesmo deixa dessa forma e pode fechar aqui aqui # sobre sobre e agora a gente vai colocar serviços Vamos colocar serviços aqui na URL # servicos aqui a gente não vai usar o CD A gente precisa usar uma

palavra simples tira o CD coloca o c tá dessa forma aqui clica Para adicionar no menu e aqui vamos colocar #contato aqui no texto contato também aqui adicionando no menu e pronto vai ficar dessa forma aqui ó hash a palavra e aqui o rótulo que aparece aqui no navegador tá espero que tenha ficado claro essa parte aqui mas não se preocupa que eu vou te mostrar na prática vamos clicar aqui para salvar o menu desse jeito aqui criamos as opções do nosso menu e agora a gente pode Voltar na nossa página Pode fechar aqui aqui

em início vamos clicar para editar com elemento e agora a gente vai buscar aqui pela opção de menu aí vai aparecer essa opção aqui ó Simple menu ou menu simples clica aqui para arrastar pronto temos aqui o nosso menu Vamos só ajustar ele aqui vindo aqui em largura pode colocar largura Total só conferir aqui é pode colocar largura total e aqui vamos colocar a Posição aqui ele vai selecionar ó selecionar o menu ele já selecionou aquele menu que você criou aquelas opções que a gente criou ali no WordPress tá ele vai puxar automaticamente aquelas configurações

inclusive já apareceu aqui as opções tá vendo início sobre serviço e contato e já tá tudo certo agora a gente precisa ajustar o visual desse menu que tá bem feio né então podemos ver aqui as pré-definições pode dar uma olhada vou Colocar essa opção aqui de pré-definições recomendo utilizar que ficam bem exagerado e Aqui nós temos algumas configurações aqui em item de nível superior pode modificar tipografia desses itens aqui que aparecem no início aqui na tipografia Vamos colocar a mesma tipografia dos títulos tamanho 16 e a cor eu vou colocar aquele Azul Opa aqui aqui

na verdade é a cor do divisor Então vou retirar aqui ó não quero nenhum Divisor então retirei aquelas cores vou modificar aqui a cor do texto aí sim modifiquei a cor do texto tá vendo ali ó colocar aqui a cor aqui em cor do fundo eu não vou modificar e Aqui nós temos a cor ao passar o mouse então podemos modificar por exemplo para uma cor mais clara aqui em cor do texto e aqui a cor do fundo eu vou retirar porque eu não quero que tenha nenhum fundo aí vai ficar dessa forma Aqui a

cor tá bem clarinho eu acho que nem vai dar para ver no vídeo mas ela tá funcionando normalmente aqui no ativo você também pode colocar uma cor e retirar aqui a cor do fundo desse jeito aqui e basicamente o menu ele tá finalizado a gente vai mexer na versão para celular e aí a gente vai mexer nas outras opções aqui mas por enquanto vamos deixar dessa forma e vamos só ajustar o tamanho da logo que ela ficou bem pequenininha Vamos colocar aqui 38 e A princípio tá ótimo agora a gente precisa fazer aquela funcionalidade para

que quando a pessoa clica ela seja levada direto para o local que a gente deseja E aí para fazer isso a gente vai utilizar um elemento chamado Âncora que é o Âncora do menu eu vou adicionar essa Âncora bem aqui ó por que que eu vou adicionar aqui Porque eu quero que a tela da pessoa pare aqui porque ela vai ser levada para essa sessão o ideal seria colocar aqui vou Até colocar vou adicionar uma nova sessão aqui para adicionar essa Âncora para ficar desse jeito aqui aí quando a pessoa clicar naquela opção ela vai

ser levada PR essa posição Então como que funciona vou voltar aqui só para você conseguir visualizar Aqui nós temos a opção de menu e Aqui nós temos a opção sobre vendo colocamos aqui a URL hash sobre então aqui na Ancora a gente precisa colocar a palavra que a gente selecionou Vai ser sobre E aí o que que vai acontecer quando a pessoa clicar ela vai ser levada automaticamente para esse loc é basicamente assim que funciona essa é uma funcionalidade muito legal gosto muito de utilizar ela em vários momentos e além dessa Ancora aqui a gente

pode adicionar uma outra aqui em cima bem aqui no topo da página nessa aqui a gente vai colocar início para que quando a pessoa clica aqui ela seja levada de volta pra parte inicial da Página e vamos adicionar também aqui embaixo nessa parte aqui das áreas de atuação aqui eu vou colocar cicos e aqui você precisa escrever exatamente da mesma forma que você escreveu aqui então aqui nós estamos servicos aqui a gente também vai escrever servicos tá eu não sei se com cidil funciona mas por via das dúvidas recomendo deixar aqui palavras sem acentuação sem

cedilha nem nada do Tipo Então vou colocar aqui a Ancora também e vou colocar aqui na parte de contato eu vou até colocar aqui na seção de cima para que a tela da pessoa pare aqui tá vendo aqui nessa posição Então vou colocar aqui contato desse jeito e é basicamente assim que funciona a parte da âncora e para finalizar essa parte aqui do menu vamos fixar esse menu no topo do site para que quando a pessoa desça o menu continue aparecendo para fazer isso vamos vir aqui no contêiner Tá você clica no contêiner principal vem

em avançado e aqui em posição você vai colocar fixo aí ele vai desaparecer Mas você coloca aqui ó Z index 99 ele vai aparecer aqui de volta e aí veja que o menu ele tá ocupando uma parte da sessão inicial para resolver isso a gente precisa movimentar a sessão inicial a gente vai criar um espaçamento vamos clicar aqui no contêiner ó se você tiver dificuldade para selecionar esse contêiner aqui porque vai ficar um pouco Bugado vai dar uns erros aqui você pode vir aqui no navegador que fica mais fácil de você selecionar ó Aqui nós

temos a sessão do menu e Aqui nós temos a sessão de baixo que é essa aqui com essas informações aí você clica aqui e aqui na parte do avançado vem aqui em margem e você vai criar uma margem superior olha só o que que acontece aí você vai criar esse espaçamento pode colocar aqui 80 que fica um tamanho correspondente ao tamanho que você criou Aqui do menu até um tamanho menor né colocar aqui 70 agora tá certinho temos aqui o nosso menu e a São de início então eu criei um passamento aqui PR só para

preservar esse espaço do menu tá espero que tenha ficado claro essa parte aqui é basicamente assim que funciona e agora o nosso menu ele está fixo tá vendo a gente só precisa adicionar um fundo porque senão a pessoa não consegue ler aqui essas opções Então vamos clicar aqui no menu estilo clássico e aqui Vamos colocar cor branca a vai acontecer isso aqui você também poderia adicionar uma sombra aqui na na borda ó borda Box Shadow pode colocar uma sombra aumentar aqui é o borrar e ajustar a intensidade E pronto basicamente assim que funciona essa configuração

aqui do menu agora você clica aqui para atualizar pra gente salvar essas configurações e começar os ajustes na versão para celular então agora vamos ajustar esse site aqui pra versão para Celular então você vai vir aqui na lateral e vai clicar aqui em modo responsivo Aqui nós temos que clicar aqui na opção para celular E aí temos essa visualização que mostra pra gente como que tá sendo como que as pessoas vão acessar o seu site pelo celular então a gente tem que fazer alguns ajustes aqui alguns itens não precisam ser modificados outros precisam ser modificados

Então a gente vai ajustar basicamente tamanho de texto Posicionamento e alguns tamanhos de elementos aqui também bom vamos começar aqui pelo menu e veja que aqui ele ficou bem bugado né ficou bem estranho gente precisar ajustar esse espaçamento aqui e vamos fazer o seguinte você vai clicar aqui na imagem vai vir aqui em avançado e aqui você vai colocar largura em 50% você vai ver aqui ó que vai vai aparecer PX Aí você coloca porcentagem e coloca 50% aqui no menu a mesma coisa vamos vir aqui no menu avançado Largura e aqui porcentagem e 50%

bom vai ficar dessa forma aqui não ajustou ainda porque a gente tem que vir aqui no contêiner layout aqui embaixo vamos tirar esses gaps aqui ó coloca aqui zero e aí você só ajusta aqui para ele ficar Centralizado e aqui você pode colocar centro para ficar tudo no meio certinho podemos deixar dessa forma agora a gente pode ajustar os espaçamentos das bordas porque veja que o elemento tá bem colado aqui na borda Então isso aqui não é tão legal Vamos desvincular esses valores e vamos colocar aqui vou colocar aqui 20 aqui na esquerda e 20

na direita aqui o pading inferior Vamos colocar 20 também e aqui inferior e superior 20 também para ficar dessa forma aqui tá depois você visualiza no seu celular para ver se esse menu ficou muito grande porque você pode diminuir um pouquinho também pode colocar aqui 10 e 10 que ele fica assim então podemos manter dessa forma Vamos Aumentar tá o tamanho dessa logo vindo aqui em estilo aumenta um pouquinho aqui em 70% e detalhe tá todos os elementos que todos os itens dos elementos que tiver aqui essa opção de de celular né com esse ícone

aqui significa que essa configuração que você tá fazendo só serve para celular então mesmo que você colocar um tamanho aqui pequenininho isso aqui não vai ser modificado no computador tá vai ficar basicamente da Certinho não sei porque que aqui ficou diferente ah não tá certo Às vezes acontece esses erros de visualização tá Não precisa se preocupar você pode conferir clicando aqui nessa setinha que você consegue visualizar que tá tudo funcionando normalmente Às vezes acontece Esses errinhos aqui mas tá tudo bem e agora a gente pode ajustar aqui a largura no celular vou colocar 70% e

aqui no menu nós Precisamos ajustar aquelas configurações que eu Falei que faltavam né aqui no menu hambúrguer a gente consegue fazer a configuração desse aqui você pode colocar uma cor de fundo Se você quiser eu não gosto de utilizar porque fica muito exagerado e Aqui nós temos a cor do ícone a cor do ícone eu vou colocar uma das minhas cores aqui escuro mesmo uma cor escura e a vai ficar esse ícone bem pequenininho aqui aqui no preenchimento é caso você utilize um fundo eu vou colocar aqui zero vai ficar Bem colado aqui na borda

desse jeitinho aqui e aqui nos itens são os itens que aparecem quando a pessoa clica aqui no ícone tá vendo esse esses itens aqui aí a gente consegue modificar Vamos colocar a mesma configuração que a gente fez ali na versão para computador então vou colocar a cor aqui azul o fundo vou tirar esse Fundo Na verdade nesse caso aqui não não tem não faz sentido tirar Vamos colocar aqui um fundo Sim e eu vou inverter tá vou colocar o fundo azul e Vou colocar o texto na cor branca só para ficar com esse visual aqui

um pouco diferente e e aqui ao passar o mouse eu vou fazer uma configuração vou deixar aqui o o branco e aqui na cor do fundo eu vou colocar a cor clara só para ficar com esse efeito aqui ó pessoal vai passar o mouse e vai criar esse efeito então vou deixar dessa forma aqui no ativo a gente não precisa mexer podemos deixar assim mesmo então aqui podemos deixar dessa forma aqui mesmo tá aqui eu Coloquei preenchimento zero e aqui a cor do texto zero também aqui é não interfere em nada tá como a gente

já fez as configurações aqui em cima a gente não não precisa mexer nessas outras opções basicamente o menu já está funcionando e podemos manter dessa forma aqui praticamente já está tudo certo Deixa eu só conferir aqui aqui você consegue modificar o ícone mas geralmente a gente utiliza o ícone com essas linhas aqui que é o ícone do menu Hambúrguer então não recomendo que você modifique pode deixar dessa forma aqui aqui você verifica se o alinhamento tá na direita e podemos deixar desse jeito aqui Vou fechar ele e agora a gente pode seguir para a próxima

sessão que é sessão de início essa sessão aqui ela é bem tranquila de mexer tá a gente vai mexer na na no espaço que esse item tá ocupando para editar isso a gente vai vir avançado e aqui na largura você vai verificar para ver se tá personalizar e Você vai colocar aqui porcentagem e vai colocar 100% para que esse texto ocupe Todo o espaço dessa desse contêiner tá basicamente é assim que funciona Vamos diminuir um pouquinho o tamanho desse texto colocar aqui 28 e vamos fazer a mesma configuração aqui no subtítulo e na descrição então

basicamente vim aqui em avançado largura Vamos colocar 100% aqui o tamanho eu vou deixar 16 mesmo e aqui na descrição vamos fazer a mesma configuração 100% e aqui 16 e vamos só ajustar aqui o posicionamento vindo aqui no contêiner e basicamente as configurações do contêiner estão estão certas já tá tudo certo certo e a gente pode manter dessa forma aqui você poderia e alterar o espaçamento entre os itens como por exemplo aqui no subtítulo você pode modificar o inferior e colocar um pouquinho mais próximo e aqui dos outros das outras informações também mas Basicamente já

tá Tudo certo o botão aqui não tem necessidade de mexer só para confirmar a configuração você poderia vir aqui no botão avançado e colocar a largura em 50 em 100% desse jeito e já tá tudo certo a gente pode seguir pra próxima sessão e todas as outras sessões vão seguir essa mesma linha de raciocínio tá a gente vai mexer na largura do elemento e depois vamos só conferir o tamanho das letras além disso a gente pode vir aqui em contêiner vi aqui em pading aqui você Vai deixar 150 pode deixar dessa forma e aqui no

pading você pode colocar 20 na direita e 20 na esquerda que ele cria esse espaçamento aqui entre o conteúdo e a borda da do celular e depois de finalizar essa sessão a gente pode seguir pra próxima e aqui os ajustes são bem simples também vamos ajustar aqui a imagem Vamos colocar aqui é para ela ocupar 100% também desse jeito aqui embaixo Vamos colocar a mesma largura Vamos colocar aqui 100% e aqui também 100% aqui na descrição também 100% e vamos ajustando apenas os tamanhos Vamos colocar aqui essa imagem vamos conferir para ver se tá tudo

certo podemos colocar um pouquinho menor e aqui o texto também colocar aqui 16 aqui eu acredito que a gente pode diminuir um pouquinho colocando 26 colocar Até eu vou deixar aqui 28 mesmo para ficar com esse tamanho e aqui embaixo não tem necessidade de modificar porque esse tamanho já tá legal então podemos manter dessa forma e vamos só ajustar aqui o contêiner Então vamos vir aqui em avançado o pading você pode deixar aqui 100 no inferior e superior e aqui direita 20 esquerda 20 também que ele cria esse visual aqui pode seguir pra próxima sessão

vamos fazer a mesma configuração aqui no Container coloca aqui 100 e 20 na esquerda e na direita e aqui a gente vai ajustar Vamos colocar aqui personalizar 100% aqui você deixa Centralizado e nesse caso aqui ele ficou é com duas linhas né Não não é interessante deixar dessa forma eu vou diminuir um pouquinho só só para ele caber em uma linha só tá fiz esse ajuste aqui só para acontecer isso para ficar em uma única linha agora a gente pode seguir pro próximo título Vamos colocar Aqui 100% e aqui eu vou colocar tamanho 28 e

vou deixar Centralizado aqui não tem não tem importância ficar com duas linhas podemos deixar desse jeito e aqui embaixo não tem necessidade de modificar se for necessário no seu caso aí no seu site você pode clicar aqui nesses elementos e ajustar o tamanho dos ícones Enfim pode fazer os ajustes que você achar necessário No meu caso eu acho que o tamanho tá bem legal e eu posso manter Desse jeito aqui agora a gente pode ir pra próxima sessão aqui vamos ajustar o superior aqui em 100 inferior 100 direita 20 esquerda 20 e aqui vou colocar

Centralizado e eu vou diminuir esse tamanho para 28 que vou colocar Centralizado e o tamanho tá 16 tudo certo aqui eu também não vou modificar porque o tamanho ficou legal e Aqui nós temos a próxima sessão que é aquela de chamada pra pessoa fazer um contato com Você para ajustar essa sessão vamos fazer o mesmo a mesma configuração vamos colocar ess aqui 100% aqui 100% também e o botão 100% Vamos só ajustar aqui o contêiner colocando aqui Centralizado e aqui vamos colocar o avançado em 80 80 Opa aqui é 20 e 20 e aqui eu

vou colocar esse texto Centralizado forma aqui poderia diminuir o tamanho também Nesse espaçamento colocar Men 25 e aqui o botão vou colocar Centralizado também aqui na parte do conteúdo alinhamento Centralizado e pronto temos aqui essa sessão pronta vamos seguir pra próxima sessão bem rapidinho aqui aqui também podemos ajustar para 28 Centralizado Centralizado e basicamente esse contêiner aqui está finalizado nem tem a necessidade da gente modificar Aqui ela largura mas caso seja necessário você pode fazer essa configuração aqui também só colocar aqui só para confirmar e pronto temos aqui esse esse contêiner finalizado e agora Podemos

seguir pra próxima sessão aqui também não tem muitas modificações é interessante a gente modificar o espaçamento aqui das bordas Então vamos clicar aqui no contêiner avançado aqui superior 100 inferior 100 Direita 20 esquerda 20 pronto temos aqui as configurações vou só diminuir esse tamanho aqui acho que não vai ter como Mas enfim vou até diminuir um pouquinho mais mas não vai ficar legal vou deixar aqui é o tamanho de 16 mesmo deixar aqui Centralizado e aqui Centralizado também vou só diminuir um pouco a altura de linha nesse caso aqui ele ficou com duas linhas mas

podemos deixar dessa forma aqui eu vou até deixar na esquerda E aqui na esquerda também como nessa seção aqui eu coloquei o texto pra esquerda na outra são que Aparecida eu vou fazer a mesma configuração vou vir aqui no título vou colocar na esquerda para eles ficarem organizados dessa forma aqui com o conteúdo todo na esquerda e as outras sessões eu vou colocar Centralizado mesmo que no celular a visualização delas fica mais interessante quando está centralizada bom podemos manter dessa forma aqui Aqui Não tem a necessidade de modificar o tamanho caso seja necessário no seu

site você pode fazer isso clicando aqui e modificando o tamanho no meu caso eu vou deixar dessa forma e Aqui nós temos aquela mesma seção onde a gente precisa ajustar a largura do elemento fazer dessa forma aqui só para finalizar e e aqui vamos ajustar o espaçamento do contêiner vindo aqui em avançado 80 80 20 20 dessa forma aqui dá para ajustar um pouquinho o tamanho Desse texto e praticamente temos a nossa sessão pronto aqui a gente poderia colocar no centro também e diminuir um pouco esse subtítulo e aqui podemos colocar Centralizado também - 25

e pronto praticamente temos essa sessão aqui finalizada e vamos só conferir aqui o rodapé aqui a gente pode colocar o a Logo no meio e aqui Centralizado Também aqui já está tudo certo podemos colocar Centralizado também e esse texto Centralizado vai ficar desse jeito aqui embaixo você pode ajustar o tamanho nesse caso aqui já tá agradável posso só at diminuir um pouquinho aqui o tamanho 28 Ô 22 e aí temos essa configuração aqui no rapé Bom basicamente a nossa página já está ajustada recomendo que você teste no seu celular então é importante você clicar aqui

para atualizar volta aqui pra versão para Computador Pode fechar aqui o navegador e você pode conferir para ver se todas as configurações estão certinhas para ver se tá tudo ok clica aqui para atualizar e agora vou te mostrar como que você pega o link dessa página para você acessar no seu celular testar as configurações ver se tá tudo certo e aí você vai utilizar esse link para você divulgar na internet então basicamente vamos voltar aqui ó sair vai voltar aqui para o seu WordPress aqui você vai Encontrar a opção de página e é só você

clicar aqui para visualizar Aí você vai acessar a sua página e veja que aconteceu aqui esse pequeno errinho ó por isso que é importante você acessar sua página e verificar para ver se tá tudo certo a gente pode pode clicar aqui em editar com elemento PR voltar pro editor e a gente vai fazendo esses pequenos ajustes aqui nesse caso é o espaçamento da sessão de início Então vamos clicar aqui Ó na sessão sessão de início e aqui eu vou diminuir esse espaço aqui para ver se vai resolver vamos clicar aqui para atualizar voltar aqui resolver

um pouquinho colocar aqui 40 atualizar e aqui podemos carregar a página e já tá tudo certo aqui tá aparecendo essa Barrinha preta mas essa Barrinha preta não aparece quando as pessoas acessam tá se a gente acessar aqui com a janela Anônima a gente consegue visualizar que o site tá funcionando normalmente e as pessoas vão acessar o site dessa forma aqui ó sem aquela Barrinha preta temos aqui o nosso menu e todas as sessões criadas tudo certinho e agora é só você pegar esse link aqui copiar e divulgar para quem você quiser é você pode enviar

pelo Whatsapp pode colocar nos seus anúncios pode colocar nas redes sociais no Instagram no YouTube no Linkedin E aonde você quiser qualquer pessoa que Tiver esse endereço vai conseguir acessar as suas páginas e agora que você tem o site pronto você precisa colocar esse site no Google se você quiser saber como fazer essa configuração como configurar o seu site para ele aparecer lá nas pesquisas do Google acessa esse vídeo que eu vou deixar aqui na tela que lá tem todo o passo a passo bem simples e bem rápido de como você pode configurar o seu

site para aparecer nas pesquisas do Google que é super Importante para você divulgar o seu trabalho se você gostou desse vídeo não esquece de deixar um like Para apoiar o nosso trabalho e se inscreva no canal para não perder os nossos próximos conteúdos Então é isso eu vou ficando por aqui e eu te vejo no nosso próximo vídeo