Allgemeine Designmotive

Odoo bietet verschiedene Optionen zur Gestaltung des Designmotivs Ihrer Website, darunter Farben, Schriftarten und Layout.

Wenn Sie Ihre Website zum ersten Mal einrichten, werden Sie aufgefordert, ein Design auszuwählen. Bewegen Sie den Mauszeiger über die Designmotive, um eine erweiterte Vorschau der einzelnen Designmotive anzuzeigen. Klicken Sie auf ein Designmotiv, um es auszuwählen.

Bemerkung

  • Wenn Sie kein Designmotiv auswählen, wird Ihre Website mit dem Standarddesignmotiv erstellt.

  • Sie können das Designmotiv später ändern (falls nötig).

Im Website-Builder bietet der Reiter Designmotiv verschiedene Optionen zur Anpassung des allgemeinen Designmotivs Ihrer Website. Um darauf zuzugreifen, klicken Sie auf Bearbeiten und gehen Sie zum Reiter Designmotiv.

Nachdem Sie die gewünschten Änderungen vorgenommen haben, klicken Sie auf Speichern, um diese zu bestätigen und auf Ihre Website anzuwenden.

Designmotiv

Klicken Sie im Abschnitt Website auf Designmotiv wechseln, um die Designauswahl zu öffnen. Bewegen Sie den Mauszeiger über die Designmotive, um eine erweiterte Vorschau der einzelnen Designmotive anzuzeigen. Klicken Sie auf ein Designmotiv, um es auf Ihre Website anzuwenden.

Farben

Der Website-Editor von Odoo verfügt über zwei Hauptfarbtypen: Designmotivfarben und Statusfarben.

Designmotivfarben

Designmotivfarben beziehen sich auf die Farben, die auf allen Seiten Ihrer Website angezeigt werden. Diese bestehen aus fünf Farben: drei Hauptfarben und zwei hellen und dunklen Farben.

