Du kannst komplett ohne Code arbeiten, deine Website mit KI erstellen lassen oder beide Möglichkeiten miteinander kombinieren.
Deine Website mit KI erstellen
Mit Vibe-Coding kannst du in Onepage einzelne Abschnitte, Elemente oder sogar komplette Seiten per Texteingabe erstellen lassen. Du beschreibst der KI einfach, was du dir vorstellst, zum Beispiel einen Hero-Bereich, eine interaktive Preisübersicht oder eine komplette Landingpage. Die KI erstellt daraus den entsprechenden Abschnitt beziehungsweise deine Seite.
Du kannst deine komplette Website auf einmal erstellen lassen oder sie Abschnitt für Abschnitt nach und nach aufbauen. Für den Einstieg empfehlen wir, die einzelnen Abschnitte nacheinander zu erstellen.
Eine komplette Seite mit KI erstellen
Wenn du ein neues Projekt erstellst, kannst du deine Startseite direkt mit KI erstellen. Klicke dafür in der Projektübersicht auf den blauen Button "Projekt erstellen".
und anschließend auf "Website mit KI erstellen". Vergib einen Projektnamen und beschreibe im anschließend geöffneten KI-Chat, wie deine Startseite aufgebaut sein und aussehen soll.
Abschnitte mit KI erstellen
Alternativ kannst du deine Startseite Abschnitt für Abschnitt nach und nach aufbauen. Wähle dafür beim Erstellen des neuen Projekts "Von Grund auf neu starten". Anschließend kannst du über "+ Abschnitt hinzufügen" → "Vibe-Abschnitt - Mit KI erstellen" deinen ersten Abschnitt erstellen.
Im geöffneten KI-Chat beschreibst du, welchen Abschnitt du benötigst, welche Inhalte er enthalten soll und wie du dir das Design vorstellst. Sobald der Abschnitt erstellt ist, kannst du weitere Abschnitte hinzufügen und so deine Startseite Schritt für Schritt aufbauen.
So kannst du beispielsweise zuerst einen Hero-Bereich, anschließend deine Leistungen, Vorteile, Referenzen und zum Schluss einen CTA- oder Kontaktbereich erstellen.
Mit der KI weiterarbeiten
Nach der Erstellung kannst du die KI jederzeit um Änderungen bitten. Beschreibe beispielsweise, was angepasst werden soll, und die KI setzt die gewünschte Änderung um.
Du bist dabei aber nicht ausschließlich auf die KI angewiesen: Viele Eigenschaften kannst du auch direkt über die Bedienelemente im Editor selbst anpassen. So kannst du beispielsweise Design, Abstände oder andere Einstellungen eigenständig feinjustieren.
Je konkreter deine Angaben zu Inhalten, Aufbau, Design, Farben oder Funktionen sind, desto besser kann die KI deine Vorstellungen umsetzen. Auch Screenshots oder andere visuelle Referenzen können als Orientierung dienen.
Du musst deinen Prompt dabei nicht von Anfang an perfekt formulieren. Erstelle zunächst einen ersten Entwurf und verfeinere ihn anschließend mit konkreten Änderungswünschen.
Ausführliche Anleitung: Vibe-Coding in Onepage
Tipps für bessere Prompts: Vibe-Coding: So schreibst du effektive Prompts für bessere Ergebnisse
Deine Website ohne Code mit dem Editor erstellen
Du kannst deine Website selbstverständlich auch komplett ohne KI mit unserem Editor erstellen.
Dafür hast du verschiedene Möglichkeiten: Entweder du startest mit einer fertigen Seitenvorlage, verwendest einzelne Abschnittsvorlagen oder baust deine Abschnitte komplett selbst auf.
Mit einer fertigen Seitenvorlage starten
Wenn du ein neues Projekt oder eine neue Seite erstellst, kannst du zunächst eine der verfügbaren Vorlagen auswählen.
Dabei stehen dir auch Vorlagen für verschiedene Branchen und Anwendungsbereiche zur Verfügung, sodass du beispielsweise eine passende Grundlage für ein Restaurant, eine Agentur, Immobilien oder einen anderen Geschäftszweck auswählen kannst.
Nachdem du dich für eine Vorlage entschieden hast, gibst du deinen Projektnamen beziehungsweise Seitennamen an, und die Vorlage wird geladen.
Danach kannst du die komplette Seite im Editor nach deinen Vorstellungen anpassen, zum Beispiel:
Texte und Überschriften
Bilder
Farben
Abstände
Buttons
weitere Seitenelemente
Neben der Startseite kannst du auch weitere interne Seiten für dein Projekt erstellen, zum Beispiel "Über uns", "Leistungen", "Kontakt" etc. Auch diese Seiten kannst du individuell gestalten und an deine Bedürfnisse anpassen.
Alle Elemente lassen sich direkt im Editor bearbeiten und individuell anpassen.
Seite von Grund auf erstellen
Alternativ kannst du "Von Grund auf neu starten" auswählen und einen Projekt- oder Seitennamen vergeben.
Anschließend kannst du über "+ Abschnitt hinzufügen" nach und nach einzelne Abschnitte zu deiner Seite hinzufügen. Dafür stehen dir verschiedene Abschnitts-Vorlagen zur Verfügung, die du anschließend ebenfalls individuell bearbeiten kannst.
So kannst du deine Seite Schritt für Schritt genau nach deinen Vorstellungen aufbauen.
Abschnitte komplett selbst gestalten
Du kannst einen Abschnitt aber auch komplett selbst aufbauen. Das ist besonders praktisch, wenn du eine bestimmte Anordnung benötigst oder Elemente wie beispielsweise einen Slider, ein Bento-Layout oder ein Marquee umsetzen möchtest.
Wenn du einen neuen Abschnitt hinzufügst, wechselst du dafür in den Reiter "Entwürfe". Dort kannst du beispielsweise eine Vorlage mit der gewünschten Anzahl und Anordnung der Spalten auswählen.
Anschließend fügst du die gewünschten Elemente selbst in die einzelnen Spalten ein und bestimmst dadurch selbst, wie dein Abschnitt aufgebaut sein soll.
So kannst du beispielsweise einen Abschnitt mit mehreren Spalten erstellen und anschließend Bilder, Texte, Buttons oder andere Elemente genau dort platzieren, wo du sie haben möchtest.
Weitere Informationen und Anleitungen dazu findest du in unserem Hilfe-Center:
KI und No-Code kombinieren
Du musst dich nicht für eine der beiden Möglichkeiten entscheiden. Die Kombination aus KI und dem klassischen Editor ist häufig der schnellste Weg zu einer individuellen Website.
Du kannst beispielsweise mit einer fertigen Seitenvorlage starten, einzelne Bereiche über den Editor anpassen und für besonders individuelle Abschnitte Vibe-Coding verwenden.
So kannst du zum Beispiel:
eine bestehende Vorlage als Grundlage verwenden,
einen individuellen Hero- oder CTA-Bereich mit KI erstellen,
einzelne Elemente anschließend über die Bedienelemente anpassen,
und weitere Abschnitte wieder aus Vorlagen hinzufügen.
Gerade für besondere Designs oder Funktionen kann Vibe-Coding eine gute Ergänzung zu den bestehenden Baukasten-Elementen sein.
Inspiration: Beispielprojekte mit Vibe-Coding
Texte mit dem KI-Autor erstellen und bearbeiten
Neben Vibe-Coding steht dir im Editor auch der KI-Autor zur Verfügung. Er unterstützt dich direkt bei der Erstellung und Bearbeitung deiner Website-Texte.
Du kannst damit beispielsweise neue Texte und Überschriften erstellen oder bestehende Inhalte verbessern, kürzen, verlängern, umformulieren oder übersetzen.
Der KI-Autor ist besonders praktisch, wenn das Layout deiner Seite bereits steht und du einzelne Texte schnell erstellen oder optimieren möchtest.
Ausführliche Anleitung: KI-Autor für deinen Content
Empfohlener Ablauf
Für den Einstieg kannst du dich an diesem einfachen Ablauf orientieren:
Grundlage wählen: Starte mit einer Vorlage oder beginne deine Seite von Grund auf.
Mit KI aufbauen: Erstelle deine Seite oder einzelne Abschnitte mit Vibe-Coding.
Verfeinern: Passe Inhalte und Design über die KI oder direkt über die Bedienelemente im Editor an.
Inhalte ergänzen: Nutze den KI-Autor für Texte und Inhalte.
So kannst du KI und No-Code flexibel miteinander kombinieren und deine Website Schritt für Schritt nach deinen Vorstellungen aufbauen.
💡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. 🙂