Du willst eine Landingpage, ein Quiz oder einen kleinen Rechner bauen, hast aber kein Entwicklerteam und auch keine Lust auf ein Coding-Tool? Canva Code gab es schon seit der Canva Create im April 2025, nur mit einem Haken: Wolltest du hinterher nur eine Farbe ändern oder einen Tippfehler korrigieren, musstest du neu prompten und hast oft ein komplett anderes Ergebnis bekommen. Canva Code 2.0 löst genau das. Das Ergebnis bleibt jetzt ein normales, editierbares Canva-Design. In diesem Snip zeige ich dir, wie du von Null oder aus einer Vorlage startest, wie du HTML aus Claude oder ChatGPT importierst und wie du danach ganz normal im Canva-Editor weiterarbeitest.
Ergebnis: Du hast eine funktionierende Seite oder kleine App in Canva, komplett mit Formularen, Bildern und Navigation, die du wie jedes andere Canva-Design weiterbearbeiten und direkt als Website veröffentlichen kannst.
- Geh auf canva.com und log dich mit deinem Account ein, ein Google-Konto reicht. Ein bezahltes Abo brauchst du für Canva Code nicht, die kostenlose Variante funktioniert.
- Öffne in der Übersicht den Bereich Code. Über “Code erstellen” startest du von Null, über “Vorlagen” und dort den Reiter Code startest du mit einer fertigen Basis.
- Wenn du eine Vorlage nutzt: klick sie an, geh auf “Vorlage anpassen” und klick dich einmal durch die Vorschau, bevor du am Design arbeitest.
- Für einen Start von Null klickst du auf “Code neu erstellen” und schreibst deinen Prompt in das Feld links. Nenn Branche, Stil und die Sektionen, die du brauchst, zum Beispiel Hero-Section, Reservierungsformular, Online-Bestellung, Kontaktdaten, Datenschutz und Impressum.
- Prompt absenden und warten. Für eine Landingpage bist du meist unter einer Minute durch.
- Prüf das Ergebnis über “Vorschau” im Vollbild und klick die Sprungmarken und Formulare einmal durch, ob alles funktioniert.
- Passe die einzelnen Elemente jetzt direkt im Editor an: Text anklicken und überschreiben, Bilder per Drag and Drop tauschen, Farben und Schriften über die Toolbar setzen. Wenn du willst, änderst du einzelne Elemente auch per KI-Prompt.
- Alternativer Weg: Lass dir von Claude oder ChatGPT eine Seite als HTML bauen, kopier den Code über das Code-Symbol und füg ihn in Canva Code ein. Danach ersetzt du die Bildplatzhalter durch echte Grafiken aus der Canva-Bibliothek.
- Schau nach den Formulareinträgen. Canva verwaltet Reservierungen und Bestellungen im Hintergrund, du findest die Einsendungen also direkt in Canva.
- Wenn das Ergebnis passt, geh auf “Website veröffentlichen” und stell die Seite über Canva live.
- Verstehen, was sich mit Canva Code 2.0 geändert hat und warum die volle Editierbarkeit den Unterschied macht.
- Eine Seite oder kleine App per Prompt erzeugen, aus einer Vorlage starten oder fertiges HTML importieren.
- Ein Ergebnis nachträglich anpassen, manuell im Editor oder gezielt per Prompt auf einzelne Elemente.
- Einschätzen, wann Canva Code reicht und wann ein Tool wie Lovable oder Bolt die bessere Wahl ist.
- Formulareinsendungen aus der veröffentlichten Seite in Canva wiederfinden.
- Schnelle Erstellung von interaktiven Quizzen für Marketingkampagnen oder Schulungen ohne Programmierkenntnisse.
- Bau von unkomplizierten internen Tools wie Kalendern oder Umfrageformularen direkt in Präsentationen.
- Erstellung von maßgeschneiderten Landingpages für Produktlaunches mit direkter Veröffentlichung per Canva-Link.
- Integration von Webformularen für Kundenbestellungen oder Terminreservierungen mit automatisierter Datenverwaltung.
- Kollaborative Gestaltung von Prototypen für neue Marketingideen und Feedback-Schleifen in Echtzeit mit Teammitgliedern.
Als nächstes
