Criar Páginas de Destino Vendedoras – Guia Passo a Passo

Introdução

Já imaginou poder desenhar seções bonitas e responsivas de páginas de destino — sem escrever uma única linha de código? Com o Plugin Selldone no ChatGPT, esse sonho vira realidade.

Neste guia, você aprenderá passo a passo como ir de uma imagem de inspiração até uma seção ativa e totalmente responsiva dentro do Page Builder da Selldone — tudo gerado por IA.

Ao final, você terá uma seção com design profissional pronta para publicar no seu site Selldone.

💡 Observação: o Page Builder da Selldone é construído sobre Vuetify (Vue 3) — portanto, cada seção gerada pelo plugin é totalmente compatível com o moderno e responsivo framework de front-end da Selldone.

Passo 1 – Prepare sua Inspiração

Para começar, encontre um design de seção que te inspire. Neste tutorial, usamos uma seção da página inicial do Mercado Livre como referência — um layout limpo e moderno que destaca produtos com imagens fortes e chamadas para ação claras.

Tire uma captura de tela dessa seção do Mercado Livre; usaremos essa imagem como referência visual no ChatGPT ao gerar nosso design personalizado com o Plugin Selldone.

💡 Dica: Escolha uma seção com layout estruturado e visualmente equilibrado. Quanto mais claro o design, melhor o ChatGPT conseguirá analisar e reproduzir.

⚠️ Aviso de Uso Justo: A captura de tela do Mercado Livre usada aqui é apenas para fins educativos e ilustrativos como inspiração de design. Todas as marcas, imagens e layouts pertencem ao Mercado Livre — este tutorial não é afiliado nem endossado pelo Mercado Livre.

Passo 2 – Abra o ChatGPT com o Plugin Selldone

Certifique-se de que o Plugin Selldone esteja habilitado no ChatGPT:

1. Vá em ChatGPT → Settings → Beta Features → Plugins e habilite plugins.
2. Visite o Plugin Store e instale o Plugin Selldone.
3. Inicie um novo chat com o plugin ativo.

Você deverá ver o logo da Selldone ao lado da caixa de chat — isso significa que está pronto para usar

Passo 3 – Envie sua Imagem de Referência

Envie sua captura de tela e escreva um prompt claro, por exemplo:

Do menu superior, verifique se você está usando a versão mais recente do ChatGPT.

“Quero construir uma seção parecida com esta imagem, com tamanhos de fonte responsivos, cores de fonte e dos cards personalizáveis, e cards que possam ser circulares ou quadrados com cantos arredondados.”

O ChatGPT (com Selldone) analisará a imagem e gerará código baseado em Vuetify (Vue 3) totalmente compatível com o Page Builder da Selldone.

Crie uma Nova Landing Page na Selldone

Antes de adicionar sua seção personalizada, vamos primeiro criar uma landing page vazia dentro da Selldone para usá-la.

1. No menu superior da loja, navegue para Pages → Landing → Add New Landing.
   
2. Nesta tela, você verá três templates de landing page por padrão.
3. Clique em qualquer um deles para selecioná-lo e entrar no Designer de Landing Page. Dentro do designer, abra o painel lateral esquerdo, encontre o elemento “Code” e arraste-o para a área do Page Builder. Esse elemento “Code” é onde você irá colar ou importar a seção gerada pelo ChatGPT usando o Plugin Selldone.
4. Clique dentro da caixa de Code para ativar a barra de ferramentas — você verá uma barra superior que usaremos frequentemente.

-O primeiro ícone (<>) abre o Editor de Código, onde você pode colar ou editar o código HTML e baseado em Vue gerado pelo ChatGPT.-O segundo ícone abre Propriedades, onde você pode ajustar o layout, espaçamento e configurações visuais da seção.

Passo 4 – Copie e Cole o Código Inicial do ChatGPT no Editor

Versão Possivelmente Incorreta

Agora você precisa copiar a primeira versão do código que o ChatGPT gerou para você.
Como pode ver na captura, o resultado pode ficar diferente da sua imagem de referência — isso significa que o ChatGPT produziu uma versão incorreta da seção. Isso é completamente normal, então não se preocupe.Para corrigir, reenvie a imagem de referência e peça novamente, por exemplo, dizendo:

“Foque na imagem que enviei acima. Estou enviando novamente.”

Agora o ChatGPT recomeçará e gerará um novo código. Essa versão não será necessariamente a final, pois você pode querer adicionar mais solicitações e ajustes.Agora, copie o código e cole-o no editor de código e pressione Apply:

Nota Importante: O modo padrão do editor de código é HTML. Você deve mudar para a opção Vue — caso contrário, você terá um resultado em branco.

Agora você verá a primeira versão correta da seção gerada pelo ChatGPT. Pressione o segundo item na barra de ferramentas (conforme mencionado anteriormente) para abrir o menu de Propriedades para ajustes. Como você pode ver, há muitas configurações disponíveis para ajudar a adaptar essa seção ao seu negócio.

Opção RESET TO DEFAULT:

Às vezes, quando você cola uma versão atualizada do código, pode não ver mudanças visíveis. Isso pode acontecer se as edições foram fundamentais. Nesses casos, será necessário clicar em Reset to Default. Observe que usar essa opção removerá todas as suas configurações personalizadas, incluindo textos novos, cores, tamanhos de fonte e até imagens enviadas — é basicamente um reset de fábrica 🙂.Portanto, use essa opção apenas quando suas alterações não estiverem sendo aplicadas corretamente.

