Página de vendas - advogado - 2024 (landing page) Wordpress/Elementor - PARTE 1

Fala minha turma prazer Gabriel mais conhecido como gaba sou especialista em Land page tem um dos maiores portfólios de página do país e eu posso provar Então hoje a gente vai fazer uma página para advogados tá é vai ser sem corte vai ser tudo na lata se errar errou se falou falar alguma merda falou não vou cortar não tenho tempo de fazer corte então espero que essa página demore uma hora no máximo né esse vídeo demore uma hora no máximo e já implementada tá tanto no computador quanto no celular vamos fazer o layout vamos fazer

a implementação no elemento e tudo mais e também vamos é ativar aqui né o domínio a hospedagem e tudo mais aqui tem o corte do meu OBS não sei porque tá aqui mas está aqui deixa eu arrastar pro lado deixa eu diminuir um pouco a minha cara gente vai ser sem corte essa parada aqui sem cortes aumentar aqui a tela é isso aqui eu já tenho eh a hospedagem a hospedagem que eu uso do meu site é da hostinger eh eu vou ativar um subdomínio nesse meu domínio principal que é o gaba PSD então eu

venho aqui em domínios caso você queira né a hospedagem eh eu vou deixar o link aqui com desconto tá eh se eu não me engano o plano mais legal é menos de r$ 1 é por um ano né você paga uma vez por ano só já tem hospedagem em domínio Então você vai acessar aqui seu painel da hoser clicar aqui em sites eh vou vir aqui em subdomínio e vou escrever aqui é de vou colocar doiso eu não sei se eu já tenho algum criado Então vou criar aqui um subdomínio criado subdomínio vou vir aqui

em word express visão geral eu vou caçar aqui o domínio que eu criei o subdomínio que eu criei e agora eu vou instalar o word express que é onde a gente vai instalar o elemento e com elemento fazer a construção da nossa página Vou colocar aqui home senha tanto faz tanto fez escolha de idioma vou colocar em português Brasil enquanto isso eu vou abrindo aqui o Photoshop eu vou esperar ele instalar aqui o certificado SSL tá ele demora um pouquinho para abrir abrir esar o Photoshop aqui eu tenho que pagar o Photoshop que a mensagem

para pagar o Photoshop esqueço que tá do dia 20 hoje é dia 20 hum aqui era de uma cliente que tava fazendo vou finalizar deixa eu arrumar minha tela aqui rapidinho porque eu ver aqui se minha câmera vai pro saco tem uma luz da minha cara de arrumar aqui meu meu rosto pronto Vou colocar aqui para cima para vocês ver o que eu vou fazero no Photoshop é isso é isso você ver o certificado Tá instalando enquanto isso e vamos procurar a imagem do nosso advogado essa página é uma página fictícia não é real só

para eu ensinar vocês como eu crio uma página rápida bonita Já implementada Nossa eu vejo gente demorando três 4 5 dias uma semana duas semanas para fazer uma página pelo amor de Deus se eu demorar 5 horas para fazer uma página é é muito aí vende uma página por r$ 400 e eu faço ela em 4 horas às vezes dá para fazer duas páginas por dia tá quase R 3.000 por dia no mínimo uma página por dia né E aí dá R 1000 por dia dá pr tirar mais de R 20.000 tranquilamente e a gente

tem um fluxo muito bom né de clientes tanto é que eu tenho um dos maiores portfólios deixa eu mostrar meu portfólio aqui enquanto enquanto vai instalando CSS a gente vai conversando não não vou fazer corte fazer corte sem CTE mostrar aqui meu portfolio Zinho rapidinho tá só enquanto tá instalando aqui se demorar aqui ó portfólio do brabo mais de 100.000 visualizações Vixe aqui tem mais de 300 páginas só aqui né Tem páginas que eu não posso postar por conta de contrato tem páginas que eu não posto porque eu não achei bonito mas o cliente quis

daquela maneira eu também não posto e é isso então escreve lá no B gaba e aparece eu lá bonitinho o Abrir ao PSD né PSD parece deficiente né é deficiente como é como é a Siga para deficiente é PSD sigla para de ficiente sei nem escrever deficiente Ah é pcd Ox maluco não é vamos vamos escrever aqui advogado usar o freepick mesmo tá é meu free pick ele é o gratuito porque eu uso outra outra plataforma para fazer o download né eu faço isso por conta eu uso outras plataformas além do freepick né uso Adobe

stock uso invat imag se eu tivesse que pagar mensalidade de todos ia dar mais de R 1000 por mês então eu uso o go Vip vou deixar o link aqui do go Vip caso você queira também E aí eu consigo fazer download de qualquer plataforma vendo todas essas plataforma eu consigo fazer o download essa quantidade aqui é diária tá não é mensal tá o free pick eu consigo fazer 30 download por dia é suficiente né Tem um love pick tem Qual mais eu uso aqui Adobe stock uso muito de imagens assim eu prefiro Adobe stock

o invat e é isso e o flashcom também uso pouco flash con tem tem 10 downloads por dia né Deixa eu ver o download aqui certificado Ainda não fez instalação Enquanto isso a gente vai caçar um advogado aqui e caçar uma imagem assim já eu provavelmente essa essa página vai ser preta tá preta com dourada tipo assim ó essa arte tá bem legal talvez a gente mas a gente tem que eu tenho que pensar num cenário que seja o cenário que cliente vai te mandar a foto né então eu vou ter que recortar e tudo

mais então ela assim já pronta a gente não vai ter um cenário real né Talvez esse rapaz aqui ó que a gente faz o recorte da imagem tudo certinho certificado instalando ainda quando demora assim certamente vai dar erro tá isso é por conta que eu acabei de de ativar o subdomínio né então então ele demora um pouquinho vamos caar aqui eu quero a imagem real e um cenário real sabe tipo assim ó gente porque se eu pegar essa foto aqui por exemplo cara eu não ia mexer nada nela ia usar esse fundo aqui então com

