Bausteine

Sie können Ihre Website gestalten, indem Sie Bausteine per Drag & Drop hinzufügen und diese dann bearbeiten, um sie an Ihre Inhalts- und Layout-Anforderungen anzupassen.

Siehe auch

Odoo-Tutorial: Gestalten Sie Ihre Website: Text und Farben

Baustein hinzufügen

Um einen Block zu einer Website-Seite hinzuzufügen, öffnen Sie die Seite, klicken Sie auf Bearbeiten und ziehen Sie den gewünschten Baustein per Drag-and-Drop an die entsprechende Stelle. Es stehen zwei Arten von Bausteinen zur Verfügung: Kategorien und Innere Inhalte. Bausteine vom Typ Innere Inhalte können nur in Bausteine vom Typ Kategorien eingefügt werden.

Beim Klicken auf einen Kategorieblock erscheint ein Popup, in dem Sie zwischen mehreren Vorlagen für jede Kategorie wählen können.

Tipp

Suchen Sie im Popup Block einfügen über die Suchleiste nach einem bestimmten Block.

Pop-up-Blockauswahl

Sobald der Kategorieblock platziert ist, können Sie Innere Inhalte-Blöcke per Drag-and-Drop darin einfügen. Die Innere Inhalte-Blöcke ermöglichen es Ihnen, Elemente wie Videos, Bilder, Social-Media-Buttons usw. in bereits vorhandene Kategorieblöcke einzufügen.

Bemerkung

  • Sie können auch einen Baustein auf der Anmeldeseite hinzufügen. Navigieren Sie dazu zur Startseite der Website, fügen Sie /web/login zur URL hinzu und drücken Sie die Eingabetaste.

  • Der Zugriff auf bestimmte Blöcke erfordert die Installation der jeweiligen Anwendung oder des jeweiligen Moduls (z. B. E-Commerce für den Block Produkte).

Example

Fügen Sie alle Ihre Social-Media-Konten an einem Ort mit dem Block Soziale Medien für innere Inhalte hinzu. Schalten Sie den Schalter neben der gewünschten Plattform ein oder aus und kopieren/fügen Sie Ihre Konto-URL ein.

Block für innere Inhalte "Soziale Medien"

Formular

Der Block Formular wird verwendet, um Informationen von Website-Besuchern zu sammeln und gegebenenfalls Datensätze in Ihrer Datenbank zu erstellen. Um ein Formular zu einer Website-Seite hinzuzufügen, ziehen Sie den Kategorieblock Kontakt & Formulare per Drag-and-Drop und wählen Sie einen Block im Popup aus.

Beispiel eines Formularblocks

Aktion

Standardmäßig wird beim Absenden des Formulars automatisch eine E-Mail mit den vom Besucher eingegebenen Informationen versendet. Je nach installierten Apps in Ihrer Datenbank können weitere Aktionen verfügbar werden, die automatisch Datensätze erstellen. Um eine andere Aktion auszuwählen, klicken Sie auf Bearbeiten, klicken Sie auf das Formular, navigieren Sie zum Tab Stil und wählen Sie die gewünschte Aktion:

Standardmäßig werden Besucher nach dem Absenden des Formulars auf eine Danke-Seite weitergeleitet. Verwenden Sie das Feld URL, um sie auf eine andere Seite zu senden. Alternativ können Sie auf eine Weiterleitung verzichten und sie auf der Formularseite belassen, indem Sie Nichts oder Nachricht anzeigen im Feld Bei Erfolg auswählen.

Felder

