Hilfe-Center
Home KI KI App & Site Builder

Ihr erstes Projekt: Von der Idee zur fertigen Webseite

Gültig für KI App & Site Builder.

Dieser Artikel erklärt Ihnen anhand eines Beispiels, wie Sie mit dem KI App & Site Builder eine Website erstellen. 

Voraussetzung

Sie haben bereits einen KI App & Site Builder Tarif abgeschlossen.

KI App & Site Builder öffnen

  • Melden Sie sich in Ihrem IONOS Konto an.  
  • Klicken Sie in der Titelleiste auf Menü > Web-Projekte.
  • Klicken Sie auf der gewünschten Kachel mit dem Projekt-Typ KI App & Site Builder auf die Schaltfläche Website einrichten. Die Benutzeroberfläche des KI App & Site Builder öffnet sich.
  • Klicken Sie auf die Schaltfläche Neues Projekt starten, um ein neues Projekt zu erstellen.

Wenn Sie bereits Web-Projekte erstellt haben, wählen Sie diese unterhalb des KI App & Site Builder-Chatfensters aus.

KI App & Site Builder Anweisungen geben

Die Kommunikation mit der Künstlichen Intelligenz hinter KI App & Site Builder erfolgt in normaler Alltagssprache. Beachten Sie bei der Formulierung der Anweisungen (Prompts) die nachfolgenden Empfehlungen:

  • Identität und Branche: Wer sind Sie und was machen Sie genau? Zum Beispiel: „Modernes Physiotherapie-Zentrum“ statt nur „Praxis“
  • Zielgruppe: Wen soll das Web-Projekt ansprechen? Zum Beispiel: „junge Familien“, „B2B-Unternehmen“, „ältere Menschen mit chronischen Schmerzen“
  • Alleinstellungsmerkmal (USP): Was macht Sie besonders? Zum Beispiel: „Fokus auf Nachhaltigkeit“, „24/7 Notdienst“, „regionale Zutaten“
  • Gewünschte Sektionen und Funktionen: Welche Inhalte liegen Ihnen besonders am Herzen? Zum Beispiel: „Termindatenbank“, „Über uns“, „Kontaktformular“
  • Stil und Atmosphäre: Wie soll Ihr Web-Projekt visuell und emotional wirken? Zum Beispiel: „minimalistisch und professionell“, „warm, einladend und familiär“

Zusammengefasst würde Ihre Anweisung bzw. Ihr Prompt wie folgt aussehen. Tauschen Sie den Text in Klammern mit Ihren persönlichen Informationen aus. 

Erstelle eine Website für [Identität und Branche]. Unsere primäre Zielgruppe sind [Zielgruppe]. Was uns besonders macht, ist [Alleinstellungsmerkmal]. Die Website muss folgende Sektionen enthalten: [Sektionen und Funktionen]. Der visuelle und emotionale Stil soll [Stil und Atmosphäre] sein.

Für eine freie Autowerkstatt könnte der KI App & Site Builder-Prompt wie folgt aussehen:

Erstelle eine Website für eine freie Autowerkstatt ohne Markenbindung. Unsere primäre Zielgruppe sind preisbewusste Kunden. Was uns besonders macht, ist die Spezialisierung auf ältere Autos und Oldtimer vor 2000, die wir auch selber restaurieren und verkaufen. Die Website muss folgende Sektionen enthalten: Über Uns, Galerie mit Fotos der Werkstatt und durchgeführter Restaurationsprojekte, Kontaktformular, Terminformular mit einem Kalender, der freie Werkstatttermine anzeigt. Der visuelle und emotionale Stil soll seriös und elegant sein. 

Web-Projekt erstellen und veröffentlichen

Nachdem Sie eine Anweisung über das KI App & Site Builder Chatfenster zur Verarbeitung bereitgestellt haben, wird der Bildschirm in zwei Teile aufgeteilt. Auf der linken Seite finden Sie das Chatfenster, in dem Sie weitere Anweisungen eingeben können und Informationen vom KI App & Site Builder erhalten. Rechts daneben finden Sie die Vorschauansicht des erstellten Web-Projekts.

Überhalb der Vorschau finden Sie rechts eine Werkzeugleiste, die Ihnen weitere Möglichkeiten bietet:

  • Desktopansicht und Mobile Ansicht: So sieht Ihre Website nach Veröffentlichung aus.
  • Aktualisieren
  • Vorschau in einem neuen Tab öffnen
  • Versionsverlauf: Springen Sie zu einer vorherigen Version Ihres Web-Projekts zurück. Dadurch können Sie ohne Angst vor Datenverlust und ohne aufwändige Sicherungen verschiedene Anweisungen ausprobieren.
  • Veröffentlichen: Veröffentlicht Ihr Web-Projekt, wahlweise unter einer IONOS-Adresse oder unter Ihrer eigenen Domain-Adresse.

Bewegen Sie Ihren Mauszeiger über die Symbole, um die jeweilige Funktion anzuzeigen. 

Gezielt Inhalte bearbeiten

Um Inhalte zu bearbeiten, beispielsweise Ihre Kontaktdaten, verwenden Sie die Werkzeugleiste am unteren Rand des Vorschaufensters:

  • Text bearbeiten: Klicken Sie auf ein Textelement, um es direkt anzupassen.
  • Zeigen und fragen: Markieren Sie ein Element, um es durch Anweisungen im Chat-Fenster zu verändern, z.B. “Ändere die Form des Buttons zu einem Stern”. Wenn Sie bei der Auswahl die STRG-Taste (CTRL-Taste) gedrückt halten, können Sie mehrere Elemente markieren.

Änderungen und Anpassungen durchführen

Für globale Änderungen und Anpassungen Ihres Web-Projekts, geben Sie Ihre Anweisungen direkt in das Chat-Fenster ein, ohne ein Element zu markieren. Zum Beispiel: “Verwende eine serifenlose Schriftart” oder “Füge auf jeder Seite ein neues Hintergrundbild ein”. 

Weitere Informationen

Inhalt