isso vocês não não vão aprender muita coisa né e como o intuito desse vídeo é ensinar eu só vou pegar um modelo mais bonito em quantas horas de vídeo já 9 minutos o cara nem começou ainda aqui que tá bonitão hein essa cor aqui tá legal também azul e né legal fazer aqui não precisa nem mexer mano eu fosse fazer uma land page assim eu usaria todos esses elementos aqui ó Nem editaria essa imagem Aí é osso né Aí eu viro o rei do freque Vamos caçar aqui onde a mulher Talvez esse rapaz danan careta

aqui no vídeo no se a gente tem eu não gosto de pesquisar às vezes tá página de venda eu pesquiso bastante principalmente para ver a minha posição né ó P de venda Ó tem eu aqui eu aqui eu aqui eu aqui dar o pai mas para pesquisar referência eu gosto muito da turma russa mano esses rossos são malucos né E aí vamos filtrar aqui por campo de criação localização Hum vamos ver aqui ai meu pescoço ó esse estilo [Música] assim esses R são são meio maluco né Eles saem bastante do hum será será que a

gente mexe uma dessa assim no meio O problema é que tipo se a pessoa não desce a página por exemplo pega daqui para cima não aparece um advogado né tipo do texto aqui para cima a gente só percebe que é uma p de advogado do título para baixo né quando ele já começa a aparecer os elementos aqui mas tá bem legal essa bandeira aqui eu não sei se é uma página para americanos tá inglês né mas quem fez foi um foi um Russo uma russa e lá página para advogado assim é bem patriota né eles

colocam a bandeira dos Estados Unidos aqui no Brasil por exemplo página de advogado não tem bandeira do Brasil nas páginas mas par de advogado lá dos Estados Unidos tem muita referência assim da do país dele eu acho que essa página é fictícia tá acho que esse cara aqui eu já devo ter visto ele em algum lugar não parece uma página real parece uma página de estudos ou para portfólio mesmo tanto é que tem pouca sessão né uma duas três quatro sessão eu vou fazer uma página de quatro sessão nesse vídeo V não tô ficando maluco

o Branca Hum acho que eu vou fazer assim ó bem Clean né isso de ver o certificado Tá instalando provavelmente vai dar erro pela demora eh as imagens do freep que assim ó é boa porque tá já tá pronta tá ligado isso aqui já tá pronto eu não não vou ter o trabalho de mexer aqui o problema é que aí eu não consigo ensinar ensinar muita coisa para vocês né porque vou pegar desse cara aqui ó cara de advogado advogado pegar dele enquanto vai fazendo aqui eu já vou criando é minha primeira imagem no Photoshop

ah gaba como você vai criar se você é padrão né a gente tem um padrão então largura 1920 é você não vai fazer mais que isso tem gente que faz maior porque tem telas maiores né aquelas telas full scen grandona largon aí a gente trabalha com 2320 se eu não me engano mas cara nem 1% da população tem esse unitor né Então não vai fazer diferença vai diferença vai fazer diferença nenhuma você trabalhar em cima disso tá então 1 920 padrão altura é por gosto normalmente é por gosto né Tem gente que faz 800 tem

gente que faz 900 tem gente que faz 1000 1000 ele vai cobrir a tela toda tá então a primeira sessão ela vai ter o tamanho da tela toda eu gosto de fazer 900 porque é Ainda vai sobrar um alguns cím aqui do finalzinho da página né com isso dá aquela sensação de Olha tem mais coisa para baixo né para ele não achar que a página é só aquilo só aquela sessão Então vou trabalhar com 1920 colocar a cor preta em altura 900 então tem aqui tem uma viatura passando é então vou colocar aqui 1920 por

900 de altura eu vou vir aqui em guia novo layout de guia Vou colocar aqui o número dois a cor tanto faz dou um ok a ele já vai dividir a tela no meio para mim tá aqui na metade e outra coisa que eu gosto de fazer também criar um retângulo aqui eu só vou me preocupar com a largura tá não vou me preocupar com a altura desse retângulo opa opa opa opa esse retângulo fazer aqui eu vou colocar ele com a largura de 100 não 120 vai 1240 aí Vocês já vão entender o porquê

Tá vou centralizar ele vou visualizar e colocar régua no meu Photoshop tá venho aqui na régua da lateral coloco na ponta desse retângulo venho de novo e coloco na outra ponta do retângulo com isso eh eu sei que meu conteúdo Oxe Ox Ox o pagou o negócio eu apertei delete né com isso eu sei que o meu conteúdo ele vai tá dentro é dessa limitação né entre aspas então eu vou colocar um texto aqui e provavelmente é a foto do Expert aqui então é se a gente for lá no elemento essa largura colocar aqui se

eu for lar no elemento essa largura daqui para cá tem 100 tem 1140 de pixel tá eu coloquei 1220 1240 agora esqueci e para ter uma maggia um pouquinho melhor né Ok é isso então aqui vai ficar o texto aqui vai ficar a foto da xash a gente fez o download lá no freck a foto tá pequena tá com marca d'água não está com marca d'água aqui ó ah gaba como você fez o download dessa foto tem não conta free o free pick você nem usou o go Vip é porque o free pick el deixa

você fazer dois download gratuito tá principalmente dessas imagens feita com inteligência artificial tá vendo que tá verdinho aqui eu consigo fazer até dois ou três downloads depois isso aqui fica laranja aí eu não consigo mais fazer o download aí eu copio o link aqui essa imagem vem aqui no govip download cola o link aqui aí ele faz o download para mim em qualquer plataforma freepic Adobe stock e etc então tenho aqui a imagem do meu expert e existe várias maneiras de você fazer o recorte dessa foto tem gente eh que prefere usar Pain né criar

uma camada aqui e selecionando calma aí e fazendo aqui o o te tec tec é o que fica mais bonitinho até sim né fica jeito mais profissional de fazer e existe o jeito mais vagabundo de se fazer que é só clicar aqui em remover fundo às vezes funciona muito bem tá Às vezes funciona muito bem ele às vezes mas na maioria das vezes quando é foto de expess de pessoas ele tem um bom trabalho até né deixo aqui aqui alguns umas coisas aqui mas dá para resolver tá vendo ó o cabelo tá OK Tá tão