Um ein neues Feld zum Formular hinzuzufügen, navigieren Sie zum Tab Stil und klicken Sie auf die Schaltfläche + Feld neben dem Abschnitt Formular oder Feld. Um ein beliebiges Feld im Formular zu ändern, wählen Sie das Feld aus und verwenden Sie die verfügbaren Optionen im Abschnitt Feld des Tabs Stil. Sie können beispielsweise:

  • Ändern Sie den Feld-Typ.

    Tipp

    Es ist auch möglich, ein Vorhandenes Feld aus einer Datenbank auszuwählen und die darin enthaltenen Daten zu verwenden. Welche Felder verfügbar sind, hängt von der gewählten Aktion ab. Der Datenbank hinzugefügte Eigenschaftsfelder können ebenfalls verwendet werden.

    Alle Arten von Formularfeldern

    Einige Felder sind optisch ähnlich, aber die eingegebenen Daten müssen einem bestimmten Format entsprechen.

  • Bearbeiten Sie die Bezeichnung des Feldes und passen Sie seine Position an.

  • Aktivieren Sie eine Feld-Beschreibung. Schalten Sie den Schalter ein und klicken Sie auf die Standardbeschreibung im Formular, um sie zu ändern.

  • Fügen Sie einen Platzhalter oder Standardwert hinzu.

  • Geben Sie an, ob das Feld erforderlich ist.

  • Bearbeiten Sie die Sichtbarkeits-Einstellungen des Feldes.

  • Fügen Sie eine Animation hinzu.

Sobald Sie die gewünschten Änderungen vorgenommen haben, klicken Sie auf Speichern.

Ein Odoo-Kontaktformular auf einer Nicht-Odoo-Website hinzufügen

Sie können ein Odoo-Kontaktformular auf einer anderen Website mithilfe eines iFrames anzeigen. Gehen Sie dazu folgendermaßen vor:

  1. Prepare the Odoo form: Create a contact form on a page in Odoo Website and remove the header and footer. Make sure only the contact form remains on the page.

  2. Einbettbaren Code generieren: Kopieren Sie die URL der Odoo-Formularseite und fügen Sie sie in einen iFrame-Generator ein, z. B. La Digitale.dev oder iFrame Generator. Passen Sie Breite und Höhe für die richtige Anzeige an.

  3. Eingebetteten Code zur Nicht-Odoo-Website hinzufügen: Öffnen Sie den HTML-Code der entsprechenden Seite (im Code-Editor oder CMS) und fügen Sie den eingebetteten Code an der Stelle ein, an der das Formular angezeigt werden soll.

Example

Beispiel eines eingebetteten Codes:

<iframe src="https://example.com/odoo-form"
        style="border:0;"
        name="odooForm"
        scrolling="no"
        frameborder="0"
        marginheight="0"
        marginwidth="0"
        height="400px"
        width="600px"
        allowfullscreen>
 </iframe>

Code einbetten

Durch das Einbetten von Code können Sie Inhalte von Drittanbietern in eine Seite integrieren, z. B. Videos von YouTube, Karten von Google Maps, Social-Media-Beiträge von Instagram usw.

Nachdem Sie den Block Einbettungscode aus dem Abschnitt Innerer Inhalt per Drag-and-Drop auf eine Seite gezogen haben, klicken Sie auf den Block, gehen Sie dann zum Tab Stil und klicken Sie auf Bearbeiten. Ersetzen Sie den Platzhaltercode durch Ihren benutzerdefinierten Einbettungscode.

Hinzufügen des Links zum eingebetteten Code, auf den Sie hinweisen möchten

Warnung

Kopieren Sie keinen Code, den Sie nicht verstehen, da dies Ihre Daten gefährden könnte.

Baustein verschieben, wechseln, duplizieren oder löschen

Ziehen Sie die türkisfarbenen Ränder am Block, um den Abstand oben oder unten zu verringern oder zu vergrößern.

Ändern Sie die Blockreihenfolge, indem Sie auf (Pfeil nach oben) oder (Pfeil nach unten) klicken, und verschieben Sie den Block auf der Seite, indem Sie auf (Pfeile) klicken. Wenn Sie mehrere Spalten haben, verschieben Sie eine Spalte nach links oder rechts, indem Sie auf (Pfeil nach links) oder (Pfeil nach rechts) klicken.

Um einen Baustein zu duplizieren, klicken Sie auf (Duplizieren). Nach dem Duplizieren erscheint der neue Block auf der Seite unterhalb des Originals.

Tipp

Alternativ klicken Sie auf das Symbol (Duplizieren) oben im Tab Stil, um den ausgewählten Block zu duplizieren.

