So fügen Sie Divi-Module oder -Zeilen in andere Divi-Module ein (ohne Plugin)

Wenn Sie schon eine Weile Divi-Benutzer sind, ist Ihnen vielleicht der Gedanke gekommen, ein Divi-Modul (oder eine Reihe) in ein anderes Modul einzufügen. In den meisten Fällen, wenn Sie wissen, wie man Divi geschickt einsetzt, ist so etwas nicht wirklich notwendig. Divi-Module sind bereits leistungsstarke Elemente voller Funktionen und integrierter Designeinstellungen. Aber manchmal wäre es schön, diese Funktionen zu verbessern, indem man zwei Module mit Divi entwirft und dann eines in das andere einfügt. Ein gutes Beispiel hierfür wäre das Einfügen eines Moduls (z. B. eines Kontaktformulars) in ein Umschaltmodul, sodass das Formular angezeigt wird, wenn Sie auf den Umschalter klicken.

In diesem Tutorial erfahren Sie, wie Sie Divi-Module oder -Zeilen in ein anderes Divi-Modul einfügen. Dazu müssen einige kleine Ausschnitte von JQuery hinzugefügt werden. Sobald der Code vorhanden ist, können wir den Divi Builder verwenden, um die entsprechenden CSS-Klassen hinzuzufügen, um die Elemente, die wir einfügen/verschieben möchten, und das Modul, in das wir sie einfügen möchten, anzusprechen.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf die Beispiele, die wir in diesem Tutorial erstellen werden.

Ein Kontaktformular in einem Toggle-Modul

Ein Umschaltmodul und ein Schaltflächenmodul in einem Blurb-Modul (rechte Spalte)

Eine Divi-Reihe in einem Toggle-Modul

Laden Sie das Layout KOSTENLOS herunter

Um das Layout aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Abonnieren Sie unseren Youtube-Kanal

Um das Abschnittslayout in Ihre Divi-Bibliothek zu importieren, navigieren Sie zur Divi-Bibliothek.

Klicken Sie auf die Schaltfläche Importieren.

Wählen Sie im Portabilitäts-Popup die Registerkarte Import und wählen Sie die Download-Datei von Ihrem Computer.

Klicken Sie dann auf die Schaltfläche Importieren.

Sobald dies erledigt ist, wird das Abschnittslayout im Divi Builder verfügbar sein.

Kommen wir zum Tutorial, ja?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
3. Wählen Sie die Option „Von Grund auf neu erstellen“.

Danach haben Sie eine leere Leinwand, um mit dem Entwerfen in Divi zu beginnen.

Dinge, die Sie beachten sollten

Für dieses Tutorial kann das Styling aller Module, die Sie in diesem Prozess verwenden möchten, weiterhin visuell mit den integrierten Einstellungen von Divi Builder erfolgen, daher überlassen wir diesen Teil Ihnen. Wir werden uns mehr darauf konzentrieren, wie man die richtigen CSS-Klassen und HTML auf jedes Divi-Element anwendet, um das/die Modul(e)/Reihe(n) in ein anderes Modul einzufügen.

Denken Sie daran, dass wir das Endergebnis nur auf einer Live-Seite sehen können, nicht während der Bearbeitung über den visuellen Divi Builder. Mit anderen Worten, wir können die Module mit Divi entwerfen, aber sie bleiben im Builder getrennt, bis Sie die Live-Version der Seite anzeigen.

Sie können nur Module oder Zeilen in ein Modul einfügen, das die Möglichkeit hat, Text/html hinzuzufügen.

