Crea Landing Page di Vendita – Guida Passo Passo

Introduzione

Hai mai desiderato progettare sezioni di landing page belle e responsive — senza scrivere una sola riga di codice? Con il Plugin Selldone in ChatGPT quel sogno diventa realtà.

In questa guida imparerai, passo dopo passo, come passare da un'immagine di riferimento a una sezione live e completamente responsive all'interno del Page Builder di Selldone — tutto alimentato dall'AI.

Alla fine avrai una sezione progettata professionalmente pronta per essere pubblicata sul tuo sito Selldone.

💡 Nota: il Page Builder di Selldone è costruito su Vuetify (Vue 3) — quindi ogni sezione generata dal plugin è perfettamente compatibile con il moderno framework front-end responsive di Selldone.

Step 1 – Prepara la tua fonte di ispirazione

Per cominciare, trova una sezione dal design che ti ispiri. In questo tutorial utilizziamo una sezione dalla homepage di Subito come riferimento — un layout pulito e moderno che mette in evidenza prodotti in vetrina con immagini forti e call-to-action chiare.

Fai uno screenshot di quella sezione di Subito; lo useremo come riferimento visivo in ChatGPT quando genereremo il nostro design personalizzato con il Plugin Selldone.

💡 Suggerimento: Scegli una sezione con un layout strutturato e visivamente bilanciato. Più il design è chiaro, meglio ChatGPT riesce ad analizzarlo e riprodurlo.

⚠️ Avviso Fair-Use: Lo screenshot di Subito mostrato qui è usato esclusivamente a scopo didattico e illustrativo come fonte di ispirazione per il design. Tutti i marchi, le immagini e i layout appartengono a Subito S.r.l. — questo tutorial non è affiliato né approvato da Subito.

Step 2 – Apri ChatGPT con il Plugin Selldone

Assicurati di avere il Plugin Selldone abilitato in ChatGPT:

1. Vai su ChatGPT → Impostazioni → Beta Features → Plugins e abilita i plugin.
2. Visita il Plugin Store e installa il Plugin Selldone.
3. Avvia una nuova chat con il plugin attivo.

Dovresti vedere il logo Selldone accanto alla casella della chat — questo significa che è pronto all'uso.

Step 3 – Carica il tuo design di riferimento

Carica il tuo screenshot e scrivi un prompt chiaro, per esempio:

Dalla barra in alto, assicurati di usare l'ultima versione di ChatGPT.

“Voglio costruire una sezione come questa immagine, con dimensioni di font responsive, colori dei font e delle card personalizzabili, e card che possano essere circolari o quadrate con angoli arrotondati.”

ChatGPT (con Selldone) analizzerà l'immagine e genererà codice basato su Vuetify (Vue 3) totalmente compatibile con il Page Builder di Selldone.

Crea una Nuova Landing Page in Selldone

Prima di aggiungere la tua sezione personalizzata, creiamo una landing page vuota dentro Selldone da usare come contenitore.

1. Dal menu principale del negozio, vai su Pagine → Landing → Aggiungi Nuova Landing.
   
2. In questa schermata vedrai tre template di landing page di default.
3. Clicca su uno di essi per selezionarlo e accedere al Landing Page Designer. All'interno del designer, apri il pannello laterale sinistro, trova l'elemento “Code” e trascinalo nell'area del Page Builder. Questo elemento “Code” è il punto dove incollerai o importerai la sezione generata da ChatGPT tramite il Plugin Selldone.
4. Clicca all'interno della casella Code per attivare la toolbar — vedrai apparire una barra degli strumenti in alto che useremo spesso.

-La prima icona (<>) apre l'Editor di Codice, dove puoi incollare o modificare l'HTML e il codice basato su Vue generato da ChatGPT.-La seconda icona apre Proprietà, dove puoi regolare il layout della sezione, gli spazi e le impostazioni visive.

Step 4 – Copia e incolla il codice iniziale di ChatGPT nell'Editor

Versione Potenzialmente Errata

Ora devi copiare la prima versione del codice che ChatGPT ha generato per te.
Come puoi vedere nello screenshot, il risultato può apparire diverso dall'immagine di riferimento — questo significa che ChatGPT ha prodotto una versione non corretta della sezione. È perfettamente normale, quindi non preoccuparti.Per sistemare la cosa, reinvia l'immagine di riferimento e richiedi nuovamente, per esempio dicendo:

“Concentrati sull'immagine che ho inviato sopra. La invio di nuovo.”

Ora ChatGPT ricomincerà e genererà un nuovo codice. Anche questa versione potrebbe non essere definitiva, perché potresti voler aggiungere altre richieste e aggiustamenti.Ora, copia il codice e incollalo nell'editor di codice, poi premi Applica:

Nota importante: La modalità predefinita dell'editor di codice è HTML. Devi passare all'opzione Vue — altrimenti otterrai un risultato vuoto.

Ora vedi la prima versione corretta della sezione generata da ChatGPT. Premi il secondo elemento nella toolbar (come citato prima) per aprire il menu Proprietà per ulteriori regolazioni. Come puoi vedere, ci sono molte impostazioni disponibili per adattare questa sezione al tuo business.

Opzione RESET TO DEFAULT:

A volte, quando incolli una versione aggiornata del codice, potresti non vedere cambiamenti visibili. Questo può succedere se le modifiche sono fondamentali. In questi casi dovrai cliccare l'opzione Reset to Default. Nota che usare questa opzione rimuoverà tutte le impostazioni personalizzate, inclusi nuovi testi, colori, dimensioni dei font e persino immagini caricate — è praticamente un reset di fabbrica 🙂.Quindi, usa questa opzione solo quando le modifiche non vengono applicate correttamente.

