Divi-Plugin-Highlight: Divi Module Builder

Der Divi Builder enthält viele Module, mit denen Sie praktisch alle Designelemente zu Ihren Layouts hinzufügen können, aber was ist, wenn Sie Ihre eigenen Module erstellen möchten? Ein Drittanbieter-Plugin namens Divi Module Builder bietet Ihnen diese Möglichkeit.

In diesem Artikel werde ich mir das Plugin ansehen und sehen, was es kann und wie einfach es zu bedienen ist. Es erfordert Divi 3.0.50 oder höher und funktioniert sowohl mit Divi als auch mit Extra. Es ist auf der Website des Entwicklers verfügbar: DiviPlugins.com.

Divi Module Builder installieren

Nachdem Sie das Plugin aktiviert haben, klicken Sie auf DMB-Aktivierungsseite . Alternativ können Sie diesen Bildschirm sehen, indem Sie im Dashboard zu Benutzerdefinierte Module gehen und auf Lizenz klicken.

Geben Sie Ihren Lizenzschlüssel ein und klicken Sie auf Lizenz aktivieren . Dem Dashboard wird ein neues Menü namens Custom Modules hinzugefügt. In diesem Menü finden Sie alles, was Sie zum Erstellen Ihrer Module benötigen.

Modul hinzufügen

Module werden im Dashboard-Menü unter Custom Modules , Add Module erstellt . Es gibt zwei Bereiche, die Sie verwenden, um das Modul zu erstellen. Im linken Bereich erstellen Sie die Felder. Im rechten Bereich fügen Sie Code hinzu, der von den Feldern verwendet wird. Sie können das Modul als Standard oder Vollbreite festlegen. Sie können den Entwurf speichern oder veröffentlichen, wenn Sie bereit sind. Sobald das Modul veröffentlicht wurde, wird es im Divi Builder angezeigt.

Felder

Ihr Modul kann beliebig viele Felder haben. Jedes Feld enthält Feldeigenschaften. Hier ist ein genauerer Blick auf die einzelnen Eigenschaften des Felds:

Feldbezeichnung – die Bezeichnung, die als Feldtitel auf der Inhaltsregisterkarte des Moduls angezeigt wird.

Feldkennung – ein eindeutiger Wert, den Sie verwenden, um das Feld in HTML zu referenzieren. Verwenden Sie für Feldbezeichner nur Kleinbuchstaben, Zahlen und Unterstriche.

Feld Beschreibung - fügen Sie Ihre eigene Beschreibung den Zweck des Feldes zu erklären. Dies wird unter der Eingabe in der Inhaltsregisterkarte des Moduls angezeigt. Dieses Feld ist optional, ich empfehle jedoch, Informationen oder Beispiele hinzuzufügen, um Benutzern zu helfen.

Feldtyp – bestimmt die Art der Eingabe, die der Benutzer sieht. Wählen Sie mehrere Feldtypen aus dem Dropdown-Feld aus, einschließlich Text, Textbereich, Farbe, Bild, Ja/Nein-Umschalter und Symbol.

Registerkarte „Design“ – fügt Schriftart-Steuerelemente für dieses Feld im Design des Moduls hinzu. Sie sehen diese Option, wenn Sie Text oder Textbereich auswählen. Sie müssen ermitteln, auf welches Element die Schriftarten-Steuerelemente angewendet werden sollen, indem Sie eine Klasse im HTML-Code hinzufügen.

Feld ausblenden – Geben Sie Benutzern die Kontrolle über die Schriftart eines Elements in der HTML-Ausgabe, ohne dass sie den Inhalt dieses Elements steuern können. Diese Option ist nur verfügbar, wenn ein Text- oder Textbereich-Feldtyp ausgewählt ist.

Fügen Sie Ihre Feldbezeichnung, Kennung und Beschreibung hinzu, wählen Sie den Feldtyp aus, aktivieren Sie die Registerkarte "Design" oder wählen Sie aus, um das Feld auszublenden. Ordnen Sie Felder neu an, indem Sie auf die Auf-/Ab-Pfeile in jedem Feld klicken. Jeder Abschnitt und jedes Feld enthält eine Beschreibung und ein Beispiel.

Code