Um die Farben Ihrer Website zu bearbeiten, gehen Sie zum Abschnitt Farben im Website-Editor und gehen Sie dann wie folgt vor:

  • Klicken Sie auf den Farbpunkt, den Sie ändern möchten, wählen Sie dann eine Volle Farbe aus oder klicken Sie auf Benutzerdefiniert, um einen bestimmten Farbton manuell auszuwählen (oder fügen Sie dessen #HEX- oder RGBA-Code hinzu).

  • Klicken Sie auf die Farbpalette und wählen Sie eine Farbpalette aus. Dadurch werden alle Farbanpassungen zurückgesetzt. Klicken Sie auf einen Farbpunkt, um eine bestimmte Farbe zu ändern.

Odoo erstellt automatisch Voreingestellte Farben für die von Ihnen ausgewählte Palette. Dabei handelt es sich um vordefinierte Farbkombinationen, die auf verschiedene Elemente Ihrer Website angewendet werden, um ein strukturiertes und optisch ansprechendes Design zu erzielen. Wenn Sie eine Farbpalette auswählen, legen deren Voreinstellungen fest, wie diese Farben auf verschiedene Elemente eines Bausteins verteilt werden, z. B. Schaltflächen, Hintergründe und Text. Wenn Sie diese ändern möchten, klicken Sie auf Voreingestellte Farben und dann auf eine Voreinstellung, um sie weiter anzupassen. Jede voreingestellte Farbe enthält Farben für den Hintergrund, den Text, die Überschriften, die Links, die primären Schaltflächen und die sekundären Schaltflächen Ihres Bausteins.

Voreingestellte Farben`

Um eine voreingestellte Farbe auf einen Baustein Ihrer Website anzuwenden, wählen Sie den Baustein aus, gehen Sie zum Reiter Anpassen, klicken Sie auf den Farbpunkt neben Hintergrund und wählen Sie ein Designmotiv aus.

Bemerkung

Wenn Sie eine voreingestellte Farbe ändern, werden die Farben sowohl der Standardeinstellung als auch der Bausteine, in denen die Voreinstellung verwendet wird, automatisch aktualisiert.

Statusfarben

Statusfarben werden verwendet, um den Status bestimmter Aktionen anzuzeigen (z. B. Erfolg, Warnung usw.). Sie werden in Pop-up-Meldungen verwendet, die angezeigt werden, um Benutzern und Website-Besuchern Feedback zu geben. Um die Statusfarben Ihrer Website anzupassen, scrollen Sie nach unten zum Abschnitt Erweitert und klicken Sie auf die Punkte, um deren Farbe zu ändern.

Example

Auswahl der Statusfarbe Pop-up-Meldung „Erfolg“.

Seitenlayout

Mit der Option Seitenlayout im Abschnitt Website können Sie die allgemeine Darstellung und den Abstand von Bausteinen und Website-Elementen auf Seiten ändern. Klicken Sie auf das Drop-down-Menü und wählen Sie das gewünschte Layout aus. Passen Sie unter Seitenlayout Ihren Hintergrund an, indem Sie ein Bild auswählen, ein ausgewähltes Bild in einem Muster verwenden oder das Feld leer lassen.

Schriftarten

Odoo ermöglicht es Ihnen, die Schriftart und -größe für bestimmte Elemente auf Ihrer Website anpassen, darunter Absätze, Überschriften, Schaltflächen und Eingabefelder.

  • Schriftartfamilie: Wählen Sie in den Abschnitten Absatz, Überschriften und Schaltfläche eine Schriftart aus dem Drop-down-Menü aus.

  • Schriftgröße: Legen Sie in den Abschnitten Absatz, Überschriften, Schaltflächen und Eingabefelder im Feld Schriftgröße`rechts eine Standardgröße fest. Klicken Sie auf das Symbol :icon:`fa-caret-right (Pfeil), um den Abschnitt zu erweitern und benutzerdefinierte Größen festzulegen (z. B. basierend auf der Überschriftenebene, der Schaltflächengröße usw.).

Außerdem können in jedem elementspezifische Abschnitt zusätzliche Gestaltungsoptionen wie Linienhöhe und Rahmen für weitere Anpassungen verwendet werden.

Benutzerdefinierte Schriftarten

Es ist möglich, auf Ihrer Website Schriftarten zu verwenden, die nicht standardmäßig in Odoo angeboten werden. Um eine benutzerdefinierte Schriftart hinzuzufügen, klicken Sie auf das Drop-down-Menü neben dem Feld Schriftartfamilie und wählen Sie Eine benutzerdefinierte Schriftart hinzufügen am unteren Rand des Drop-down-Menüs. Im Popup-Fenster:

  • Um eine Google-Schriftart hinzuzufügen, klicken Sie auf Eine Google-Schriftart auswählen und wählen Sie die gewünschte Schriftart aus der Liste aus. Deaktivieren Sie die Option Schriftart von Google-Servern bereitstellen, wenn Ihre Website von einem Standort aus betrieben wird, an dem gesetzliche Vorschriften wie beispielsweise die DSGVO der Europäischen Union einzuhalten sind. Dadurch wird sichergestellt, dass die Google-Schriftart auf dem Server Ihrer Website und nicht auf dem Server von Google gespeichert wird.

  • Um eine benutzerdefinierte Schriftart von Ihrem Computer hochzuladen, klicken Sie bitte auf Datei auswählen.

Wenn Sie fertig sind, klicken Sie auf Speichern & neu laden.

Schaltflächenstil

Um den Stil der primären und sekundären Schaltflächen Ihrer Website anzupassen, navigieren Sie im Website-Editor zum Abschnitt Schaltflächen und bearbeiten Sie die entsprechenden Optionen:

  • Klicken Sie auf den Pfeil neben den Feldern Primärer Stil oder Sekundärer Stil und wählen Sie für jeden Schaltflächentyp einen der verfügbaren Stile aus: Füllen, Umriss oder Ebene. Wenn Sie Umriss auswählen, wird die Option Rahmenbreite darunter angezeigt, wodurch Sie die Breite des Schaltflächenumrisses anpassen können.

  • Ändern Sie die Schriftarten.

  • Passen Sie den Puffer an, um die Größe des Abstands (in Pixeln) um die Beschriftungen der Schaltflächen zu ändern.

  • Passen Sie den Eckenradius der Schaltflächen mit der Option Runde Ecken an.

  • Fügen Sie im Drop-down-Menü Bei Klickeffekt eine Animation hinzu, die beim Klicken auf eine Schaltfläche ausgeführt wird.

Primäre und sekundäre Schaltflächen

Tipp

Sie können benutzerdefinierte Größen für Klein und Groß für den Abstand, Schriftgröße und Runde Ecken der Schaltflächen festlegen: Klicken Sie auf das Symbol (Pfeil) und verwenden Sie die entsprechenden Felder.

Einstellungen für Schaltflächenabstand, Schriftgröße und runde Ecken.