Schriftart- & Designanpassungen

Fonts, Google Fonts lokal speichern, CSS-Injection, Code-Injection, Anpassung von Schriftart und Hintergrundfarbe für den Onlineshop

Schriftarten verwalten

Schriftart für die Website ändern

Die Schriftarten der Website können im Website-Editor unter „Designmotiv“ angepasst werden.

Im Menüpunkt Schriftartfamilie stehen folgende Bereiche zur Auswahl:

Schriftartfamilie: gilt für alle Standardtexte (ohne Überschriften oder Buttons)
Überschriften: legt die Schriftart für sämtliche Überschriften fest
Schaltflächen: bestimmt die Schriftart für Buttons

Diese Änderung betrifft nicht die Schriftart der Navigationslinks in den Menüs.

Google Fonts lokal speichern und verwenden

Auf der Website werden aktuell Google Fonts direkt aus der Google Cloud geladen.

Die Umstellung auf lokal gespeicherte Google Fonts erfolgt über die Design-Einstellungen:

BEARBEITEN -> DESIGNMOTIV -> Schriftfamilie -> Eine Google Schriftart hinzufügen
Die Google-Fonts-Adresse in das Textfeld einfügen. Fonts können über fonts.google.com ausgesucht werden.
Die Option „Schriftart von Google-Servern verwenden“ auf Aus stellen
Änderungen speichern

Code-Injection für individuelle Anpassungen

Neben den Standardoptionen bietet die Code-Injektion die Möglichkeit, eigene CSS-Regeln einzubinden. So lassen sich gezielt Schriftarten, Farben oder Layouts anpassen.

BEARBEITEN → DESIGNMOTIV → Website-Einstellungen → Code-Injektion
Dort den gewünschten CSS-Code hinterlegen

Dies erlaubt eine flexible Anpassung des Designs, ohne externe Abhängigkeiten.

Schriftart der Navigationslinks (Menüs) ändern

Die Schriftart der Website-Navigation kann nur per Code-Injektion angepasst werden:

BEARBEITEN → DESIGNMOTIV → Website-Einstellungen → Code-Injektion
auswählen
Folgenden Code einfügen (Schriftart nach Bedarf anpassen):

<style>
.nav-link {
    font-family: "meineSchriftart" !important;
}
</style>

Änderungen speichern

Nach Speichern der Änderung werden die Navigationslinks mit der eingetragenen Schriftart angezeigt.

Hintergrundfarbe der Website ändern

Die Hintergrundfarbe der Produktseite und des Main-Bereichs kann über CSS geändert werden:

BEARBEITEN → DESIGNMOTIV → Website-Einstellungen → Code-Injektion
Button auswählen
Folgenden CSS-Code einfügen oder ergänzen:

<style>
main {
    background-color: #d7dec1 !important;
}
</style>

Nach "background-color:" wird die gewünschte Farbe mit dem Hexcode, beginnend mit "#" angegeben.

BEARBEITEN → DESIGNMOTIV → Website-Einstellungen → Code-Injektion -> <head>

Nach Speichern der Änderung wird die Produktseite und der Main-Bereich in der ausgewählten Hintergrundfarbe dargestellt.

Hintergrundfarbe der Zahlungsinformation ändern

Zahlungsinformationen auf der Bestellbestätigungsseite im Onlineshop

Die Hintergrundfarbe der Zahlungsinformation auf der Bestellbestätigungsseite im Onlineshop kann über CSS geändert werden:

BEARBEITEN → DESIGNMOTIV → Website-Einstellungen → Code-Injektion
Button auswählen
Folgenden CSS-Code einfügen oder ergänzen:

<style>
.oe_website_sale_tx_status .card.bg-info {
    background-color: #f2a007 !important;
}
</style>

Nach "background-color:" wird die gewünschte Farbe mit dem Hexcode, beginnend mit "#" angegeben.

Nach Speichern der Änderung wird die Anzeigefläche mit den Zahlungsinformationen in der ausgewählten Hintergrundfarbe dargestellt.

Zahlungsinformationen auf der Bestellbestätigungsseite im Onlineshop mit geänderter Hintergrundfarbe

PreviousHomepage des Onlineshops öffnen und im Editor bearbeiten NextRegistrierung und Anmeldung aktivieren

Last updated 21 days ago