Fügen Sie benutzerdefiniertes HTML, PHP, CSS und JavaScript hinzu, um die Ausgabe zu steuern. Die HTML-Felder können benutzerdefinierte Abfragen und PHP aufnehmen. Sie müssen PHP aktivieren, bevor es den Code erkennt. Andernfalls wird der Code auf dem Bildschirm gedruckt. Sowohl HTML als auch PHP verwenden Feldbezeichner, um auf die Felder zu verweisen.

Code-Shortcuts werden als Schaltflächen unter den Codefeldern bereitgestellt. Dazu gehören Tags und Feldbezeichner. Fügen Sie Ihre Feldkennungen hinzu, und dann ist sie unten im Codebereich verfügbar, wo Sie darauf klicken können, um sie zu Ihrem Code hinzuzufügen. Die HTML-Bezeichner werden als orangefarbene Schaltflächen und PHP als grüne Schaltflächen angezeigt. Sie können mehr als die verfügbaren Verknüpfungen verwenden, aber diese sind hier, um die Entwicklungszeit zu verkürzen.

Erstellen eines Moduls

Hier ist ein kurzes Beispiel zum Erstellen eines Moduls. Der Titel ist der Name, der auf dem Modul im Divi Builder angezeigt wird. Ich habe Feldbezeichnung und Beschreibung hinzugefügt, Text als Feldtyp ausgewählt und eine Feldkennung erstellt.

Ich habe als Entwurf gespeichert, damit die Kennung in den HTML-Verknüpfungen angezeigt wird. Als nächstes wählte ich das H1-Tag aus den Shortcuts aus, platzierte meinen Cursor zwischen den Tags und wählte das Label aus den HTML-Shortcuts. Als ich fertig war, klicke ich auf Veröffentlichen. Das Ergebnis sollte ein Modul mit einem Feld sein, in das Benutzer Text eingeben können. Die Ausgabe zeigt den Text als Kopfzeile 1 an.

Das Modul erscheint nun im Divi Builder. Ich kann der Seite wie jedes Divi-Modul etwas hinzufügen.

Die Registerkarte Inhalt enthält die Felder, die ich mit meinen Labels hinzugefügt habe.

Das Modul zeigt den Text an, den ich in das Feld eingegeben habe. Da ich HTML hinzugefügt habe, um es als H1 anzuzeigen, hat der Text automatisch eine H1-Eigenschaft. Ich könnte die Registerkarte Design hinzufügen, um weitere Anpassungsfunktionen einzuschließen. Dies erfordert etwas Code, um das Feld korrekt auszurichten.

Module

Sie können die Liste der Module im Dashboard-Menü sehen. Gehen Sie zu Benutzerdefinierte Module , Module . Hier können Sie Ihre Module bearbeiten oder löschen. Es zeigt an, ob PHP für jedes Modul ein- oder ausgeschaltet ist. Wenn Sie ein Modul klonen möchten, müssen Sie es in den Einstellungen anzeigen.

Benutzerdefinierte Moduleinstellungen

Das Menü Einstellungen bietet einen Ort, an dem Sie Ihre Module verwalten können. Sie können sowohl veröffentlichte als auch Entwurfsmodule anzeigen.

Sie können sie klonen, was Ihnen einen guten Ausgangspunkt für ein Modul bietet, das viel Code benötigt, den Sie in einem anderen Modul verwendet haben. Sie können auch PHP bearbeiten, deaktivieren oder aktivieren (was hilfreich ist, wenn Sie aufgrund eines Codefehlers aus dem Editor gesperrt sind – ich habe dies getan und diese Funktion zum Bearbeiten des Moduls verwendet) und Ihre Module importieren und exportieren.

Abhängigkeit hinzufügen

Hier können Sie CSS- und Javascript-Abhängigkeiten von Drittanbietern hinzufügen. Fügen Sie sie als externe oder interne URLs hinzu. Wählen Sie CSS oder Javascript aus dem Dropdown-Feld, fügen Sie den Namen und die URL hinzu. Sie können dann auf jeder Seite verwendet werden. Es gibt ein Beispiel für die Verwendung von Font Awesome. Dies ist eine hervorragende Möglichkeit, eine Abhängigkeit an einem Ort zu erstellen und sie dann überall zu verwenden.

Divi Module Builder-Beispiel – Benutzerdefiniertes Blog-Raster

