Skapa interaktiva designer med Canva-kod
Canva-kod låter dig skapa responsiva, interaktiva designer utan den tekniska aspekten av att skriva kod. Du kan använda Canva-kod på två sätt:
- Skapa interaktiva koddesigner
- Skapa fullständiga interaktiva designer som landningssidor, instrumentpaneler eller portfolios, och redigera och publicera som webbplatser i Canva-redigeraren
- Lägg till interaktiva kodelement i dina designer
- Skapa interaktiva element som test, miniräknare eller diagram för en annan design och använd den i flera designer
Tips:
- Läs mer om hur den här funktionen räknas mot din AI-användning.
- Lär dig hur du skriver bättre uppmaningar för att maximera din AI-tilldelning.
Skapa interaktiva koddesigner
Använd designtypen Kod när du vill bygga en komplett interaktiv upplevelse.
- Skapa landningssidor, instrumentpaneler, portföljer och mer
- Redigera och förfina i Canva-redigeraren
- Publicera som en responsiv webbplats
- På Canvas startsida väljer du Kod. Detta öppnar Canva-redigeraren.
- I Canva-redigeraren börjar du med att beskriva din design på fliken Canva-AI. Uppmana något i stil med ”Designa en interaktiv användarvänlig träningsspårare.”
- Alternativt kan du på fliken Mallar också bläddra bland eller söka efter mallar att utgå från.
- Förbättra med Canva-AI eller direktredigeringar. Se Redigera dina interaktiva Canva-kod-designer och element för att lära dig hur.
Lägg till interaktiva kodelement i dina designer
Gå till Canva AI och sedan, Code, när du vill generera en enda interaktiv komponent.
- Skapa test, miniräknare, diagram och mer som element.
- Lägg till dem i presentationer, webbskrivtavlor eller andra designtyper. Publicera som en webbplats eller Återanvänd element i flera designer.
- På Canvas startsida väljer du Canva-AI.
- I rutan Uppmaning beskriver du det interaktiva kodelementet du vill skapa. Läs mer om AI-uppmaning här.
- Välj </> Kod.
- Tryck på Enter på tangentbordet eller klicka på knappen skicka. Canva AI förbereder din design baserat på din uppmaning.
- När du har genererat koddesignen väljer du Använd i en design.
- Under Lägg till som element i väljer du en doktyp för att lägga till det som ett interaktivt kodelement.
- För att förbättra den Canva-kod-genererade designen, fråga dina finjusteringar i chattrutan på sidopanelen.
Obs! Du kan komma åt designversionerna från din chatttråd med Canva AI.
Redigera dina interaktiva Canva-kod-genererade designer och element
Förbättra din Canva-kod-genererade design med verktygen i redigeraren. Kolla in Redigera interaktiva designer och element som genererats med Canva-kod för att lära dig mer.
Förhandsgranska och publicera din design
Välj Förhandsgranska för att interagera med din design. När allt ser bra ut kan du publicera det som en webbplats. Lär dig hur du publicerar och hanterar webbplatser med Canva-kod.
Obs! Interaktivitet fungerar när designen visas på Canva eller publiceras som en webbplats.
Kom åt, kopiera och hantera versioner av Canva-kod
Varje gång du uppdaterar din Canva-koddesign genom uppmaning sparar Canva automatiskt en ny version i samma chatttråd. Detta gör att du kan titta på tidigare iterationer, fortsätta redigera från en tidigare version eller kopiera den genererade koden för externt bruk.
Visa din versionshistorik
- Från Canvas startsida öppnar du Canva AI.
- Under uppmaningsfältet väljer du </> Kod för att se dina Canva Code-chattar i sidofältet.
- Obs! Du identifierar Canva-kodchattar med </> ikonen bredvid dem.
- Öppna en Canva-kod-chatttråd.
- I sidofältet bläddrar du bland de tillgängliga versionerna (till exempel version 1, version 2 med mera).
Obs! Om du fortsätter till uppmaning inom samma chatt skapas automatiskt en ny version.
Använd en tidigare version
- Öppna Canva-kod chatttråden.
- Välj den version du vill använda.
- Välj Använd i en design för att fortsätta redigera den versionen i Canva.
Visa och kopiera koden
Du kan se den underliggande koden som genererats av Canva-kod och kopiera den för återanvändning utanför Canva.
- I din Canva-kodtråd aktiverar du Visa kod-t ochgle.
- Välj Kopiera kod för att spara den i ditt urklipp.
Begränsningar för Canva-kod
- Canva-kod stöder alla språk som finns tillgängliga på Canva, utom för användare i canva.cn.
- Canva Code hämtar endast instruktioner från den beskrivning du angav eller använde. Ju mer sammanhang och mer instruktioner du ger, desto bättre blir resultatet.
- Kod kan kopieras och återanvändas externt, men inte exporteras som en fil eller direkt redigeras i Canva.
Kan jag återanvända koden utanför Canva?
Ja. När koden har kopierats kan den användas i egna projekt. Det är byggt för Canva, men du kan anpassa det för externa verktyg eller arbetsflöden.
Får jag använda mina skapelser från Canva-kod för kommersiellt bruk?
Mellan dig och Canva och i den utsträckning som tillåts i lag äger du dina Indata och Utdata till våra AI-funktioner (inklusive Canva-kod och skapade Canva-koder), och Canva kommer inte att göra några anspråk på innehav av upphovsrätt till dina Indata eller Utdata (inklusive skapade Canva-koder). För mer information och fullständiga villkor, se våra Villkor för AI-produkter.
Vem kan se vad jag skapar med Canva-kod?
Bara du kan se dina konversationer med Canva-kod. När du klickar på Använd i en design skapas en ny design med den versionen och du kan dela designen (inklusive Canva-koden) med knappen Dela.
Om du publicerar din design på en webbplats styrs åtkomstkontrollen av de inställningar du gör under webbplatsens publiceringsflöde.
Kan jag hantera mitt teams åtkomst till Canva-kod?
Om du är administratör, lärare eller varumärkesdesigner kan du välja vem som kan komma åt Canva-kod i ditt team eller din klass.
Hittar du inte Canva-koden på din startsida? Läs mer om Canva Code-åtkomstbegränsningar.
Varför ser jag inte kodrader ändras?
Canva Code använder nu diff-baserad redigering, vilket innebär att endast nödvändiga kodrader uppdateras istället för att generera hela blocket på nytt. Detta ger snabbare feedback när du gör små ändringar i din designlogik.
Om du inte ser kodraderna ändras efter att du skickat uppmaningen betyder det att Canva arbetar i bakgrunden för att bara tillämpa de nödvändiga ändringarna. Vänta tills Canva-kod slutfört genereringen av en annan version.
Var detta till hjälp?
Till hjälp
Inte till hjälp