Außerdem gibt es, wie wir später erklären werden, bestimmte Beschränkungen für die Anzahl der Instanzen (Module oder Zeilen, die in ein anderes Modul eingefügt werden), die Sie innerhalb einer Spalte oder eines Abschnitts haben können. Beim Einfügen von Modulen in ein anderes Modul sind Sie auf ein „Ziel“-Modul (das Modul, das die Module, die Sie einfügen möchten, enthalten) pro Spalte beschränkt. Und wenn Sie Zeilen in ein anderes Modul einfügen, sind Sie auf ein „Ziel“-Modul pro Abschnitt beschränkt. Obwohl dies in gewisser Hinsicht eine Einschränkung darstellt, haben Sie die Möglichkeit, bei Bedarf mehrere Instanzen auf Ihrer Seite zu haben.

Teil 1: So fügen Sie Divi-Module in ein anderes Modul ein

Im ersten Teil dieses Tutorials zeigen wir Ihnen, wie Sie Divi-Module in ein anderes Modul einfügen. Zuerst zeigen wir Ihnen, wie Sie ein Kontaktmodul innerhalb eines Toggle-Moduls hinzufügen. Anschließend zeigen wir Ihnen, wie Sie ein Toggle-Modul und ein Button-Modul innerhalb eines Blurb-Moduls hinzufügen.

Beispiel 1: Einfügen eines Kontaktformular-Moduls in ein Toggle-Modul

Neue Zeile hinzufügen

Fügen Sie dem Abschnitt zunächst eine neue einspaltige Zeile hinzu.

Toggle-Modul hinzufügen (das Zielmodul)

Fügen Sie in der Spalte ein Umschaltmodul hinzu.

Für dieses Beispiel möchten wir ein Modul in dieses Toggle-Modul einfügen, das wir als unser Zielmodul bezeichnen können. Technisch gesehen befindet sich das eigentliche Ziel im Hauptinhalt des Toggle-Moduls (wo Sie Text/HTML hinzufügen können). Um den Zielort festzulegen, müssen wir ein neues div mit einer erforderlichen CSS-Klasse einfügen, die als Zielort für unser portables Modul (das Modul, das wir einfügen möchten) dient.

Fügen Sie auf der Registerkarte Inhalt der Umschalteinstellungen den folgenden HTML-Code zum Textkörper hinzu. Stellen Sie sicher, dass Sie auf die Registerkarte Text klicken, bevor Sie HTML einfügen.

<div class="divi-module-destination"></div>

Fügen Sie das Kontaktformular-Modul (das tragbare Modul) hinzu

Als nächstes müssen wir das Modul hinzufügen, das wir in das Toggle-Modul einfügen möchten. In diesem Beispiel fügen wir ein Vertragsformularmodul in den Hauptteil des Toggle-Moduls ein. Es ist wichtig, das neue „portable“ Modul in derselben Spalte wie das Zielmodul hinzuzufügen.

Fügen Sie dazu direkt unter dem Toggle-Modul ein neues Kontaktformular-Modul hinzu.

Klicken Sie unter den Einstellungen des Kontaktformulars (jedes Moduls, das Sie einfügen möchten) auf die Registerkarte Erweitert und fügen Sie die folgende CSS-Klasse hinzu:

• CSS-Klasse: divi-portable-module

Spaltenklasse hinzufügen

Als nächstes müssen wir der Spalte, die beide Module enthält, eine benutzerdefinierte Klasse hinzufügen. Öffnen Sie die Spalteneinstellungen und fügen Sie die folgende CSS-Klasse hinzu:

• CSS-Klasse: parent-column

Fügen Sie den Code hinzu

Der dafür benötigte Code ist ziemlich kurz und einfach. Grundsätzlich möchten wir JQuery verwenden, um jedes Modul mit der Klasse „divi-portable-module“ mit der übergeordneten Spalte (das mit der Klasse „parent-column“) zu finden und jedes dieser Module innerhalb des div mit der Klasse „ divi-Modul-Ziel“.

Der Code enthält außerdem ein Snippet zum Einfügen eines Schaltflächenmoduls in ein anderes Modul und ein Snippet zum Einfügen von Divi-Zeilen in ein Modul.

Um den Code hinzuzufügen, fügen Sie unter dem Kontaktformularmodul ein neues Codemodul hinzu.