Anstatt als Beispiel ein 'okay'-Modul zu erstellen, zeige ich das großartige Beispiel, das der Entwickler erstellt hat – Custom Blog Grid (erhältlich zum kostenlosen Download auf der Website des Entwicklers). Es enthält 3 Felder, HTML, PHP und CSS. Hier ist ein Blick auf jeden einzelnen.

Benutzerdefiniertes Blog-Grid-Modul

Feld 1 trägt die Bezeichnung Kategorien, verwendet Kategorien als Kennung und der Feldtyp ist auf Text festgelegt.

Feld 2 ist mit B&W Image Effect beschriftet. Der Bezeichner ist Filter und der Feldtyp ist Yes/No Toggle. Der Filter wird in CSS erstellt.

Feld 3 trägt die Bezeichnung Post Title und verwendet post_title als Kennung. Der Feldtyp ist auf Text eingestellt und die Registerkarte Design ist aktiviert. Wir sehen Anpassungen für dieses Feld im Modul. Dieses Feld erhält in HTML eine H2-Klasse.

PHP ist ausgewählt, damit es im Feld HTML-Ausgabecode verwendet werden kann.

Benutzerdefiniertes CSS wird dem CSS-Ausgabefeld hinzugefügt.

Hier ist das Javascript. Sie benötigen ein gutes Verständnis von HTML, PHP, CSS und Javascript, um dieses Plugin optimal nutzen zu können. Mit anderen Worten, dies ist ein Plugin für Entwickler.

Das benutzerdefinierte Blog-Grid-Modul im Divi Builder

Sobald das Modul veröffentlicht wurde, finden Sie es im Divi Builder.

Die im Modul angezeigten Einstellungen und deren Bezeichnungen unterscheiden sich je nach Ihrer Auswahl. Mit diesem Modul können Sie Kategorien hinzufügen, den Schwarz-Weiß-Effekt aktivieren und einen Beitragstitel auf der Registerkarte Inhalt hinzufügen. Es enthält auch Hintergrundeinstellungen (was für Module Standard ist).

Die Registerkarte Design ist für dieses Modul aktiviert. Es enthält Einstellungen für Text, Beitragstiteltext, Rahmen, Abstände und Animation.

Ergebnisse des benutzerdefinierten Blog-Rasters

Das Ergebnis ist ein Blog-Grid mit Hover-Animation. Ich habe den Schwarzweißmodus aktiviert, damit die Bilder in Schwarzweiß angezeigt werden, es sei denn, ich bewege den Mauszeiger darüber. Ich bevorzuge diese Form des Schwebens – um das Bild beim Schweben zu zeigen, anstatt es zu verdecken.

In diesem habe ich den Schwarzweißmodus deaktiviert, die Titelschriftart geändert und einen Hintergrundverlauf hinzugefügt. Weitere Anpassungen können im Code hinzugefügt werden, um die Schaltfläche zu ändern, Überlagerungen hinzuzufügen usw. Wenn Sie es codieren können, können Sie praktisch alles tun, was Sie sich vorstellen können.

Lizenz und Dokumentation

Es stehen drei Lizenzen zur Auswahl: Single, Unlimited und Lifetime. Die Unlimited-Lizenz umfasst eine unbegrenzte Anzahl von Websites und beinhaltet 1 Jahr Updates und Support. Die lebenslange unbegrenzte Sites-Lizenz umfasst lebenslange Updates und Support.

Die Dokumentation wird auf der Website des Entwicklers bereitgestellt. Beispielcode ist zusammen mit einer Schritt-für-Schritt-Anleitung enthalten.

Abschließende Gedanken

Divi Module Builder ist ein leistungsstarkes Plugin mit viel Potenzial in den richtigen Händen. Da es gute Codekenntnisse erfordert, ist es nicht jedermanns Sache. Dies gibt Entwicklern ein hervorragendes Werkzeug zum Erstellen und Freigeben von Modulen. Ich mag, dass Sie von einer Site zu einer anderen importieren und exportieren können. Auf jeder Site, die das Modul verwendet, muss das Plugin installiert sein. Wenn Sie über gute Code-Kenntnisse verfügen und daran interessiert sind, Ihre eigenen Divi-Module zu erstellen, ist Divi Module Builder einen Blick wert.

Wir wollen von dir hören. Haben Sie Divi Module Builder ausprobiert? Lassen Sie uns in den Kommentaren wissen, was Sie davon halten.

Ausgewähltes Bild über Aliaksei kruhlenia / shutterstock.com