Typografie & Farben
Wie der Name bereits verrät, legen Sie hier globale Einstellungen zu Farben und Schriften fest. Welche Möglichkeiten Sie hierzu haben, erfahren Sie in den folgenden Abschnitt
Last updated
Wie der Name bereits verrät, legen Sie hier globale Einstellungen zu Farben und Schriften fest. Welche Möglichkeiten Sie hierzu haben, erfahren Sie in den folgenden Abschnitt
Last updated
Farben können Sie auf mehrere Arten definieren. Sollten Sie den meist bekannten HEX-Code wissen, können Sie ihn in die entsprechenden Felder eintragen. Sie können die Farbe allerdings auch über die RGB-Werte oder mittels Farbwähler bestimmen. Klicken Sie hierzu auf das Kästchen vor dem Eingabefeld.
In dem nun geöffneten Menü haben Sie die Möglichkeit den RGB-Werte, den HEX-Code oder mittels Farbregler bzw. Farbwähler eine Farbe zu bestimmen.
Die ersten Farbeinstellungen sind die ausschlaggebendsten Einstellungen im Bereich Farben.
Die Primärfarbe sowie die Sekundärfarbe sind die beiden Hauptfarben und ziehen sich an mehreren Stellen durch den gesamten Shop.
1) Primärfarbe: diese Farbe wird zur Anzeige von wichtigen Aktionen, Links oder Buttons genutzt z. B. Warenkorbbutton, Verlinkungen im Shop, Anzeige des aktiven Menüpunkts im Breadcrumb
2) Sekundärfarbe: diese Farbe wird bei Buttons mit untergeordneter Wichtigkeit genutzt wie z. B. Button "Schnellansicht" im Kategorie Listing
Die vier letzten Farbwerte in diesem Bereich wirken sich auf das Layout des Shops aus. Hier definieren Sie die Hintergrundfarbe des Browserfenster sowie die des Shops und der Blockelemente. Zusätzlich können Sie die globale Rahmenfarbe bestimmen.
4) Hintergrund: Hier ist die Hintergrundfarbe des Browserfenster gemein.
5) Shop Hintergrund: In dieser Einstellung bestimmen Sie die Hintergrundfarbe des Shops gesamten Shops.
6) Block Hintergrund: Hier definieren Sie die Hintergrundfarbe für die Block-Elemente z. B. Produktboxen oder Filter.
Status-Ausgaben sind Hinweisfelder, welche den Kunden auf eine bestimmte Sachlage aufmerksam macht, warnen tut oder einen Fehler erklärt. Diese Ausgaben können auf jeder Seite angezeigt werden, wo der Kunde eine Aktion ausführt. Je nach Dringlichkeit der Ausgabe können unterschiedliche Farben verwendet werden. Insgesamt gibt es vier verschiedene Status-Ausgaben:
Unter E-Commerce verbergen sich die Einstellungen für die Schriftfarbe der Preise sowie der reduzierten Preise (Preis Discount). Diese können optisch hervorgehoben werden.
Die Änderungen werden auf allen Seiten übernommen, wo ein Preis ausgegeben wird.
Standardmäßig werden die Farben von den Buttons (abhängig von Ihrer Wichtigkeit) mit der Primär- und Sekundärfarbe belegt. Sie haben dennoch die Möglichkeit komplett andere Farben für den Kauf-Button und alle anderen Buttons festzulegen. Das gilt jeweils für die Hintergrundfarbe sowie die Schriftfarbe.
Tooltips werden über Icons angezeigt und dienen zur Erklärung bzw. der Bezeichnung des Icons. Sie können hier die Hintergrundfarbe, Schriftfarbe und die Deckkraft einstellen.
Sie haben in Ihrem Theme die Möglichkeit zwei unterschiedliche Schriften (Fonts) einzubinden. Die Einbindung der Schriften kann auf zwei unterschiedliche Methoden erfolgen: remote und lokal. Diese werden nachfolgend mit den Google Fonts erklärt:
Die unabhängigste Methode ist die Einbindung einer Schrift auf ihrem eigenen Server. Somit sind Sie unabhängig von Google. Ihre Schrift wird immer geladen, egal ob Google die Schrift von dem Google Server entfernt oder dieser gerade nicht erreichbar ist. Diese Methode wird daher empfohlen.
Schritt 1: Gehen Sie auf die Google Fonts Seite und suchen Sie sich dort eine passende Schriftart aus. Wir verwenden für unser Beispiel die Schriftart "Roboto Condensed".
Schritt 2: Um die Schriftarten herunterzuladen, empfehlen wir den kostenfreien Dienst von google-webfonts-helper. Suchen Sie hier nach der Schrift und klicken diese an. Sie können für die Suche die linke Navigationsleiste oder das Suchfeld verwenden.
Auf der Seite haben Sie unter dem Punkt 2 "Select styles:" die Möglichkeit die Strichstärken zu wählen. Hier können Sie z. B. regular für die normale Strichstärke und 700 für fette Schriftstärken verwenden. Weitere Strichstärken sind selbstverständlich möglich.
Schritt 3: Unter Punkt 3 "Copy CSS" können Sie die Einstellung Customize folder prefix (optional)- Einstellung "../fonts/" so übernehmen. Anschließend klicken Sie nur noch auf den Button bei Punkt 4 "Download files", um die Schrift auf ihren Rechner zu laden.
Schritt 4: Entpacken Sie die gerade heruntergeladenen Schriftart und laden diese über ihren FTP in folgendes Verzeichnis hoch: public/fonts/
Schritt 5: Anschließend müssen Sie eine CSS-Datei erstellen. Benennen Sie die Datei wie folgt: fonts.css. Auf der Seite google-webfonts-helper unter Punkt 3 "Copy CSS" finden Sie die Anweisungen, welche Sie in die CSS Datei kopieren müssen.
Beispiel CSS-Code für die Einbindung:
Laden Sie anschließend die Datei in folgendes Verzeichnis hoch: public/css/
Schriftart für Text: bezieht sich auf die Fließtexte wie z. B. Beschreibung, Einleitungstexte aber auch Hinweistexte oder die Navigationspunkte
Schriftart für Überschriften: bezieht sich auf alle Arten von Überschriften (H1-H6). Hierrunter fallen z. B. Produktname, Headline Überschriften im Footer.
Jede Schrift hat im Standard eine andere Größe. Manche Schriften sollten im Standard bereits mit einer größeren Schriftgröße versehen werden, damit die Lesbarkeit garantiert ist. Im Theme haben Sie die Möglichkeit die Schriftgröße für alle Überschriften (H1-H6) sowie für den normalen Fließtexte (Einstellung: Schriftgröße) zu hinterlegen.
Mitunter haben Sie noch einmal für einzelne Bereiche oder einzelne Elemente die Möglichkeit die Schriftgröße zu verändern. In den weiteren Einstellungen werden Sie die Option mehrmals vorfinden.
Um bestimmte Wörter oder Wortgruppen hervorzuheben, haben Sie die Möglichkeit die Schriftstärke zu variieren. Standardmäßig wird eine Schrift in normal ausgegeben (oft auch als regular bezeichnet). Um davon abzuweichen können Sie auch die Schriftstärken: light (dünn) oder bold (fett) verwenden.
Auch diese Option werden Sie, im Laufe der Einrichtung, mehrmals an den unterschiedlichsten Einstellungsmöglichkeiten vorfinden.
Text Transformation ist eine weitere Möglichkeit Wörter oder Wortgruppen spezielle hervorzuheben. Sie können diese Wörter nur in Großbuchstaben bzw. nur in Kleinbuchstaben anzeigen.
Wie auch die Schriftgröße und Strichstärke ist diese Option mehrmals in den Einstellungen des Themes vorhanden.
Nutzen Sie ebenfalls die Möglichkeit Variablen zu verwenden, wenn Sie einen bestimmten Farbwert öfter in den Theme Einstellungen nutzen möchten. Wie das geht, erfahren Sie unter: .
3) Rahmen: Rahmen werden nur angezeigt, wenn Sie die Funktion im Tap: aktiv geschalten haben. Sie werden um alle Elemente im Content Bereich gelegt.
Die Hintergrundfarbe für den Header und Footer können separat festgelegt werden. Sie finden die Einstellungen unter den Taps: und .
Mit Badges sind Auszeichnungen oder Hinweise für Produkte gemeint. Das kann z.B. ein Neu, Tipp, Versandkostenfrei oder Discount sein. Bestimmen Sie für diese Hinweise die Hintergrundfarbe, Schriftfarbe, , und .
Schritt 6: Gehen Sie jetzt in die Theme Einstellungen und wechseln in den Tab: und tragen in dieses Feld den Pfad zu ihrer angelegten CSS-Datei ein:
Schritt 7: Wechseln Sie anschließend in den Tab: und tragen in die Felder "Schriftart Text" und/oder "Schriftart Überschrift" die neue Schriftart ein.
Wie Sie eine Schriftart einbinden und welche zwei Optionen Ihnen dazu geboten werden, haben Sie im Abschnitt: erklärt bekommen. Im Theme haben Sie die Möglichkeit zwei unterschiedliche Schriftarten für unterschiedliche Bereiche festzulegen:
Achten Sie bei der Auswahl der Schriften darauf, dass die Schrift auch solche Schriftstärken anbietet. Bei der müssen diese Schriftstäken separat ausgewählt und eingebunden werden.
