MATERIAL RICO

CLAUDE DESIGN: Crie LANDING PAGES de ALTA CONVERSÃO (Do zero ao Publicado)

48 horas depois do Cloud Design lançar, eu criei coisas incríveis e é realmente impressionante a facilidade de usar essa ferramenta e a qualidade das coisas que ela cria pra gente. É realmente muito útil. E aqui eu vou te mostrar o que as pessoas param caminho, né?

O que voce vai aprender

• Lembre-se de entrar lá na nossa comunidade gratuita de cloud, onde eu tô compartilhando várias dicas, como essa, inclusive os prompts que eu utilizo, que facilitam e melhoram muito os resultados.
• 48 horas depois do Cloud Design lançar, eu criei coisas incríveis e é realmente impressionante a facilidade de usar essa ferramenta e a qualidade das coisas que ela cria pra gente.
• Você vai copiar esse resultado final e colocar aqui dentro do cloud design, que vai mais ou menos aqui 118 linhas, depende de quantas coisas tem na sua página, e clicar em criar.
• Vou criar também outros modelos, uma lógica de landing page, um link para você colocar na bill, direcionando paraas suas landing pages, tudo muito rápido, direto ao ponto.
• Por exemplo, eu vou pegar aqui, por exemplo, eu quero pegar essa esse background aqui, eu clico nele, venho aqui em open e aí eu copio o prompt ou copio o código, né?

Muita gente te ensina a criar página, landing page, te vende aquelas magias, mas ninguém te ensina de fato a colocar no A. Aqui nós vamos criar uma landing page do zero.

Vou criar também outros modelos, uma lógica de landing page, um link para você colocar na bill, direcionando paraas suas landing pages, tudo muito rápido, direto ao ponto. E vou te mostrar como colocar isso no A para de fato funcionar e ser útil para você. E se você já usa o cloud ou vai começar a usar, eu criei uma comunidade gratuita onde eu tô compartilhando lá como que eu tô usando o cloud, inclusive com aulas, tá?

O que voce precisa saber

No primeiro link da descrição, não perde tempo, já entra, porque que eu postei no vídeo anterior, já lotou, tive que criar outra. Então, garante a sua vaga lá, porque tá muito legal o conteúdo. E com o nosso cloud design aberto, eu vou utilizar esse modelo de protótipo.

Vou colocar aqui o nome landing page. No caso aqui serão três landing pages.

Eu vou fazer uma com aquele estilo link tree para colocar na bill. E aí terão dois banners.

Como aplicar isso na pratica

Cada um desses banners vai levar para uma página. Então vou clicar aqui em create e eu não vou passar aqui ajustando todos os processos porque o cloud tá muito poderoso. Você joga um prompt só e já sai com a página inteira completa.

E como eu gosto de gerar essas páginas, eu gosto de antes, a gente sabe, tem que ter uma boa cópia. Não interessa se a sua página é linda, maravilhosa, se a cópia é ruim, de nada adianta, não vai ter conversão. Então eu gosto de utilizar esse prompt aqui.

Esse é um promp de um agente que vai construir uma cópia baseada em livros, baseada em referências. Então o que que você vai fazer?

Beneficios principais

Você vai pegar esse prompt que eu vou disponibilizar lá no grupo, tá? Você vai copiar no seu cloud ou no chat GPT. O chat GPT também tá muito bom para COP, tá?

Chat GPT já foi muito fraco, mas hoje também é muito bom. Depende das assinaturas que você tem, acredito que seja no cloud. Por que o resultado desse prompt é tão bom?

Porque ele te faz perguntas antes de gerar. Então ele vai te guiando. Aqui você vai responder tudo sobre o seu produto.

Dicas importantes

Você vai responder qual o público alvo, qual o serviço, qual a oferta, os diferenciais, a objeção, o tom de voz. E isso aqui é para dar um direcionamento para IA.

a gente sabe que depois quando ela escreve a cópia, ela melhora muito as coisas que a gente fala, ela traz muitas informações melhores que ajudam na conversão. Depois você vai ter um resultado como esse, um prompt estruturado com cada uma das sessões, tá? Eh, com todos os passos.

E aí, o que que você faz como adicional? Você só pede aqui pro cloud adicionar um design system pra sua landing page. Então, ele vai criar um design system que vai guiar agora o nosso cloud design.

Resultados esperados

E no final das contas, você vai ter aqui todas essas informações. E o que que você vai fazer?

Você vai copiar esse resultado final e colocar aqui dentro do cloud design, que vai mais ou menos aqui 118 linhas, depende de quantas coisas tem na sua página, e clicar em criar. E esse é o resultado. Eu já deixei pronto, né, que ele demora um pouquinho para ser feito, mas é impressionante colocar pra gente ver na aba completa.

