ShipPress

Anleitungen

Ändere die Farben deiner ganzen Website per Chat

Farben entscheiden über den ersten Eindruck einer Website. Viele Designs starten in Schwarz, Weiß und Grau. Das ist sauber, kann aber für ein Café, ein Studio oder einen Shop schnell kühl wirken. In WordPress würdest du den Site Editor öffnen, Styles suchen, die Palette bearbeiten und dann jedes Element von Hand korrigieren. In ShipPress beschreibst du im Chat einfach die gewünschten Farben, und die KI ändert die ganze Website auf einmal. In diesem Tutorial gebe ich Pier 7 Coffee eine warme Hafenpalette: Creme, tiefes Marineblau und Kupfer.

  1. Schau dir zuerst deine aktuellen Farben an

    Öffne deine Website in ShipPress und scrolle in der Vorschau zu einem Bereich mit Buttons, Links und kleinen Labels. Bei Pier 7 Coffee ist alles weiß, schwarz und grau: der Seitenhintergrund, die Labels auf den Kaffeekarten und die Links. Überlege dir, welches Gefühl du erzeugen möchtest und wo welche Farbe hingehören soll.

    Die Kaffeekarten von Pier 7 Coffee vor der Änderung: weißer Hintergrund, schwarze Labels und grauer Text.
    Vorher: eine saubere, aber schlichte Schwarz-Weiß-Website.

  2. Beschreibe die Palette in einer Nachricht

    Schreib im Chat, was du möchtest und wohin welche Farbe gehört. Farbcodes brauchst du dafür nicht. Wörter wie „sanftes Creme“, „tiefes Marineblau“ und „Kupfer“ reichen völlig aus. Sag außerdem, was gleich bleiben soll, zum Beispiel dass alle Texte gut lesbar bleiben. Ich habe Folgendes geschickt:

    Gib der ganzen Website eine warme Hafen-Farbpalette: einen sanften cremefarbenen Seitenhintergrund, tiefes Marineblau für Header, Footer und dunkle Bereiche und einen Kupfer-Akzent für Buttons, Links und die kleinen Labels auf den Kaffeekarten. Alle Texte sollen gut lesbar bleiben.
    Das ShipPress-Chatfeld mit der Nachricht, die nach einer Palette in Creme, Marineblau und Kupfer fragt.
    Nenne die Farben in einfachen Worten und sag, wohin jede gehört.

  3. Lass die KI die Farben ändern

    Drücke die Eingabetaste. Die KI erklärt, was sie vorhat, und aktualisiert dann die Farbpalette des Designs. Sie steuert Header, Footer, dunkle Bereiche, Buttons und Links auf jeder Seite. Bei Pier 7 Coffee hat das etwa anderthalb Minuten gedauert. Du kannst weitertippen, während sie arbeitet; neue Nachrichten warten, bis sie fertig ist.

    Der ShipPress-Chat, in dem die KI an der Farbpalette des Themes arbeitet.
    Die KI ändert die Palette für die ganze Website, nicht Seite für Seite.

  4. Lies, was sich geändert hat

    Wenn die KI fertig ist, listet sie jede Änderung auf: den Seitenhintergrund, Header und Footer, die Buttons und Links, die Labels der Kaffeekarten und die Textfarbe. Sie erklärt dir auch, wie sie den Text lesbar gehalten hat, zum Beispiel mit cremefarbenem Text auf kupferfarbenen Buttons.

    Die Zusammenfassung der KI: sanfter cremefarbener Hintergrund, tiefblauer Header und Footer, Buttons und Links in Kupfer, Kartenlabels in Kupfer, Text in Marineblau.
    Eine kurze Liste aller geänderten Farben.

  5. Vergleiche vorher und nachher

    Klicke über der Vorschau auf Refresh und scrolle zur selben Stelle. Die Seite hat jetzt einen warmen cremefarbenen Hintergrund, und die Labels auf den Kaffeekarten sowie der Link „All lots and past lots“ sind kupferfarben. Scrolle ganz nach unten: Der Footer ist tiefblau mit cremefarbenem Text.

    Vorher und nachher: die Kaffeekarten auf Weiß mit schwarzen Labels und auf Creme mit kupferfarbenen Labels.
    Derselbe Bereich, neue Palette.
    Der Footer von Pier 7 Coffee in tiefem Marineblau mit cremefarbenem Text, darüber ein cremefarbener Hintergrund.
    Der Footer und die dunklen Bereiche nutzen das tiefe Marineblau.

  6. Passe Feinheiten mit einer kurzen Nachricht an

    Noch nicht ganz passend? Sag es in wenigen Worten. Unter der Antwort schlägt ShipPress dir nächste Schritte vor; ich habe auf Make the copper a bit lighter geklickt. Die KI hat das Kupfer wärmer und heller gemacht und erklärt, warum sie nicht weiter gegangen ist: Ein helleres Kupfer würde den cremefarbenen Text auf den Buttons schwerer lesbar machen. Wenn du es dir anders überlegst, ist Undo this change gleich daneben.

    Die Folgenachricht „Make the copper a bit lighter“ und die Antwort der KI mit Done und See it in the preview.
    Kleine Änderungen brauchen eine kurze Nachricht und ein paar Sekunden.

  7. Prüfe es auf Phone

    Klicke oben rechts in der Vorschau auf Phone und scrolle durch die Seite. Die Farben gelten für die ganze Website, also nutzt das Handy-Layout denselben cremefarbenen Hintergrund, dieselben kupferfarbenen Labels und dieselben marineblauen Überschriften.

    Die Kaffeekarten von Pier 7 Coffee in der Phone-Vorschau mit cremefarbenem Hintergrund und kupferfarbenen Labels.
    Die neuen Farben auf einem Bildschirm in Handygröße.

  8. Sieh dir die Palette unter Colors and fonts an

    Du möchtest die Farben selbst ansehen oder anpassen? Klicke über der Vorschau auf Colors and fonts. Damit öffnet sich das Styles-Panel von WordPress für die ganze Website. Unter Colors siehst du die neue Palette und die Farben für Link, Captions, Button und Heading. Du kannst jede davon dort von Hand ändern, musst es aber nie.

    Das Styles-Panel Colors von WordPress mit der neuen Palette und den Farben für Link, Captions, Button und Heading.
    Die Palette der KI ist eine ganz normale WordPress-Palette, die du bearbeiten kannst.

  9. Geh jederzeit mit History zurück

    ShipPress speichert nach jedem Durchgang der KI einen Wiederherstellungspunkt. Klicke oben rechts auf History, um einen für die neue Palette und einen für das hellere Kupfer zu sehen. Klicke neben einem davon auf Restore, um genau zum Stand der Website von diesem Zeitpunkt zurückzukehren.

    ShipPress History mit Wiederherstellungspunkten für „Give the whole site a warm harbor color palette“ und „Make the copper a bit lighter“.
    Jede Farbänderung lässt sich rückgängig machen.

  10. Tipps

    • Drei Farben reichen meistens aus: ein Hintergrund, eine dunkle Farbe für Header und Text und ein Akzent für Buttons und Links.
    • Sag, wohin welche Farbe gehört, und nicht nur, welche Farben du magst.
    • Bitte die KI, den Text gut lesbar zu halten; wenn nötig, wählt sie einen etwas dunkleren oder helleren Farbton.
    • Fotos behalten ihre eigenen Farben. Wähle eine Palette, die dazu passt.
    • Prüfe ein paar Seiten und Phone, bevor du auf Go live klickst.