ruim é isso tem essa maneira também como eu gosto de fazer Eu particularmente prefiro vir aqui em ferramenta de seleção né ferramenta de seleção de objeto clico na camada da foto e clico em selecionar assunto tá para mim é da maneira mais rápido essa aqui tem o melhor resultado objetos e também trava todo o meu vídeo tá vendo ele seleciona meu objeto eu venho aqui em selecionar e mascarar desço até o final saída para máscara de camada dou um ok e pronto tá vendo É para mim ele dá um resultado bem mais mais expressivo Ele

criou uma camada aqui eu venho é com um pincel da cor preta e vou tirando essa parte aqui que ele não conseguiu tirar e tudo ok Você pode ver que aqui ele deixou uma listrinha Você pode tirar tanto com a caneta eu gosto de a dureza aqui dela eu vou tirar com a caneta porque só foi nessa região né Opa só foi nessa região aqui ó você ver que do outro lado não tem tanto ok ok e vou procurar um cenário agora para ele Vamos caçar um cenário aqui uma foto do nosso advogados vamos procurar

um cenário uma biblioteca biblioteca padrão né Igual das fotos que a gente viu eu falei que não ia baixar para ensinar vocês a fazer temos eu gosto de usar talvez essa para dar uma profundidade na imagem Ok vamos pegar imagens escuras já que nosso fundo é preto caçar aqui essa tá legal só não gostei do teto Branco aí meu pescoço essa daqui tá muito antig quantos minutos de vídeo 20 minutos meu Deus deixa ver o certificado não instalou deixa eu atualizar a página aqui para ver se a culpa é nossa do sistema ah instalou Aqui

ó era para ter atualizado a página venho aqui em painel de administrador na minha hospedagem rting ele já instalou o word express pra gente e agora eu vou instalar o elemento is Hum eu vou fazer vou fazer só com elemento free tá vou fazer só com elemento free para vocês verem que o pro eh é algo muito específico pro né porque a gente precisa o pro é para quê formulário alguns efeitos de CSS HTML caso você saiba fazer que mais algo muito específico né Eu acho que para essa situação assim de página de advogado que

é algo mais clean né minimalista não acho que não vai ter a necessidade de usar o pro Então vamos ficar aqui com elemento free mesmo eles já vem com essas páginas aqui instaladas eu vou para lixeira plugins vou desativar todos esses plugins e vou excluir venho aqui em adicionar plugin escrevo elementor Ah eu tenho um produto chamado proposta comercial tá o p comerciala ver aqui para vocês e aí eh eu disponibilizo o elemento pro tá para quem compra esse produto aqui ó IP comercial vou deixar o link aqui e o que é esse IP comercial

ele é um template falta eu fazer aqui essa página ainda tá vendo você ganha o elemento pro plugin WP Rocket por R 79,90 vista e o que é esse template esse template eh você ganha esse arquivo dessa página para você instalar no seu na sua hospedagem né seu word express é totalmente editável é uma página que eu envio paraos meus clientes quando eu quero mandar a proposta né o orçamento eh de página de algum serviço então ao invés de eu mandar um um PDF um link no figma eu mando o link tá vendo aqui ó

o meu link gaba PSD o nome do cliente né no caso aqui é o João nome fictício e ele recebe é um link com a proposta para ele e aí você consegue duplicar essa página e fazer pra Maria fazer pro José é editar e as cores dessa proposta comercial editar todo o texto as imagens tem mais de 15 aulas junto te ensinando a implementar te ensinando a editar esse template ele também é responsivel né então ele fica bonito tanto no computador quanto no celular então se você tiver interesse e além do de ter o elemento

pro né você tem esse diferencial né porque esse aqui é um diferencial Você não conhece ninguém que envia a proposta comercial pro cliente em forma de lunch Face normalmente é o link no figma um PDF tá vendo ó 100% no celular no computador abre qualquer buraco tá então vamos voltar aqui no nosso instalando o elemento Olha já vai dar 27 minutos de vídeo e a gente nem começou na verdade começou né a gente tá Preparando o terreno meia horinha para preparar o terreno e tá aquele pau a cop é normalmente né o texto da página

o cliente manda pra gente e ou a gente cobra a parte para fazer então como a gente não tem a cópia desse texto eu vou fazer lá no chat chpt vou te ensinar como eu faço no chat GPT E aí é isso e tá ficando calor PR instalado o elemento vou vir aqui em páginas e aqui quando você instala o elemento a gente manda pra página né do elemento eu eu ignoro semmente volto né E aí venho aqui em páginas adiciono uma nova página vou colocar o nome dessa a página de home ou início ou

como você preferir publicar editar com elemento Hum que eu fecho venho aqui nessa engrenagem coloco tela do elemento para sair todo e aquele título aquelas aqueles textos que estavam aqui aparecendo V aqui em configuração de novo estilo tipo de plano de fundo eu coloco Preto clico em atualizar novamente e aqui a gente começa Nossa brincadeira como eu tava fazendo essa imagem aqui eu falei que ela tinha 1900 de largura né É tudo isso aqui deixa eu deixa deixa eu é tudo isso aqui cadê não tem o mouse né É tudo isso aqui Aqui tem 1

920 de largura letra bonita com 900 de altura né não tem 1000 porque 1000 ele vai vir até aqui embaixo 900 ele vai vir até aqui mais ou menos com isso a pessoa tem a sensação que tem mais coisas para baixo não tem só aquela sessão igual Netflix né a gente pô no site da Netflix por exemplo eles Nossa você vem aqui na Netflix por exemplo escolher um filme você vê que deixa eu tirar minha imagem Aqui você vê que tem mais coisa pro lado né ele ele te mostra um pouquinho para você ter essa

