Anleitungen/Website-Layout/Das Design einer mit KI erstellten Website bearbeiten

Das Design einer mit KI erstellten Website bearbeiten

Nachdem du deine Website mit dem KI-Website-Builder erstellt hast, kannst du das Design und Layout mithilfe von KI-Prompts anpassen. Dieser Ratgeber zeigt dir, wie du mithilfe von KI dein Website-Design optimieren kannst.

Diese Funktion ist für neue Websites mit den WordPress.com-Tarifen Premium und Business verfügbar. Du kannst sie kostenlos testen (mit bis zu 30 Prompts) und ein Upgrade durchführen, um die Website zu veröffentlichen und weiter anzupassen.

Eine mit KI erstellte Website bearbeiten

Du kannst sowohl mit KI als auch manuell Inhalte aktualisieren, bearbeiten und zu deiner Website hinzufügen. So arbeitest du mit KI an deiner Website:

  1. Rufe deine Website-Seite auf.
  2. Wähle deine Website aus und klicke auf den Button Meine Startseite.
  3. Der nächste Schritt hängt vom Tarif der Website ab:
    • Kostenlose Testwebsites werden direkt im Editor angezeigt, um die Bearbeitung fortzusetzen.
    • Aktualisierte Websites werden im Dashboard der Website angezeigt, wo du zu Design → Editor navigieren kannst, um mit der Bearbeitung fortzufahren.
  4. Klicke am unteren Bildschirmrand auf das Icon mit dem vierzackigen Stern, um den AI Assistant zu öffnen:
The AI symbol that resembles a four-pointed star.

Das allgemeine Farbschema ändern

Um das Farbschema deiner Website mithilfe von KI zu aktualisieren, führe die folgenden Schritte aus:

  1. Klicke auf das KI-Icon mit dem vierzackigen Stern, um das Prompt-Feld zu öffnen.
  2. Gib einen Prompt ein, beispielsweise: „Ändere die Farben“ oder „Ich möchte das Farbschema der gesamten Website in Pastellfarben ändern.
  3. Dir werden Farbpaletten zum Durchsuchen bereitgestellt. Klicke auf eine Farbe, um zu sehen, wie die Änderung auf deiner Website aussieht.
  4. Nachdem du das gewünschte Farbschema ausgewählt hast, klicke auf den Button Speichern, um die Änderung zu speichern.

Um manuell ein Farbschema auszuwählen, navigiere zu Design → Editor → Stile → Farben und wähle eine neue Farbpalette aus (in der kostenlosen Testversion nicht verfügbar).

Im KI-Prompt-Feld steht „Schlage neue Farben für meine Website vor“ und die KI hat Farbschemavorschläge zur Auswahl bereitgestellt.

Eine bestimmte Farbe ändern

Wenn du mit dem allgemeinen Farbschema der Website zufrieden bist, aber die Farbe eines bestimmten Abschnitts oder Elements ändern möchtest, führe die folgenden Schritte aus:

  1. Klicke auf das Element (z. B. Text oder Button) oder den jeweiligen Abschnitt, dessen Farbe du ändern möchtest.
  2. Öffne das KI-Prompt-Feld.
  3. Gib deinen Prompt zur Farbänderung ein. Du kannst die Farbe beschreiben oder nach einem bestimmten Farbcode fragen:
    „Ändere diesen Button in leuchtendes Gelb“
    „Verwende für den Hintergrund des Headers die Farbe #FFB514“
  4. Klicke auf den Button Speichern, um die Änderung zu speichern, oder auf das Rückwärtspfeil-Icon, um die Änderung rückgängig zu machen.

Neue Abschnitte hinzufügen

Du kannst einem Seitenlayout neue Abschnitte hinzufügen:

  1. Klicke auf einen vorhandenen Abschnitt, in dem du den neuen Abschnitt hinzufügen möchtest.
  2. Öffne das KI-Prompt-Feld.
  3. Gib deinen Prompt ein, beispielsweise:
    „Füge unter „Info“ einen Abschnitt mit Referenzen hinzu.“
    „Füge auf der Startseite einen Abschnitt mit einer Preistabelle ein.“
  4. Überprüfe den neuen Abschnitt. Die KI kann dir mehrere Layouts zur Verfügung stellen, zwischen denen du mit den Nach-links- und Nach-rechts-Pfeilen wechseln kannst.

