Skapa säljande landningssektioner – Steg-för-steg-guide

Introduktion

Har du någon gång önskat att du kunde skapa vackra, responsiva landningssektioner — utan att skriva en enda rad kod? Med Selldone Plugin i ChatGPT blir den drömmen verklighet.

I den här guiden lär du dig steg för steg hur du går från en inspirationsbild till en live, fullt responsiv sektion i Selldone:s Page Builder — allt drivet av AI.

I slutet har du en proffsigt designad sektion redo att publiceras på din Selldone-webbplats.

💡 Obs: Selldone:s Page Builder är byggd på Vuetify (Vue 3) — så varje sektion som genereras av pluginet är helt kompatibel med Selldone:s moderna, responsiva frontend-ramverk.

Steg 1 – Förbered din inspirationsbild

Börja med att hitta en sektion som inspirerar dig. I detta exempel använder vi en sektion från Traderas startsida som referens — en ren, modern layout som visar utvalda produkter med kraftfulla bilder och tydliga uppmaningar till handling.

Ta en skärmdump av den Tradera-sektionen; vi kommer använda den som visuell referens i ChatGPT när vi genererar vår anpassade design med Selldone Plugin.

💡 Tips: Välj en sektion med en strukturerad och visuellt balanserad layout. Ju tydligare design, desto bättre kan ChatGPT analysera och återskapa den.

⚠️ Fair-Use-information: Skärmdumpen från Tradera som visas här används enbart i utbildnings- och illustrationssyfte som designinspiration. Alla varumärken, bilder och layouter tillhör Tradera — denna handledning är inte ansluten till eller godkänd av Tradera.

Steg 2 – Öppna ChatGPT med Selldone Plugin

Säkerställ att du har Selldone Plugin aktiverat i ChatGPT:

1. Gå till ChatGPT → Settings → Beta Features → Plugins och aktivera plugins.
2. Besök Plugin Store och installera Selldone Plugin.
3. Starta en ny chatt med pluginet aktivt.

Du bör se Selldone-logotypen bredvid din chattruta — det betyder att det är klart att användas.

Steg 3 – Ladda upp din referensdesign

Ladda upp din skärmdump och skriv en tydlig prompt, till exempel:

Från toppmenyn, se till att du använder den senaste versionen av ChatGPT.

“Jag vill bygga en sektion som denna bild, med responsiva teckenstorlekar, anpassningsbara typsnitt och kortfärger, samt kort som kan vara cirkulära eller rundade fyrkanter.”

ChatGPT (med Selldone) kommer analysera bilden och generera Vuetify (Vue 3)-baserad kod som är helt kompatibel med Selldone:s Page Builder.

Skapa en ny landningssida i Selldone

Innan du lägger till din anpassade sektion, låt oss först skapa en tom landningssida i Selldone att använda.

1. Från butikens toppmeny, navigera till Pages → Landing → Add New Landing.
   
2. På denna skärm ser du tre standardmallar för landningssidor.
3. Klicka på någon av dem för att välja och gå in i Landing Page Designer. Inne i designern, öppna vänsterpanel, hitta elementet “Code” och dra det till Page Builder-området. Detta “Code”-element är där du klistrar in eller importerar sektionen som genererats av ChatGPT med Selldone Plugin.
4. Klicka inuti Code-rutan för att aktivera verktygsfältet — du kommer se ett toppverktygsfält som vi kommer använda ofta.

- Det första ikonet (<>) öppnar Code Editor, där du kan klistra in eller redigera HTML- och Vue-baserad sektionkod genererad av ChatGPT.- Det andra ikonet öppnar Properties, där du kan justera sektionens layout, avstånd och visuella inställningar.

Steg 4 – Kopiera och klistra in ChatGPT:s initiala kod i editorn

Felaktig version kan uppstå

Nu behöver du kopiera den första versionen av koden som ChatGPT genererat åt dig.
Som du kan se i skärmdumpen kan resultatet se annorlunda ut än din referensbild — det betyder att ChatGPT kan ha producerat en felaktig version av sektionen. Detta är helt normalt, så oroa dig inte.För att åtgärda detta, skicka referensbilden igen och be den försöka på nytt, till exempel genom att skriva:

“Fokusera på bilden jag skickade ovan. Jag skickar den igen.”

Nu börjar ChatGPT om och genererar ny kod. Denna version kommer inte nödvändigtvis vara slutgiltig — du kommer troligen vilja göra fler önskemål och justeringar.Nu kopierar du koden och klistrar in den i code-editorn och trycker på Apply:

Viktigt: Standardläget i code-editorn är HTML. Du måste byta till Vue-alternativet — annars får du inget synligt resultat.

Nu ser du den första korrekta versionen av ChatGPT-genererade sektionen. Tryck på det andra verktygsobjektet i verktygsfältet (som nämnts tidigare) för att öppna Properties-menyn för justeringar. Som du ser finns många inställningar som hjälper dig anpassa sektionen efter din verksamhet.

RESET TO DEFAULT-alternativet:

Ibland, när du klistrar in en uppdaterad version av koden, ser du inga synliga ändringar. Detta kan hända om ändringarna är fundamentala. I sådana fall måste du klicka på Reset to Default-alternativet. Observera att detta kommer ta bort alla dina anpassade inställningar, inklusive nya texter, färger, typsnittsstorlekar och uppladdade bilder — det är i princip en fabriksåterställning 🙂.Använd detta alternativ bara när dina ändringar inte tillämpas korrekt.