para você ter essa sensação que não tem só isso aqui tem mais coisas Ah esse Alice aqui é muito bom tá então a gente usa isso na nossa Land page também tá mostrando que tem continuidade tem mais coisa pro lado ou para baixo Ok E aí aí eu vou clicar nesse maizinho flexbox e duas colunas tá é da imagem que a gente tá fazendo aqui daqui para lá daqui para cá vou clicar nesses pontinhos aqui em altura mínima eu vou colocar os 900 e pronto já tem a gente já tem nossa primeira sessão e vou

clicar nesses pontinhos aqui do wid Jet né você vê que o free o que tem liberado é só isso aqui né o gratuito que é o pro as outras coisas para baixo que eu vou tentar não não utilizar Então a primeira coisa que eu vou subir aqui é o logo do meu cliente a headline eu vou duplicar a sub headline e o botão AC Eita o inglês do cara tá bravo he Action chamada paração da nossa da nossa Hero né Hero primeira sessão então eu vou caçar uma logo aqui aleatória né Logo advogado png eu

não vou fazer uma logo nesse vídeo eu não tô maluco cor [Música] transparência eu ver aqui uma logo logo que a logo é padrão né de advogado é tudo igual Marcelo soua tá legal hein a você tu mesmo Marcelinho hum [Música] hum hum hum cidades tá legal hein par p [Música] p carneiro e o Maran eu coloc eu colocaria a imagem de um carneiro né gente vai criar logo inventando essas coisas Ví o cara colocou uma maçã no a logo da Apple do nada Apple pay criou uma maçã para simbolizar tecnologia Car é maluco o

revolucionário aar Esso aqui mesmo ó vai ser essa fazer o download vou baixar qualquer uma porque eu não vou colocar esse essa página no meu portfólio aí eu vou clicar aqui na imagem escolho a imagem eu arrasto essa logo para cá essa página só vai ser pro pro vídeo mesmo então se eu coloco centralizar aqui tudo na esquerda o texto vamos lá no chat CPT é o chat CPT ele é um boot né um robô treinável né Você pode treinar ele como eu treino ele gaba falando com ele né Eh É como se você contratasse

alguém inteligente boa para aprender só que ela não sabe nada sobre a profissão dela né como se você treinasse ela contratasse ela pra sua empresa e você olha esse cara aprende bem e aprende rápido então vou contratar ele paraa minha empresa e vou ensinar ele a fazer o serviço é isso que a gente faz com chat GPT então vou falar oi chat G é GPT GPT G PT hoje aí tirar esse cabo aqui que tá atrapalhando hoje você será o João João é um copy right como é escreve Wi eu não sei esr w wiig

é wiig hum quase quase é um copyright com 10 anos de experiência formado com os ma melhores especialistas do mundo e que já leu todos os melhores livros da área sua especialidade é na criação ea criação de Copy para landpage sites e blogs você trabalha para mim um alista tem criação ô caraca esse teclado aquele americano botão aqui dos assent é tudo em criação P page é isso e você ó lá Tem que decorar esses assentos dessa bosta e você ir a me ajudar a criar Cops para os meus clientes com a estrutura perfeita para

uma land page de alta conversão é isso é isso eu tenho uma ferramenta aqui chamada cadê cadê cadê cadê cadê cadê cadê não sei tururu aqui é isso eu tenho meu ferramento aí Ué não tá aparecendo aqui ó eu tenho esse corretor gramatical né que eu uso ele de extensão aqui no chrom então toda vez que eu escreve alguma coisa sem acento ou errada ou com algum tipo de seja ortográfico ou de frase sabe ele vai Já corri aqui para mim então só clica na palavra tá vendo ele já vai corrigindo aqui para mim o

nome dessa extensão se chama language to né linguagem tu escrever lá no Google é o primeiro link então eu não me preocupo muito em escrever certo ou errado escrevo rápido só venho aqui Corrigindo o chat CPT em si não tem a necessidade de escrever certo né Eita Land page Land page Ling é isso e dou o play ele vai se apresentar Claro estou aqui para te ajudar vamos criar uma cópia que vai cativar os visitantes e converter em clientes títulos impactantes subtítulo descrição do produto prova social essa daqui é a estrutura padrão né que muitas

usa né para criar sua Land page Claro que tem mais coisas como pack oferta não tem aqui também a oferta não tem e dúvidas frequentes Mas é isso provavelmente eu já vou fazer só da primeira para quarta sessão é o suficiente para ensinar alguma coisa para vocês certo então vamos lá chat João quero que você crie uma cop para um cliente que presta serviços de advogado colocar trabalhista colocar em uma área só né colocação de uma área trabalho defenda seu direito com nosso experiência jurídica ó essa vai ser aqui sub rline essa sub eu não

gosto que tenha tipo ponto de interrogação ponto final sabe eu gosto mais de texto corridão tipo assim ó eu vou colocar subhead ao invés de subtítulo tá vendo é melhor do que subtítulo e aqui a gente já tem defensas direito ambiente de trabalho com orientação jurídica especializada perfeito venho aqui em cor né no estilo tipografia vou colocar vou aumentar aqui vou deixar 400 mes vou copiar e vou colar o estilo abaixo para ele ter a mesma fonte a mesma cor eu só vou diminuir o tamanho aqui ó e vou diminuir o peso para 300 também

certo aqui no nosso botão vou vir aqui em estilo vou colocar cor do bot normalmente cores cores cores botão é verde cara tanto faz tá é botão tem que ter Car de Botão Esse é o primeiro o primeiro ponto você v aqui em páginas por exemplo ó esse botão aqui tá bonito para mim parece um botão né M parece um botão Mas aí tem pessoas isso aqui hum aqui parece um botão questionável né para mim isso aqui não parece um botão então botão tem que ter cara de Botão não importa a cor a gente tem