Abschnitte neu anordnen

Ändere das Layout deiner Website, indem du Abschnitte verschiebst:

  1. Klicke auf den Abschnitt, den du verschieben möchtest.
  2. Öffne das KI-Prompt-Feld.
  3. Tippe Folgendes ein:
    „Verschiebe den Abschnitt „Dienste“ über „Referenzen“.
    „Verschiebe den Abschnitt „Kontakt“ nach oben.“

Wenn eine zusätzliche Feinabstimmung erforderlich ist, kannst du mithilfe der Listenansicht einen Abschnitt manuell auswählen. Es wird eine Toolbar mit dem ausgewählten Abschnitt und Aufwärts- und Abwärtspfeilen angezeigt, um den Abschnitt an eine neue Position zu verschieben:

Ein neuer Abschnitt mit hervorgehobenen Positionierungspfeilen zum Verschieben.
Verwende die Pfeil-Icons, um einen Abschnitt nach oben oder unten zu verschieben

Einen bestimmten Abschnitt oder ein bestimmtes Element entfernen

Lösche unerwünschte Abschnitte oder Elemente in nur wenigen Schritten:

  1. Klicke auf den Abschnitt oder das Element, das du entfernen möchtest.
  2. Öffne das KI-Prompt-Feld.
  3. Verwende etwa folgenden Prompt:
    „Entferne den FAQ-Bereich von der Startseite.“
    „Lösche den zusätzlichen Galerieblock in „Info“.
  4. Klicke auf den Button Speichern, um die Änderung zu speichern, oder auf das Rückwärtspfeil-Icon, um die Änderung rückgängig zu machen.

Du kannst Blöcke auch manuell entfernen, indem den/die Block/Blöcke auswählst, auf das Icon ⋮ klickst und die Option Löschen auswählst.

Weitere Design-Prompts

Die Möglichkeiten beim Erstellen von Websites mit KI sind endlos. Hier sind weitere Beispiel-Prompts für Designänderungen, die du von der KI vornehmen lassen kannst:

  1. Ändere die Farbpalette so, dass Blau- und Grautöne verwendet werden.
  2. Mache alle Buttons rund und blau.
  3. Aktualisiere die Hintergrundfarbe in Weiß.
  4. Wechsle zu einer moderneren, serifenlosen Schriftart.
  5. Verwende für alle Titel eine auffallende, große Schriftart für Überschriften.
  6. Füge der Startseite einen „Hero“-Bereich hinzu.
  7. Ändere das Layout in eine einzelne Spalte.
  8. Gestalte den Footer so um, dass zuerst Social-Media-Links angezeigt werden.
  9. Füge über dem Footer einen Call-to-Action-Abschnitt hinzu.
  10. Ändere den Menüstil in eine vertikale Seitenleiste.
  11. Vergrößere das Website-Logo im Header.
  12. Füge unter dem Hauptinhalt einen Abschnitt mit Referenzen hinzu.
  13. Verwende ein Rasterlayout für die Galeriebilder.
  14. Füge unten auf der Seite ein Anmeldeformular für den Newsletter hinzu.
  15. Halte die Navigationsleiste oben.
  16. Vergrößere den Leerraum zwischen Abschnitten.
  17. Zentriere alle Überschriften auf jeder Seite.
  18. Verwende auf der gesamten Website einen hellen Hintergrund mit dunklem Text.
  19. Füge Bildern leichte Schlagschatten hinzu.
  20. Vergrößere den Abstand zwischen Absätzen.
  21. Ändere die Abschnittsreihenfolge auf der Startseite.
  22. Gestalte die Bilder der Teammitglieder kreisförmig.
  23. Verwende einen bunten Farbverlauf für den Seitenhintergrund.
  24. Füge dem Abschnitt „Dienste“ Icons hinzu.
  25. Verwende für den Hintergrund sanfte Pastellfarben.
  26. Ersetze alle Überschriften durch eine Schriftart im Handschriftstil.
  27. Füge zwischen den einzelnen Abschnitten eine Trennlinie hinzu.
  28. Verwende große, auffällige Call-to-Action-Buttons.
  29. Verwende für Überschriften nur Großbuchstaben.
  30. Füge oben auf jeder Seite einen Einführungsabschnitt hinzu.
Copied to clipboard!