Farben, Schriftarten und Layout festlegen
Legen Sie im Tab „Website-Design“ Farben, Schriftarten, Textgrößen und Eckenradius Ihres Shops einmalig fest, damit sie für alle Seiten gleichzeitig gelten.
Unter „Website-Design“ finden Sie die Einstellungen, die Ihren ganzen Shop wie eine Marke wirken lassen: Farben, Schriftarten, Textgrößen und Eckenradius. Sie legen jede Einstellung einmal fest, und alle Seiten folgen ihr. Einzelne Blöcke können diese Einstellungen weiterhin überschreiben, wenn Sie das möchten.
Website-Design öffnen
- Öffnen Sie den Editor. Siehe Der Editor im Überblick.
- Klicken Sie im Einstellungsbereich rechts auf den Tab Website-Design.
- Klicken Sie auf eine Überschrift, um sie zu öffnen: Identität, Farben, Typografie oder Layout.
Änderungen erscheinen sofort auf der Seite und werden automatisch gespeichert. Ihr Live-Shop ändert sich, wenn Sie veröffentlichen.
Farben
Öffnen Sie Farben, um die sieben Farben zu sehen, aus denen alle Seiten aufgebaut sind.
- Akzent: die Hauptfarbe Ihres Shops. Buttons und Links verwenden sie.
- Text auf Akzentfarbe: die Farbe der Wörter auf der Akzentfarbe, etwa die Beschriftung eines Buttons.
- Seitenhintergrund: die Farbe hinter Ihren Seiten.
- Oberfläche: die Farbe von Karten und Flächen, etwa Produktkarten und Formularfeldern.
- Text: die Farbe von Überschriften und anderem Haupttext.
- Sekundärtext: die dezentere Farbe für Fließtext, Beschreibungen und Kleingedrucktes.
- Rahmen: die Farbe dünner Linien und Umrandungen.
Eine Farbe auswählen
- Klicken Sie auf ein Farbfeld.
- Gehen Sie im geöffneten Farbwähler auf eine der folgenden Arten vor:
- Klicken oder ziehen Sie im großen Quadrat, um Helligkeit und Sättigung der Farbe festzulegen, und ziehen Sie den Streifen darunter, um die Farbe selbst zu ändern.
- Geben Sie in das Feld einen Hex-Code ein oder fügen Sie ihn ein, etwa
#2B2622. - Klicken Sie unter Designfarben auf ein Farbfeld, um eine bereits vorhandene Farbe erneut zu verwenden, oder unter Zuletzt verwendet auf eine Farbe, die Sie kürzlich gewählt haben.
- Klicken Sie irgendwo außerhalb des Farbwählers oder drücken Sie Esc, um ihn zu schließen.
Prüfen, ob Ihr Text gut lesbar ist
Unter den sieben Farben prüft Payly, ob jede Textfarbe auf der dahinterliegenden Farbe gut lesbar ist. Ist alles in Ordnung, sehen Sie Jedes Farbpaar ist gut lesbar. Ist ein Paar zu blass, nennt die Liste es, zeigt sein Kontrastverhältnis und das erforderliche Verhältnis und bietet einen Button Beheben, der die Textfarbe für Sie anpasst.
Payly hindert Sie nicht daran, ein Paar mit geringem Kontrast zu wählen, doch hellgrauer Text auf hellem Hintergrund ist schwer zu lesen, vor allem auf einem Smartphone im Sonnenlicht.
Typografie
Öffnen Sie Typografie, um Ihre Schriftarten und Textgrößen zu wählen.
- Fließtext-Schriftart: die Schriftart für Absätze, Menüs und Buttons.
- Basis-Schriftgröße: die Größe des normalen Textes.
- Zeilenhöhe des Fließtexts: der Abstand zwischen den Textzeilen. Eine größere Zahl schafft mehr Platz.
- Überschriften-Schriftart: die Schriftart für Überschriften. Wählen Sie Schriftart der Website verwenden, um die Fließtext-Schriftart auch für Überschriften zu nutzen.
- Überschriftengröße: macht alle Überschriften größer oder kleiner, in Prozent.
- Schriftstärke der Überschriften: wie fett Überschriften sind.
- Zeichenabstand der Überschriften: verringert oder vergrößert den Abstand zwischen den Buchstaben einer Überschrift.
Eine Schriftart wählen
- Klicken Sie auf das Feld Fließtext-Schriftart oder Überschriften-Schriftart.
- Scrollen Sie durch die Liste, die jeden Namen in der jeweiligen Schriftart zeigt. Die Gruppe Empfohlen ganz oben enthält Schriftarten, die für die meisten Shops passen.
- Um eine Schriftart nach Namen zu finden, geben Sie etwas in Schriftarten durchsuchen… ein.
- Klicken Sie auf eine Schriftart, um sie zu verwenden.
Die Liste umfasst die gesamte Google-Fonts-Bibliothek. Die Schriftarten, die Sie verwenden, werden beim Veröffentlichen in Ihren Shop eingebunden. Fehlt eine Schriftart in der Liste, geben Sie ihren genauen Google-Fonts-Namen in das Suchfeld ein und wählen Sie sie unter Trotzdem verwenden.
Layout
Öffnen Sie Layout für zwei Einstellungen:
- Mit Eckenradius legen Sie fest, wie rund die Ecken von Buttons, Karten und Bildern sind. Schieben Sie auf 0 für scharfe Ecken und nach rechts für weiche. Blöcke, deren eigener Eckenradius auf Automatisch steht, folgen dieser Einstellung.
- Die Textrichtung ist für die meisten Sprachen Links nach rechts. Rechts nach links dreht das gesamte Layout um, für Arabisch, Hebräisch, Farsi und Urdu.
Identität
Öffnen Sie Identität, um Ihr Browser-Symbol festzulegen, das kleine Bild, das in einem Browser-Tab angezeigt wird. Verwenden Sie ein einfaches Zeichen statt Ihres vollständigen Logos, da es nur etwa 16 Pixel groß dargestellt wird. Klicken Sie auf Bild hochladen oder Uploads durchsuchen, wie in Bilder hinzufügen und die Mediathek nutzen beschrieben. Bleibt das Feld leer, wird Ihr Logo verwendet.
Ihr Logo finden Sie hier nicht. Es gehört in Ihre Kopfzeile, wo es auch erscheint. Siehe Kopf- und Fußzeile anpassen.
Nur einen Block ändern
Jeder Textblock, jede Überschrift und jeder Button kann Schriftart, Größe und Farben der Website überschreiben. Wählen Sie den Block aus und öffnen Sie seine Gruppe Typografie oder Darstellung. Siehe Texte, Überschriften und Schaltflächen bearbeiten.
Tipp: Wenn Sie ein völlig anderes Aussehen möchten, können Sie mit einem der fertigen Designs von vorn beginnen. Siehe Zu einem anderen Website-Design wechseln.