Bevor Sie den erforderlichen Code einfügen, fügen Sie die Skript- Tags hinzu, die zum Einbetten von JS in HTML im Feld Code erforderlich sind:

Fügen Sie dann den folgenden Code zwischen den script- Tags ein:

(function ($) {
  $(document).ready(function () {

    // Option #1: Move Divi Module(s) into a Module
    // Limit: One Instance per Column
    // Use following code if you want to move 
    // a module inside another module. Each column with the
    // class 'parent-column' will append any module(s)
    // with the class 'divi-portable-module' to the div
    // with the class 'divi-module-destination'.
    // Only one instance of 'divi-module-destination' should
    // be added per column.
    $('.divi-portable-module').each(function () {
      $(this).closest('.parent-column').find('.divi-module-destination').append($(this));
    });
    
    // Buttons: Insert Button Module(s) into a Module
    // Adding a custom CSS class to a button module
    // is applied to the 'a' tag which is a child element
    // of the module wrapper. This code makes sure to append
    // the entire button module wrapper (the parent element)
    // as well. This functionality is the same as option #3 above.
    // Siimply use the class 'divi-portable-button' on a button module
    // instead of 'divi-portable-module'.
    $('.divi-portable-button').parent().each(function () {
      $(this).closest('.parent-column').find('.divi-module-destination').append($(this));
    });

    // Option #2: Move Divi Row(s) into a Module
    // Limit: One Instance per Section
    // Use the following code if you want to move 
    // a row inside a module on more than one section
    // of a page. Each section with the
    // class 'parent-section' will append any row(s)
    // with the class 'divi-portable-row' to the div
    // with the class 'divi-row-destination'.
    // Only one instance of 'divi-row-destination' should
    // be added per section.
    $('.divi-portable-row').each(function () {
      $(this).closest('.parent-section').find('.divi-row-destination').append($(this));
    });

  });
})(jQuery);

Die Funktionalität verstehen

Im Divi Builder im Backend bleiben die Module getrennt. Wenn Sie sich jedoch die Ergebnisse auf der Live-Seite im Frontend ansehen, sehen Sie, dass das Kontaktformular in das Toggle-Modul eingefügt wurde.

Wenn Sie sich den Code auf der Live-Seite ansehen, können Sie sehen, dass das Kontaktformular-Modul erfolgreich in das div mit der Klasse „divi-module-destination“ eingefügt wurde.

Styling der Module

Wie bereits erwähnt, bleiben die Module im Backend Divi Builder getrennt. Die Stile, die Sie jeweils hinzufügen, gelten jedoch weiterhin. Fühlen Sie sich also frei, die Stile des Zielmoduls und des tragbaren Moduls mit dem Divi Builder zu aktualisieren.

HINWEIS: In einigen Fällen können die Stile des Zielmoduls (jetzt ein übergeordnetes Modul) auf das eingefügte Modul angewendet werden. In diesem Fall sollten Sie diesen Stil überschreiben können, indem Sie die Einstellungen des eingefügten Moduls aktualisieren.

Das Ergebnis

Hier ist das Endergebnis beim Betrachten der Live-Seite.

Beispiel 2: Einfügen eines Toggle-Moduls in ein Blurb-Modul

In unserem nächsten Beispiel fügen wir ein Toggle-Modul in ein Blurb-Modul ein. Der Vorgang ist der gleiche wie zuvor. Das Code-Snippet begrenzt die Verwendung eines Zielmoduls pro Spalte. Mit anderen Worten, Sie können mehrere tragbare Module mit der Klasse „divi-portable-module“ haben, die zum Zielmodul hinzugefügt werden können, aber Sie können nur eine Instanz des div mit der Klasse „divi-module-destination“ pro haben Säule.

Um dies zu demonstrieren, wiederholen wir denselben Vorgang mit einer anderen Gruppe von Modulen in einer anderen Spalte derselben Zeile.