o costume de usar Verde porque o verde significa a gente aprende da de criança que o verde significa coisa boa ou vai adiante ou prossiga né e o vermelho e significa coisa ruim ou pare ou feche ou cancele então a gente evita essas cores mas é é questionável tá cores é muito muito abrangente né n a gente vai entrar numa discussão aqui Perpétua então PR gente tirar as cores de lado botão tem que ter cara de Botão não não invente na hora de criar botão tá então eu vou deixar o botão aqui da cor da

logo tá cores um degradezinho bonitinho aqui em preenchimento vou aumentar um pouquinho vou aumentar um pouco pra esquerda e um pouco pra direita vou arredondar em 10 e pronto tá aqui a gente já tem a nossa primeira sessão vou clicar aqui nessa coluna vou tirar esse espaçamento [Música] o nada aqui sub rline vou imagem e vou diminuir deixar negativa n para ficar um pouco próximo da nossa headline principal Clic aqui no meio na sessão e venho aqui alinhamento de itens e clico aqui do meio e pronto aqui a gente tem a nossa primeira sessão já

cont texto aí eu gosto de tirar um print dessa primeira sessão né mas se eu for tirar um print aqui provavelmente e o vídeo ele não vai pegar né porque a tela fica toda preta mas eu vou apertar o contol s do meu teclado e aí eu consigo selecionar e a região onde eu quero tirar o print se o seu sou se o seu se o seu computador o Macbook eh você é outra opção tá eu não sei qual é o botão que você tem que clicar aí é o não sei tem que pesquisar qual

é o botão que você tem que clicar para tirar print de uma região da sua tela no Windows é cont control shift S E aí eu tirei um print Tá vendo aquela sessão coloca aqui para cima e ela tá assim como nosso xest e tá na camada de baixo eu gosto de vir aqui nessa camada do print quando ela é escura quando ela tem um fundo preto eu gosto de deixar aqui no clarear ou no dividir quando a tela é branca o fundo é branco escurecer ou multiplicação tá aí você vai testando aqui até ver

qual a melhor opção então vou deixar ela aqui e agora eu vou trabalhar na minha primeira sessão né Deixa eu ver lá os cenários eu vou usar essa aqui mesmo economizar tempo né que já vai dar fiz o download gratuito aqui o fre Deixa eu fazer Vou ajustar Opa mostrei aqui para vocês acabei mostrando nada maluc Gabri aqui que tinha mostrado para você se da camada do print que eu tirei é aqui tá excluo é o fundo claro ou dividir e quando é branco escurecer eu multiplicar tá E aí só vai ficar o texto mostrando

aqui e o que eu vou fazer aqui de imagem eh eu consigo ver né por debaixo dessa camada que eu tirei o [Música] print Então é isso eu vou colocar esse fundo aqui essa biblioteca ô de trás do meu xest eh ela é centralizada né por esses Vidros aqui por esses espelho Então vou tentar deixar Eh meu xest Centralizado certinho uma aqui Provavelmente o meio na ponta do nariz dele Certo vou dar uma escurecida nessa camada aí tem várias opções para você escurecer eh essa biblioteca como o fundo já é preto eu só vou diminuir

a opacidade né ou você pode vir aqui eh como é o nome desse bagulho aqui is que não tem nome não é você vem nessa bolinha aqui aí você vem aqui em curvas que você também pode escurecer Tá mas como o fundo tiver preto não tem a necessidade fundo fosse de outra cor Eu faria com modo com as curvas né certo eu vou eu vou usar a curva aqui pro meu expat para deixar ele um pouquinho mais escuro para integrar ele no ambiente né Ele tá um pouquinho mais claro que o ambiente em si certo

é isso eu venho aqui no cenário de baixo eu crio uma camada e venho com a ferramenta de degradê e vou arrastando aqui pro [Música] lado eu crio uma nova camada aqui clico na logo que eu criei que eu criei não né que a gente pirateou coloco aqui atrás dele Hum deixa eu ver se tem alguma mesclagem que fique legal ó vou usar essa superposição linear para deixar Preto e eu vou duplicar e deixar o amarelo tá E aí eu vou criar uma nova camada e fazer Preto novamente um pouquinho menor certo e aí eu

vou criar uma nova camada aqui aqui é só jogo de luz tá jogo de luz eu vou colocar um branco aqui em cima no topo por cima do Expert né a colocar ele por cima eu ver aqui aqui ficou tem que subir um pouquinho mais e a camada de cima eu vou criar um um pouquinho de luz ficou na cara dele só deixar aqui no cabelo essa camada de luz amarela que ficou aqui eu vou duplicar ela aqui nessa curva que eu criei do Expert eu vou converter em objeto inteligente essa camada que eu dupliquei

eu vou colocar só em cima do exper segurando out tá vendo ó o cabelo dele já muda ficar só luz nele e aqui eu vou procurar eh alguma opção que fique bem interessante né que eu preciso ambientar a foto do Expert para dar a sensação que ele tá dentro da imagem né E esse fundo aqui eh não foi um fundo coloc né Foi um fundo já tava na imagem eu vou criar uma outra camada aqui atrás dele Preto [Música] Hum vou diminuindo aqui essa luz e é isso Dea eu pegar essa logo aqui que a

gente fez o download T eu vou deixar essa logo atrás dele I que top tiar uma camada aqui na logo e tirar aqui o hum leg legal hein Deixa eu ver se algum aqui fica maneiro ao que ficou maneiro gust ficou legal nessa mas eu acho que não tá logo não tá da cor né do né vou deixar por enquanto e agora a gente precisa ter algo que se seja de advogados né escrever aqui Justiça padrão a gente é padronize iros existe essa palavra Como é o nome dessa moça aqui aluma coisa da Liberdade o

nome dela Hum aqui interessante e de graça mas só parece uma estátua né não parece essa moça da da Justiça ess tá legal PR caramba mas é pré pago né Tá legal hein gostei da Luz defeito não sei onde eu colocaria Ah vai ser essa top copia o link Como é pago né esse freepic essa imagem V no meu go Vip colo o link solicito e aguardo tá vendo já faz o download Às vezes você for utilizar esse go Vip aqui que eu vou deixar o link na descrição e às vezes demora um pouquinho para

