Erstellen Sie Ihre eigenen Module mit Divi 5 -Modulgruppen

Möchten Sie benutzerdefinierte Divi -Module erstellen, ohne eine Codezeile zu berühren? Mit den neuen Modulgruppen von Divi 5 können Sie jetzt mehrere Elemente zu einem einzigen, wiederverwendbaren Layout kombinieren - alles aus dem visuellen Builder. Kein JavaScript. Kein Php. Ziehen Sie einfach, Drop und Design.

In diesem schnellen Leitfaden zeigen wir Ihnen, wie Sie Ihre eigenen Module mit den neuen Gruppen von Divi erstellen. Sie werden speziell sehen, wie Sie einen Klappentext, eine Preistabelle, ein Testimonial oder eine andere Art von Modul erstellen können, die Sie sich vorstellen können.

Hinweis: Divi 5 ist bereit, auf neuen Websites verwendet zu werden, aber wir empfehlen noch nicht, vorhandene Websites in Divi 5 konvertieren. Sie werden etwas von uns sehen, wenn wir uns im Aktualisierungsprozess zuversichtlich sind.

Was sind Divis neue Modulgruppen?

Gruppen oder Modulgruppen sind ein neues Containerelement, das mehrere Module und/oder Zeilen in eine einzelne Einheit in einer Spalte kombiniert. Dies hat den Vorteil, mehrere kleinere Elemente zu gruppieren und Ihnen die gesamte Gruppe zu bewegen, wo immer Sie sie benötigen.

Modulgruppen können ohne Probleme auf Ihrer Seite verschoben werden und werden besonders hilfreich, wenn die Funktion Flexbox und die Funktion "Loop Builder" veröffentlicht werden. Sobald der Loop Builder veröffentlicht wurde, können Sie Gruppen verwenden, um benutzerdefinierte Blog -Layouts, Fußzeilenmenüs, Bildgalerien und vieles mehr zu erstellen. Es ist jetzt nützlich, aber in ein paar Monaten wird es noch beeindruckender sein.

Verschachtelte Zeilen waren eine weitere hoch angeforderte Divi -Funktion, die wir zu Divi 5 hinzugefügt haben. Sie können Zeilen in den Inhalt Ihres Herzens in die Reihen bringen. Obwohl der Name „Modulgruppen“ den Anschein hat, dass Sie nur Module gruppieren können, ist das Gegenteil wahr. Tatsächlich können Sie verschachtelte Reihen in Gruppen verwenden, wodurch die Möglichkeit eröffnet wird, unendlich verschachtelte Layoutstrukturen aufzubauen und sie Teil einer wiederverwendbaren Gruppe zu machen.

So erstellen Sie Ihre eigenen Divi -Module

Mit Modulgruppen können Sie Ihre eigenen Module im Editor erstellen. Sie können Module und verschachtelte Zeilen zusammenarbeiten, um komplexe Arrangements zu erstellen, die einigen unserer größeren Module ähneln.

1. Erstellen Sie Ihr eigenes Klappentextmodul

Unser eingebauter Klappentextmodul

Das Klappentext ist ein Grundnahrungsmittel in vielen Divi -Designs. Es ist ein Modul, aber wenn Sie es aufschlüsseln, hat es nur ein paar Dinge, die es klicken lassen. Das sind:

Ein Bild/ein Symbol, ein Titel/eine Überschrift und ein Körpergehalt. Wir können eine Modulgruppe erstellen und diese Module darin platzieren: ein Bild oder ein Symbol, eine Überschrift und ein Textmodul. Zusammen können diese drei Module den gleichen Inhalt reproduzieren, der im Blurbmodul verwendet werden kann.

Anatomie eines Klappentextmoduls

Erstellen Sie Ihre eigene Klappentextgruppe

Hier ist ein Beispiel für ein Blupping -Modul mit einem Symbol auf der linken Seite und einer visuell identischen Replikation des Blurbmoduls mit A:

Gruppe, innere Zeile, Spalte (1) mit einem Symbolmodul und Spalte (2) mit einem Übergang und einem Textmodul.

Röntgenaufnahme wird eingeschaltet, um das Skelett jedes einzelnen zu sehen, um ihre Ähnlichkeiten zu erkennen, obwohl sie unterschiedlich konstruiert sind.

Das einzige, was mit dieser Anordnung Besonderes ist, ist, dass die erste Spalte auf eine Breite von 18% festgelegt ist und die zweite eine Weite von 82% einnimmt (Spaltengrößenoptionen sind neu mit dem Feature -Update für verschachtelte Zeilen).

Das Erstellen Ihrer Module wie diese hat den zusätzlichen Vorteil, dass Sie für jedes einzelne Element mehr Design -Styling -Optionen bieten. Das Blupping-Modul erleichtert die Bild-/Symbolplatzierung, hat jedoch seine Kompromisse. Verwenden Sie den Ansatz, der Sie dem gewünschten Design am nächsten bringt.

2. Erstellen Sie Ihr eigenes Preistabellenmodul

Unser integriertes Preistischmodul

Einige Divi -Module haben viel mehr los. Das ist der Fall beim Preistabellenmodul. Es gibt mehrere Felder pro Preistabelle, wie Sie unten sehen können.

Anatomie eines Preistischmoduls

Erstellen Sie Ihre eigene Gruppe für Pricing Table -Modulgruppe

Wenn wir das Preistabellenmodul mit Modulgruppen und einzelnen Modulen neu erstellen, erhalten wir dieses Ergebnis.

