Dieser Inhalt ist nur für snipKI Mitglieder bestimmt.
Jetzt beitreten

Eigene Mini-Anwendungen mit Canva Code erstellen – Landingpages, Widgets & mehr

Klicke auf die Sterne, um eine Bewertung hinzuzufügen
( 5 )
Veröffentlicht: vor 2 Tagen 154 Ansichten 2 Kommentare

Interaktive Landingpages, Preisrechner oder digitale Speisekarten – und das ganz ohne Programmierkenntnisse? Mit der neuen Canva Code Funktion kannst du in wenigen Minuten eigene kleine Web-Apps bauen, die du direkt in dein Design oder auf deiner Website einsetzen kannst. Ideal für Einsteiger und kostenlos nutzbar.

Ergebnis: Nach diesem Snip hast du selbstständig eine kleine interaktive Anwendung mit Canva Code erstellt, zum Beispiel eine Landingpage, ein Gewinnspiel oder einen Preisrechner, und kannst den generierten Code direkt in deine Projekte einbauen.

AnfangerInnen
  1. Melde dich bei Canva an (kostenloser Plan genügt).
  2. Klicke links im Menü auf “Canva KI” und wähle “Für mich programmieren”.
  3. Gib folgenden Prompt ein: “Ich benötige für einen Newsletter eine Landingpage im SNP KEY Design mit der Hauptfarbe 72D4A9. Bitte integriere einen Countdown Timer, ein kleines interaktives Widget mit einem Gewinnspiel und eine Möglichkeit, einen Mini-Kurs zu buchen. Passe das Design bitte entsprechend an.”
  4. Klicke auf “Absenden” und warte ca. 2–4 Minuten.
  5. Prüfe das Ergebnis im Vorschaufenster. Passe ggf. einzelne Elemente (Farben, Texte, Widgets) per Chat-Eingabe an.
  6. Klicke oben rechts auf “In Design übernehmen” und wähle “Website”.
  7. Nutze die Vorschaufunktion zur Kontrolle und exportiere bei Bedarf den HTML/CSS/JS-Code zur Integration.
  1. Verstehen, wie man Canva Code als Einsteiger nutzt, um automatisiert Mini-Webanwendungen zu erstellen.
  2. Erkennen, wie man interaktive Elemente wie Countdown Timer und Gewinnspiele integriert.
  3. Lernen, wie man mit einfachen Textanweisungen (Prompts) den Webcode anpasst.
  4. Anwendung der resultierenden HTML-, CSS- und JavaScript-Codes direkt in Canva-Projekten.
  5. Überprüfung und Optimierung der Mini-Anwendung in Desktop- und mobiler Ansicht.
  1. Erstellung von interaktiven Quiz-Widgets für Lernplattformen oder Marketingkampagnen.
  2. Entwicklung von benutzerdefinierten Kontaktformularen mit integrierten Validierungen.
  3. Generierung von dynamischen Preis- oder Angebotsrechnern für verschiedene Branchen.
  4. Umsetzung kleiner E-Commerce Features wie Produktfilter oder Bestellübersichten.
  5. Design von interaktiven Event-Seiten mit Countdown, Anmeldung und Gewinnspielen.
Als nächstes
Teilen

Neugierig auf mehr?

Bereits über 300 praxisorientierte und kompakte KI-Tutorials warten auf dich!