fazer o download tá a maioria das vezes é rápido assim você põe o link já mas quando tem muita gente usando às vezes como hoje é fim de semana possa ser que algumas imagens demorem vou arrastar ela aqui pro meu exp Ficou muito legal cara vou colocar no meu portfólio colocar ela aqui ó vou usar ferramenta de curvas para vou ter um objeto inteligente vou criar uma camada e vou usar a ferramenta de degradê essa camada aqui não queria deixar ela tão tão escondida assim aquela uma imagem bonita né vamento de curva aqui ups a

show top é isso mano legal agora eu vou tirar aqui meu texto para finalizar a imagem tá a gente não sobe esse texto não salva essa imagem com texto tá não se faz texto em imagens e salve pra sua página que não fica responsvel né como pessoa vai ver esse texto que tá na imagem na versão computador na versão de celular na versão de tablet não fica responsivel e o texto ele também te ajuda a sua página a ser encontrada no Google por exemplo né não se baseia na maioria das vezes por texto Então se

você tem um texto lá de advogados na headline isso ajuda ele alguém pesquisar advogados e achar sua página e quando o seu texto tá na imagem tá assim na imagem é o Google ele não vai identificar o texto da sua página ele vai achar que é um site sem texto só imagens Ok e o que eu vou fazer agora vou tirar esse cadeadinho dessa primeira camada aqui vou selecionar tudo selecionar todas as minhas camadas vou clicar aqui nessa pastinha vou duplicar essa pasta e vou converter em objeto inteligente tá então aqui eh a gente tem

a nossa imagem e sólida né ela toda agrupada juntada e agora eu venho no filtro de câmera ru né porque somos usuários de R E agora a gente vai trabalhar para deixar essa imagem mais como eu posso falar ambient né você vê que dá para melhorar a iluminação os tons da imagem e tudo mais exposição bem pouquinho um 0,30 contraste hum deixar negativo Men 6 nunca aumente muito de alguma coisa tá nunca aumente muito de alguma coisa tá o muito aqui é é bem visível então bem pouquinho das coisas branco eu gosto de deixar 10

o preto -1 até - 15 as cores Qual é a cor principal aqui é o amarelo né o laranja aumentar um pouquinho deixar um 15 14 hum saturação diminui um pouco oh fica legal tá ficando legal efeito essa textura ela é muito legal dependendo da imagem que você for trabalhar mas dá um efeito muito bacana caridade eu vou deixar negativo o Viena o Viena é essa luz da lateral né branco ou preto em cima ou embaixo na esquerda ou na direita deixar um menos 20 desembaçar Não quero deixar Zerado e só quem gosta de deixar

granulado uns 10 Unos 15 né ele dá uma textura na pele tá vendo vou deixar uns cinco aqui e aí detalhes nitidez não mexo tem gente que gosta de deixar redução de ruído né que limpa o granulado né a imagem tiver bem feinha eu vou deixar um 15 aqui e só tá vendo Então essa é Nossa imagem antes e depois antes depois antes e depois certo perfeito vamos salvar essa imagem arquivo exportar salvar para o Web temos duas opções né Tem gente que salva aqui em JPEG direto do Photoshop tem gente que salva salvar como

cliquei cliquei Opa salvar uma cópia e salvar em wpp aqui direto eu não gosto de salvar e por w webp porque às vezes né dependendo dos tons É mais do das imagens tá eh distorce distorce Principalmente quando o cliente ele tem uma identidade visual definida cores definidas é o roxo o roxo é se você salva aqui pelo wpp ele muda um pouquinho tá ele fica quase um rosa sabe um roxo para rosa e E aí saiu totalmente da identidade visual do cliente Então dependendo das cores certo dependendo das cores salvar pelo wbp aqui do Photoshop

dá uma uma diferença sim nas cores já testei não tô falando isso por falar e testei e eu tive problemas com o roxo tá então eu deixei de usar el deu um pouquinho dor de cabeça e até descobrir qual era o motivo né Então prefiro salvar tudo por JPEG e depois converter com algum plugin ou com algum site que faça isso ok então exportar como JPEG qualidade 80 tá porque 80 para o 80 ele não é suficiente nem para deixar sua imagem ruim e nem para deixar sua imagem muito pesada você fica com a imagem

boa e relativamente leve vou criar uma pasta para essa página aqui de ADV vídeo colocar dois aqui colocar o título com um e vou salvar vem aqui no meu elemento clica aqui no meu quadradinho tipo de plano de fundo imagem e aí eu venho aqui na pasta que eu acabei de criar arrasto a nossa imagem e vou alá certo vem aqui em posição superior Centralizado tamanho cober coberto né sei porque tá cobertura e eu não gostei a logo de trás tá diferente da logo principal né Aí você tem duas opções se essa for a logo

do seu cliente mesmo e você não pode mudar de cor é você trabalha para deixar esse tom aqui igual a da logo do cliente É como essa logo aqui não é oficial tanto faz eu vou usar aqui o filtro do próprio elemento para deixar uma cor parecida né tá vendo e aí eu uso essa ferramenta aqui de gotas né uma extensão chamada color Zila eu venho aqui na logo no tom para fazer o botão com essa mesma cor e e embaixo é um pouquinho mais escuro eu vou deixar ponte desse botão a mesma do título

vou deixar em maiúsculo e vou deixar um pouco de espaçamento entre as letras e vou mudar o texto texto deixa eu ver se o chat GPT criou algum texto entrar em contato eu vou deixar entrar não tem aqui chamada para ação agendar consulta é isso então aqui a gente já tem a nossa primeira heiro né a nossa primeira sessão da nossa página ficou incrível né como ficou incrível eu vou criar uma sessão aqui em cima rapidinho e vou criar esse aqui com duas colunas também V inverter a coluna né deixar maior na esquerda menor na

