Erstelle interaktive Designs mit Canva Code

Dieser Artikel wurde vom Computer übersetzt. Wenn du Fehler findest, informiere uns bitte.

Mit Canva Code kannst du reaktionsschnelle, interaktive Designs erstellen, ohne Code schreiben zu müssen. Du kannst Canva Code auf zwei Arten verwenden:

Interaktive Code-Designs erstellen
- Erstelle vollständige interaktive Designs wie Landing Pages, Dashboards oder Portfolios und bearbeite und veröffentliche sie als Websites im Canva Editor
Füge interaktive Code-Elemente zu deinen Designs hinzu
- Interaktive Elemente wie Quiz, Taschenrechner oder Diagramme in einem anderen Design erstellen und in mehreren Designs wiederverwenden

Tipps:

Hier erfährst du, wie diese Funktion für deine KI-Nutzung zählt.
Lerne, wie du bessere Eingabeaufforderungen verfassen kannst, um deine KI-Zulage zu maximieren.

Interaktive Code-Designs erstellen

Verwende den Code-Designtyp, wenn du ein komplettes interaktives Erlebnis erstellen möchtest.

Erstelle Landing Pages, Dashboards, Portfolios und mehr
Im Canva-Editor bearbeiten und verfeinern
Als ansprechende Website veröffentlichen

Wähle auf der Canva-Startseite Code aus. Dadurch wird der Canva-Editor geöffnet.
Im Canva Editor beschreibst du zunächst dein Design auf der
Registerkarte Canva AI. Schreibe einen Prompt wie „Designe einen interaktiven, benutzerfreundlichen Trainings-Tracker.“
Alternativ kannst du auf der
Registerkarte „Vorlagen“ auch nach Vorlagen suchen oder suchen, um loszulegen.
Verfeinere dein Design mit
Canva AI oder direkt. Unter Deine interaktiven Canva Code-Designs und -Elemente bearbeiten erfährst du, wie das geht.

Füge interaktive Code-Elemente zu deinen Designs hinzu

Gehe dann zu Canva AI, Code, wenn du eine einzelne interaktive Komponente generieren möchtest.

Erstelle Quizze, Taschenrechner, Diagramme und mehr als Elemente.
Füge sie zu Präsentationen, Whiteboards oder anderen Designtypen hinzu. Als Website veröffentlichen oder Elemente über mehrere Designs hinweg wiederverwenden.

Wähle auf der Canva-Startseite
Canva AI aus.
Beschreibe im Feld „Prompt“ das interaktive Code-Element, das du erstellen möchtest. Hier erfährst du mehr über KI-Prompting.
Wähle </> Code.
Drücke die Eingabetaste auf deiner Tastatur oder klicke auf den
Button „Senden“. Canva AI erstellt dein Design nach deinen Eingaben.
Nachdem du das Code-Design generiert hast, wähle „In einem Design verwenden“.
Wähle unter Als Element zu hinzufügen einen Dokumententyp aus, um ihn als interaktives Code-Element hinzuzufügen.
Wenn du das mit Canva Code generierte Design verbessern möchtest, teile die gewünschten Änderungen im Chatfeld in der Seitenleiste.

Hinweis: Mit Canva AI kannst du über deinen Chat-Thread auf die Designversionen zugreifen.

Bearbeite deine interaktiven, vom Canva-Code generierten Designs und Elemente

Verfeinere dein von Canva Code generiertes Design mithilfe der Tools im Editor. Hier erfährst du mehr darüber, wie du interaktive, vom Canva-Code generierte Designs und Elemente bearbeiten kannst.

Vorschau anzeigen und dein Design veröffentlichen

Wähle

Vorschau aus, um mit deinem Design zu interagieren. Sobald alles passt, kannst du es als Website veröffentlichen. Erfahre, wie du Canva Code-Websites veröffentlichen und verwalten kannst.

Hinweis: Interaktivität funktioniert, wenn das Design auf Canva angesehen oder als Website veröffentlicht wird.

Greife auf Canva Code-Versionen zu, kopiere sie und verwalte sie

Jedes Mal, wenn du dein Canva Code-Design durch einen Prompt aktualisierst, speichert Canva automatisch eine neue Version im selben Chat-Thread. Dadurch kannst du frühere Versionen erneut aufrufen, eine frühere Version weiter bearbeiten oder den generierten Code zur externen Verwendung kopieren.