Passo 5 – Ajuste a Seção

O ChatGPT, com base no que aprendeu de outros usuários que usaram esse método para construir seções, agora gera layouts mais completos — então você não precisa pedir cada elemento um por um. Esse é o verdadeiro benefício de conversar mais com ele: quanto mais longa e clara for sua conversa, melhor o ChatGPT entende suas preferências de design e entrega resultados mais completos e precisos.O código gerado por padrão já é bastante responsivo, mas você ainda pode ajustar detalhes como tamanhos e pesos de fonte, alturas e larguras de seções ou cards e outros elementos visuais conforme sua preferência.
Aqui, por exemplo, você pode configurar a Selldone para exibir 8 cards por linha em telas desktop grandes, 4 cards em tablets e 2 cards em dispositivos móveis.
Vamos ver como o ChatGPT interpreta e aplica esses ajustes — talvez precisemos fazer mais algumas edições ou solicitações nos próximos passos.Neste caso, você deve alterar a Largura Máxima da Seção para 1400px para um layout melhor. Você também pode ajustar os cards por linha para 8, 4 e 2 nas versões desktop, tablet e mobile, respectivamente.
Para refinar o espaçamento, tente reduzir o Cards Gap (Desktop) para cerca de 12px. Além disso, você pode diminuir a altura dos cards de 180px para 160px, ou ajustar o tamanho das imagens para se encaixar no seu design.

É importante lembrar que você pode personalizar visualmente testando essas configurações — brinque com os números e encontre o que melhor combina com seu estilo.

Para visualizar melhor o resultado, você pode enviar suas próprias imagens. Recomendamos usar imagens com fundo transparente, assim a opção Card Background Color se aplica de forma uniforme — deixando sua seção mais limpa e profissional.Depois de enviar suas imagens, editar os textos e finalizar tudo, clique no botão Salvar — ou pressione Ctrl + S no Windows para salvar instantaneamente.
Agora é hora de abrir a Página ao Vivo e ver sua seção em ação.
Para visualizá-la ao vivo, você pode usar a opção Live Preview ou clicar no botão ao lado que exibe o nome da sua landing page — isso abrirá a página na visualização de comprador, exatamente como seus visitantes a verão. No entanto, não recomendo usar o Live Preview para checar a versão final, pois ele não reflete completamente a responsividade da página em diferentes dispositivos — algo que discutiremos mais adiante.Este é o resultado do código. Agora precisamos testá-lo em diferentes tamanhos de tela para garantir que tudo funciona corretamente.
Para abrir o Ferramentas de Desenvolvedor (Web Developer Tools) em navegadores Windows, pressione F12.
Essa ferramenta permite pré-visualizar a página em vários tamanhos de tela — sem a necessidade de testar separadamente em celular, tablet, notebook ou outros dispositivos.Agora, no menu superior, selecione Responsive para pré-visualizar como sua seção fica em diferentes tamanhos de tela.Como pode ver, a versão mobile fica limpa e totalmente responsiva.Na visualização tablet — especificamente no iPad Pro de 11 polegadas — nossas configurações (4 cards por linha no tablet) podem não estar sendo aplicadas, e está mostrando apenas 2. Precisamos pedir ao ChatGPT para corrigir esse problema e recodificar.

Passo 6 – Itere e Aperfeiçoe

Não pare na primeira versão — é aqui que a criatividade acontece. Você pode continuar conversando com o ChatGPT para ajustar detalhes como:

• Tornar a seção responsiva em todas as telas.
• Adicionar animação no hover.
• Usar botões com gradiente.

Cada rodada atualiza sua seção instantaneamente.

💡 Dica de Pro: Quanto mais você conversar e descrever o que quer, melhor o ChatGPT entende seu estilo de design. Com o tempo, ele aprende suas preferências e produz resultados mais precisos e de maior qualidade.
Aqui, você deve explicar claramente o problema para ajudar o ChatGPT a entendê-lo melhor.
Lembre-se, ele não lê sua mente — você precisa descrever o problema em detalhes, assim como neste exemplo de comentário:

Selecionei 4 Cards por linha no tamanho Tablet, mas mostra 2 Cards por linha no iPad Pro de 11 polegadas. Corrija. Eu selecionei 2 por linha para mobile.

Quando o ChatGPT responder à sua solicitação, às vezes ele fornece apenas as modificações específicas de código que você precisa substituir ou adicionar manualmente, como na imagem abaixo. Para facilitar, simplesmente peça: “Envie o código completo.”Frequentemente, ao final da mensagem, o ChatGPT recomenda configurações adicionais que você pode ter esquecido — como adicionar links aos cards, o que é essencial para nossa seção.Quase pronto! Copie e cole o código atualizado no editor, salve suas alterações e visualize em Modo Ao Vivo para garantir que tudo está correto.
Como pode ver, agora exibe perfeitamente 4 cards por linha na versão tablet.

Passo 7 – Finalize o Código e Salve a Seção

Quando seu design estiver pronto, é uma boa ideia fornecer ao ChatGPT uma descrição detalhada da estrutura e dos requisitos da seção. Use o prompt a seguir para gerar o código final:

Adicione um bloco de descrição conceitual acima do