Beachten Sie die sieben separaten Text-/Optionsfelder pro Tabelle. Visuell verfügt jede Tabelle über drei Hauptteile (Überschrift, Preis und Details). Es gibt einige Möglichkeiten, dies in einer Gruppe zu tun, aber unten haben wir jeweils drei verschachtelte Zeilen verwendet. Von dort aus haben wir in jedem Abschnitt Überschrift und Textmodule verwendet, um die Preistabelle neu zu erstellen.

Das Schöne an der Verwendung des Preistischmoduls ist, dass es den größten Teil des Layouts behandelt und Sie einen Vorsprung erhalten. Aber manchmal bedeutet das, dass es schwieriger ist, zu arbeiten, wenn Sie bestimmte Dinge damit erledigen möchten. Wenn Sie zusätzliche Arbeiten erstellen, um dieses Layout für Preistabellen mit einfacheren Modulen zu erstellen, erhalten Sie mehr Designkontrolle und Freiheit.

3. Erstellen Sie Ihr eigenes Zeugnismodul

Unser integriertes Testimonialmodul

Divis Testimonial Module ist eine andere, die viel los ist. Es enthält bis zu vier verschiedene Textelemente und ein Paar Bild-/Symboloptionen.

Erstellen Sie Ihre eigene Testimonial -Modulgruppe

Der zeitaufwändigste Aspekt bei der Wiederherstellung des Testimonialmoduls besteht darin, den Abstand richtig zu machen (insbesondere an mehreren Haltepunkten). Aber sobald Sie das bekommen haben, sind die Dinge ziemlich einfach. Während des Gruppenlayouts haben wir ein paar Zeilen und das Symbol, das Bild, die Überschrift und die Textmodule verwendet.

Das Schöne an der Nachbildung einiger dieser Module ist, dass Sie sich mehr Möglichkeiten öffnen. Einige kompliziertere Module verfügen über ein eindeutiges Layout, das nur umfangreiche CSS manipulieren kann. Aber wenn Sie es selbst bauen, haben Sie mehr Freiheit, sich um viele dieser Unterelemente zu bewegen.

Beim Entwerfen solcher Layoutmöglichkeiten öffnen sich mehr Layout -Möglichkeiten. Zum Beispiel können Sie das tun, was nicht möglich ist (zumindest was nicht einfach ist) mit dem Testimonialmodul, indem Sie Elemente in völlig unterschiedliche Positionen innerhalb des größeren Gruppenlayouts verschieben. Wenn Ihr Design eine gewisse Flexibilität erfordert, kann es Ihnen helfen, die Genauigkeit zu erreichen, nach der Sie suchen.

Ich liebe auch die Idee, dass Sie ein benutzerdefiniertes Testimonialmodul erstellen können, wie das oben genannte, und mit dem bevorstehenden Schleifenbauer, um Testimonials aus einem CPT zu ziehen. Sie erhalten Design Freedom + die Möglichkeit, mit strukturierten Daten und Inhalten schneller aufzubauen.

Speichern Sie Ihr benutzerdefiniertes Modul als globales Element

Wenn sich Ihr neues Modul richtig anfühlt, speichern Sie es als globales Element für die Verwendung von anderen Orten auf Ihrer Website. Öffnen Sie das Menü Gruppeneinstellungen. Klicken Sie auf die Option " In der Bibliothek speichern ".

Ein Modal wird angezeigt, wo Sie Ihr Modul später für eine einfache Verwendung benennen können. Schalten Sie " Save As Global " um, um es in der Divi -Bibliothek zu speichern. Jede Änderung, die Sie später vornehmen, aktualisieren jede Kopie auf Ihrer Website.

Ihr globales Element wird jetzt eine eigene grüne Farbe haben, damit Sie feststellen können, dass es global ist.

Sie können auf alle Ihre gespeicherten globalen Elemente und anderen Bibliothekselemente in Dashboard> Divi> Divi -Bibliothek zugreifen. Wenn Sie hier ein globales Element bearbeiten, aktualisieren Sie es auf der Website. Sie können globale Elemente auch direkt auf den Seiten bearbeiten, auf denen sie verwendet werden (und es wird die Website aktualisieren).

Benötigen Sie das Modul auf jeder Website, die Sie erstellen? Schalten Sie " Speichern in Divi Cloud ". Das Modul befindet sich jetzt in Ihrer Cloud -Bibliothek und ist für jedes Projekt überall bereit. Bibliothekselemente behalten die Dinge auf einer Website, während Divi Cloud von Site zu Site mitbewegt. Verwenden Sie beide, um Builds zu beschleunigen und eine größere Konsistenz einzuleiten.

Holen Sie sich Divi Cloud

Bauen Sie heute etwas Neues auf

Modulgruppen geben neue Kraft in Ihre Hände. Sie können originelle Layouts formen und genau das, was Sie brauchen. Beginnen Sie damit, ein Klappentext zu erstellen und zu sehen, wie der Prozess passt. Wenn Sie sich an Divi auf diese Weise gewöhnen, werden Sie feststellen, dass Sie noch mehr kompliziertere Designs erstellen, da Sie die Standardmodule verwenden oder Ihre eigenen erstellen können.

Vieles, was oben abgedeckt war, war mit Divi möglich, bevor die Gruppen fallen, aber sie machen die Dinge einfacher. Vor allem, wenn wir Flex und den Loop Builder starten, werden Gruppen zu einem Grundnahrungsmittel für Ihr Entwerfen mit Divi.

Bereit, aufzusteigen? Nehmen Sie eine frische Website und testen Sie noch heute Ihr erstes benutzerdefiniertes Modul.