Versionsverlauf anzeigen

Öffne auf der Canva Startseite
Canva AI.
Wähle unter der Prompt-Leiste </> Code aus, um deine Canva Code-Chats in der Seitenleiste anzuzeigen.
- Hinweis: Canva Code-Chats erkennst du an dem </> Symbol daneben.
Öffne einen Chat-Thread mit Canva Code.
Durchsuche in der Seitenleiste die verfügbaren Versionen (z. B. Version 1, Version 2 usw.).

Hinweis: Wenn du weiterhin Prompts im selben Chat verwendest, wird automatisch eine neue Version erstellt.

Verwende eine frühere Version

Öffne den Chat-Thread mit Canva Code.
Wähle die Version aus, die du verwenden möchtest.
Wähle „In einem Design verwenden“ , um diese Version weiter in Canva zu bearbeiten.

Code anzeigen und kopieren

Du kannst den zugrunde liegenden Code anzeigen, der von Canva Code generiert wurde, und ihn kopieren, um ihn außerhalb von Canva wiederverwenden zu können.

Aktiviere in deinem Canva Code-Thread die Option Code anzeigen.
Wähle Code kopieren aus, um ihn in deiner Zwischenablage zu speichern.

Einschränkungen von Canva Code

Canva Code unterstützt alle in Canva verfügbaren Sprachen, außer für Benutzer in canva.cn.
Canva Code nimmt nur Anweisungen aus der von dir eingegebenen oder verwendeten Beschreibung an. Je mehr Kontext und Vorgaben du angibst, desto besser ist das Ergebnis.
Der Code kann extern kopiert und wiederverwendet werden, aber nicht als Datei exportiert oder direkt in Canva bearbeitet werden.

Kann ich den Code außerhalb von Canva wiederverwenden?

Ja. Nach dem Kopieren kann der Code in Ihren eigenen Projekten verwendet werden. Während es für Canva entwickelt wurde, kannst du es an externe Tools oder Workflows anpassen.

Kann ich meine Kreationen von Canva Code für die kommerzielle Nutzung verwenden?

Gemäß der Vereinbarung zwischen dir und Canva und soweit gesetzlich zulässig, bist du der Eigentümer deiner Eingaben in unsere KI-Funktionen und der damit generierten Ergebnisse (einschließlich der Funktion Canva Code und der erzeugten Codes). Canva erhebt keinen Anspruch auf Urheberrechte an deinen Eingaben oder den Codes und anderen Ergebnissen. Weitere Informationen und die vollständige Bedingungen findest du in unseren Nutzungsbedingungen für KI-Produkte.

Wer kann sehen, was ich mit Canva Code erstelle?

Die Interaktion zwischen dir und Canva Code ist privat. Wenn du auf In einem Design verwenden klickst, wird ein neues Design mit der aktuellen Version deines Codes erstellt und du kannst das Design (einschließlich des Canva Codes) über den gleichnamigen Button

Teilen.

Wenn du dein Design auf einer Website veröffentlichst, wird die Zugriffskontrolle durch die Einstellungen gesteuert, die du während des Veröffentlichungsvorgangs der Website konfigurierst.

Kann ich den Zugriff meines Teams auf den Canva-Code verwalten?

Als Administrator, Lehrkraft oder Markendesigner kannst du festlegen, wer in deinem Team oder deiner Klasse auf Canva Code zugreifen kann.

Du kannst den Canva-Code nicht auf deiner Homepage finden? Erfahre mehr über die Zugangsbeschränkungen für Canva Code.

Warum werden Codezeilen nicht angezeigt?

Canva Code verwendet jetzt eine diff-basierte Bearbeitung, was bedeutet, dass nur die erforderlichen Codezeilen aktualisiert werden, anstatt den gesamten Block neu zu erstellen. Dies führt zu schnellerem Feedback, wenn du kleine Änderungen an deiner Designlogik vornimmst.

Wenn du nicht siehst, dass sich die Codezeilen nach dem Senden der Aufforderung ändern, bedeutet das, dass Canva im Hintergrund arbeitet und nur die erforderlichen Änderungen anwendet. Bitte warte, bis Canva Code die Erstellung einer anderen Version abgeschlossen hat.

War das hilfreich?

Hilfreich

Nicht hilfreich

Hilfe