Neue Spalte zu Zeile hinzufügen

Fügen Sie zunächst der vorhandenen Zeile eine neue Spalte hinzu.

Spaltenklasse hinzufügen

Geben Sie der neuen Spalte die folgende CSS-Klasse wie in der ersten Spalte:

• CSS-Klasse: parent-column

Blurb-Modul hinzufügen (das Zielmodul)

Fügen Sie in der neuen Spalte ein Klappenmodul hinzu, das als unser Zielmodul dient.

Fügen Sie in den Textkörper des Klappentextes den folgenden HTML-Code ein, der dasselbe div mit der Klasse "divi-module-destination" enthält, in das die tragbaren Module eingefügt werden sollen (in diesem Fall unter dem simulierten Haupttext):

<div class="divi-module-destination"></div>

Umschaltmodul hinzufügen (tragbares Modul)

Da wir dem Klappentext ein Umschaltmodul hinzufügen möchten, erstellen Sie ein neues Umschaltmodul in derselben Spalte wie der Klappentext.

Fügen Sie dann die folgende CSS-Klasse zum Toggle-Modul hinzu, um es als das Modul festzulegen, das wir in den Klappentext verschieben/einfügen möchten:

• CSS-Klasse: divi-portable-module

Ergebnis

Überprüfen Sie nun die Live-Seite, um das Ergebnis zu sehen. Der Umschalter befindet sich jetzt im Klappenmodul.

Beispiel 3: Einfügen eines Schaltflächenmoduls in ein Blurb-Modul

Für dieses nächste Beispiel fügen wir ein Schaltflächenmodul in dasselbe Klappenmodul aus unserem vorherigen Beispiel ein. Normalerweise würden wir für jedes andere Modul denselben Vorgang wiederholen, um dem Klappentext ein neues tragbares Modul hinzuzufügen. Da das Schaltflächenmodul im Backend jedoch etwas anders aufgebaut ist, müssen wir dem Schaltflächenmodul eine andere Klasse hinzufügen.