direita posso clicar aqui na sessão vir aqui em avançado e clicar nessa seta que não deu certo só dá certo quando você seleciona é a coluna ou é para outro lado é pro outro lado certo e aqui Ah já sei vou ah não tem o elemento pro aí se fodeu Opa calma aí não tem elemento pro e usa lista para deixar aqui telefone contato BL tá bom deixa assim tá bonito tá show vamos fazer a parte de celular já aqui dessa primeira sessão então primeira sessão computador próxima sessão já de celular já finaliza já se

livra dela eh eu gosto de fazer finalizar todas as sessões já na hora eh eu só não faço isso quando é uma sessão interligada uma com a outra por exemplo deixa eu mostrar um aqui no meu portfólio hum Foi rápido né 20 minutos a gente fez teve o tempo de enrolação né aí ô não edita Não aqui ó por exemplo essa essa página aqui ah eu tenho entrar no link aqui dela mo viagens tá diferente eu eu mudei a a imagem de baixo aqui tá vendo eh você vê que é uma sessão ligada com a

outra né tem essa o tom de azul ali da para sessão de baixo T vendo essa árvore aqui Ela come um pouco da sessão de cima e já interliga com essa sessão de baixo então aqui foi uma imagem só eu fiz a sessão eu fiz essas três sessões de uma vez só no Photoshop Então essa sessão aqui tem 900 de altura essa de baixo tem 700 de altura eu somei 900 mais 700 e fiz uma imagem só e cortei no meio entendeu então quando eu vou fazer interligada com uma com a outra aí eu faço

as três de uma vez né lá no photoshop e aí já subo aqui no elemento e depois eu faço no celular quando é assim uma sessão ligada com a outra eu faço tudo no computador primeiro e depois no final do projeto que eu só faço no celular é quando é uma sessão só que não é interligada com nada abaixo aí eu gosto de fazer celular e computador já de uma vez tá então é isso eh aqui ele eu vou cortar um pouco ele né fazer um pouco de sombreamento aqui na parte de baixo dele aqui

né deixar luz preta aqui para fazer ele interligando com a sessão de baixo Então vou salvar aqui de novo eu já estou ficando cego com essa Lu na minha cara salvar aqui em dois e já vou fazer a versão de celular a versão de celular como a gente faz C aqui modo responsivo clico no celular o w né que é largura Eh aí é algo muito não tem uma regra uma regra Clara tá já vi gente trabalhando só com 390 Eu já vi gente trabalhando com 400 eu vi gente trabalhando com 420 e a maioria

faz escolhe o número baseado no seu celular tá no seu celular então você faz ajusta essa sessão aqui no na versão do celular e depois você vai vai vai lá no link no seu celular da página do cliente e vê como ficou né então Eh qual o problema disso às ve Às vezes o celular do seu cliente é mais é um pouco mais largo né Tipo o iPhone por exemplo Plus ele é mais largo que o seu ou às vezes o celular do seu cliente ele é um pouquinho mais fino e qual o problema disso

o problema disso que às vezes se o celular dele for mais fino por exemplo tá vendo que o texto ele fica diferente né ele se organiza de uma forma diferente né conforme ele vai se adaptando ao celular do do visitante né E às vezes você organizou o texto assim tá tá aqui ficou bonito né ficou bem preenchido no seu celular seu celular um pouco mais largo 420 eu baixar aqui aqui ó 420 aqui 420 né aqui no seu celular 420 ficou bonitão tal tal tal mas aí os cliente entrou lá no celular dele e o

celular dele como é mais fino ficou assim por exemplo ele vai reclamar falou ó não gostei da diagramação e do texto lá da tal tal tal tal é por conta disso tá então o que eu prefiro eu faço eu faço 400 né que é o meio-termo porque o limite entre aspas é 380 390 mínimo e o máximo 410 a 420 tá esse é o padrão que a maioria usa então eu trabalho no meio termo que é o 400 se você fizer tudo bonitinho assim aqui e ficar feio lá pro cliente pede para ele tirar um

print aí você vai ter noção do tamanho dos da tela dele né porque ele vai te mandar um print assim por exemplo aí você vai e organiza o texto para ficar bonito eh com essa largura entendeu então é isso eu eu faço no 400 o meu o meu celular é 390 Fica bonito no 390 já tive clientes que só ficou bonito no 420 E aí eu vou né para não ter dor de cabeça eu vou no do cliente falo manda print aí deixa eu ver como ficou E aí eu vejo como ficou o texto dele

lá tento deixar aqui o texto parecido com o print dele e aí eu venho aqui na ortografia e eu ajusto aqui para ficar bonito na largura do celular dele entendeu então vou deixar aqui 400 e certamente se você trabalha com isso você vai ter e as vezes vai aparecer algum cliente que vai reclamar da da organização né do tamanho da e tudo mais então para você ter menos dor de cabeça possível pede pro cliente mandar um print e trabalha em cima do print dele tá não faça o que é bonito no que você está vendo

no seu celular é o cliente faz que tá bonito no celular dele e se livra de dor de cabeça Ok então vou deixar aqui 19 porque se eu deixar menos assim em três linhas fica muito pequeno tá o mínimo o mínimo do tamanho da fonte que você deve usar é 15 para ter uma leitura boa né do texto você não pode trabalhar com menos de 15 essas palavras solitárias assim tipo esse justiça que só tá ele também é um é considerado um erro ortográfico então no mínimo duas palavras numa linha o que ficou melhor aqui

foi o 18 né Eu não gosto de deixar poucas palavras num linha só mas nesse texto eu não tenho muita opção ou eu teno trocar de fonte ou eu trabalho aqui no peso e às vezes tá vendo ó consigo ter uma diagramação melhor mas vou deixar assim eu vou tirar aqui o espaço da margem negativa e vou colocar novamente do zero o botão você v ficou em cima e embaixo né a gente da consulta ficou em duas linhas por qu por conta do preenchimento aqui que a gente colocou 90 pra esquerda 90 pra direita eu

