Maak interactieve ontwerpen met Canva Code
Met Canva Code kun je responsieve, interactieve ontwerpen maken zonder het technische gedoe 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 ze als websites in de editor van Canva
- Voeg interactieve code-elementen toe aan je ontwerpen
- Maak interactieve elementen zoals toetsen, rekenmachines of diagrammen naar een ander ontwerp en hergebruik deze 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 de editor van Canva
- Publiceren als een responsieve website
- Selecteer op de Canva-homepage Coderen. Dit opent de Canva-editor.
- In de Canva editor 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 Canva-code bewerken om te leren hoe.
Voeg interactieve code-elementen toe aan je ontwerpen
Ga dan naar Canva AI , Codeer wanneer je een enkel interactief onderdeel wilt genereren.
- Maak toetsen, rekenmachines, diagrammen en meer als elementen.
- Voeg ze toe aan Presentaties, Whiteboards of andere ontwerptypen. Publiceren als website of Hergebruik elementen 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 verzendknop. Canva AI bereidt je ontwerp voor op basis van je prompt.
- Nadat je het code-ontwerp hebt gegenereerd, selecteer je In een ontwerp gebruiken.
- Selecteer onder Toevoegen als element aan een documenttype om het toe te voegen als een interactief code-element.
- Om het door de Canva-code gegenereerde ontwerp te verbeteren, geef je aan in het chatvak in het zijpaneel.
Opmerking: je hebt toegang tot de ontwerpversies van je chatthread met Canva AI.
Bewerk je interactieve ontwerpen en elementen die door de Canva-code zijn gegenereerd
Verfijn je door de Canva-code gegenereerde ontwerp met de tools in de editor. Ga naar Interactieve door Canva-code gegenereerde ontwerpen en elementen bewerken voor meer informatie.
Bekijk een voorbeeld van je ontwerp en publiceer het
Selecteer Voorbeeld om te communiceren met je ontwerp. 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 als een website wordt gepubliceerd.
De versies van Canva-code openen, kopiëren en beheren
Elke keer dat je het ontwerp van je Canva-code bijwerkt via een prompt, slaat Canva automatisch een nieuwe versie op binnen dezelfde chatthread. Hierdoor kun je eerdere iteraties opnieuw bekijken, doorgaan met bewerken van een vorige versie of de gegenereerde code kopiëren voor extern gebruik.
Je versiegeschiedenis bekijken
- Open Canva AI op de Canva-homepage.
- Selecteer </> Coderen in 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 door de beschikbare versies (bijvoorbeeld: Versie 1, Versie 2 en meer).
Opmerking: Als je binnen dezelfde chat blijft vragen naar een prompt, wordt er automatisch een nieuwe versie gemaakt.
Een eerdere versie gebruiken
- Open de Canva-code chatthread.
- Selecteer de versie die je wilt gebruiken.
- Selecteer In een ontwerp gebruiken om door te gaan met het bewerken van die versie in Canva.
De 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 Canva-code
- Canva-code ondersteunt alle talen die beschikbaar zijn op Canva, behalve gebruikers van canva.cn.
- Canva-code zoekt alleen instructies op basis van de beschrijving die je hebt ingevoerd of gebruikt. Hoe meer context en instructies je geeft, hoe beter het resultaat zal zijn.
- Code kan extern worden gekopieerd en 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 worden gebruikt in je eigen projecten. 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 de eigenaar van uw Input en Output voor onze AI-functies (inclusief Canva-code en de gemaakte Canva-codes), en Canva maakt geen aanspraak 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 Gebruiken in een ontwerp klikt, wordt een nieuw ontwerp met die versie gemaakt en kun je het ontwerp (inclusief de Canva Code) delen met de knop Delen .
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?
Als je een beheerder, leerkracht of merkontwerper bent, kun je kiezen wie in je 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 maakt nu gebruik van op diff gebaseerde bewerking, wat betekent dat alleen de noodzakelijke 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 ontwerplogica.
Als je de coderegels niet ziet veranderen na het versturen van de prompt, betekent dit dat Canva op de achtergrond werkt om alleen de noodzakelijke wijzigingen toe te passen. Wacht tot Canva-code klaar is met het genereren van een andere versie.
Was dit nuttig?
Behulpzaam
Niet nuttig