Step 5 – Regola la sezione

ChatGPT, basandosi su ciò che ha imparato da altri utenti che hanno usato questo metodo per creare sezioni, ora genera layout più completi — quindi non è necessario richiedere ogni singolo elemento uno per uno. Questo è il vero vantaggio di continuare la conversazione: più lunga e chiara è la chat, più ChatGPT capisce le tue preferenze di design e restituisce risultati completi e accurati.Il codice generato di default è già abbastanza responsive, ma puoi comunque regolare i dettagli come dimensioni dei font, pesi dei font, altezze o larghezze di sezioni e card, e altri elementi visivi in base alle tue preferenze.
Ad esempio, qui puoi impostare Selldone per mostrare 8 card per riga su schermi desktop grandi, 4 card su tablet e 2 card su dispositivi mobili.
Vediamo come ChatGPT interpreta e applica queste regolazioni — potrebbero servire ancora un paio di modifiche o richieste nei passaggi successivi.In questo caso, dovresti cambiare la Section Max Width a 1400px per un layout migliore. Puoi anche regolare il numero di card per riga a 8, 4 e 2 rispettivamente per desktop, tablet e mobile.
Per rifinire gli spazi, prova a ridurre il Cards Gap (Desktop) a circa 12px. Inoltre, puoi ridurre l'altezza delle card da 180px a 160px, o adeguare la dimensione delle immagini per farle combaciare col design.

È importante ricordare che puoi personalizzare facilmente l'aspetto sperimentando con queste impostazioni — prova vari numeri e trova ciò che meglio si adatta al tuo stile.

Per visualizzare meglio il risultato, puoi caricare le tue immagini. Consigliamo di usare immagini con sfondo trasparente, così l'opzione Colore di Sfondo della Card si applicherà in modo uniforme a tutte — dando alla tua sezione un aspetto più pulito e professionale.Dopo aver caricato le immagini, modificato i testi e completato tutto, clicca sul pulsante Salva — oppure premi Ctrl + S su Windows per salvare immediatamente.
Ora è il momento di aprire la Pagina Live e vedere la tua sezione in azione.
Per visualizzarla live, puoi usare l'opzione Live Preview o cliccare il pulsante accanto che mostra il nome della tua landing — questo aprirà la pagina in visualizzazione acquirente, proprio come la vedranno i tuoi visitatori. Tuttavia, non consiglio di affidarsi solo al Live Preview per verificare la versione finale, perché non riflette completamente la responsività della pagina su diversi dispositivi — questo lo approfondiremo più avanti.Questo è il risultato del codice. Ora dobbiamo testarlo su diverse dimensioni di schermo per assicurarci che tutto funzioni correttamente.
Per aprire gli Strumenti per sviluppatori Web nei browser Windows, premi F12.
Questo strumento ti permette di visualizzare la pagina su varie dimensioni di schermo — senza dover testare separatamente su mobile, tablet, laptop o altri dispositivi.Ora, dal menu in alto, seleziona Responsive per vedere come appare la tua sezione su diverse dimensioni di schermo.Come puoi vedere, la versione mobile è pulita e completamente responsive.Nella visualizzazione tablet — specificamente su iPad Pro 11-inch — le nostre impostazioni (4 card per riga su tablet) non vengono applicate e vengono mostrate solo 2. Dobbiamo chiedere a ChatGPT di correggere questo problema e ricodificare.

Step 6 – Itera e affina

Non fermarti alla prima versione — è qui che avviene la vera creatività. Puoi continuare a chattare con ChatGPT per regolare dettagli come:

• Rendere la sezione responsive su tutti i dispositivi.
• Aggiungere animazioni al passaggio del mouse (hover).
• Usare pulsanti con gradiente.

Ogni iterazione aggiorna la tua sezione all'istante.

💡 Suggerimento professionale: più interagisci e descrivi ciò che vuoi, meglio ChatGPT capisce il tuo stile di design. Col tempo impara le tue preferenze e produce risultati più accurati e di qualità superiore.
Qui dovresti spiegare chiaramente il problema per aiutare ChatGPT a comprenderlo meglio.
Ricorda, non può leggere nella tua mente — devi descrivere il problema in dettaglio, proprio come in questo esempio di commento:

Ho selezionato 4 card da mostrare in una riga per la versione tablet ma su iPad Pro 11 inch ne mostra 2. Sistemalo. Per mobile ho scelto 2 per riga.

Quando ChatGPT risponde alla tua richiesta, talvolta fornisce solo le modifiche specifiche al codice che devi sostituire o aggiungere manualmente, come nell'immagine sotto. Per semplificare, chiedigli semplicemente di “Inviare il codice completo”.Spesso, alla fine del suo messaggio, ChatGPT suggerisce impostazioni aggiuntive che potresti aver trascurato — come in questo caso, dove suggerisce di aggiungere link alle card, cosa essenziale per la nostra sezione.Quasi fatto! Copia e incolla il codice aggiornato nell'editor, salva le modifiche e visualizza in Live Mode per assicurarti che tutto appaia corretto.
Come puoi vedere, ora mostra perfettamente 4 card per riga nella versione tablet.

Step 7 – Finalizza il codice e salva la sezione

Quando il tuo design è pronto, è una buona idea fornire a ChatGPT una descrizione dettagliata della struttura e dei requisiti della sezione. Usa questo prompt per generare il codice finale:

Aggiungi un blocco descrittivo concettuale sopra il