vou zerar fazer do zero aqui pra versão mobile deixar uns 30 certo vou clicar aqui nesses pontilhado em layout vou diminuir a altura total tá vendo vou aqui em avançado em preenchimento eu vou colocar 20 deixa eu diminuir esse texto aqui tem gente que gosta de trabalhar com preenchimento 10 eu gosto de 20 né Eu acho que dá uma leveza né um espaço de respiro mais agradável aqui imgem também eu coloco você trabalho entre 300 250 350 Tá eu vou colocar 250 pro para esse botão já aparecer na primeira sessão né já aparecer lá na

primeira tela do celular então aqui a gente tem a nossa primeira sessão mobile e agora a gente vai trabalhar em cima da imagem mobile aí eu vou tirar o print Windows shift S como Já ensinei para vocês não vai aparecer aí para vocês porque quando eu faço isso a tela fica toda preta venho aqui no meu Photoshop novo largura vamos lá largura ela também é algo muito particular que é de teste tá você precisa testar e o recomendável se você for entrar em em blogs n em comunidades de web design é em torno de 390

360 a largura né largura da versão mobile o lado bom e o lado ruim disso do 300 300 a 400 a imagem é muito mais leve né ela vai deixar seu site mais leve mas perde muita qualidade então quando é como eu trabalho quando é um fundo só de cor só de luz eu trabalho com 400 de largura quando a imagem do xess de uma pessoa eu trabalho com 600 a 800 porque Quanto maior melhor a qualidade mais mais pesado é a imagem mas eu gosto de trabalhar com um pouquinho mais com quando é foto

de pessoas né para não perder tanta qualidade para não ficar aquela imagem pincelada né é com pixels muito muito visível então quanto menor pior a qualidade da imagem quanto maior é melhor a qualidade da imagem como aqui a gente tem a foto de uma pessoa eu vou colocar um 600 altura não mexe agora não vamos mexer agora pode deixar do jeito que tá então largura 600 vou dar um control V para colar o print que eu tirei vou dar um contrl t nesse print e vou arrastar ele até as laterais né para cobrir toda a

lateral da minha imagem dou um ok vem aqui na ferramenta de ces ele vai dar a opção de aumentar a minha imagem é o meu painel dou um ok certo então aqui a gente tem a primeira são da versão mobile eu posso eu posso pegar aqui a imagem que a gente criou no camera r e arrastar para essa sessão mobile diretamente eu vou dar um ok aqui eu vou deixar vou tirar a visibilidade dessa imagem pegar a régua aqui só para ter noção da onde começa o texto né para pro nosso exp não ficar não

tampar o texto né coloca a régua aqui em cima do texto Então eu sei que daqui para cima não tem texo tem a logo mas a logo pode fazer parte do cenário né então e aí eu abro aqui a minha imagem novamente deixa eu colocar uma a guia no meio número dois aqui para centralizar certinho esse rapaz aqui se baseando na linha do nariz e do lábio certo e aí eu crio uma nova camada com preto e eu vou colocar uma sombra aqui nele para interligar a sessão de baixo com a sessão de cima e

aqui a gente tem a nossa imagem da versão mobile Man a versão mobile fazer a versão mobile de uma página é a coisa mais rápida do mundo tá você você faz em 20 minutos a página toda 30 minutos tranquilamente Então o que mais demora mesmo é fazer a versão do computador clica aqui nas bolinhas estilo clica aqui na imagem e arrasta a imagem que eu acabei de fazer no photoshop e pronto to os erros eu acho que ele pode vir um pouquinho mais para baixo né E aí ele vai ficar maior e provavelmente melhor certo

então aqui eu vou aumentar ele vou apagar essa camada de luz que eu fiz fazer uma nova daqui para cima ó e aí você vai ajustando aí conforme então aqui aqui a gente já tem a nossa primeira sessão né opa opa já temos nossa página do nosso Mystery ó top hein gostei gostei é isso já temos a primeira sessão mobile mobile você pode fazer uma imagem tá só para ver se o mobile aí fica critério seu eu gosto de usar depende muito tá aqui nesse caso ficou legal é a versão do do Express do lado

que ele tá que ele tá usando a imagem do computador né aqui ficou legal eu só iria ajustar aqui no eh ortografia né ortografia aqui o texto bonitinho três linhas então eu já deixarei assim se você quiser fazer uma imagem própria pro o tablet a mesma coisa que fazer pro mobile tá você pode fazer uma imagem para cada dispositivo então aqui já tem a nossa primeira sessão computador tablet calma aí que eu ajustei aqui o texto ele bugou aqui certo também pode mexer aqui na altura do texto ó tudo mais então aqui a gente já

tem a nossa página já pronto para rodar mano pronto para rodar na versão computador celular tablet já tá funcionando e agora é fazer as próximas sessões esse vídeo vai ter parte dois tá então essa aqui é a parte um eh a gente demorou uma horinha para fazer essa primeira sessão porque a gente ficou procurando imagens esperando o CS CSL instalar e tudo mais e e a próximas a parte dois ela vai ser muito mais rápida né porque a parte mais demorada assim visualmente falando é sempre da primeira sessão né Então as outras partes é mais

tranquila então vai ter a parte dois é link na Bill vai aparecer aqui o c para você da parte dois vai lá e bora para cima qualquer coisa me chama no Instagram Me chama no WhatsApp tem todos os meus link aí embaixo compre e o seu acesso a du go Vip se se você quiser essa hospedagem tem o link aqui embaixo com desconto também se você quiser o elemento pro é adquirindo lá o a proposta comercial você ganha o elemento pro também se você quiser fazer seu orçamento da sua página é só clicar no link

do meu WhatsApp aí abaixo também e faça seu orçamento e é isso tá a minha intenção aqui é ensinar vocês totalmente do zero a fazer página e tudo mais eu não vendo curso eh eu não vendo nada que não seja o meu serviço tá bom então fica aqui minha eterna gratidão por você ter ficado até aqui deixa seu like me segue lá no Instagram e é isso tá a próxima página eu conto no próximo vídeo fechou fui