ShipPress

Anleitungen

Ändere die Schriften deiner ganzen Website per Chat

Schriften bestimmen die Stimmung einer Website genauso wie Farben. Ein Design mit einer eleganten Serifenschrift passt vielleicht nicht zu einem modernen Shop, und kleiner Fließtext lässt sich auf dem Smartphone schlecht lesen. In WordPress würdest du den Site Editor öffnen, Styles suchen, Schriftdateien hinzufügen und jedes Element von Hand einstellen. In ShipPress nennst du die Schriften einfach im Chat, und die KI ändert die ganze Website auf einmal. In diesem Tutorial stelle ich Pier 7 Coffee von einer klassischen Serifenschrift auf eine kräftige, moderne serifenlose Schrift um und mache den Fließtext besser lesbar.

  1. Schau dir zuerst deine aktuellen Schriften an

    Öffne deine Website in ShipPress und scrolle in der Vorschau zu einer Stelle mit einer Überschrift und normalem Text. Bei Pier 7 Coffee haben die Überschriften eine dünne, klassische Serifenschrift, und der Fließtext ist klein. Überlege dir, was du ändern möchtest: die Überschriften, den Fließtext oder beides, und ob der Text größer sein soll.

    Die Startseite von Pier 7 Coffee vor der Änderung: der Titel PIER 7 COFFEE und die Überschrift Buy few lots. Know who grew them. in einer dünnen Serifenschrift, darunter ein kleiner Absatz
    Vorher: dünne Serifen-Überschriften und kleiner Fließtext.

  2. Nenne die Schriften in einer Nachricht

    Klicke unten links in das Chatfeld und beschreibe die Änderung. Schreibe Folgendes in dieselbe Nachricht:

    • Die Schrift für Überschriften, hier „Jost, fett“.
    • Die Schrift für den Fließtext und die Größe, hier „Inter, etwas größer und leichter lesbar“.
    • Woher die Schriften kommen. Das Twenty Twenty-Four-Theme von WordPress bringt Jost und Inter bereits auf deiner Website mit, deshalb habe ich die KI gebeten, diese Dateien zu verwenden und nicht Google Fonts. Deine Website lädt ihre Schriften dann von sich selbst.
    • Was bleibt: „Farben, Fotos und Layout bleiben gleich“.
    • Wo es gelten soll: „jede Seite, das Menü und der Footer“.

    Drücke zum Senden die Eingabetaste.

    Das ShipPress-Chatfeld mit der Nachricht: Ändere die Schriften auf der ganzen Website. Überschriften: Jost, fett. Fließtext: Inter, etwas größer und leichter lesbar. Beide Schriften sind im Twenty Twenty-Four-Theme von WordPress enthalten, das bereits auf dieser Website ist, also nutze diese Schriftdateien (kein Google Fonts). Farben, Fotos und Layout bleiben gleich, und achte darauf, dass jede Seite, das Menü und der Footer die neuen Schriften verwenden.
    Eine Nachricht: Schrift für Überschriften, Schrift für den Fließtext, Größe und was bleiben soll.

  3. Lass die KI arbeiten

    Die KI ändert die Schrifteinstellungen der Website in mehreren Schritten: Sie legt die beiden Schriften für Überschriften und Fließtext in den Schrifteinstellungen deines Themes fest und aktualisiert dann die Stellen, die ihre eigene Schrift festlegen, etwa den Website-Titel, das Menü und den Footer. Du kannst die Schritte im Chat verfolgen. Bei Pier 7 Coffee dauerte das etwa zweieinhalb Minuten.

    Die Nachricht im Chat, darunter Worked · 6 steps, während die KI noch arbeitet
    Die Schritte erscheinen im Chat, während die KI arbeitet.

  4. Lies, was sich geändert hat

    Wenn die KI fertig ist, fasst sie die Änderung zusammen: Überschriften, auch der Website-Titel und das Handy-Menü, sind jetzt Jost fett; Fließtext, Menü und Footer-Links sind Inter; der Fließtext wurde von 15px auf 17px vergrößert und kleinere Beschreibungen von 14px auf 16px; Farben, Fotos und Layout sind unverändert. Darunter findest du Buttons mit möglichen nächsten Schritten, zum Beispiel Make body text even bigger.

    Die Zusammenfassung der KI mit Hinweisen zu Fonts, Reading size und Unchanged sowie den Buttons See what changed, Make body text even bigger, Add a contact form und Undo this change
    Die Zusammenfassung listet die neuen Schriften und Größen auf.

  5. Vergleiche vorher und nachher

    Schau dir dieselbe Stelle der Seite noch einmal an. Die Überschrift ist jetzt eine kräftige, moderne serifenlose Schrift, die sich klar vom Foto abhebt, und der Fließtext ist größer und hat mehr Abstand zwischen den Zeilen. Die Fotos, Farben und das Layout sind genau da, wo sie waren: Nur die Schrift hat sich geändert.

    Dieselbe Überschrift und derselbe Absatz nebeneinander: vorher in dünner Serifenschrift mit kleinem Text, nachher in fettem Jost mit größerem Inter-Text
    Gleicher Text, neue Schriften: fette Jost-Überschriften und größerer Inter-Fließtext.
    ShipPress nach der Änderung: links die Chat-Zusammenfassung, rechts die Startseite von Pier 7 Coffee mit PIER 7 COFFEE und der Überschrift in fettem Jost, Überschrift und Absatz hervorgehoben
    Die ganze Startseite verwendet jetzt die neuen Schriften.

  6. Prüfe andere Seiten und Phone

    Eine Schriftänderung sollte jede Seite erreichen, nicht nur die Startseite. Öffne ein paar andere Seiten über die Seitenliste oben links in der Vorschau. Auf der Seite Bar Menu verwenden der Seitentitel, die Abschnittstitel, die Namen der Getränke und die Preise alle die neuen Schriften.

    Klicke dann oben rechts in der Vorschau auf Phone. Größerer Fließtext ist auf einem kleinen Bildschirm am wichtigsten. Prüfe also, dass Überschriften nicht in zu viele Zeilen umbrechen und dass sich der Text angenehm lesen lässt.

    Die Seite Bar Menu nach der Änderung: der Titel BAR MENU, der Abschnitt AT THE BAR und die Getränke mit Preisen, alles in den neuen Schriften
    Auch die Seite Bar Menu verwendet die neuen Schriften.
    Die Seite Bar Menu in der Phone-Vorschau: BAR MENU in fettem Jost, die Öffnungszeiten und die Getränkeliste in größerem Inter-Text
    Dieselbe Seite auf Phone.

  7. Feile in Colors and fonts von Hand an den Details

    Die KI hat echte WordPress-Stileinstellungen geändert, du kannst sie also auch selbst anpassen. Klicke in der Leiste über der Vorschau auf Colors and fonts. Dadurch öffnen sich die Styles des Themes im WordPress Site Editor. Klicke auf Typography: In der Schriftenliste siehst du jetzt Heading (Jost) und Body (Inter).

    Klicke unter Elements auf Headings, um die Schrift der Überschriften mit Zeilenhöhe, Buchstabenabstand und Groß-/Kleinschreibung zu sehen. Ändere hier etwas und klicke auf Save, oder frag einfach weiter im Chat, zum Beispiel „Mach die Überschriften etwas weniger fett“.

    Colors and fonts im WordPress Site Editor geöffnet: Styles, Typography, mit den hervorgehobenen Schriften Body (Inter), Heading (Jost), Japanese (Noto Serif JP) und Traditional Chinese (Noto Serif TC)
    Typography listet die Schriften der Website auf.
    Styles, Headings im Site Editor: das Menü Font auf Heading (Jost) eingestellt, darunter Appearance, Line height 1.15 und Letter case
    Headings: Schrift, Schriftschnitt, Zeilenhöhe und Abstände.

  8. Gefällt es dir nicht? Geh zurück

    Jede Änderung der KI speichert einen Wiederherstellungspunkt. Klicke in der oberen Leiste auf History: Die Schriftänderung steht dort mit Uhrzeit und Größe. Wenn dir die alten Schriften lieber sind, klicke beim Schritt davor auf Restore, oder klicke direkt nach der Änderung unter der Antwort der KI auf Undo this change.

    Über History geöffnete Wiederherstellungspunkte: Change the fonts on the whole site, Nov 2, 08:39 PM, mit einem Restore-Button
    Die Schriftänderung ist ein Wiederherstellungspunkt.

  9. Tipps

    • Zwei Schriften reichen: eine für Überschriften, eine für den Fließtext.
    • Am einfachsten sind Schriften, die in den Standard-Themes von WordPress enthalten sind und sich schon auf deiner Website befinden. Twenty Twenty-Four hat Jost, Inter, Instrument Sans und Cardo; Twenty Twenty-Five hat Manrope, Literata, Fira Sans, Vollkorn und mehr. Lass dieses Theme nach der Änderung installiert.
    • Bitte um „etwas größeren“ Fließtext: 16 bis 18px lassen sich auf dem Smartphone gut lesen.
    • Sag, was sich nicht ändern darf (Farben, Fotos, Layout), damit die KI nur die Schriften anfasst.
    • Prüfe ein paar Seiten und Phone, bevor du auf Go live klickst.