Creare una landing page visivamente attraente un tempo significava assumere sviluppatori o imparare a programmare. Ma ora, con l'integrazione di ChatGPT e Gemini nel Page Builder di Selldone, non è più così. Questo nuovo flusso di lavoro potenziato dall'intelligenza artificiale consente a chiunque—indipendentemente dall'esperienza tecnica—di trasformare un'immagine semplice, uno schizzo, o anche un'idea grezza in una sezione bellissima e completamente reattiva per il loro negozio online o landing page. Tutto viene fatto in modo da funzionare istantaneamente all'interno dell'ecosistema Selldone, senza necessità di codifica manuale.
Che tu stia costruendo un brand personale o gestendo un'attività online, questo metodo rende facile lanciare pagine moderne e rifinite in pochi minuti.
Dal Concetto al Componente in Minuti
Mettiamo caso che ti imbatti in un design che ti piace. Forse si tratta di una vetrina di prodotti su un altro sito web, un banner di marketing che hai creato in Canva, o anche solo uno screenshot che hai salvato. Non devi capire come codificarlo o da dove iniziare. Semplicemente carica l'immagine o descrivi il layout, e chiedi a ChatGPT (utilizzando il plugin Selldone) o Gemini di convertirlo in una sezione di landing page. L'IA comprende sia il formato tecnico di Selldone che la struttura dei componenti dinamici Vue utilizzati nella piattaforma. Riceverai un blocco di codice pronto per essere copiato e incollato che si inserisce direttamente nel Page Builder di Selldone. Questa sezione includerà:
Tutti i testi e le intestazioni
Immagini e link
Pulsanti, font e colori
Funzionalità dinamiche come card prodotto o testimonianze
Molto importante, sarà automaticamente reattiva su desktop, tablet e mobile.
Un Processo Semplice per Risultati Potenti
Per aggiungere questa sezione alla tua pagina Selldone, segui questi passaggi:
Carica o descrivi la tua idea di design a ChatGPT o Gemini.
Chiedi un componente Vue compatibile con il Page Builder di Selldone.
Copia il codice generato.
Nel Page Builder di Selldone, trascina e rilascia l'elemento Codice nella landing page.
Consiglio: Dal tuo desktop, carica l'immagine del design che preferisci su ChatGPT. Insieme all'immagine, fornisci una spiegazione dettagliata per aiutare a generare un componente più preciso e minimizzare le revisioni future.
Esempio di Prompt:
La tua nuova sezione è live, completamente stilizzata e pronta per il mobile. Ora puoi personalizzarla attraverso il pannello di proprietà o tornare all'IA per richiedere modifiche—sia che si tratti di adattare un layout, cambiare colori, aggiungere funzionalità, o sostituire testi.
Prompt Consigliato per i Migliori Risultati
Per aiutare l'IA a comprendere esattamente cosa ti serve, consigliamo di utilizzare questo prompt:
Si prega di generare un componente Vue reattivo per il Page Builder di Selldone in base a questa immagine o descrizione. Tutti i testi, pulsanti, immagini, colori e font devono essere definiti all'interno dell'oggetto proprietà. Il componente deve seguire gli standard di Vuetify 3, essere reattivo su tutti i dispositivi e rispettare le regole di Selldone inclusi nessun tag autochiudente. Se applicabile, includere schede prodotto, stelle di valutazione e pulsanti di azione. Per tutti i testi e le schede e pulsanti, si prega di aggiungere color picker visivo, dimensione del carattere, peso del carattere e raggio.
Puoi riutilizzare questo prompt ogni volta che vuoi creare o regolare una sezione. Assicura che il codice venga generato in modo pulito e allineato con i requisiti di Selldone.
Completamente Personalizzabile, Completamente Scalabile
Una volta che la tua sezione è in atto, non sei limitato a ciò con cui hai iniziato. Puoi chiedere a ChatGPT o Gemini di cambiare qualsiasi cosa:
Sostituire o spostare un'immagine
Aggiornare titoli e sottotitoli
Aggiungere nuovi pulsanti, slider, testimonianze o banner
Regolare stili e dimensioni dei testi
Modificare spaziatura e layout per un look diverso
Puoi continuare ad espandere la pagina con nuove sezioni. Non c'è limite al numero di componenti che puoi aggiungere, e ognuno di essi sarà costruito sulla stessa struttura affidabile e flessibile. Ogni elemento è modificabile. I colori possono essere cambiati utilizzando selettori visivi e le immagini possono essere sostituite o caricate facilmente. L'esperienza è progettata per essere intuitiva, anche se non hai mai utilizzato un page builder prima d'ora.
Errori Possibili
Errore #1
Se incontri errori dopo aver incollato il codice nel builder di Selldone (come mostrato nell'immagine sotto), chiedi semplicemente a ChatGPT o Gemini di aiutarti a risolverli.
Gli strumenti risponderanno automaticamente e inizieranno a correggere il codice per te.
My Chat with Gemini and its Answer to the Error
Errore #2
Se copi e incolli il codice nella scheda HTML, la sezione verrà visualizzata come vuota:
Come puoi vedere, ho inserito per errore il codice nella scheda HTML, cosa che non avrei dovuto fare.
Errore #3
A volte, quando richiedi l'aggiunta di uno slider, un carosello o una barra di scorrimento a una sezione, potresti notare elementi indesiderati come punti extra, trattini o pulsanti freccia che appaiono fuori dalla sezione. Questo di solito accade perché ChatGPT ha usato MDI (Material Design Icons) anziché le necessarie Google Font Material Icons. Per risolvere questo, assicurati di chiedere a ChatGPT di usare solo le Material Icons ufficiali di Google.
Prima di Iniziare, Leggi Questi Consigli:
A volte, dopo la risposta dello strumento, potresti aver bisogno di chiedere di scrivere il codice completo. Se le modifiche sono minori e il codice originale è lungo, potrebbe preferire darti istruzioni per sostituire linee specifiche invece di riscrivere l'intero blocco.
È consigliato iniziare una nuova conversazione con ChatGPT Selldone per ogni nuova sezione. Continuare da una sessione precedente potrebbe indurre lo strumento ad applicare istruzioni vecchie non pertinenti al tuo nuovo componente.
A volte, ChatGPT può fornire un input nelle proprietà del componente Selldone per inserire un URL di immagine, ma la tua immagine è memorizzata localmente sul tuo computer. In tal caso, chiedi a ChatGPT di definire l'elemento (ad esempio, un carosello o uno slider) come un oggetto, così potrai caricare immagini direttamente invece di utilizzare URL.
Se un'immagine contiene molti elementi visivi, puoi semplicemente caricarla su ChatGPT e chiedere una descrizione. Poi, copia quella descrizione e usala come prompt per chiedere a ChatGPT di generare un componente. Questo approccio spesso porta a risultati migliori e più accurati.
Perché è Importante
Con questo flusso di lavoro, chiunque può passare da un concetto visivo a una sezione di landing reattiva e pronta per la produzione in pochi minuti. Non c'è più bisogno di aspettare gli sviluppatori o lottare con i builder di layout. Non è necessario imparare Vue, CSS, o il design responsivo. Tutto ciò che genera l'IA è già ottimizzato per apparire bene su tutti i dispositivi. Non devi preoccuparti di rompere il layout, ridimensionare immagini, o scrivere regole di stile. Le sezioni seguono standard rigorosi basati sul linguaggio di design di Selldone e sulle migliori pratiche. Trascorrerai più tempo a creare e meno tempo a risolvere problemi.
Provalo Tu Stesso Oggi
Iniziare è semplice. Scegli una sezione che desideri creare—che sia ispirata da un altro sito web, uno schizzo, o un volantino prodotto—e descrivila a ChatGPT o Gemini utilizzando il prompt consigliato. Riceverai il codice, lo incollerai in Selldone, e la tua landing page prenderà vita.
È veloce. È semplice. Ed è aperto. Non c'è limite alla creatività, e nessun tetto a quanto lontano puoi arrivare. Con l'IA e Selldone, costruire pagine web potenti e belle è ora semplice come descrivere ciò che vuoi.
Add Comment