Steg 5 – Justera sektionen

ChatGPT, baserat på vad den lärt sig från andra användare som använt denna metod för att bygga sektioner, genererar nu mer omfattande layouter — så du behöver inte begära varje element ett och ett. Det är den verkliga fördelen med att chatta mer: ju längre och tydligare din konversation, desto bättre förstår ChatGPT dina designpreferenser och levererar mer kompletta, korrekta resultat.Den genererade standardkoden är redan ganska responsiv, men du kan fortfarande finjustera detaljer såsom teckenstorlekar, typsnittsvikt, sektionens eller kortens höjder, bredder och andra visuella element efter dina preferenser.
Här kan du till exempel ställa in Selldone att visa 8 kort per rad på stora skärmar, 4 kort på surfplattor och 2 kort på mobiltelefoner.
Låt oss se hur ChatGPT tolkar och tillämpar dessa justeringar — vi kan behöva göra några fler redigeringar eller önskemål i nästa steg.I det här fallet bör du ändra Section Max Width till 1400px för bättre layout. Du kan också justera antalet kort per rad till 8, 4 och 2 för desktop, tablet och mobil respektive.
För att förfina avstånden, prova att minska Cards Gap (Desktop) till cirka 12px. Dessutom kan du sänka kortens höjd från 180px till 160px, eller justera bildstorleken för att passa din design.

Kom ihåg att du enkelt kan anpassa utseendet genom att experimentera med dessa inställningar — lek med siffrorna tills du hittar det som passar din stil bäst.

För att bättre visualisera resultatet kan du ladda upp egna bilder. Vi rekommenderar att använda bilder med transparent bakgrund, så att Card Background Color-alternativet appliceras jämnt på dem alla — vilket ger din sektion ett renare och mer professionellt utseende.Efter att ha laddat upp dina bilder, redigerat texterna och slutfört allt, klicka på Spara-knappen — eller tryck Ctrl + S på Windows för att spara direkt.
Nu är det dags att öppna Live-sidan och se din sektion i aktion.
För att visa den live kan du använda Live Preview-alternativet eller klicka på knappen bredvid som visar din landningssidas namn — detta öppnar sidan i köparvy, precis som dina besökare ser den. Dock rekommenderar jag inte att använda Live Preview för att kontrollera slutversionen, eftersom den inte fullt ut visar sidans responsivitet över olika enheter — något vi går in på mer nedan.Detta är resultatet av koden. Nu behöver vi testa den i olika skärmstorlekar för att säkerställa att allt fungerar som det ska.
För att öppna Web Developer Tools i Windows-webbläsare, tryck F12.
Detta verktyg låter dig förhandsvisa sidan i olika skärmstorlekar — utan att behöva testa den separat på mobil, surfplatta, laptop eller andra enheter.Nu, från toppmenyn, välj Responsive för att förhandsgranska hur din sektion ser ut på olika skärmstorlekar.Som du ser, ser mobilversionen ren och fullt responsiv ut.I tablet-läget — specifikt på iPad Pro 11-tum — tillämpas inte våra inställningar (4 kort per rad på tablet), utan den visar endast 2. Vi behöver be ChatGPT att åtgärda detta och recoda.

Steg 6 – Iterera och förbättra

Stanna inte vid första versionen — här sker den verkliga kreativiteten. Du kan fortsätta chatta med ChatGPT för att justera detaljer som:

• Göra sektionen responsiv på alla skärmar.
• Lägg till hover-animationer.
• Använd gradientknappar.

Varje omgång uppdaterar din sektion direkt.

💡 Proffstips: Ju mer du beskriver vad du vill ha, desto bättre förstår ChatGPT din designstil. Med tiden lär den sig dina preferenser och levererar mer precisa, högkvalitativa resultat.
Förklara tydligt problemet för att hjälpa ChatGPT förstå bättre.
Kom ihåg att den inte kan läsa dina tankar — du måste beskriva problemet i detalj, precis som i detta exempel:

Jag har valt 4 kort per rad i tablet-läge men den visar 2 kort per rad på iPad Pro 11 tum. Åtgärda detta. Jag valde 2 per rad för mobil.

När ChatGPT svarar på din förfrågan ger den ibland endast de specifika kodändringar du behöver byta ut eller lägga till manuellt, som i bilden nedan. För att göra det enklare, be den helt enkelt att “Skicka fullständig kod.”Ofta rekommenderar ChatGPT i slutet av sitt meddelande några ytterligare inställningar du kan ha missat — som i detta fall att lägga till länkar till korten, vilket är viktigt för sektionen.Snart klart! Kopiera och klistra in den uppdaterade koden i editorn, spara dina ändringar och visa den i Live Mode för att säkerställa att allt ser korrekt ut.
Som du ser visas det nu perfekt 4 kort per rad i tablet-versionen.

Steg 7 – Slutför koden och spara sektionen

När din design är redo är det en bra idé att ge ChatGPT en detaljerad beskrivning av sektionens struktur och krav. Använd följande prompt för att generera slutgiltig kod:

Lägg till ett konceptuellt beskrivningsblock ovanför