Olha o resultado desse dessa página. Ele colocou aqui um gráfico, né? Esse gráfico, a primeira vez que você acessa a página, ele se forma, mas o design que o cloud design faz, repara, né?

Essa caixinha desce enquanto a pessoa rola a página. Tem aqui, você passa o mouse, tem algumas animações e o que eu gosto, tá? Se você fosse fazer antigamente uma página como essa, você teria que dar muitas indicações paraa IA sobre hierarquia de fontes, hierarquia de leitura para ela configurar cada uma das fontes, fonte H1, H2.

Aqui o o que é bom, o que me impressiona a percepção da IA em já trazer uma página completamente legível, uma página completamente organizada, sendo que isso não necessariamente estava no meu prompt porque não estava, tava copia e e o direcionamento de cor, estilo de fonte, enfim, tem muitas coisas a mais que aí agrega, que esse Opus 4.7 agrega, que assim fazem cada vez mais diminuir a necessidade de você contratar um designer para criar uma página para você, tá? Claro que um designer ele vai ter uma percepção melhor. Não vou desvalorizar, né, os designers, até porque eu sou um designer, mas isso aqui facilita muito trabalho e eu tenho aqui toda a minha página pronta.

E essa é só uma das páginas que nós vamos utilizar. Eu também fiz aquele mesmo processo de gerar o prompt, fazer as respostas e aqui eu criei uma página para um gestor de a. Repare que essa página tem outra configuração, né?

Eu pedi para que a fonte fosse uma fonte moderna e sem serifa. Assim não fica essa fonte que ele ele gosta de utilizar, né? Essa fonte aqui com serifa meio e mais suave, né?

é uma fonte informação mais suave. Aqui eu pedi uma página com eh a coloração roxa, fundo preto, pedi para ele adicionar gráficos na página, tá, pessoal? Isso aqui é algo que eu percebi que altera muito o resultado.

Você pedir ilustrações que vão deixar as explicações dinâmicas para aprender as pessoas. Esse detalhinho muda completamente a sua página. Você sai de uma página que é só blocos de texto para uma página muito mais organizada.

Então, olha só a qualidade dessa página. colocou aqui um gráfico de adoção de a valor capturado.

Isso aqui a ideia é ser uma página de prestação de serviço. Então é uma empresa que quer contratar um profissional para ser um gestor de A.

E aqui tem todas as qualificações, os resultados, o que enche muito os olhos dos empresários, que é a porcentagem de horas que você vai ganhar de produtividade, o custo que você vai ter, o aumento da qualidade. Tem aqui uma explicação o que acontece na semana um da consultoria, semana dois, semana três e aqui um tira dúvidas. Nem coloquei aqui um botão de CTA, mas olha que página linda essa página aqui.

Que página bem organizada e que ficou muito bacana. Se a gente colocar no apresentação aqui, ó, em tab, olha como ficou bacana, né, a produção dessa página. E você pode agregar, ir agregando mais informações nessa página, por exemplo, utilizando ferramentas como essa.

Dentro dessa ferramenta aqui, 21.dev, você consegue encontrar aqui, por exemplo, ó, backgrounds, tudo em HTML, ou seja, não vai pesar na sua página. na sua página vai ficar muito potente. Você consegue colocar aqui backgrounds, tem botões, bordas.

Por exemplo, eu vou pegar aqui, por exemplo, eu quero pegar essa esse background aqui, eu clico nele, venho aqui em open e aí eu copio o prompt ou copio o código, né? ou cola o código.

No fim das contas, se você copiar aqui o código e colocar dentro do cloud design, ele já vai aplicar isso. Você só tem que direcionar aplique esse background no fundo da Hero.

Por exemplo, eu copio aqui o código, aplique paleta de cor roxa e colo aqui dentro e envio. Pronto, ele já aplicou ali no fundo.

Se a gente for ver aqui justamente na parte da hero aquele aquela animação, ó. Se eu colocar aqui em tab, já tem aqui a animação da nossa hero em HTML, pesando muito pouco. Então você pode utilizar também esse site aqui como referência.

Olha só o que eu te mostrei até aqui, eu acho que já vale o seu like. Já deixou o like, já se inscreveu no canal, porque conteúdos como esse aqui fora, aqui do lado, você tem que pagar 997 para aprender.

E aqui você aprende direto ao ponto e sem enrolação. E eu também criei a página do Link Tree.

Então esse Link Tree vai ser o que eu vou colocar na minha bill. A pessoa vai clicar na minha bi, vai cair nessa página e ao clicar nessa página ela vai para do Monjaro. E ao clicar nesse aqui, ela vai pra página do Thiago gestor de á, Thago Pro.

