Loading...

Relaterede

cover

Send butiksemails fra Selldone med Resend SMTP
cover

Selldone’s udviklingskþreplan — detaljer for Q1 2026, del 2
cover

Byg moderne landingsider med Selldone og ChatGPT-5
cover

Den skjulte protokol bag agentisk AI i online-handel

Selldone - Business OS

All-in-one solution replacing Ecommerce platforms and plugins

✹ Free to Start - Scale Instantly! ✹

Del

Byg salgsfremmende landingssider – trin-for-trin guide

Robert Donnie
Written by Robert Donnie
Udgivet den December 23, 2025
    Introduction

    Introduktion

    Har du nogensinde Ăžnsket, at du kunne designe smukke, responsive landingsside-sektioner — uden at skrive en eneste linje kode? Med Selldone Plugin i ChatGPT bliver den drĂžm til virkelighed.

    I denne guide lĂŠrer du trin for trin, hvordan du gĂ„r fra et inspirationsbillede til en live, fuldt responsiv sektion i Selldones Page Builder — alt sammen drevet af AI.

    NÄr du er fÊrdig, har du en professionelt designet sektion klar til at blive publiceret pÄ din Selldone-hjemmeside.

    💡 BemĂŠrk: Selldones Page Builder er bygget pĂ„ Vuetify (Vue 3) — sĂ„ hver sektion genereret af plugin'et er fuldt kompatibel med Selldones moderne, responsive front-end-framework.

    Trin 1 – Forbered din inspiration

    Start med at finde et sektionsdesign, der inspirerer dig. I denne vejledning bruger vi en sektion fra DBA (Den BlĂ„ Avis)'s forside som reference — et rent, moderne layout, der fremhĂŠver udvalgte annoncer med stĂŠrke billeder og klare opfordringer til handling.

    Tag et screenshot af den DBA-sektion; vi vil bruge det som visuel reference i ChatGPT, nÄr vi genererer vores brugerdefinerede design med Selldone Plugin.

    💡 Tip: VĂŠlg en sektion med et struktureret og visuelt afbalanceret layout. Jo klarere designet er, desto bedre kan ChatGPT analysere og genskabe det.

    ⚠️ Fair-Use-meddelelse: Screenshot'et fra DBA, der vises her, bruges kun til uddannelses- og illustrative formĂ„l som designinspiration. Alle varemĂŠrker, billeder og layouter tilhĂžrer DBA — denne vejledning er ikke tilknyttet eller godkendt af DBA.

    Trin 2 – Åbn ChatGPT med Selldone Plugin

    SĂžrg for, at du har Selldone Plugin aktiveret i ChatGPT:

    1. GĂ„ til ChatGPT → Indstillinger → Betafunktioner → Plugins og slĂ„ plugins til.
    2. BesĂžg Plugin Store og installer Selldone Plugin.
    3. Start en ny chat med plugin'et aktivt.

    Du bĂžr se Selldone-logoet ved siden af din chatboks — det betyder, at det er klar til brug
    Step 3 – Upload Your Reference Design

    Trin 3 – Upload dit referencedesign

    Upload dit screenshot og skriv en klar prompt, for eksempel:
    Fra topmenuen skal du sikre dig, at du bruger den nyeste version af ChatGPT.

    “Jeg vil bygge en sektion som dette billede, med responsive fontstĂžrrelser, tilpasselige fonte og kortfarver, samt kort der kan vĂŠre cirkulĂŠre eller afrundede firkanter.”

    ChatGPT (med Selldone) vil analysere billedet og generere Vuetify (Vue 3)-baseret kode, der er fuldt kompatibel med Selldones Page Builder.
    Create a New Landing Page in Selldone

    Opret en ny landingsside i Selldone

    FĂžr du tilfĂžjer din brugerdefinerede sektion, lad os fĂžrst oprette en tom landingsside i Selldone, som vi kan bruge.

    1. Fra butikkens topmenu, naviger til Sider → Landing → TilfĂžj ny landing.
    2. PĂ„ denne skĂŠrm vil du se tre standard landingsside-skabeloner.
    3. Klik pĂ„ en af dem for at vĂŠlge den og gĂ„ ind i Landing Page Designer. Inde i designeren skal du Ă„bne venstre panel, finde elementet “Code” og trĂŠkke det ind pĂ„ Page Builder-omrĂ„det. Dette “Code”-element er, hvor du indsĂŠtter eller importerer den sektion, ChatGPT har genereret ved hjĂŠlp af Selldone Plugin.
    4. Klik inde i Code-boksen for at aktivere vĂŠrktĂžjslinjen—du vil se en topvĂŠrktĂžjslinje dukke op, som vi vil bruge ofte.
    -Det fĂžrste ikon (<>) Ă„bner kodeeditoren, hvor du kan indsĂŠtte eller redigere HTML- og Vue-baseret sektionkode genereret af ChatGPT.-Det andet ikon Ă„bner Egenskaber, hvor du kan justere sektionens layout, afstand og visuelle indstillinger.
    Step 4 – Copy Paste the ChatGPT Initial Code into the Editor

    Trin 4 – KopiĂ©r og indsĂŠt ChatGPT's fĂžrste kode i editoren

    MĂ„ske forkert version

    Nu skal du kopiere den fĂžrste version af koden, som ChatGPT har genereret til dig.
    Som du kan se i skĂŠrmbilledet, ser resultatet anderledes ud end dit referencebillede — det betyder, at ChatGPT har produceret en forkert version af sektionen. Det er helt normalt, sĂ„ vĂŠr ikke bekymret.
    To fix this, resend the reference image and ask again, for example,…
    For at rette dette skal du sende referencebilledet igen og bede pÄ ny, for eksempel ved at sige:
    “Fokuser pĂ„ billedet, jeg sendte ovenfor. Jeg sender det igen.”
    Now ChatGPT will start over and generate new code. This version won’t…
    Nu starter ChatGPT forfra og genererer ny kode. Denne version vil ikke vÊre den endelige, da du mÄske stadig vil tilfÞje flere anmodninger og justeringer.
    Now, copy the code and paste it into the code editor and…
    Nu skal du kopiere koden og indsĂŠtte den i kodeeditoren og trykke Apply:
    Vigtig note: Standardtilstanden i kodeeditoren er HTML. Du skal skifte til Vue-indstillingen — ellers ender du med et blankt resultat.
    Now you see the first correct version of ChatGPT-generated section.
    Nu ser du den fĂžrste korrekte version af den ChatGPT-genererede sektion. 
    Press the second item in the toolbar (as mentioned earlier) to open…
    Tryk pÄ den anden post i vÊrktÞjslinjen (som nÊvnt tidligere) for at Äbne Egenskaber-menuen for justeringer. Som du kan se, er der mange indstillinger tilgÊngelige, der hjÊlper dig med at skrÊddersy denne sektion til din virksomhed.

    RESET TIL STANDARD indstilling:

    Nogle gange, nĂ„r du indsĂŠtter en opdateret version af koden, kan du ikke se nogen synlige ĂŠndringer. Dette kan ske, hvis ĂŠndringerne er grundlĂŠggende. I sĂ„danne tilfĂŠlde skal du klikke pĂ„ Reset to Default-indstillingen. BemĂŠrk, at brug af denne mulighed fjerner alle dine tilpassede indstillinger, inklusive nye tekster, farver, skriftstĂžrrelser og endda uploadede billeder — det er grundlĂŠggende en fabriksnulstilling 🙂.
    So, use this option only when your changes are not being applied…
    Brug derfor denne mulighed kun, nÄr dine Êndringer ikke anvendes korrekt.

    Trin 5 – Tilpas sektionen

    ChatGPT genererer, baseret pĂ„ hvad det har lĂŠrt fra andre brugere, mere omfattende layouts — sĂ„ du behĂžver ikke anmode om hvert element enkeltvis. Dette er den virkelige fordel ved at chatte mere med det: jo lĂŠngere og klarere din samtale er, jo bedre forstĂ„r ChatGPT dine designprĂŠferencer og leverer mere komplette, prĂŠcise resultater.Den standardgenererede kode er allerede ret responsiv, men du kan stadig justere detaljer som skriftstĂžrrelser, skrifttyper, sektion- eller korthĂžjder, bredder og andre visuelle elementer baseret pĂ„ dine prĂŠferencer.
    Her kan du for eksempel sÊtte Selldone til at vise 8 kort per rÊkke pÄ store desktops, 4 kort pÄ tablets og 2 kort pÄ mobiltelefoner.
    Lad os se, hvordan ChatGPT fortolker og anvender disse justeringer — vi kan fĂ„ brug for at lave et par flere redigeringer eller anmodninger i de nĂŠste trin.I dette tilfĂŠlde bĂžr du ĂŠndre Section Max Width til 1400px for et bedre layout. Du kan ogsĂ„ justere kort pr. rĂŠkke til 8, 4 og 2 for desktop, tablet og mobil stĂžrrelser.
    For at forfine mellemrummet, prÞv at reducere Cards Gap (Desktop) til omkring 12px. Derudover kan du sÊnke karthÞjden fra 180px til 160px, eller tilpasse billedstÞrrelsen, sÄ den passer til dit design.
    Det er vigtigt at huske, at du nemt kan tilpasse udseendet ved at eksperimentere med disse indstillinger — leg med tallene og find, hvad der passer bedst til din stil.
    For at visualisere resultatet bedre kan du uploade dine egne billeder. Vi anbefaler at bruge billeder med gennemsigtige baggrunde, sĂ„ Card Background Color-muligheden anvendes jĂŠvnt pĂ„ dem alle — hvilket giver din sektion et renere og mere professionelt udseende.
    After uploading your images, editing the texts, and finalizing everything, click the…
    Efter upload af billeder, redigering af tekster og fĂŠrdiggĂžrelse af alt, klik pĂ„ Gem-knappen — eller tryk Ctrl + S pĂ„ Windows for at gemme med det samme.
    Nu er det tid til at Ă„bne Live-siden og se din sektion i aktion.
    For at se den live kan du bruge Live Preview-muligheden eller klikke pĂ„ knappen ved siden af, der viser navnet pĂ„ din landingsside — dette Ă„bner siden i kĂžber-visning, prĂŠcis som dine besĂžgende vil se den. Dog anbefaler jeg ikke at bruge Live Preview til at tjekke den endelige version, da den ikke fuldt ud afspejler sidens responsivitet pĂ„ forskellige enheder — det vil vi uddybe nedenfor.
    This is the result of the code. Now we need to test…
    Dette er resultatet af koden. Nu skal vi teste det pÄ forskellige skÊrmstÞrrelser for at sikre, at alt fungerer korrekt.
    For at Ă„bne Web Developer Tools i Windows-browsere, tryk F12.
    Dette vĂŠrktĂžj giver dig mulighed for at forhĂ„ndsvise siden i forskellige skĂŠrmstĂžrrelser — uden at du behĂžver at teste separat pĂ„ mobil, tablet, laptop eller andre enheder.
    Now, from the top menu, select Responsive to preview how your section…
    Nu skal du fra topmenuen vÊlge Responsive for at forhÄndsvise, hvordan din sektion ser ud pÄ forskellige skÊrmstÞrrelser.Som du kan se, ser mobilversionen ren og fuldt responsiv ud.
    In tablet view — specifically on the iPad Pro 11-inch — our…
    I tabletvisning — specifikt pĂ„ iPad Pro 11-tommer — anvendes vores indstillinger (4 kort per rĂŠkke pĂ„ tablet) ikke, og den viser kun 2. Vi skal bede ChatGPT om at rette dette og omskrive koden.

    Trin 6 – Iterer og forfin

    Stop ikke ved den fĂžrste version — her sker den virkelige kreativitet. Du kan fortsĂŠtte med at chatte med ChatGPT for at justere detaljer som:

    • GĂžr sektionen responsiv pĂ„ alle skĂŠrme.
    • TilfĂžj hover-animation.
    • Brug gradientknapper.

    Hver runde opdaterer din sektion Ăžjeblikkeligt.

    💡 Pro-tip: Jo mere du chatter og beskriver, hvad du vil have, jo bedre forstĂ„r ChatGPT din designstil. Over tid lĂŠrer det dine prĂŠferencer og leverer mere nĂžjagtige, hĂžj-kvalitets resultater.Her bĂžr du klart forklare problemet, sĂ„ ChatGPT forstĂ„r det bedre.
    Husk, det kan ikke lĂŠse dine tanker — du skal beskrive problemet i detaljer, prĂŠcis som i dette eksempelkommentar:
    Jeg har valgt 4 kort pr. rÊkke i tablet-stÞrrelse, men det viser 2 kort pr. rÊkke pÄ iPad Pro 11-tommer. Ret det. Jeg valgte 2 pr. rÊkke til mobil.

    When ChatGPT replies to your request, it sometimes provides only the specific…
    NĂ„r ChatGPT svarer pĂ„ din anmodning, giver det nogle gange kun de specifikke kodeĂŠndringer, som du manuelt skal erstatte eller tilfĂžje, som vist i billedet nedenfor. 
    To make things easier, simply ask it to “Send the full code.”
    For at gĂžre det lettere, bed det blot om at “Send den fulde kode.”
    Often, at the end of its message, ChatGPT recommends additional settings you…
    Ofte anbefaler ChatGPT i slutningen af sin besked yderligere indstillinger, du mĂ„ske har overset — som i dette tilfĂŠlde, hvor det foreslĂ„r at tilfĂžje links til kortene, hvilket er vigtigt for vores sektion.
    Almost done! Copy and paste the updated code into the editor, save…
    NÊsten fÊrdig! Kopiér og indsÊt den opdaterede kode i editoren, gem dine Êndringer, og vis den i Live Mode for at sikre, at alt ser korrekt ud.
    Som du kan se, viser den nu 4 kort pr. rĂŠkke i tablet-versionen.

    Trin 7 – FĂŠrdiggĂžr koden og gem sektionen

    NÄr dit design er klar, er det en god idé at give ChatGPT en detaljeret beskrivelse af sektionens struktur og krav. Brug fÞlgende prompt til at generere den endelige kode:
    TilfĂžj et konceptuelt beskrivelsesafsnit over