Canva hjem
Hjælp

Skab interaktive design med Canva-kode


Denne artikel er en maskinoversættelse. Fortæl os, hvis du finder fejl.

Canva-kode giver dig mulighed for at skabe lydhør, interaktive design uden det tekniske ved at skrive kode. Du kan bruge Canva-kode på to måder:

  • Opret interaktive kodedesign
    • Opret komplette interaktive design som f.eks. landingssider, kontrolpaneler eller porteføljer, og rediger og publicer som websteder i Canva-editoren
  • Føj interaktive kodeelementer til dine design
    • Opret interaktive elementer som quizzer, beregnere eller diagrammer til et andet design, og genbrug det på tværs af flere design

Tip:

Opret interaktive kodedesign

Brug designtypen Kode , når du vil skabe en komplet interaktiv oplevelse.

  • Opret landingssider, kontrolpaneler, porteføljer og meget mere
  • Rediger og finpuds i Canva-editoren
  • Udgiv som et responsivt websted
  1. Vælg Kode på Canvas startside. Dette åbner Canva-editoren.
  2. Start med at beskrive dit design under
    fanen Canva AI i Canva-editoren. Skriv noget i stil med "Design en interaktiv, brugervenlig træningstracker."
  3. Under
    fanen Skabeloner kan du også finde eller søge efter skabeloner.
  4. Finpuds det med
    Canva AI eller direkte redigeringer. Se Redigere dine interaktive Canva-kode-design og -elementer for at få flere oplysninger om hvordan.

Føj interaktive kodeelementer til dine design

Gå til Canva AI , og vælg derefter Kod , når du vil generere en enkelt interaktiv komponent.

  • Opret quizzer, beregnere, diagrammer og meget mere som elementer.
  • Føj dem til Præsentationer, Whiteboards eller andre designtyper. Udgiv som et websted, eller Genbrug elementer på tværs af flere design.
  1. Vælg
    Canva AI på Canva-startsiden.
  2. Beskriv det interaktive kodeelement, du vil oprette, i feltet Prompt. Få mere at vide om AI-prompter her.
  3. Vælg </> Kod.
  4. Tryk på Enter på tastaturet, eller klik på
    knappen Send. Canva AI forbereder dit design ud fra din prompt.
  5. Når du har genereret kodedesignet, skal du vælge Brug i et design.
  6. Under Tilføj som element i skal du vælge en doctype for at tilføje den som et interaktivt kodeelement.
  7. Hvis du vil forbedre det Canva-kodegenererede design, skal du lave prompter for dine finjusteringer i chatboksen i sidepanelet.

Bemærk: Du kan tilgå designversionerne fra din chattråd med Canva AI.

Rediger dine interaktive Canva-kodegenererede design og elementer

Finpuds dit Canva-kodegenererede design med værktøjerne i editoren. Få mere at vide i Rediger interaktive design og elementer, der er genereret af Canva-kode .

Se forhåndsvisninger og publicer dit design

Vælg

Eksempel for at interagere med dit design. Når alt ser godt ud, kan du publicere det som et websted. Lær, hvordan du udgiver og administrerer websteder med Canva-kode.

Bemærk: Interaktivitet fungerer, når designet vises på Canva eller publiceres som et websted.

Få adgang til, kopiér og administrer versioner af Canva-kode

Hver gang du opdaterer design af din Canva-kode via prompt, gemmer Canva automatisk en ny version i den samme chattråd. Dette giver dig mulighed for at se tilbage på tidligere gentagelser, fortsætte med at redigere fra en tidligere version eller kopiere den genererede kode til ekstern brug.

Se din versionshistorik

  1. Åbn
    Canva AI fra Canvas startside.
  2. Vælg </> Kode under promptlinjen for at se dine Canva-kode-chats i sidebjælken.
    • Bemærk: Du kan identificere Canva Code-chats på </> ikonet ud for dem.
  3. Åbn en Canva-kode-chattråd.
  4. Gennemse de tilgængelige versioner i indholdsoversigten (f.eks.: Version 1, Version 2 med flere).

Bemærk: Hvis du fortsætter med prompter i den samme chat, oprettes der automatisk en ny version.

Brug en tidligere version

  1. Åbn Canva-kode-chattråden.
  2. Vælg den version, du vil bruge.
  3. Vælg Brug i et design for at fortsætte med at redigere denne version i Canva.

Se og kopiér koden

Du kan se den underliggende kode, der er genereret af Canva-kode, og kopiere den til genbrug uden for Canva.

  1. Slå Vis kode til i din Canva-kodetråd.
  2. Vælg Kopier kode for at gemme den på udklipsholderen.

Begrænsninger for Canva-kode

  • Canva-kode understøtter alle sprog, der er tilgængelige på Canva, undtagen brugere på canva.cn.
  • Canva-kode tager kun instruktioner fra den beskrivelse, du har angivet eller brugt. Jo mere kontekst og vejledning du giver, jo bedre bliver resultatet.
  • Koden kan kopieres og genbruges eksternt, men den kan ikke eksporteres som en fil eller redigeres direkte i Canva.

Kan jeg genbruge koden uden for Canva?

Ja. Når den er kopieret, kan den bruges i dine egne projekter. Selvom det er udviklet til Canva, kan du tilpasse det til eksterne værktøjer eller arbejdsgange.

Kan jeg bruge mine kreationer fra Canva-kode til kommerciel brug?

Mellem dig og Canva, og i det omfang loven tillader det, ejer du dit input og output til vores AI-funktioner (herunder Canva-kode og oprettede Canva-koder), og Canva vil ikke gøre krav på ophavsret over dit input eller output (herunder oprettede Canva-koder). Du kan få flere oplysninger og alle vilkårene i vores vilkår for AI-produkter.

Hvem kan se det, jeg opretter med Canva-kode?

Det er kun dig, der kan se dine samtaler med Canva-kode. Når du klikker på Brug i et design, oprettes der et nyt design med denne version, og du kan dele designet (inkl. Canva-koden) ved hjælp af

knappen Del.

Hvis du publicerer dit design på et websted, kontrolleres adgangskontrollen af de indstillinger, du konfigurerer under publiceringen af webstedet.

Kan jeg administrere mit teams adgang til Canva-kode?

Hvis du er administrator, underviser eller branddesigner, kan du vælge, hvem der kan tilgå Canva-kode på dit team eller din klasse.

Kan du ikke finde Canva-kode på din startside? Få mere at vide om Canva-kodeadgangsbegrænsninger.

Hvorfor kan jeg ikke se kodelinjerne ændre sig?

Canva-kode bruger nu forskelsbaseret redigering, hvilket betyder, at det kun er de nødvendige linjer kode, der opdateres, i stedet for at generere hele blokken igen. Dette resulterer i hurtigere feedback, når du foretager små ændringer i din designlogik.

Hvis du ikke kan se kodelinjerne ændre sig, efter du har sendt prompten, betyder det, at Canva arbejder i baggrunden for kun at anvende de nødvendige ændringer. Vent på, at Canva-koden er færdig med at generere en ny version.

Var dette nyttigt?

Det var en hjælp for mig

Det var ikke en hjælp for mig

Andre kiggede på