Maak interactieve ontwerpen met Canva Code
Met Canva Code kun je responsieve, interactieve ontwerpen maken zonder de technische problemen van het schrijven van code. Je kunt Canva-code op twee manieren gebruiken:
- Interactieve code-ontwerpen maken
- Maak volledig interactieve ontwerpen zoals landingspagina's, dashboards of portfolio's, en bewerk en publiceer als websites in het bewerkingsprogramma van Canva
- Voeg interactieve code-elementen toe aan je ontwerpen
- Maak interactieve elementen zoals toetsen, rekenmachines of diagrammen naar een ander ontwerp en gebruik deze opnieuw in meerdere ontwerpen
Fooien:
- Meer informatie over hoe deze functie meetelt voor je AI-gebruik.
- Leer hoe je betere aanwijzingen kunt schrijven om je AI-toelage te maximaliseren.
Interactieve code-ontwerpen maken
Gebruik het ontwerptype Code als je een complete interactieve ervaring wilt bouwen.
- Maak landingspagina's, dashboards, portfolio's en meer
- Bewerken en verfijnen in het bewerkingsprogramma van Canva
- Publiceren als responsieve website
- Selecteer Coderen op de Canva-homepage. Hiermee open je de editor van Canva.
- In het bewerkingsprogramma van Canva begin je met het beschrijven van je ontwerp op het tabblad Canva AI. Vraag iets als "Ontwerp een interactieve, gebruiksvriendelijke trainingstracker."
- Op het tabblad Sjablonen kun je ook bladeren of zoeken naar sjablonen om mee te beginnen.
- Verfijn het met Canva AI of directe bewerkingen. Zie Je interactieve ontwerpen en elementen van de Canva-code bewerken voor meer informatie.
Voeg interactieve code-elementen toe aan je ontwerpen
Ga dan naar Canva AI , Codeer wanneer je één interactief onderdeel wilt genereren.
- Maak toetsen, rekenmachines, diagrammen en meer als elementen.
- Voeg ze toe aan presentaties, whiteboards of andere ontwerptypen. Publiceer als website of gebruik elementen opnieuw in meerdere ontwerpen.
- Selecteer Canva AI op de Canva-homepage.
- Beschrijf in het vak Prompt het interactieve code-element dat je wilt maken. Lees hier meer over AI-prompts.
- Selecteer </> Code.
- Druk op je toetsenbord op enter of klik op de knop Indienen. Canva AI maakt je ontwerp op basis van je prompt.
- Nadat je het code-ontwerp hebt gegenereerd, selecteer je Gebruiken in een ontwerp.
- Selecteer onder Toevoegen als element aan een documenttype om het toe te voegen als een interactief Coderen-element.
- Om het ontwerp dat door de Canva-code wordt gegenereerd te verbeteren, geef je verbeteringen aan in het chatvenster in het zijvenster.
Opmerking: je hebt toegang tot de ontwerpversies van je chat met Canva AI.
Bewerk je interactieve ontwerpen en elementen die zijn gegenereerd door de Canva-code
Verfijn je door de Canva-code gegenereerde ontwerp met de tools in de editor. Bekijk Interactieve door Canva-code gegenereerde ontwerpen en elementen bewerken voor meer informatie.
Bekijk een voorbeeld van je ontwerp en publiceer het
Selecteer Voorbeeld om je ontwerp te bedienen. Zodra alles er goed uitziet, kun je het als website publiceren. Leer hoe je Canva Code-websites publiceert en beheert.
Opmerking: interactiviteit werkt wanneer het ontwerp wordt bekeken op Canva of gepubliceerd als een website.
De versies van Canva Code openen, kopiëren en beheren
Elke keer dat je het ontwerp van je Canva-code bijwerkt via prompts, slaat Canva automatisch een nieuwe versie op in dezelfde chatthread. Hiermee kun je eerdere versies opnieuw bekijken, doorgaan met het bewerken van een eerdere versie of de gegenereerde code kopiëren voor extern gebruik.
Je versiegeschiedenis bekijken
- Open Canva AI vanaf de Canva-homepage.
- Selecteer </> Coderen onder de Promptbalk om je Canva Code-chats in de zijbalk te bekijken.
- Opmerking: je kunt Canva Code-chats herkennen aan het </> pictogram ernaast.
- Open een Canva Code-chat.
- Blader in de zijbalk naar de beschikbare versies (bijvoorbeeld: versie 1, versie 2 en meer).
Opmerking: als je binnen dezelfde chat naar een prompt blijft vragen, wordt er automatisch een nieuwe versie gemaakt.
Een eerdere versie gebruiken
- Open de Canva Code-chat.
- Selecteer de versie die je wilt gebruiken.
- Selecteer Gebruiken in een ontwerp om door te gaan met het bewerken van die versie in Canva.
Code bekijken en kopiëren
Je kunt de onderliggende code die door de Canva-code is gegenereerd bekijken en deze kopiëren voor hergebruik buiten Canva.
- Schakel in je Canva Code-thread de t oggle Code weergeven in.
- Selecteer Code kopiëren om deze op te slaan op je klembord.
Beperkingen voor Canva-code
- Canva-code ondersteunt alle talen die beschikbaar zijn op Canva, behalve de gebruikers van canva.cn.
- Canva Code zoekt alleen de instructies op uit de beschrijving die je hebt ingevoerd of gebruikt. Hoe meer context en instructies je geeft, hoe beter het resultaat zal zijn.
- Code kan worden gekopieerd en extern worden hergebruikt, maar kan niet als bestand worden geëxporteerd of rechtstreeks in Canva worden bewerkt.
Kan ik de code buiten Canva opnieuw gebruiken?
Ja. Eenmaal gekopieerd, kan de code in je eigen projecten worden gebruikt. Hoewel het is gebouwd voor Canva, kun je het aanpassen voor externe tools of workflows.
Kan ik mijn creaties van Canva Code gebruiken voor commercieel gebruik?
Tussen u en Canva en voor zover toegestaan door de wet, bent u eigenaar van uw Input en Output voor onze AI-functies (inclusief Canva-code en de gemaakte Canva-codes), en Canva zal geen aanspraak maken op auteursrecht op uw Input of Output (inclusief gemaakte Canva-codes). Raadpleeg onze AI-productvoorwaarden voor meer informatie en de volledige voorwaarden.
Wie kan zien wat ik maak met Canva Code?
Alleen jij kunt je gesprekken met Canva-code zien. Wanneer je op In een ontwerp gebruiken klikt, wordt er een nieuw ontwerp met die versie gemaakt en kun je het ontwerp (inclusief de Canva-code) delen met de Delen knop.
Als je je ontwerp publiceert op een website, wordt de toegangscontrole bepaald door de instellingen die je tijdens het publiceren van de website configureert.
Kan ik de toegang van mijn team tot Canva-code beheren?
Of je nu een beheerder, leerkracht of merkontwerper bent, je kunt kiezen wie in jouw team of klas toegang heeft tot Canva-code.
Is de Canva-code niet te vinden op je startpagina? Meer informatie over Canva Code-toegangsbeperkingen.
Waarom zie ik geen coderegels veranderen?
Canva Code gebruikt nu bewerkingen op basis van diff, wat betekent dat alleen de benodigde regels code worden bijgewerkt in plaats van het hele blok opnieuw te genereren. Dit resulteert in snellere feedback wanneer je kleine wijzigingen aanbrengt in je ontwerp logica.
Als je de coderegels niet ziet veranderen nadat je de prompt hebt verstuurd, betekent dit dat Canva op de achtergrond alleen de noodzakelijke wijzigingen toepast. Wacht tot Canva-code een andere versie heeft gegenereerd.
Was dit nuttig?
Nuttig
Niet nuttig