Tastenmodul hinzufügen (tragbares Modul #2)

Fügen Sie dazu unter dem bereits in den Klappentext eingefügten Toggle-Modul ein neues Button-Modul hinzu.

Fügen Sie dann die folgende CSS-Klasse zum Schaltflächenmodul hinzu:

• CSS-Klasse: divi-portable-button

Das Ergebnis

Sehen Sie sich jetzt das Ergebnis auf der Live-Seite an. Das Blurb-Modul enthält jetzt das Umschaltmodul und das Tastenmodul.

Und hier ist der entsprechende Code-Schnipsel, der verwendet wird, um das Tastenmodul in das Modul mit dem "Ziel"-Div einzufügen. Der Hauptunterschied bei diesem Codeausschnitt besteht darin, dass wir auf das übergeordnete Element (das Schaltflächen-Wrapper- div hinter den Kulissen) der Schaltflächenklasse „divi-portable-button“ abzielen.

Teil 2: So fügen Sie Divi-Zeilen in ein Modul ein

Wenn Sie eine ganze Reihe (oder Reihen) in ein Modul einfügen möchten, ist der Vorgang dem Einfügen eines Moduls in ein anderes Modul sehr ähnlich. Wir müssen dem Abschnitt, der das Zielmodul und die portablen Zeilen enthält, die wir einfügen möchten, die Klasse „parent-section“ hinzufügen. Wir müssen das div mit der Klasse „divi-row-destination“ zum Zielmodul hinzufügen. Und wir müssen die Klasse „divi-portable-row“ zu den Zeilen hinzufügen, die wir in das Zielmodul einfügen möchten.

So geht's.

Abschnitt hinzufügen

Fügen Sie der Seite zunächst einen neuen regulären Abschnitt hinzu.

Fügen Sie auf der Registerkarte "Erweitert" der Abschnittseinstellungen die folgende CSS-Klasse hinzu:

• CSS-Klasse: parent-section

Zeile für Zielmodul hinzufügen

Fügen Sie eine neue einspaltige Zeile hinzu, um das Zielmodul aufzunehmen.

Toggle-Modul hinzufügen (das Zeilenzielmodul)

In diesem Beispiel fügen wir eine Zeile in ein Toggle-Modul ein. Fügen Sie daher der Zeile ein neues Toggle-Modul hinzu.

Da das Toggle-Modul unser Zielmodul ist, öffnen Sie die Einstellungen für das Toggle und fügen Sie den folgenden HTML-Code zum Hauptinhalt hinzu:

<div class="divi-row-destination"></div>

Tragbare Reihe erstellen

Nachdem das Zielmodul nun vorhanden ist, fügen Sie eine neue Zeile unter der vorherigen Zeile hinzu. Dies dient als tragbare Zeile, die wir in das Toggle-Modul einfügen.

Zeile mit Inhalt füllen

An dieser Stelle können Sie die Zeile mit dem Divi Builder mit beliebigen Inhalten/Modulen füllen. Denken Sie daran, dass alles in der Zeile schließlich in das Umschaltmodul eingefügt wird, da es sich in der Zeile befindet.

Klasse zu Zeile hinzufügen

Öffnen Sie dann die Einstellungen der Zeile und kennzeichnen Sie sie als Zeile, die Sie in das Toggle-Modul einfügen möchten, indem Sie ihr die folgende CSS-Klasse zuweisen:

• CSS-Klasse: divi-portable-row

Wie es funktioniert

Zur Erinnerung: Die Zeile bleibt beim Bearbeiten des Layouts mit dem Divi Builder im Backend vom Modul getrennt. Die Funktion zum Einfügen der Zeile in das Toggle-Modul ist jedoch vorhanden.

Das Ergebnis

Um das Ergebnis zu sehen, sehen Sie sich die Live-Seite an und öffnen Sie das Umschaltmodul. Es enthält jetzt die gesamte Zeile.

Und hier ist der entsprechende Code-Schnipsel, der dies ermöglicht. Beachten Sie, dass die entsprechenden Klassen verwendet werden.

Einfügen mehrerer Zeilen in das Modul

Solange Sie eine Instanz des Zielmoduls (dh das div mit der Klasse "divi-row-destination") pro Abschnitt behalten, können Sie mehrere Zeilen in dieses Ziel einfügen, indem Sie ihm einfach die gleiche Klasse "divi-portable-row" geben “.

Sie können beispielsweise eine weitere Zeile mit einem Galeriemodul über der Zeile mit den zuvor erstellten Menüelementen hinzufügen. Dann geben Sie der Zeile die gleiche Klasse „divi-portable-row“

Beide Zeilen mit der Klasse „divi-portable-row“ werden in das Toggle-Modul eingefügt.

Verwenden eines Plugins/Kurzcodes

Wenn Sie nach einem Plugin suchen, das etwas Ähnliches tut und mehr Flexibilität oder Optionen bietet, können Sie sich das Shortcodes for Divi-Plugin auf unserem Marktplatz ansehen, mit dem Sie jedes Divi-Layout mithilfe eines Shortcodes in Ihre Seite einbetten können. Nach der Installation generiert das Plugin einen einbettbaren Shortcode für jedes Layout, das Sie in Ihrer Divi-Bibliothek gespeichert haben.

Abschließende Gedanken

In den meisten Fällen sollte es nicht erforderlich sein, Module oder Zeilen in andere Module einzufügen, es sei denn, es besteht ein besonderer Bedarf. Normalerweise können Sie das gewünschte Layout/Design erhalten, ohne dass Sie dies tun müssen. Für diejenigen unter Ihnen, die jedoch nach einer einfachen Möglichkeit suchen, dies zu tun, ohne auf ein Plugin zurückgreifen zu müssen, ist diese Lösung hoffentlich nützlich.

Denken Sie außerdem an alle möglichen Anwendungen!

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!