Como Criar uma LANDING PAGE PROFISSIONAL em 2025 | Passo a Passo

31.92k views3700 WordsCopy TextShare
Rafa Voss | Lovable IA
🔴 Vagas Abertas para o Curso LovablePro: https://lovablepro.com.br 🔴 Quer ajuda com seu projeto? A...
Video Transcript:
Hoje você vai finalmente aprender a criar uma landing page profissional completa utilizando a inteligência artificial. A gente vai fazer o processo por completo, desde a configuração do domínio da sua landing page até o desenvolvimento com a plataforma fenomenal chamada Loable. E o objetivo é que até o final desse vídeo você vai aprender a criar uma landing page perfeita, independente se você vai utilizar para vender algum curso ou para vender algum produto nela.
Sem mais delongas, que você que já me segue aqui há um tempo sabe que eu não gosto de enrolar, vamos direto pro nosso vídeo. Seja muito bem-vindo ao canal. Meu nome é Rafa Voz, eu sou um fascinado por inteligência artificial e mais especificamente na criação de sites, como que a gente vai est fazendo hoje, ou aplicativos, enfim, aqui no canal tem muito conteúdo onde eu utilizo a inteligência artificial do lavable, que vocês vão ver que é muito poderosa para criar vários tipos de soluções diferentes.
E hoje a gente vai estar utilizando, como vocês viram aí na introdução do vídeo e também no título, uma landing page linda e com alto nível de conversão, com uma facilidade absurda, sem precisar criar algum tipo de código ou algo do tipo. Então já deixa o seu like, se inscreve aqui no canal, isso vai me ajudar muito. Como você pode ver, eu ainda não sou muito grande e eu tô tentando crescer de uma forma super legítima, entregando muito conteúdo de graça para você.
Para quem já tá me acompanhando o tempo, sabe que eu não gosto de enrolar. Então vamos direto ao nosso assunto. Hoje a gente vai est então criando uma landing page que vocês viram na introdução do vídeo que ficou linda.
Só que pra gente ter um resultado muito positivo, eu resolvi separar esse tutorial em três partes. Nessa primeira parte a gente vai est criando um domínio pro nosso site. Ou seja, a gente vai est criando aquele www.
omedosite. com. br.
br. Exatamente isso que a gente vai estar criando e também hospedando ele em uma plataforma que seja de confiança, que nunca te deixe na mão e o site fique fora do ar. Para isso, a gente vai estar utilizando a HostGator porque é, na minha opinião, a principal e melhor plataforma, mais fácil plataforma de você gerir o seu domínio e sua hospedagem, além de que você vai ter um super desconto se você utilizar o link que eu separei para você aqui embaixo.
Na segunda parte, a gente vai est criando de fato a nossa landing page em poucos minutos. você vai ver que é muito fácil. É muito melhor do que você utilizar código ou até melhor do que você utilizar WordPress ou Elementor, porque apenas com algumas frases você vai ver o resultado que a gente vai ter.
É impressionante. Fica até o final do vídeo que você vai ver que eu tô certo. E por fim, a gente vai est então conectando o domínio que a gente registrou lá atrás com o nosso site para que quando a pessoa digitar lá em cima o domínio apareça de fato o nosso site.
Então vamos lá, sem mais delongas, vamos direto ao nosso primeiro passo, que é a nossa configuração do nosso site. A landing page que a gente vai est criando vai ser uma landing page focada em um curso de finanças. Mas como eu falei lá no início desse vídeo, você pode utilizar o mesmo raciocínio que eu tô fazendo aqui para criar uma land page porque você queira, seja para um curso ou para um produto físico, enfim, qualquer tipo de landing page que você quiser fazer, é só você seguir todo esse passo a passo que a gente vai estar vendo aqui.
Então, a primeira coisa que eu tenho que fazer é registrar o domínio desse nosso site, dessa nossa landing page. Antes de eu de fato comprar, eu preciso saber se alguém tá utilizando esse domínio. E para isso eu digito aqui e clico aqui em pesquisar.
Como você pode ver, já tem um domínio em uso chamado finançasdofuturo. com. br.
Mas finançasdfuturo. com sem a parte do ponbr tá disponível pra gente. Então é exatamente esse que a gente vai buscar adquirir aqui.
Então ele oferece essa proteção de domínio. Eu acho que é sempre legal, tá? Principalmente pra gente que não tem muito conhecimento em programação.
Eu acho que é bom sempre a gente estar o mais protegido possível eh quando a gente tá falando sobre domínio, né? porque isso pode causar um problema ainda maior pra gente lá na frente. Se você quiser ter um e-mail profissional aqui dentro da Rushgator, é só você clicar aqui em e-mail profissional também.
Eu aconselho você ter, mais uma vez eu não vou adquirir porque aqui eu tô só demonstrando a parte do domínio pra gente vincular com o nosso site depois com a nossa landing page. Compra finalizada com sucesso. A gente só gastou R$ 60 e isso permite com que a gente tenha um domínio durante um ano inteiro.
E lembra que para você garantir esse desconto máximo aqui dentro da RGator, você tem que criar sua compra e também que fazer a compra a partir do link que eu vou deixar aqui embaixo na descrição desse vídeo. Por enquanto aqui na Hoshegator a gente já fez todo o trabalho necessário e agora a gente tem que ir lá pra plataforma do Lable pra gente desenvolver de fato a nossa landing page. O link para essa plataforma também vai est aqui na descrição.
E mais uma vez eu digo que você tem que criar sua conta utilizando ele, porque é só assim você vai garantir seu desconto. Ela é uma plataforma que é de graça. Inclusive, tudo que eu vou estar fazendo aqui, você também pode fazer utilizando a plataforma 100% gratuita, só que ela também tem uma versão paga que eu aconselho para aqueles que querem ter um pouco mais de liberdade na construção do seu site.
Como eu falei anteriormente, se você ainda não conhece a plataforma do Lovable, ela é uma plataforma assim como o Chat GPT, só que o Lovable é a plataforma que vem mudando muito o mercado e assustando a maioria das pessoas que programam, porque com poucas palavras você consegue desenvolver qualquer tipo de aplicação que você queira. Só que antes de a gente só pedir para ele desenvolver alguma coisa, eu sempre gosto de ir no chat GPT e pedir para o chat GPT criar uma prompt, ou seja, um pedido, né, personalizado ali no formato que seja melhor para o lavable entender, para aí sim eu mandar pro Lable gerar algum tipo de solução pra gente. Então é exatamente isso que eu pedi pro chatt que eu vou disponibilizar aqui embaixo na descrição para você, caso você queira copiar e colar.
Mas através desse prompt você consegue gerar qualquer tipo de landing page que você queira. Nesse caso, os dados que estão em aspas, né, são dados que são personalizados pro que eu tô querendo construir. Caso você queira, por exemplo, criar uma landaning page pro seu curso de maquiagem, então você muda aqui essa parte e coloca é makeup course, né, que é curso de maquiagem em inglês.
Então são essas palavras aqui que estão em aspas que você pode variar para criar sua landing page mais personalizada. Então eu vou mandar esse prompt para ele e vamos ver o que que ele gera pra gente. Então tá aqui, ele criou o nosso prompt, é só a gente clicar em copiar e enviar lá na plataforma do Lable e vocês vão ver o poder dessa inteligência artificial.
Agora, antes de você ficar muito surpreso, eu já te adianto que aqui no canal eu venho falando só sobre essa plataforma do Lovable. Nesse momento a gente tá criando uma landing page, mas eu ensino você a criar aplicativos, criar sites empresariais ou até sites, né, que são aqueles sistemas tipo Netflix, onde você pode oferecer um serviço e faturar através de assinaturas dos seus clientes. Enfim, as possibilidades são infinitas.
Até agora, como você viu, eu mandei só um prompt, que foi aquele que a gente gerou lá no chat GPT. Por dia, você tem a possibilidade de mandar para ele cinco prompts de graça, sem ele te cobrar nada. Então eu vou fazer ainda mais quatro alterações sem eu ter que usar R$ 1 do meu dinheiro.
Depois que você utilizar essas cinco, amanhã no caso, você vai ter mais cinco promptes de graça para você. Então você não precisa gastar nada. Caso você queira ter mais promptes por dia e também algumas pequenas funcionalidades, eu aconselho que você adquira pelo menos o plano inicial aqui do Loveb.
Olha que a gente conseguiu então gerar com apenas um prompt. Eu sei que isso daqui não vai tá ideal, mas isso já é impressionante, porque olha quanto tempo você demoraria, seja programando ou até você utilizando o Elementor ou depress para fazer esse tipo de página aqui. Eu sei que o site tá em inglês e essa vai ser a nossa primeira alteração.
A gente vai passar tudo isso para português. A gente consegue ver que ele também criou alguns tipos de argumentos para aquele curso, né? Ele já criou aqui, né, os benefícios de você utilizar e e adquirir, na verdade, esse curso aqui.
Ele cria inclusive alguns testemunhos que não são reais, né? Mas aí depois você pode adicionar os testemunhos reais, ou seja, aquele feedback dos seus clientes. E aqui a gente tem a nossa oferta que a gente pediu também e o rodapé.
Então agora chega o momento que a gente vai começar a editar. Isso daqui foi a primeira criação do site. Para editar é só a gente voltar lá no Lable e pedir para ele alguma coisa.
Nesse caso, a gente vai pedir eh traduza toda a página para português. Agora a gente pode, né, uma vez que a gente já tem tudo aqui, né, eh, desenvolvido, eu acho que já é interessante a gente começar a falar em português mesmo. Acaba que é mais confortável pra gente escrever em português.
E o que eu acho é interessante é a gente passar aquela ideia inicial primeiro, que tem que ser bem precisa do nosso site, do que que a gente tá buscando em inglês, tá bom? Então, vamos ver o que que ele tá desenvolvendo pra gente aqui, né? né?
Eu pedi para ele passar tudo isso daqui para português. Então, ele traduziu aqui toda a página pra gente em português, né? Já tá tudo adaptado.
E agora a gente vai pedir para ele para ele adicionar duas coisas de uma vez só. Eu quero que ele adicione um logo aqui em cima de finanças 4. 0 e vou pedir para ele colocar um vídeo aqui de introdução, né, onde eu vou estar explicando melhor sobre o meu curso Finanças 4.
0. Então, foi exatamente isso que eu pedi. Crie um logo com efeito gradiente escrito finanças 4.
0. Vou até colocar em achas para ele não se confundir. E coloque no topo esquerdo do da página do CAD.
E o segundo pedi para ele criar no Hero, né, que é essa página, essa parte inicial aqui, esse título inicial, um local de vídeo introdutório, né? Ou seja, vai ter um videozinho aqui sobre o curso. E aí eu passei para ele o link do meu vídeo que tá hospedado lá no YouTube, tá?
Eu poderia ter enviado de fato o vídeo para ele, pedido para ele armazenar, só que para isso a gente precisaria de uma base de dados conectada. Eu já fiz um vídeo que eu vou deixar o card aqui em cima para você, onde eu explico melhor como que a gente pode vincular esse site com uma base de dados. Mas como hoje é um vídeo focado na landing page, a gente não vai estar fazendo isso.
E eu acho mais fácil da gente colocar o link do YouTube. Olha só, pessoal, ele já criou então o nosso logo aqui em cima. Você vê que ele até melhorou aqui toda e todo o tamanho dos textos aqui, né, para encaixar melhor.
E aqui tá o nosso vídeo. Vou clicar nessa setinha aqui em cima, porque aí eu consigo abrir numa aba e visualizar isso tudo melhor. Então, tá aqui, olha como é que tá ficando o nosso site.
Tá ficando bem interessante já, né? E a gente já passou tudo isso para português, adicionou o logo, adicionou aqui também um vídeo. Para aqueles que estão tendo curiosidade, esse vídeo é o vídeo de introdução que eu utilizo lá na landing page do meu curso, que é um curso que eu tenho onde eu ensino essa plataforma do Lovable mais a fundo.
Então, se você gostou dessa plataforma que a gente está desenvolvendo aqui essa landing page e quiser criar não só uma landing page, mas também sites, aplicativos, enfim, tudo que você quiser, é só você clicar no link que vai est aqui embaixo do curso chamado Loable Pro, além de você também ganhar acesso a uma comunidade de outros alunos meus que também desenvolvem com Lovable. O link para essa plataforma vai est aqui embaixo também. Então, ficou super legal já aqui a nossa página, né?
A gente vê que tem alguns bugs, por exemplo, isso daqui não tá tão legal. Esse símbolo aqui eh dessa setinha tá praticamente em cima do nosso botão. Os botões eles não tão levando para lugar algum, ó.
Se clicar aqui não tá acontecendo nada. E paraa gente ajeitar isso, é só a gente voltar no lavable mais uma vez e pedir para ele que todos os botões dessa página levem a um link, ou seja, um link de pagamento ou algo do tipo. Então eu coloquei aqui, faça com que sempre que o usuário apertar o CTAs, ele seja direcionado à página de checkout do curso e coloquei aqui o link de checkout do meu curso.
Diz ele que ele fez aqui já a alteração. Então vamos conferir. Vamos clicar aqui agora em garanta a sua vaga.
E ele tá levando a gente para a página de checkout. E uma dica que eu já dou aqui para você é que você não necessariamente precisa ficar gastando uma prompt sempre que você quiser fazer uma alteração pequena. Por exemplo, se você quiser fazer que alteração?
Nesse texto aqui, né? Porque a frase tá escrito: "Aprenda estratégias comprovadas para gerenciar suas finanças". Vamos supor que eu queira colocar aprenda, estratégias comprovadas para gerenciar seu dinheiro e não suas finanças.
Então eu não preciso mandar para ele um prompt para ele fazer essa simples alteração. Eu posso só clicar aqui em edit, clicar aqui no texto que eu queira eh fazer alteração e olha só, ele vai abrir esse campo aqui em cima e aí eu posso só digitar e isso não conta como uma alteração de fato, ou seja, não conta como uma prompt gasta ali do seu dia da sua conta. Eu acho que você pegou a ideia, essa plataforma ela é infinitamente versátil, digamos assim, porque você pode modificar pro que você queira aqui dentro.
E eu tenho outros vídeos também aqui no canal onde eu mostro para você vários tipos de possibilidades de programação aqui dentro do Loable. Não é só um desenvolvimento simples. Aqui no canal, por exemplo, já venho ensinando vários tipos de funcionalidades que vocês podem colocar aqui como login.
Vocês podem criar um dashboard aqui dentro, enfim, vários tipos de possibilidades de desenvolvimento que você pode adicionar. Então, se você quiser aprender todas as funcionalidades possíveis aqui dentro da plataforma, que a gente não viu nenhum 1% ainda, é só você acompanhar aqui os outros vídeos desse canal. Só que agora a gente precisa ir pro nosso próximo passo, que é a gente registrar aquele domínio que a gente adquiriu lá na HostGator e fazer com que ele esteja linkado com esse site que a gente desenvolveu aqui.
Quando a gente clica aqui em cima em publish, a gente tem duas opções, ou publicar com esse domínio daqui ou então a gente publicar com o domínio personalizado, né, que é isso que a gente quer. Então a gente pode clicar aqui em custom domain. Só que dessa forma não é a forma ideal.
Por mais que esteja nativo essa forma dentro do Lovable, eu que tenho bastante experiência aqui dentro do lavable, eu já percebi que essa forma é a pior forma de você registrar um domínio dentro do seu Lel. O primeiro problema é que você não tem acesso ao código do seu site. O site fica simplesmente no lavable.
E caso o lavable, por exemplo, trave em algum momento, o seu site também vai travar e cair. Segundo problema é que quando você registra o seu domínio dessa forma, demora dias e até semanas para que ele de fato seja registrado e ele funcione normalmente ali com o domínio que você selecionou. E para isso, a alternativa que é mais antiga, mas é que melhor funciona, é você conectar a sua conta do Lovable com a conta do seu GitHub.
Para quem não sabe o que é GitHub, tem vários vídeos aí na internet explicando de fato o que que é o GitHub, né, onde é um repositório de projetos. Mas eu não vou entrar muito a fundo na explicação do GitHub. Caso você queira que eu traga um vídeo só de GitHub, eu posso trazer, mas eu acho que não tem tanta necessidade pra gente que não tem tanto foco assim em programação.
Mas é basicamente um local onde a gente vai colocar o nosso projeto aqui, todo o código do nosso projeto e vai salvar numa pasta, fazendo com que se o loveia falir e cair, a gente ainda tem ali o nosso projeto, nosso código bem estruturado. Para isso, então a gente vai clicar aqui em cima em GitHub e vai clicar em transferir projeto para o GitHub. Então, e logo em seguida ele vai abrir esse popup pra gente.
A gente clica em instalar e autorizar. Se você ainda não tem uma conta no GitHub, é só você criar. É muito simples, ele vai verificar só o seu e-mail e depois você vai estar nessa mesma etapa que eu tô aqui agora.
Depois que o nosso projeto já tiver instalado ali no nosso GitHub, a gente tem que vir no site chamado Netlify. E aqui a gente vai logar com a conta do GitHub que a gente acabou de criar. Aqui tem um site que eu já criei, mas para você provavelmente vai est zerado essa página.
Então, a gente clica aqui em adicionar novo site e clica em importar um projeto já existente. Clica aqui em GitHub, ele vai abrir aqui uma página de autorização e depois vão aparecer todos os projetos do GitHub que a gente tem. Exatamente esse projeto aqui chamado Finance Masterpiece, que foi criado há pouco tempo atrás, que é o projeto que a gente desenvolvemos lá no Lable.
Vamos clicar. Ele vai pedir um nome para esse nosso site. A gente coloca que é finanças 4.
0. E pronto, a gente não precisa configurar nada aqui embaixo, é só clicar em deploy. Pronto, ele fez o deploy.
E agora é a hora da gente vir aqui e conectar aquele domínio que a gente comprou lá na HostGator dentro do nosso Netlify. A gente clica aqui em domain managements, add a domain, ou seja, adicionar um domínio e adicionar um domínio que a gente já tem. Aqui a gente digita o nome do nosso domínio, exatamente como tá lá na Hostgator.
Então é finançasdfuturo. com detectar que isso é um domínio que já foi registrado. A gente clica em adicionar domínio.
Então agora que ele adicionou o nosso domínio, que é exatamente esse daqui, né? Finançasdfuturo. com, a gente clica em options e setup netlify DNS.
Clique em verificar, adicionar o domínio. Aqui ele vai pedir um dado de DNS records opcional. Você não precisa fazer isso, é só a gente continuar.
E agora esses quatro dados aqui precisam ser copiados e colocados lá na nossa Rushgator. Aqui no Rosgator a gente clica em configurar domínio, digita alterar plataforma, outra plataforma de hospedagem. E aqui a gente vai copiar e colar cada um daqueles endereços que ele mandou pra gente.
E pronto, já estão os quatro copiados aqui. Tá bom? Agora é só clicar em configurar.
Ele diz aqui que até em 24 horas esse site vai ser propagado e esse nosso link vai abrir para qualquer pessoa com aquele site que a gente desenvolveu lá no Lable. E a página já foi propagada tranquilamente, né? A gente tem aqui ainda esse bugzinho, mas eu não fiz questão de corrigir em nenhum momento, né?
Como eu falei, a gente pode trabalhar aqui sem parar. A ideia é para mostrar para você a facilidade e todo o processo, como é muito mais fácil do que você utilizar o programação ou então até o Elementor ou qualquer outra plataforma que seja no Code, mas não seja utilizando inteligência artificial. Gostou do vídeo?
Deixa seu like, se inscreve aqui no canal e se você quiser aprender um pouco mais sobre essa plataforma, não só para criar landing page, mas também sites que podem fazer você criar negócios. Qualquer ideia que você já teve na sua vida, mas não conseguiu colocar em prática porque você dependia de um programador, você agora pode executá-la utilizando o Lovable. E se você quer se manter atualizado sobre essa plataforma, é só você acompanhar os outros vídeos desse canal, além da opção também de você virar um Lable Pro e fazer parte lá da minha comunidade, onde ensino bem mais a fundo essa plataforma para você.
Os links para todos os sites que eu utilizei aqui vão estar aqui embaixo na descrição, incluindo também o link para esse meu curso completo de Lovable. E eu vou deixar aqui do lado para você mais um vídeo que pode te interessar dessa plataforma. M.
Related Videos
Como construir Landing Page de Alta Conversão - Do ZERO
23:50
Como construir Landing Page de Alta Conver...
Attekita Dev
6,816 views
Como criar uma LANDING PAGE do zero no FIGMA | Design + Implementação no Wordpress/Elementor
1:58:19
Como criar uma LANDING PAGE do zero no FIG...
Gabriel Juste
18,112 views
STEP BY STEP: HOW TO LAUNCH YOUR OWN APP IN MINUTES WITHOUT CODING [QUICK AND EASY]
12:16
STEP BY STEP: HOW TO LAUNCH YOUR OWN APP I...
Nerds de Negócios
66,306 views
CRIANDO um SAAS COMPLETO com o INTELIGÊNCIA ARTIFICIAL (Sem gastar muita prompt)
32:37
CRIANDO um SAAS COMPLETO com o INTELIGÊNCI...
Rafa Voss | Lovable IA
22,336 views
Como Criar uma LANDING PAGE Incrível em 2025 | Passo a Passo
1:13:18
Como Criar uma LANDING PAGE Incrível em 20...
Aprendendo Sites
49,263 views
Como Criar Landing Pages de Alta Conversão Usando IA
1:13:10
Como Criar Landing Pages de Alta Conversão...
Bruno Picinini
118,369 views
CRIE sua LOJA VIRTUAL com IA HOJE MESMO! [Passo a Passo do Zero]
22:39
CRIE sua LOJA VIRTUAL com IA HOJE MESMO! [...
Rafa Voss | Lovable IA
10,332 views
From Zero to Your First AI Agent in 25 Minutes (No Coding)
25:58
From Zero to Your First AI Agent in 25 Min...
Futurepedia
480,602 views
COMO CRIAR uma SUPER Landing Page / Site no Canva Grátis Passo a Passo
27:14
COMO CRIAR uma SUPER Landing Page / Site n...
Rob Boliver - Como usar o CANVA
97,048 views
N8N + WhatsApp GRÁTIS: Crie seu Agente de IA sem gastar NADA! (Tutorial fácil para iniciantes 2025)
13:02
N8N + WhatsApp GRÁTIS: Crie seu Agente de ...
Guilherme Lazarotto - Tecnologia & Automação
71,578 views
A INCRÍVEL atualização do LOVABLE 2.0 (MELHOR IA DE TODAS!)
12:15
A INCRÍVEL atualização do LOVABLE 2.0 (MEL...
Rafa Voss | Lovable IA
17,719 views
This AI can create your apps in seconds – Let’s test Replit
21:50
This AI can create your apps in seconds – ...
Léo Andrade
19,577 views
Como INTEGRAR seu LOVABLE com SUPABASE. (MUITO FÁCIL!)
17:50
Como INTEGRAR seu LOVABLE com SUPABASE. (M...
Rafa Voss | Lovable IA
18,085 views
Como construir Landing Page de Alta Conversão - Do ZERO
31:04
Como construir Landing Page de Alta Conver...
Mateus Dias
74,976 views
Crie um MICRO SAAS com IA em 13 MINUTOS ( MUITO FÁCIL! )
12:59
Crie um MICRO SAAS com IA em 13 MINUTOS ( ...
Rafa Voss | Lovable IA
57,060 views
5 ERROS GRAVES que você comete no LOVABLE (sem perceber!)
13:59
5 ERROS GRAVES que você comete no LOVABLE ...
Rafa Voss | Lovable IA
6,577 views
Em 10 minutos vou melhorar como você usa o Lovable.
10:13
Em 10 minutos vou melhorar como você usa o...
Rafa Voss | Lovable IA
9,231 views
14 Exemplos de aplicações e sites feitos em Replit e Lovable
25:47
14 Exemplos de aplicações e sites feitos e...
Elber Domingos | Impactus AI
10,580 views
O melhor prompt do ChatGPT que você vai usar em 2025
13:27
O melhor prompt do ChatGPT que você vai us...
Hayla Rodrigues
182,462 views
Tutorial Lovable: Configure Google Sign-In em seu APP (Passo a Passo)
10:51
Tutorial Lovable: Configure Google Sign-In...
Rafa Voss | Lovable IA
2,500 views
Copyright © 2025. Made with ♥ in London by YTScribe.com