Ah, o que que tem a ver, Monjaro, com com gestão de A? É só um exemplo que eu usei aqui aleatório, mas muitas pessoas costumam ter isso, né?

O link do Instagram na bio ter mais de um produto ou ter mais de um serviço que é direcionar as pessoas para cada um deles. Então isso aqui já resolve muita coisa.

E para criar esse link tree, que que eu fiz? Eu mandei a logo em PNG do Monjar Club. Mandei essa imagem minha e mandei também a headline que é para tá nesse banner.

Mandei aqui embaixo também a a o logo do Thiago Pro e indiquei a paleta de cor de cada um dos banners e o link que a pessoa vai ser encaminhada ao clicar na imagem. E para você fazer isso é simples assim.

Ao clicar no banner Monjaro, encaminhe a pessoa para o link ww.mjaro.com.br. Então ao clicar aqui, a pessoa vai ser encaminhada para esse link e isso já vai estar dentro dos nossos arquivos.

Agora, como nós vamos colocar essas páginas no ar? Nós vamos exportar o HTML delas.

Então, segue esses passos que eles são muito importantes. Clica aqui em export, exportar em HTML e ele vai gerar esse arquivo aqui para você.

Aí é só clicar aqui em cima desse arquivo e aqui nós temos um detalhe importante. Cria uma nova pasta no seu computador se você vai salvar em downloads, documentos, nomeando isso só para você se organizar. Então, vou colocar aqui, ó, link da Bio e vou salvar.

E esse arquivo que você vai salvar, que você acabou de baixar esse HTML, é importante que você coloque index, porque ele vai salvar index.html. Esse nome é o nome, quando a pessoa entra num domínio, o servidor busca esse documento, index.html para carregar a página. Por isso que nós precisamos criar cada uma dessas pastas, porque senão a gente na hora de subir pode se confundir e subir o index errado.

Agora é só repetir o processo em todas as páginas. Vou exportar esse aqui também, HTML.

O mesmo nessa página, exportar em HTML. Clico em download. Vou criar uma nova pasta escrito Monjaro e mudar aqui o nome para index, tudo minúsculo e salvar.

E para colocar esses sites no A, que é o nosso objetivo, eu vou utilizar a Host Gator. Dos planos que eu recomendo, você vai ter que contratar uma hospedagem se você já não tiver, eu recomendo essa hospedagem do plano M, por outras hospedagens que são mais baratas, é R$ 1 de diferença, você só cria um site. No plano M você cria 60 sites.

Então é indiscutível que o plano M é melhor, né? É R$ 11 por mês se você assinar 3 anos.

No link que tá aqui embaixo, você tem desconto, tá? Se você procurar o link direto no Google e tal, não vai dar esses mesmos preços que estão aparecendo aqui. No caso aqui tem um mês, 6 meses, um ano, eu vou pegar aqui um ano e eu já ganhei dois domínios grátis.

Aqui faz o login com Google, seleciona aqui a forma de pagamento, tá? Eu vou pagar pelo Pix, mas tem como fazer pelo cartão de crédito, mas eu vou pagar aqui no Pix.

Realizar pagamento, ler o QR code. Depois de pagar, você vai receber os dados de acesso ao seu painel do cliente no e-mail.

Dentro do portal do cliente, entrando em hospedagens, já vai estar aqui a nossa hospedagem. Como eu não vinculei nenhum domínio ainda, tá sem domínio.

Agora eu venho aqui em domínios e vou contratar um novo domínio. Thiago, vê se tem thagopro.com. Pronto, eu configurei o meu domínio Thiago Pro.

Agora é só clicar aqui em domínios. Configurar domínio.

Ele vai dar aqui a opção onde a gente quer hospedar esse domínio, né? Eu vou escolher a plataforma da HostGator e aqui tem os planos que você já contratou. Eu contratei o plano M desse aqui.

Então vou configurar. Pronto, domínio configurado. Agora o que que eu vou fazer?

Eu vou voltar aqui em hospedagens e servidores. Seleciona a hospedagem que você contratou e clica em cenel e não se assusta, tá? Pode parecer assustador.

Isso aqui é muito simples. É só clicar nos botões que eu falar. Gerenciador de arquivos.

Aqui a gente tá entrando dentro da nossa hospedagem. Pensa numa biblioteca, numa casa.

Quando você entra numa casa, não tem a cadeira, não tem o sofá. Imagina que cada uma dessas coisas é uma pasta. Quem tá sentado na mesa, se quando você clicar lá na pasta mesa, vai ter: "Ah, o Thiago tá sentado na mesa." A mesma coisa aqui.

Cada uma das coisas que tá dentro do nosso servidor tem uma pasta. Repare, dentro desse servidor tem dois domínios. Thaagolemos.

XYZ e Thago Pro. pcom.br. O que é domínio, Thaago?

