Allgemeine Designmotive¶
Odoo provides a range of theme customization options to define the website’s colors and fonts, and the appearance of paragraphs and headings, buttons, links, and input fields. Additional advanced settings are also available.
When setting up a website for the first time, you are prompted to select a theme. Hover the mouse over the themes to see an extended preview of each one. Click a theme to select it, or click the View more themes button to display the full list of available themes.
Bemerkung
If you leave without selecting a theme, the website is created with the default theme.
To customize the theme, open the website editor, navigate to the Theme tab, and go to the Website section. You can:
Click Switch Theme to open the theme selector. Hover the mouse over the themes to see an extended preview of each one. Click Use this theme to apply it to the website.
Add a language for the website.
Select the Page Layout to change the overall display and spacing of building blocks and website elements on pages.
Customize the layout’s Background by:
Click Save to apply the changes to the website.
Farben¶
Der Website-Editor von Odoo verfügt über zwei Hauptfarbtypen: Designmotivfarben und Statusfarben.
Designmotivfarben¶
Theme colors refer to the set of colors displayed across all pages of the website. They consist of five colors: three Main colors, used mainly for buttons and links, and two Light & Dark colors, used mainly for text and headings.
To edit the website’s colors, navigate to the Colors section of the Theme tab. Then:
Click the color you want to change, then select a predefined Solid color or click Custom to pick a specific color tone manually (or add its #HEX or RGBA code). Click (Reset) to remove the color selection.
Click the paint palette icon and choose a color palette. As a result, all color customizations are reset.
Odoo automatically creates Color Presets for the chosen colors or palette. These predefined color combinations are applied to various elements of the website to create a structured and visually appealing design. When selecting a color palette, its presets define how those colors are distributed across different elements. To modify them, click Color Presets, then select a preset to open the customization dropdown. Each color preset contains colors for the building block’s Background, Text, Headings, Links, Primary Buttons, and Secondary Buttons.
Tipp
To apply a color preset to a building block, select the building block, go to the Style tab, click the color dot located next to Background, and choose a Theme.
Bemerkung
Das Ändern einer Farbvoreinstellung aktualisiert automatisch die Farben sowohl der Standardvoreinstellung als auch der Bausteine, die diese verwenden.
Statusfarben¶
Statusfarben zeigen den Status bestimmter Aktionen an (z. B. Erfolg, Warnung usw.). Sie werden in Pop-up-Nachrichten verwendet, die erscheinen, um Benutzern und Website-Besuchern Rückmeldung zu geben. Um die Statusfarben der Website anzupassen, scrollen Sie nach unten zum Abschnitt Erweitert und klicken Sie auf die Punkte, um deren Farbe zu ändern.
Example
Informationen zu einer erfolgreichen Aktion auf der Website erscheinen in grün.
Schriftarten¶
Odoo ermöglicht es Ihnen, die Schriftfamilie und Schriftgröße von Website-Elementen anzupassen, einschließlich Absätzen und Überschriften, Schaltflächen und Eingabefeldern.
Schriftgröße: Verwenden Sie in den Abschnitten Absatz, Überschriften, Schaltfläche und Eingabefelder das Feld Schriftgröße, um eine Standardgröße festzulegen. Klicken Sie auf das Symbol (Weitere Optionen umschalten), um den Abschnitt zu erweitern und benutzerdefinierte Größen zu definieren (z. B. basierend auf der Überschriftenebene, Schaltflächengröße usw.).
Schriftartfamilie: Wählen Sie in den Abschnitten Absatz, Überschriften und Schaltfläche eine Schriftart aus dem Drop-down-Menü aus.
Bemerkung
Wenn Systemschriftarten ausgewählt ist, verwendet Odoo die nativen Schriftarten, die bereits auf dem Betriebssystem des Besuchers installiert sind. Android verwendet beispielsweise Roboto als Standardsystemschriftart.
Benutzerdefinierte Schriftarten¶
Um eine benutzerdefinierte Schriftart hinzuzufügen, die in Odoo standardmäßig nicht verfügbar ist, klicken Sie auf das Dropdown-Menü Schriftfamilie und wählen Sie unten Benutzerdefinierte Schriftart hinzufügen. Im Pop-up Google-Schriftart hinzufügen oder benutzerdefinierte Schriftart hochladen:
Um eine Google-Schriftart hinzuzufügen, öffnen Sie das Dropdown-Menü Google-Schriftart auswählen und wählen Sie die gewünschte Schriftart aus. Deaktivieren Sie Schriftart von Google-Servern bereitstellen, wenn Ihre Website von einem Standort aus betrieben wird, an dem Vorschriften die Einhaltung von Gesetzen wie beispielsweise der DSGVO der Europäischen Union erfordern. Dadurch wird sichergestellt, dass die Google-Schriftart auf dem Server der Website und nicht auf den Servern von Google gespeichert wird.
Um eine benutzerdefinierte Schriftart von Ihrem Computer hochzuladen, klicken Sie auf Datei auswählen.
Klicken Sie anschließend auf Speichern und neu laden.
Tipp
Eine Vorschau der ausgewählten Schriftart wird auf der rechten Seite des Fensters angezeigt.
Stile¶
Das Erscheinungsbild von Website-Elementen kann weiter angepasst werden. Sie können beispielsweise Absätze und Überschriften, Schaltflächen, Links und Eingabefelder anpassen.
Absätze & Überschriften¶
Die Abschnitte Absatz und Überschriften bieten zusätzliche Stiloptionen für diese Textelemente. Sie können:
Die Schrifteinstellungen ändern.
Die Zeilenhöhe anpassen, um den Abstand zwischen den Textzeilen zu definieren.
Ränder anpassen, um den Abstand um Absätze und Überschriften herum zu definieren.
Schaltflächen¶
Um den Stil der primären und sekundären Schaltflächen der Website anzupassen, navigieren Sie zum Abschnitt Schaltfläche und bearbeiten Sie die entsprechenden Optionen:
Öffnen Sie das Dropdown-Menü neben den Feldern Primärstil oder Sekundärstil, um den Stil für jeden Schaltflächentyp zu ändern, z. B. Ausgefüllt, Umrandung oder Flach. Bei Auswahl von Umrandung erscheint darunter die Option Rahmenbreite, mit der Sie die Breite der Schaltflächenumrandung anpassen können.
Die Schrifteinstellungen ändern.
Passen Sie Padding an, um den Abstand um die Schaltflächenbeschriftungen zu ändern.
Verwenden Sie die Option Round Corners, um den Rahmenradius der Schaltflächen anzupassen.
Fügen Sie im Drop-down-Menü Bei Klickeffekt eine Animation hinzu, die beim Klicken auf eine Schaltfläche ausgeführt wird.
Tipp
Um benutzerdefinierte Small- und Large-Größen für Padding, Font Size und Round Corners der Schaltflächen festzulegen, klicken Sie auf das Symbol (Toggle more options) und verwenden Sie dann die zugehörigen Felder.
Links¶
Öffnen Sie im Abschnitt Link das Dropdown-Menü neben Link Style, um das Erscheinungsbild von Links auf der Website auszuwählen. Sie können zwischen folgenden Optionen wählen:
No Underline;
Underline On Hover; oder
Always Underline.
Eingabefelder¶
Um den Stil der Eingabefelder der Website anzupassen, navigieren Sie zum Abschnitt Input Fields und bearbeiten Sie die relevanten Optionen:
Passen Sie Padding an, um den Abstand um die Felder zu ändern.
Die Schrifteinstellungen ändern.
Passen Sie die Border Width um die Felder an.
Definieren Sie einen Border Radius, um die Ecken der Felder abzurunden.
Wählen Sie eine Background-Farbe, um die Felder zu füllen.
Erweiterte Einstellungen¶
Zusätzliche Einstellungen können im Abschnitt Advanced konfiguriert werden, wie z. B. Ein- oder Ausblenden der Kopfzeile, die Verwendung von Code Injection zur Website-Verifizierung über ein HTML-Tag und die Konfiguration von Statusfarben und Grays.
Sie können auch Google Maps konfigurieren, um Karten anzuzeigen und Geolokalisierungsfunktionen auf der Website zu aktivieren, z. B. auf der Seite Contact Us und in bestimmten Snippets. Um diese Option zu konfigurieren:
Gehen Sie zu Ihrem Google-Konto.
Aktivieren Sie die Maps Static API, Maps JavaScript API und Places API.
Wichtig
Aktivieren Sie nicht Places API (New), da diese noch nicht von Odoo unterstützt wird.
Die Nutzung der Google APIs könnte eine Zahlung an Google erfordern.
Erstellen Sie einen API-Schlüssel und kopieren Sie ihn.
Gehen Sie im Website-Editor von Odoo zum Tab Theme und klicken Sie im Abschnitt Erweitert auf Benutzerdefinierter Schlüssel neben Google Map.
Fügen Sie den generierten API-Schlüssel in das Feld API-Schlüssel ein.
Klicken Sie auf Speichern.