Um einen Block zu löschen, klicken Sie auf (Papierkorb).

Ränder bei Bausteinen erweitern

Baustein bearbeiten

Um den Inhalt eines Bausteins zu bearbeiten, klicken Sie darauf und gehen Sie zum Tab Stil. Die verfügbaren Anpassungsoptionen variieren je nach ausgewähltem Blocktyp.

Siehe auch

Hintergrund

Um den Hintergrund eines Bausteins zu ändern, wählen Sie den Block aus, gehen Sie zum Tab Stil und klicken Sie auf den Farbpunkt oder eine andere Hintergrund-Option. Sie können die Farbe ändern und/oder ein Bild, Video und/oder eine Form hinzufügen. Sobald Sie eine Form ausgewählt haben, erscheinen neue Felder, mit denen Sie die Form anpassen können.

Tipp

  • Positionieren Sie ein Element (Bild, Text usw.) hinter oder vor einem anderen, indem Sie die Symbole Nach hinten senden oder Nach vorne holen verwenden.

    Blockposition ändern

  • Um die Größe eines Blocks zu ändern, klicken und ziehen Sie die Punkte an seinen Rändern, um ihn nach Bedarf anzupassen.

    Blockgröße anpassen

Siehe auch

Allgemeines Theme

Layout: Raster und Spalten

Für die meisten Bausteine können Sie zwischen zwei Layout-Stilen wählen: Raster oder Spalten (Cols). Um den Standard-Layout-Stil zu ändern, klicken Sie auf den Block, gehen Sie zum Tab Stil und setzen Sie das Feld Layout auf Raster oder Cols.

Raster

Das Raster-Layout ermöglicht es Ihnen, Elemente wie Bilder oder Text durch Ziehen und Ablegen neu zu positionieren und ihre Größe zu ändern. Wenn Raster ausgewählt ist, stehen zusätzliche Optionen zur Verfügung, um Elemente hinzuzufügen, indem Sie auf Bild, Text oder Schaltfläche klicken.

Wenn das Rasterlayout ausgewählt ist, wählen Sie ein Bild aus und ziehen Sie es per Drag-and-drop an die gewünschte Stelle.

Spalten

Wenn Sie das Layout Cols wählen, können Sie die Anzahl der Elemente pro Zeile innerhalb des Blocks festlegen. Wählen Sie dazu den zu ändernden Block aus, klicken Sie auf das Dropdown-Menü neben dem Feld Cols und passen Sie die Anzahl an. Anschließend können Sie die Einstellungen einer bestimmten Spalte mithilfe der Optionen im Abschnitt Spalte des Tabs Stil ändern.

Bemerkung

Standardmäßig ist auf mobilen Geräten nur ein Element (Spalte) pro Zeile sichtbar, um sicherzustellen, dass der Inhalt auf kleineren Bildschirmen leicht lesbar und zugänglich bleibt. Um den Wert anzupassen, klicken Sie oben im Website-Editor auf (Mobilgerät-Symbol) und passen Sie die Anzahl der Spalten an. Formen sind auf Mobilgeräten standardmäßig ausgeblendet.

Benutzerdefinierten Baustein speichern

Sie können einen angepassten Baustein speichern, um ihn anderswo wiederzuverwenden. Wählen Sie ihn dazu aus, navigieren Sie zum Tab Stil und klicken Sie auf das Symbol (Diskette). Klicken Sie im Popup auf die Schaltfläche Speichern, um das Speichern Ihres benutzerdefinierten Blocks zu bestätigen.

Um einen gespeicherten Baustein zur Seite hinzuzufügen, navigieren Sie zum Tab Blöcke und ziehen Sie den Block Benutzerdefiniert aus dem Bereich Kategorien. Klicken Sie im sich öffnenden Popup auf den gewünschten Block in der Kategorie Benutzerdefiniert.

Tipp

Im Popup Block einfügen klicken Sie auf (bearbeiten), um den benutzerdefinierten Block umzubenennen, oder auf (löschen), um ihn zu löschen.