Tudo que temcom.br.xyz vai ser o você vai saber exatamente o que tem aí dentro, porque na hora de vincular o domínio, lembra que a gente vinculou a nossa hospedagem? Então você já sabe onde que tá.

Eu vou clicar aqui no Thiago Pro. Eu quero colocar dentro dessa página.

E lembre-se, quando a pessoa clicar nessa página, ela vai ela vai clicar a partir do link da minha bio. Ela vai cair na página que tem os dois banners. Se tiver alguma coisa dentro dessa pasta aqui, tá?

É só clicar sobre ela e vir aqui em excluir. Provavelmente vai ter um default.html se o domínio é novo, isso aparece. Agora eu vou clicar em carregar.

Ele vai abrir essa nova página. Vou selecionar o arquivo e vou pegar aqui o link da Bill.

Entrei na pasta link da Bill e vou subir o index HTML do link da Bill. Pronto.

Agora é só clicar aqui em voltar e ele já vai estar aqui o index. Se eu acessar o site thagopro.com.br, nós já temos aqui o nosso site no ar.

Simples assim, só esse espacinho simples. Eu criei tudo dentro do cloud design, contratei aqui uma hospedagem, um domínio e copiei um arquivo e tá no ar.

Ô, isso aqui vale seu like. Isso aqui você ainda não deixou o like.

Pronto, o nosso link da Bill já tá funcionando. Agora eu preciso das outras duas páginas.

E o que que eu vou fazer? Eu vou pegar esse thagolemos.com.br, colocar uma barra no domínio e colocar agora Monjaro e depois gestorear.

Então, a pessoa no mesmo domínio, ela consegue ter diferentes páginas nesse domínio. Você poderia colocar para cada um domínio. Então, se eu vier aqui no Thiago Lemos X Y Z, eu coloco aqui outro arquivo index, mas eu vou colocar tudo dentro do Thiago Pro para ficar organizado.

E como eu faço isso? Dentro aqui do domínio Thiago Pro, eu vou criar uma nova pasta e o nome dessa pasta vai ser Monjaro e criar um new folder. Então, quando a pessoa acessar thagolem.com.br/monjaro, br/mjaro.

O servidor vai buscar essa pasta dentro do domínio. Agora eu clico, Agora eu clico sobre a pasta e vou subir o index do Monjaro aqui dentro.

Aqui dentro agora eu venho em carregar, selecionar arquivo index html e agora eu vou voltar. Já subiu.

Então se eu acessar a página thago.com.br/monjaro, ele vai me encaminhar pra landing page que a gente que a gente criou e funcionando perfeitamente. Repara a animação aqui.

Então ele consegue exportar. Então ele exporta todos os detalhes da página. Agora falta só a página do gestor de A.

Então, voltando aqui em Thiago Lemos Pro, eu vou criar uma nova pasta, vou colocar gestor e a criar essa pasta, clicar nessa gestor e subir o índex. Vim e carregar dentro da pasta gestor A, eu pego o arquivo index. Salvo.

Agora volto aqui e se eu acessar a página ao invés da barra depois do barra que tem o Monjar teu gestor e a ele já aparece a página lindona aqui na minha frente. E o link tree tá funcionando. Clicou aqui no banner de Monjaro, ele encaminha pra página do Monjaro.

Clicou aqui no Thiago Pro e tá no ar a página lindona com essa animação no fundo. Todos esses detalhes, gráficos funcionais, eu passo o mouse em todo lugar e funciona.

E é página com performance, tá? Essa aqui é a página do Monjar, olha só, no GT Matrix, performance 98%, estrutura 100%, fácil de carregar.

Você fez com um prompt seguindo toda essa aula aqui, conseguiu colocar ela no A, independente se você entende de A ou não, se você é web designer ou não, olha o poder que a inteligência artificial coloca na nossa mão. Se você chegou até aqui, conseguiu seguir todos os passos e ainda não clicou no botão de se inscrever, olha o que que você tava perdendo até agora.

E realmente essa página aqui ficou show demais. E esse detalhe que a gente pegou ali no 21 atrás, deu aquele, né, deu aquele brilho a mais à página.

Nesse vídeo era isso que eu queria te ensinar. Espero que você tenha conseguido seguir todos os passos. Senão, todos os links úteis estarão na descrição.

Lembre-se de entrar lá na nossa comunidade gratuita de cloud, onde eu tô compartilhando várias dicas, como essa, inclusive os prompts que eu utilizo, que facilitam e melhoram muito os resultados. Muito obrigado por ter chegado até aqui e até a próxima.

Gostou do conteudo?

Compartilhe com seus amigos e siga o blog para mais artigos.

Fonte: Assistir vídeo original  |  Baseado na transcrição original