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.

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

Sie können auch über die Suchleiste im Popup Block einfügen nach einem bestimmten Block suchen.

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

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 Formular-Block 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 Block aus der Kategorie Kontakt & Formulare und wählen Sie den Formular-Block.

Beispiel eines Formularblocks

Aktion

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

Bearbeitung eines Formulars zum Ändern der 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 dem Formular ein neues Feld hinzuzufügen, navigieren Sie zum Tab Anpassen und klicken Sie neben dem Abschnitt Formular oder Feld auf die Schaltfläche + Feld. Um das neue (oder ein anderes) Feld im Formular zu ändern, wählen Sie das Feld aus und verwenden Sie dann die im Abschnitt Feld des Tabs Anpassen verfügbaren Optionen. 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.

  • Eine Feld-Beschreibung aktivieren. 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. Odoo-Formular vorbereiten: Erstellen Sie ein Kontaktformular auf einer Seite in Odoo Website und entfernen Sie das Kopfzeilendesign und das Fußzeilendesign. Stellen Sie sicher, dass nur das Kontaktformular auf der Seite verbleibt.

  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 zu einer Seite hinzugefügt haben, klicken Sie auf den Block, gehen Sie dann zum Tab Anpassen und klicken Sie auf Bearbeiten. Ersetzen Sie den Platzhalter-Code 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 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 Block zu löschen, klicken Sie auf (Papierkorb).

Ränder bei Bausteinen erweitern

Tipp

Ändern Sie die Block-Kategorie schnell, indem Sie auf (Austauschen) klicken.

Baustein bearbeiten

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

Hintergrund

Um den Hintergrund eines Bausteins zu ändern, wählen Sie den Block aus, gehen Sie zum Tab Anpassen 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 Anpassen und setzen Sie das Feld Layout auf Raster oder Spalten.

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

Die Wahl des Spalten-Layouts ermöglicht es Ihnen, die Anzahl der Elemente pro Zeile innerhalb des Blocks festzulegen. Wählen Sie dazu den zu ändernden Block aus, klicken Sie auf das Dropdown-Menü neben dem Feld Spalten und passen Sie die Anzahl an. Anschließend können Sie die Einstellungen einer bestimmten Spalte über die Optionen im Abschnitt Spalte des Tabs Anpassen ä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.

Baustein duplizieren

Um einen Baustein zu duplizieren, klicken Sie oben im Tab Anpassen auf das Symbol (Duplizieren). Nach dem Duplizieren erscheint der neue Block auf der Seite unterhalb des Originals.

Benutzerdefinierten Baustein speichern

Sie können einen angepassten Baustein speichern, um ihn anderweitig wiederzuverwenden. Wählen Sie ihn dazu aus, navigieren Sie zum Tab Anpassen und klicken Sie auf das Symbol (Diskette). Klicken Sie im Popup auf die Schaltfläche Speichern und neu laden, 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.