Mit der Code-Generierung kannst du benutzerdefinierte interaktive Elemente und Effekte direkt auf deinen Seiten einfügen. Im Gegensatz zur normalen Seiten- oder Formularerstellung arbeitest du hier direkt im speziellen Custom-Code-Bereich.
Hier erstellt der KI-Assistent Code-Snippets, die deine Seite gezielt erweitern und verbessern.
🎬 Am Ende des Artikels findest du unsere aktuelle Videoanleitung!
Was möglich ist
Der KI-Assistent kann viele kleine, aber leistungsstarke Elemente innerhalb des Custom-Code-Rahmens erzeugen, darunter:
Labels und Badges
Diagramme (Balkendiagramme, Kreisdiagramme, Fortschrittsanzeigen)
Rechner (einfach, client-seitige Logik)
Benutzerdefinierte Buttons mit einzigartigem Verhalten
Ganze Sektionen, die im Code gestaltet sind
Elemente mit Effekten, wie Schreibmaschinentext oder animierte Zähler
Im Grunde gilt: Wenn es in den Code-Rahmen passt, kannst du es versuchen.
Was nicht möglich ist
Es gibt einige Einschränkungen, die du beachten solltest:
Keine Back-End-Logik (z.B. Datenbankverbindungen, serverseitige Aktionen)
Keine Effekte, die die gesamte Seite oder große Teile einer Sektion verändern (z. B. vollständig benutzerdefinierte Hintergrundanimationen)
Keine extrem komplexen Anwendungen. Der KI-Assistent eignet sich am besten für fokussierte, leichte Funktionen.
Kein Bearbeiten bestehender Onepage-Elemente
Chat mit dem KI-Assistenten starten
Mit Custom-Code kannst du die Möglichkeiten deiner Seite noch erweitern, die KI hilft dir dabei, eigenen Code zu erstellen und sogar Bilder einzubinden.
Schritt 1: Abschnitt hinzufügen
Füge einen neuen Abschnitt hinzu und wähle "Personalisierter Code" aus.
Schritt 2: Chat-Fenster öffnen
Du hast jetzt die Möglichkeit, das Chat-Fenster zu öffnen und detailliert zu schreiben, was die KI dir erstellen soll.
Effektive Prompts schreiben
Im Gegensatz zu Seiten- oder Formular-Prompts erfordert die Code-Generierung präzisere Anweisungen. Sie funktioniert wie ein "AI-native Tool": Du solltest genau beschreiben, was du möchtest, teilweise sogar mit technischen Details.
Beispiele für gute Prompts:
"Erstelle einen Countdown-Timer, der bei 10 Minuten startet und Minuten:Sekunden anzeigt."
"Füge diesem Text einen Schreibmaschineneffekt hinzu: 'Wir erstellen KI-Websites schneller als alle anderen.'"
"Erzeuge eine Fortschrittsanzeige, die bis 75 % gefüllt wird, mit der Beschriftung 'Projekt abgeschlossen.'"
"Erstelle einen Button, der seine Farbe beim Überfahren ändert und zur Preissektion verlinkt."
"Erstelle einen einfachen Rechner, der eins und zwei addiert und das Ergebnis anzeigt."
"Füge einen animierten Zahlenzähler hinzu, der in 3 Sekunden von 0 auf 500 zählt."
"Erstelle ein Kreisdiagramm, das Sales 60 %, Marketing 25 % und Operations 15 % zeigt."
"Erstelle ein durchlaufendes Testimonial-Karussell mit 3 Zitaten."
"Füge einen Button hinzu, der die Seite beim Klicken sanft nach oben scrollt."
"Erstelle ein Balkendiagramm, das Umsatz, Ausgaben und Gewinn vergleicht."
"Erstelle einen blinkenden Cursor-Effekt am Ende einer Überschrift."
"Erstelle ein Karte-Element mit Hover-Animation: leichtes Hereinzoomen und einen Schatten hinzufügen."
"Füge einen rotierenden Texteffekt hinzu, der zwischen 'Schnell', 'Flexibel' und 'Leistungsstark' wechselt."
"Erstelle einen Fortschrittskreis, der bis 90 % gefüllt wird, mit der Beschriftung 'Kundenzufriedenheit'."
📌 Hinweis: Die aufgeführten Beispiele dienen nur der Orientierung. Wenn du den KI-Assistenten nutzt, musst du immer genau angeben, was erstellt werden soll, inklusive:
Text, der in Überschriften stehen soll
Inhalte von Kacheln oder Elementen
Genauen Text für Buttons oder Beschriftungen
Da diese Elemente keine editierbaren Textfelder sind, kann die KI nur dann korrekt arbeiten, wenn sie von Anfang an alle Inhalte kennt. Je präziser deine Angaben, desto genauer das Ergebnis.
Also ein Beispiel: "Erstelle mir einen Kalorienrechner auf Deutsch und bringe folgende Farbe mit ein: #00d54b."
Du kannst das Ergebnis prüfen und anschließend entscheiden, ob du es akzeptierst oder ablehnst.
Wenn du das Endergebnis akzeptierst, hast du die Möglichkeit, weitere Anpassungen vorzunehmen.
Beispiel: "Bitte den Button 'Kalorien berechnen‘ rund machen mit Radius: 25px."
Wenn das erste Ergebnis nicht passt, kannst du einen neuen Versuch starten und auf Ablehnen klicken. Mit Re-Generieren bleibt die bestehende Code-Struktur erhalten, während Inhalte und Effekte neu erstellt oder angepasst werden.
Anfangshürde meistern
Wenn du nicht genau weißt, was du anfragen sollst:
Mach einen Screenshot von einem Effekt, den du nachbilden willst.
Füge ihn in den KI-Assistenten ein und bitte ihn, etwas Ähnliches zu erzeugen.
Der Assistent versteht die Idee und erstellt darauf basierend einen Code.
Beispiel: "Erstelle solche wechselnden Buttons wie im Screenshot
1. Texterstellung
2. Logoerstellung
3. SEO-Optimierung
Für jeden Bereich soll beim Anklicken eine kurze Liste mit jeweils zwei konkreten Leistungsbeispielen inklusive Preisen angezeigt werden.
1. Texterstellung:
Blogartikel (500 Wörter) - 150 €
Produktbeschreibung (bis 300 Wörter) - 80 €
2. Logoerstellung:
Einfaches Logo Design - 250 €
Logo mit Markenhandbuch - 600 €
3. SEO-Optimierung:
Einfache SEO-Optimierung - 300 €
Keyword-Analyse & Report - 200 €
Die Darstellung soll übersichtlich sein, mit aktivem Button-Hervorhebung und klarer Trennung der Bereiche."
Der Screenshot:
Diesen kannst du einfach im Chat-Fenster einfügen oder aber du nutzt die Upload-Funktion "+ Medientext hochladen".
Das Endergebnis könnte dann folgendermaßen aussehen:
Auch hier kannst du so lange mit dem KI-Assistenten chatten und Anpassungen vornehmen lassen, bis du mit dem Ergebnis vollständig zufrieden bist.
Video-Tutorial
Für einen besseren Überblick über den Ablauf kannst du dir auch unser Video-Tutorial unten ansehen:
💡Du hast Feedback zu diesem Hilfe-Artikel? Teile es gerne mit uns über den Live-Chat oder an support@onepage.io, damit wir ihn auf dem neuesten Stand halten können. 🙂