70+ Divi Modules Ultimate Guide 2024 (Offiziell / Drittanbieter)

Wenn Sie das Divi-Theme verwenden oder Divi Builder, arbeiten Sie regelmäßig mit Divi-Modulen. Sie sind die Bausteine ​​innerhalb des Designs, mit denen Sie Seitenelemente hinzufügen, gestalten, steuern und verwenden können, um schöne Websites zu erstellen.

Das Problem ist, wenn Sie mitten im Designen sind oder versuchen, sich zurechtzufinden Divi Builder, ist es schwierig, genau zu sehen, was verfügbar ist.

Diese vollständige Anleitung zu Divi-Modulen beschreibt die 46 in Divi enthaltenen Kernmodule. Außerdem werden einige kostenlose und Premium-Module von Drittentwicklern vorgestellt.

So können Sie Divi optimal für Ihre oder die Websites Ihrer Kunden nutzen.

Inhalte[Anzeigen]

Dieser Artikel ist einer unserer vielen Divi Bewertungen zur Verbesserung der Gesundheitsgerechtigkeit CollectiveRay hat getan, um die verschiedenen Aspekte des Divi-Themas und -Builders abzudecken. Schauen Sie sich auch unsere Liste an Beispiele für die Verwendung des Divi-Themas um beeindruckende Websites zu erstellen.

Müssen Sie Divi zu einem Schnäppchenpreis bekommen? Wir haben aktuell einen exklusiven Rabatt von Elegant Themes:

Holen Sie sich Divi nur im April 10 mit 2024 % RABATT

Wenn Sie noch mehr Motivation brauchen, Divi zu kaufen und mit den vielen Divi-Modulen hier zu experimentieren, ein aktuelles Leistungsupdate wird es tun.

Divi hat kürzlich seinen Code revolutioniert, sodass er schneller und leichter als je zuvor ist.

Als Teil der Verbesserung hat Divi CSS um 94% verkleinert und dynamisches CSS eingeführt, das nur das lädt, was erforderlich ist, intelligente Stile eingeführt, um Duplikate zu reduzieren und Dateigrößen zu verkleinern, CSS zu entfernen, das das Rendern blockiert, JavaScript optimiert und ein dynamisches PHP-Framework hinzugefügt, um dies zu erhöhen die Effizienz der Funktionen.

Offizielle Divi Module

Derzeit sind 46 Divi-Module verfügbar.

1. Akkordeon

Akkordeon

Das Akkordeon fügt einer Seite ein Akkordeon-Schieberegler-Modul hinzu. Sie wissen, wann Sie ein Inhaltsfeld mit einem auswählbaren Element sehen und es nach unten gleitet, um mehr Inhalt anzuzeigen? Das ist ein Akkordeon.

Für Divi ist ein Akkordeonmodul ein auswählbares Element, das Inhalt enthält. Wählen Sie die erste Zeile aus und sie wird erweitert, um eine kurze Erklärung oder Übersicht anzuzeigen. Wählen Sie die nächste Zeile aus und die erste Zeile wird geschlossen und die zweite geöffnet. Es ist eine elegante Möglichkeit, viele Inhalte auf kleinem Raum aufzunehmen.

2. Audio-

Audio

Das Audiomodul bietet einen Audioplayer, den Sie an einer beliebigen Stelle auf einer Seite platzieren können. Sie können den Player mit einer lokal gehosteten Audiodatei verknüpfen, damit er abgespielt wird, wenn ein Benutzer ihn auswählt.

In Divi ist das Audiomodul ein einfacher Audioplayer. Wenn Sie jedoch ein wenig CSS kennen, können Sie es selbst gestalten.

3. Balkenzähler

Bartheken

Balkenzähler sind die Fortschrittsbalken, die Sie auf Websites im gesamten Internet sehen. Richtig gemacht, sind sie ein sofort verständliches Maß für etwas und können in der richtigen Situation sehr gut funktionieren.

Divi Bar Counters können farbig gestaltet, an nahezu jeden Zweck angepasst, manuell für bestimmte Ebenen konfiguriert und auf verschiedene Arten verwendet werden.

4. Blog

Blog

Mit dem Divi Blog-Modul können Sie Blog-Beiträge an einer beliebigen Stelle auf einer Seite platzieren. Sie können diese Beiträge nicht nur überall positionieren, sondern auch an Ihr Thema anpassen.

Das Divi Blog-Modul bietet völlige Freiheit darüber, wo und wie Sie Ihre Blog-Beiträge anzeigen. Sie sind nicht mehr daran gebunden, wo WordPress oder Ihr Thema denkt, dass Sie sie mit diesem Modul haben sollten.

5. Klappentext

Klappentext

Das Klappentext-Modul ist ein Inhaltselement mit Symbol und optionalen Animationen. Diese sind nützlich für Produkt- oder Servicebeschreibungen auf Seiten, da der optionale Animationsaspekt einer Seite ein wenig Interesse verleihen kann.

Das Divi Blurb-Modul verfügt über eine Reihe von Symbolen, Farben und Animationsoptionen, je nachdem, wie Sie sie verwenden. Einige sind als Standardeinstellungen im Modul enthalten, während andere mit CSS implementiert werden können.

6. Knopf

Taste

Das Divi-Schaltflächenmodul bietet die Möglichkeit, Schaltflächen überall auf Ihrer Website in jeder Farbe und in einer Vielzahl von Formen und Größen hinzuzufügen. Das Design kann im Theme Customizer gesteuert und Links und Effekte gleichzeitig konfiguriert werden.

Sie sind eine einfache, aber effektive Erweiterung der vorhandenen Schaltflächenoptionen in Divi.

7. Handlungsaufforderung

Aufruf zum Handeln

Handlungsaufforderungen spielen eine wichtige Rolle bei der Bekehrung. Je überzeugender Sie sie machen können, desto effektiver können sie sein. Hier kommt dieses Modul ins Spiel.

Das Divi Call to Action-Modul bietet eine einfache Möglichkeit, Ihre eigenen Handlungsaufforderungen mithilfe einer Mischung aus CTA-Box, Überschrift, Inhalt und Schaltfläche zu erstellen, um die Conversions überall auf Ihrer Website zu steigern.

8. Kreiszähler

Kreiszähler

Das Kreiszählermodul funktioniert ähnlich wie Balkenzähler, verwendet jedoch stattdessen eine Vollkreisgrafik. Anstelle einer einfachen Leiste fügt das Modul einen vollen Kreis mit abgedeckten Bereichen hinzu, je nachdem, wie viel Prozent Sie als vollständig markieren.

Der Kreiszähler arbeitet mit dem Themenanpassungsprogramm zusammen und kann vollständig an jedes Thema angepasst werden.

9. Code

Code

Das Divi-Code-Modul ist ein benutzerdefiniertes Codeelement, das Sie jeder Seite hinzufügen können. Es akzeptiert Shortcodes, CSS und HTML und kann Ihnen dabei helfen, eine Vielzahl von Aufgaben innerhalb einer Seite zu erledigen.

Sie funktionieren ähnlich wie benutzerdefinierte CSS-Elemente in Designs. Sie können sie jedoch überall platzieren und fast alles ausführen, da sie nicht durch das Thema eingeschränkt werden.

10. Kommentare

Ihre Nachricht

Mit dem Divi-Kommentar-Modul können Sie an einer beliebigen Stelle auf der Seite einen Kommentar aus Ihrem Blog hinzufügen. Beispielsweise kann eine Empfehlung oder ein Feedback aus einem Blog-Kommentar auf einer Produktseite angezeigt werden.

Anstatt ein Bild zu verwenden, können Sie die reale Sache einfügen und dann auf den Hauptkommentar verlinken, was nur zur Authentizität beiträgt.

11. Kontaktformular

Kontaktformular

Das Kontaktformularmodul ist nützlich, wenn Sie kein Kontaktformular-Plugin eines Drittanbieters verwenden möchten. Sie können ein Formular an einer beliebigen Stelle auf der Seite implementieren und mit dem Design-Customizer formatieren.

Sie können mehrere Formulare erstellen, Feldvalidierung und bedingte Logik verwenden, damit jedes Formular funktioniert.

12. Countdown-Timer

Countdown-Timer-

Countdown-Timer werden häufig für Produktfreigaben, Countdowns für Sonderangebote oder Verkäufe oder zur Erzeugung von Zeitangst bei Lesern verwendet.

Das Countdown-Timer-Modul hilft dabei, indem es Ihnen ermöglicht, einen Timer zu gestalten, Ihren eigenen Countdown hinzuzufügen und ihn an einer beliebigen Stelle auf der Seite zu platzieren.

13. Teiler

Trennwand

Teiler sind kleine, aber wichtige Möglichkeiten, Webseiten aufzubrechen und dem Publikum vor dem nächsten Abschnitt eine kleine Pause zu geben. Die meisten Webthemen scheinen sie als nachträglichen Gedanken aufzunehmen, und hier kommt Divi ins Spiel.

Das Divi-Thema hat Teiler, aber das Teiler-Modul fügt weitere hinzu.

14. E-Mail-Anmeldung

E-Mail Anmelden

E-Mail-Anmeldeformulare sind wichtig, um E-Mail-Listen zu erstellen und das Engagement zu steigern. E-Mail ist immer noch ein unglaublich leistungsfähiges Marketing-Tool, und das E-Mail-Opt-In-Modul soll dabei helfen.

Mit diesem Modul können Sie Formulare, Newsletter-Anmeldungen und Elemente zur Lead-Generierung erstellen und diese dann mit Ihrem E-Mail-Programm verknüpfen, um die effiziente Verwaltung zu unterstützen.

15. Filterbares Portfolio

Filterbares Portfolio

Das Filterable Portfolio-Modul ist ideal, um einen attraktiven Portfolio-Bereich in eine Seite aufzunehmen. Sie können es formatieren, Ihre eigenen Kategorien und Filter konfigurieren und ein vollständig interaktives Portfolio erstellen.

Einige Divi-Themen enthalten integrierte Portfolioelemente und die Divi Builder hat sie auch, aber dieses Modul fügt noch mehr hinzu.

Fotogalerie

Das Divi Gallery-Modul macht das Gleiche für Galerien. Sie können Bilder und Videos überall auf einer Seite präsentieren.

Die Galerie kann vollständig angepasst werden und ein beliebiges Bild enthalten. Sie können den Stil als Raster oder Schieberegler festlegen und viele Aspekte des Erscheinungsbilds über den Customizer steuern.

17. Bild

Bild

Das Divi Image-Modul bietet eine Reihe von Optionen für die Anzeige von Bildern auf einer Seite. Sie können Lightbox-Effekte hinzufügen, verzögertes Laden implementieren, Animationen hinzufügen und Ihre Bilder wirklich hervorheben.

Bilder haben einen starken Einfluss auf das Engagement und die Zeit auf der Seite. Daher ist es absolut sinnvoll, Ihren Bildern gerecht zu werden. Dieses Modul kann dabei helfen.

18. Anmeldung

Login

Das Divi-Anmeldemodul fügt Seiten ein charakteristisches Anmeldeformular hinzu, das das vertraute Design Ihres Themas verwendet. Das Modul kann so gestaltet werden, dass es entweder im Hintergrund sitzt oder auffällt und bemerkt wird.

Die Anmeldeseite meldet den Benutzer automatisch bei der Site an, ohne zur Standard-WordPress-Anmeldeseite umzuleiten.

19. Karte

Karte

Das Divi Map-Modul nimmt das Standard-Kartenelement und fügt zusätzliche Anpassungsoptionen und Naht hinzuless Integration in eine Seite. Da Karten auf einigen Websites eine wichtige Rolle spielen können, ist dies ein sehr nützliches Addon!

Map lässt sich in Google Maps integrieren, um Standorte hervorzuheben oder interaktive Elemente hinzuzufügen. Es kann so gestaltet werden, dass es auch zu Ihrer Seite passt.

20. Nummernzähler

Nummernzähler

Das Nummernzählermodul ist ein weiteres grafisches Gerät für die Kommunikation mit Ihrem Publikum. Anstatt eine Balken- oder Kreisgrafik zu verwenden, verwendet dieses Modul einfache Zahlen für die Kommunikation.

Es funktioniert genauso wie die anderen. Gestalten Sie es im Design-Customizer und platzieren Sie es an einer beliebigen Stelle auf der Seite.

21. Person

Person

Das Personenmodul fügt Ihrer Website Persönlichkeiten hinzu. Egal, ob Sie Autoren präsentieren, Einblicke in Ihr Team gewähren oder etwas anderes möchten, das Modul Person ist genau das, was Sie tun.

Sie können ein Bild, eine Biografiekopie und Links zu sozialen Medien hinzufügen und an einer beliebigen Stelle auf Ihrer Website veröffentlichen. Es gibt auch Anpassungsoptionen, wenn Sie diese benötigen, um in ein vorhandenes Thema zu passen.

22. Mappe

Portfolio

Das Portfolio-Modul baut auf den von Gallery bereitgestellten Optionen auf, indem Sie Ihre Arbeit auf verschiedene Arten präsentieren können. Wenn Sie Freiberufler oder kleines Unternehmen sind und Ihre Arbeit vorführen möchten, ist dies die richtige Vorgehensweise.

Das Modul kann mit Gittern und Layouts in voller Breite arbeiten, Kategoriefilter und Paginierung anbieten. Es gibt auch einige Anpassungen, die Sie bei Bedarf anwenden können.

23. Nach der Navigation

Postnavigation

Die Nachnavigation verwendet die Standardoptionen "Weiter lesen" oder "Vorherige" und macht sie attraktiver. Während WordPress und viele Themen diese Funktionen haben, bietet die Divi-Option noch mehr Nutzen.

Mit dem Modul können Sie attraktive vorherige und nächste Schaltflächen am Ende von Posts einfügen, damit sich die Leser durch Ihr Blog arbeiten können.

24. Post-Slider

Post Slider

Das Post Slider-Modul ist eine großartige Möglichkeit, Ihre Blog-Beiträge zu präsentieren. Mithilfe eines Schiebereglers können Sie durch eine definierte Reihe von Blog-Posts blättern, um Ihre Arbeit zu demonstrieren und Klicks zu erzielen.

Während viele andere Plugins anbieten, Blog-Beiträge aufzulisten oder anzuzeigen, kann ein Schieberegler ein farbenfrohes Bild und einen Auszug enthalten, der Sie mit Sicherheit ansprechen wird. Mit diesem Modul sind auch geringfügige Anpassungen möglich.

25. Post-Titel

Post-Titel

Das Post-Titel-Modul ist eine kleine, aber nützliche Ergänzung, die das Divi-Styling für Post-Titel verwendet. Es zeigt den Titel an und bietet auch die Möglichkeit, ein ausgewähltes Bild und alle Metadaten hinzuzufügen, die Sie möglicherweise auch anzeigen möchten.

Das Modul verfügt über einige Anpassungsoptionen, mit denen Sie es in ein Thema einfügen können. Die Standardeinstellungen funktionieren jedoch für die meisten Anwendungen gut genug.

26. Preistabellen

Preistabellen

Preistabellen sind eines der Elemente, die nur sehr wenige WordPress-Themes richtig zu machen scheinen. Divi ist keiner von ihnen. Die Standard-Thementabellen funktionieren gut genug, aber Sie können dies mit dem Modul "Preistabellen" aufladen.

Dieses Modul fügt eine anpassbare Tabelle hinzu, die Sie auf jede Seite passen können. Sie können Farben, Währungen, Anzahl der Funktionen und Effekte nach Bedarf ändern.

Suche

Die Suche ist eine weitere dieser Funktionen, die normalerweise less als ideal. Die standardmäßige WordPress-Suchfunktion kann langsam sein und das Offensichtliche übersehen. Einige Themen beinhalten die Suche, die oft enttäuscht. Das Divi Search-Modul ändert all das.

Dies ist ein einfaches Suchfeld, das Sie überall platzieren und an Ihr Thema anpassen können. Einfach, schnell und sehr effektiv.

28. Geschäft

Shop

Das Divi Shop-Modul ist eine hervorragende Erweiterung von WooCommerce. Wenn Sie bereits ein Geschäft betreiben, können Sie mit diesem Modul Produkte in einem eigenständigen Element an einer beliebigen Stelle auf Ihrer Website bereitstellen. Es ist eine ausgezeichnete Gelegenheit zum Cross-Selling oder Upselling.

Mit dem Modul können Sie Produkte sortieren, das Element formatieren und auch einige Anpassungen an der Anzeige vornehmen.

29. Seitenleiste

Die Seitenleiste

Das Sidebar-Modul ist eines der nützlichsten Module in dieser Liste. Es verwendet eine Standard-Seitenleiste und gibt Ihnen die volle Kontrolle darüber, wie es aussieht, was es bietet und wie es funktioniert.

Mit dem Modul können Sie mithilfe des Design-Customizers benutzerdefinierte Seitenleisten erstellen und diese auf allen Seiten, einigen Seiten oder bestimmten Seiten platzieren.

30. Schieberegler

Slider

Schieberegler mögen umstrittene Themen sein, aber es besteht kein Zweifel daran, dass sie effektiv sein können, wenn sie richtig gestylt sind. Das Divi Slider-Modul macht genau das.

Es ist ein einfacher Schieberegler, den Sie an einer beliebigen Stelle auf der Seite platzieren und an das Design anpassen können. Sie können auch Videos und Bilder verwenden, den Folientyp steuern und vieles mehr.

31. Social Media Folgen

Social Media folgen

Follow-Buttons sind eine weitere Seite, die nur wenige Themen richtig machen. Sie sind eine so einfache Funktion, sehen aber oft ungeschickt aus, funktionieren nicht richtig oder sehen aus, als wären sie mit einem Plugin hinzugefügt worden.

Das Social Media Follow-Modul ist anders. Es fügt einige attraktive Symbole mit Links hinzu und ermöglicht es Ihnen, diese an Ihre Bedürfnisse anzupassen.

32. Tabs

Tabs

Wenn das Akkordeon-Modul nicht das ist, wonach Sie suchen, ist es vielleicht das Tabs-Modul. Dies ist eine weitere Möglichkeit, viel Text anzuzeigen, ohne die Seite zu überladen.

Mit diesem Addon können Sie ein Inhaltselement mit mehreren horizontalen Registerkarten erstellen, die Kopien, Bilder oder Videos enthalten können.

33. Zeugnis

Testimonial

Das Testimonial-Modul fügt einer Seite einen sozialen Beweis hinzu. Wir alle wissen, wie wichtig soziale Beweise sind, und mit diesem Modul können Sie sie überall hinzufügen.

Sie haben verschiedene Gestaltungsmöglichkeiten, um das Modul in die Seite einzufügen. Je nach Bedarf können Sie ein Bild, eine Kopie und Links hinzufügen.

34. Text

Text

Mit dem Textmodul können Sie auf den WordPress-Texteditor zugreifen, um benutzerdefinierten Text an einer beliebigen Stelle hinzuzufügen. Es ist ein weiteres kleines, aber nützliches Addon, das viel mehr Freiheit bei der Platzierung von Text auf einer Seite bietet.

35. Umschalten

Toggle

Das Divi Toggle-Modul funktioniert ähnlich wie Akkordeon, indem es Inhaltsfelder umschaltet, um sie zu öffnen und zu schließen. Wenn Akkordeon eine einzelne Box mit mehreren Folien verwendet, verwendet Toggle einzelne Boxen, die jede Folie einzeln verwendet.

Dies ist eine nützliche Alternative zu Akkordeon, bei der Sie möglicherweise nur einige Elemente verwenden möchten oder alle Elemente gleichzeitig öffnen möchten.

36. Video

Video

Sie können Videos bereits in WordPress einbetten, müssen jedoch die gesamte iFrame-URL in der Codeansicht verwenden. Das Divi Video-Modul speichert all das.

Mit dem Modul können Sie ein hochgeladenes oder verknüpftes Video an einer beliebigen Stelle auf einer Seite einbetten. Sie können auch ein benutzerdefiniertes Bild anstelle des ersten Frames festlegen und die Wiedergabetaste anpassen.

37. Video-Schieberegler

Video-Slider

Das Video Slider-Modul nimmt Videos auf und fügt einen Slider hinzu. Sie können ein Hauptvideo einstellen und eine Reihe anderer darunter anzeigen und den Schieberegler zwischen ihnen wechseln lassen.

Mit dem Modul können Sie die erste Bild- und Wiedergabetaste anpassen, hochgeladene oder verknüpfte Videos verwenden und sie an einer beliebigen Stelle auf einer Seite platzieren.

38. Code für volle Breite

Code für volle Breite

Das Fullwidth Code-Modul arbeitet mit Divi-Designs in voller Breite und ermöglicht das Einbetten von Code in eine Seite unter Beibehaltung der Formatierung. Es ist ein einfaches, aber effektives Modul, das für Anleitungen, Entwickler-Websites oder etwas anderes nützlich sein kann.

39. Header mit voller Breite

Header mit voller Breite

Mit dem Fullwidth Header-Modul können Sie einen Header mit der vollen Breite der Seite erstellen. Einfach aber sehr effektiv. Sie können eine Überschrift, eine Unterüberschrift und eine Kopie zusammen mit bis zu zwei Schaltflächen verwenden.

40. Bild mit voller Breite

Bild mit voller Breite

Bild in voller Breite ist die Version von Bild in voller Breite, funktioniert aber nahlessly in voller Breite Designs. Es hat auch die gleichen Anzeige- und Anpassungsoptionen.

41. Karte mit voller Breite

Karte mit voller Breite

Das Fullwidth Map-Modul funktioniert genau wie Maps, jedoch für Seiten mit voller Breite. Sie erhalten außerdem die gleiche Google Map-Kompatibilität, Anpassungsoptionen und Benutzerfreundlichkeit wie dieses Modul.

42. Menü voller Breite

Menü voller Breite

Das Menü "Breite" bietet ein benutzerdefiniertes Menü, das sich über eine Seite erstreckt. Es nimmt das Standard-WordPress-Menü und enthält es in einem benutzerdefinierten Element. Sie können das Menü dann wie gewohnt anpassen.

43. Portfolio mit voller Breite

Portfolio mit voller Breite

Dieses Modul übernimmt das Standard-Portfolio-Modul und ermöglicht die Verwendung mit Seiten voller Breite. Es hat die gleichen Anpassungen und Funktionen, funktioniert jedoch mit diesem Layout.

44. Post-Schieberegler für volle Breite

Post-Slider mit voller Breite

Der Post Slider mit voller Breite verwendet das Post Slider-Modul und sorgt dafür, dass es über die gesamte Breite einer Seite funktioniert. Es verfügt über dieselben Dienstprogramme und Anpassungsoptionen wie dieses Modul und bietet die volle Kontrolle darüber, wie es für den Benutzer aussieht.

45. Post-Titel in voller Breite

Post-Titel in voller Breite

Der Post-Titel mit voller Breite ist der gleiche wie der Post-Titel, funktioniert jedoch mit voller Breite. Es ist etwas, von dem wir uns vorstellen, dass Sie es sparsam auf einer Seite verwenden würden, aber dieses Divi-Modul stellt sicher, dass Sie Titel in voller Breite ohne Codierung verwenden können.

46. ​​Schieberegler für volle Breite

Schieberegler für volle Breite

Der Fullwidth Slider übernimmt das Slider-Modul und macht dasselbe. Macht es fehlerfreilessly mit einem Design in voller Breite. Dies ist ein nützlicheres Modul mit voller Kontrolle darüber, wie die Folien aussehen und sich anfühlen.

WooCommerce Divi Module

WooCommerce wird von Divi sehr gut bedient. Einige erweitern vorhandene Funktionen auf WooCommerce-Seiten, während andere es Ihnen ermöglichen, einige Geschäftselemente auf Nicht-Geschäftsseiten zu kennzeichnen.

Jedes ist einen Blick wert, wenn Sie mehr Flexibilität bei der Gestaltung Ihres Geschäfts suchen.

1. Woo Breadcrumb-Modul

Woo Breadcrumb-Modul

Brotkrumen werden häufig auf Websites verwendet, um die Navigation zu erleichtern. Das Woo Breadcrumb-Modul für Divi macht dasselbe für Ihr Geschäft. Die Optionen sind einfach und umfassen eine Kursseite, eine aktuelle Seite sowie einen optionalen Link und ein Trennzeichen.

Es ist ein einfaches, aber effektives Modul, mit dem Sie beschreibende Brotkrumen oben auf der Seite platzieren können, um Ihren Benutzern die Navigation zu erleichtern.

2. Woo-Titelmodul

Woo-Titelmodul

Mit diesem Modul haben Sie die volle Kontrolle über Produkttitel. Sie können den Titel ändern, formatieren und Links, Hintergründe hinzufügen und nach Bedarf konfigurieren. Es baut auf der Standardtiteloption auf, indem weitere Entwurfswerkzeuge und einige erweiterte Abstände hinzugefügt werden.

Wenn Sie einen Titel mit diesem Modul aktualisieren, können Sie außerdem festlegen, dass er überall auf Ihrer Site automatisch aktualisiert wird.

3. Woo Image Modul

Woo Image Modul

Das Woo Image Module bietet die volle Kontrolle über Produktbilder in Ihrem Geschäft. Die Standardoptionen sind gut, aber das geht noch weiter. Sie können eine Reihe von Bildern hinzufügen, einen Miniaturbild-Schieberegler verwenden und Abzeichen oder grafische Ebenen für Angebote oder etwas anderes hinzufügen.

Das Modul verfügt über einige Anpassungsoptionen, mit denen Sie das Bild formatieren und dann auf einer beliebigen Seite an einer beliebigen Stelle platzieren können.

Woo Gallery Modul

Das Woo Gallery-Modul baut auf dem Image-Modul auf, indem Bilder in eine Produktgalerie aufgenommen werden. Es bietet ähnliche Optionen wie das zuvor erwähnte Divi Gallery-Modul und bietet die Möglichkeit, die Galerie zu gestalten und überall auf jeder Seite zu platzieren.

Bilder verkaufen Produkte, daher ist dies eine hervorragende Option, wenn die Standardbildkapazität von WooCommerce nicht das liefert, was Sie benötigen.

5. Woo Preismodul

Woo Preismodul

Das Woo-Preismodul erweitert die Preise und ermöglicht es Ihnen, Produkte und Preise auf jeder Seite anzuzeigen, nicht nur auf Seiten. Es ist ein anpassbares Element, das den aktuellen Preis, den alten Preis und den Verkaufspreis anzeigt und diese Preise so gestaltet, dass sie zu Ihrem Thema passen.

Während das Standard-WooCommerce-Plugin viele Preisoptionen enthält, geht dieses Modul noch einen Schritt weiter und bietet die Möglichkeit, auf Nicht-Produktseiten zu werben.

6. Woo In den Warenkorb legen

Woo In den Warenkorb Modul

Das Woo Add to Cart-Modul bietet die volle Kontrolle über den tatsächlichen Kauf. Damit können Sie die Schaltfläche "Jetzt kaufen" nach Ihren Wünschen gestalten. Von dem, was es sagt, bis zum Aussehen und trennen Sie die Schaltfläche vom Standard-WooCommerce-Layout.

Wenn aus irgendeinem Grund der Standardpreis und das Schaltflächenlayout für Ihr Thema nicht funktionieren, hilft dieses Modul dabei. Sie können es überall platzieren, stylen, eine Mengenoption und sogar eine Restbestandsanzeige anzeigen.

7. Woo-Bewertungsmodul

Woo-Bewertungsmodul

Bewertungen sind alles im Einzelhandel. Hoch bewertete Produkte verkaufen nicht bewertete Produkte deutlich. Mit dem Woo-Bewertungsmodul können Sie den Aufstieg von Bewertungen und sozialen Beweisen bestimmen.

Sie können eine Bewertung auf einer Seite platzieren, Bewertungen anzeigen, die Anzahl und die durchschnittliche Bewertung dieser Bewertungen anzeigen und Links zu ihnen erstellen. Jedes Geschäft sollte Bewertungen verwenden, und so wird es gemacht.

8. Woo Stock Modul

Woo Stock Modul

Das Woo Stock Module macht genau das, was es verspricht. Damit können Sie eine genaue Lagernummer in Ihrer Produktanzeige anzeigen. Dies kann dazu beitragen, die Dringlichkeit zu erhöhen, was wiederum die Conversion erhöht.

Sie können jede Anzeige so gestalten, dass diese Dringlichkeit unterstützt wird, indem Sie den niedrigen Bestand in Rot oder den hohen Bestand in Grün markieren, den Text "Nicht vorrätig" hinzufügen und an einer beliebigen Stelle auf der Seite platzieren.

9. Woo Meta-Modul

Woo Meta-Modul

Das Woo Meta-Modul kümmert sich um kleine Details wie die Anzeige von Artikelnummern, Tags, Kategorien und Zusatzdaten auf einer Seite. Wenn Sie so viele Daten wie möglich auf Seiten einfügen möchten, hilft dieses Modul.

Es ist kein Freiformmodul, kann jedoch interne Metas aufnehmen und für alle sichtbar anzeigen. Sie können das Design jedoch stylen.

10. Woo-Beschreibungsmodul

Woo-Beschreibungsmodul

Mit dem Woo-Beschreibungsmodul können Sie eine Produktbeschreibung für ein bestimmtes Produkt an einer beliebigen Stelle innerhalb eines Divi-Themas anzeigen.

Es ist ein einfaches, aber verwendbares Modul, mit dem Sie Produkte auf Blogseiten oder Serviceseiten bewerben und das Erscheinungsbild dieser Beschreibung vollständig gestalten können.

11. Woo Tabs-Modul

Woo Tabs Modul

Das Woo Tabs-Modul funktioniert ähnlich wie das Divi Tabs-Modul. Es installiert ein Inhaltselement mit Registerkarten auf einer Seite, die Sie mit beliebigen Inhalten füllen können.

Registerkarten können nützlich sein, um mehrere Informationsquellen auf einer Seite zu kombinieren. Zum Beispiel Produktdetails, Produktspezifikationen, Lieferoptionen und Bewertungen in einem einzigen Feld mit jeweils einer Registerkarte.

12. Woo-Zusatzinformationsmodul

Woo Zusatzinformationsmodul

Das Woo-Zusatzinformationsmodul ist für diejenigen gedacht, die mehr wollen. Haben Sie Produkte mit zusätzlichen Optionen? Dies ist das zu verwendende Modul. Zum Beispiel würden hier Größen oder verschiedene Farben vorgestellt.

Sie können es nach Belieben stylen und mit dem Standard-Customizer auf einer Seite platzieren. Eine weitere einfache, aber wertvolle Ergänzung.

Woo Verwandte Produkte Modul

Das Woo-Zusatzinformationsmodul sollte wenig Einführung erfordern. Shops thrive zu Cross-Selling und Up-Selling und dieses Modul zeigt, wie Sie es tun. Sie können eine hinzufügen Ähnliche Produkte Abschnitt zu einer Seite und fügen Sie nach Bedarf unterstützende Informationen hinzu.

Jeder Shop sollte Cross-Selling verwenden und wenn die Standard-WooCommerce-Optionen nicht ausreichen, funktioniert dieses Modul nahtloslessmit Divi.

14. Woo Upsell-Modul

Woo Upsell-Modul

Das Woo Upsell-Modul macht fast das Gleiche. Sie können dies zu Produktseiten oder zu jeder Seite Ihrer Website hinzufügen, um Produkte zu verkaufen.

Die in diesem Modul vorgestellten Produkte sind diejenigen, die Sie in WooCommerce als Upsell-Optionen festgelegt haben. Mit diesem Modul können Sie sie einfach an einer beliebigen Stelle auf einer Seite platzieren.

15. Woo Cart Benachrichtigungsmodul

Woo Cart Benachrichtigungsmodul

Das Woo Cart Notice Module ist eine Mehrwertoption, mit der einer Produktseite eine einfache Benachrichtigung hinzugefügt wird, die den Benutzer darüber informiert, dass er ein Produkt zum Warenkorb hinzugefügt hat. Es ist eine einfache, aber nützliche Interaktion, die einen großartigen Laden von einem guten abheben kann.

Benachrichtigungen können Stile und mit Farben und Schriftarten sein. Die Standardeinstellung verwendet Ihre Themenfarbe, aber Sie können diese leicht überschreiben, wenn Sie dies bevorzugen.

16. Woo Reviews Modul

Woo Reviews Modul

Mit dem Woo Reviews-Modul können Sie Produktbewertungen für Ihre Artikel auf jeder Seite Ihrer Website platzieren. Für Werbeseiten oder Blog-Beiträge ist es nützlich, diesen wichtigen sozialen Beweis hinzuzufügen, um eine Kaufentscheidung zu beeinflussen.

Mit dem Modul können Sie bestimmte Felder festlegen, die Anzahl der Kommentare anzeigen und Farbe und Stil beeinflussen. Es ist ein nützliches Modul, wenn Sie an anderen Orten als auf Ihren Produktseiten werben.

10 der besten kostenlosen Divi-Module

Es gibt eine große Auswahl an kostenlosen Divi-Modulen, und nicht alle sind gleich. Wir denken, dass diese 10 kostenlosen Divi-Module einen Versuch wert sind.

1. Divi-Tweaker

Divi-Tweaker

Divi Tweaker ist ein sehr intelligentes Modul, das hilft, die Divi Builder und WooCommerce, entfernt Abfragezeichenfolgen, die das Laden von Seiten verlangsamen und lokale Designdateien durch Dateien ersetzen können, die von einem CDN bereitgestellt werden.

Das Modul bietet außerdem einige zusätzliche Designfunktionen für Mobilgeräte und Desktops, einige Animationen und Effekte, Seitenübergänge, Layoutoptionen und vieles mehr.

2. Divi Erweitertes Textmodul

Divi Erweitertes Textmodul

Das Divi Advanced Text Module ist ein kleines, aber sehr nützliches Modul, das die vorhandenen Textoptionen erweitert und einige nützliche Tools hinzufügt. Wenn Sie wie wir viel mit Text arbeiten, macht die Möglichkeit, die Breite und Höhe des Textelements zu ändern, einen großen Unterschied, wenn Sie versuchen, ein Seitenlayout zu perfektionieren. Dieses Modul macht das.

Außerdem wird ein Tool zum Hochladen von Bildern hinzugefügt, das die Entwurfszeiten auf kleine, aber wichtige Weise verkürzt.

3. Divi Slimbuilder

Divi Slimbuilder

Divi Slimbuilder ist ideal, wenn Sie Landing Pages oder längere Site-Seiten mit dem . erstellen Divi Builder. Es ändert das Layout des Hauptfensters, sodass die Seitenelemente schlanker sind. Es ändert auch die Art und Weise, wie Abschnittstitel angezeigt werden, um den gesamten Designprozess viel reibungsloser zu gestalten.

Es ist eine kleine Sache, bedeutet aber, dass Sie viel mehr von dem sehen können, was mit dem Back-End des Designs vor sich geht, ohne ständig auf und ab scrollen zu müssen.

4. Erweiterung der Artikelkarten

Erweiterung der Artikelkarten

Artikelkarten-Erweiterung war anscheinend Elegant Themes' erstes Divi-Modul. Es ist so nützlich, dass es noch heute existiert und immer noch beliebt ist. Es ist ein weiteres bescheidenes Modul, das dem Divi-Blog-Modul mehr Styling-Optionen hinzufügt, um die Art und Weise zu ändern, wie die Blog-Karten angezeigt werden.

Die Änderungen sind bescheiden und umfassen Schatteneffekte, Hintergrundfarben, die Möglichkeit, das Blog-Raster zu gestalten und die Position des Blog-Titels und des Metas zu ändern.

5. Divi Icon Erweiterungspaket

Divi Icon Erweiterungspaket

Das Divi Icon Expansion Pack macht genau das, was es verspricht. Es fügt dem eine Reihe von handgezeichneten Symbolen hinzu Divi Builder für Sie in Ihrem Design verwenden. Es stehen Hunderte zur Auswahl und Sie können sie alle an Ihr Thema anpassen.

Es gibt eine kostenlose und eine Premium-Version dieses Moduls. Die Prämie fügt mehr Symbole und Anpassungsoptionen hinzu.

6. Erweitern Sie Divi

Erweitern Sie Divi

Expand Divi ist ein weiteres selbsterklärendes Divi-Modul. Divi bietet eine Reihe von Funktionen, darunter Lightbox, einen neuen Abschnitt mit verwandten Posts, neue Autorenfelder, ein neues Element für aktuelle Posts, einen Animator für das Vorladen von Seiten, Tools für großartige Schriftarten und vieles mehr.

Das Modul wurde eine Weile nicht aktualisiert, aber wir haben es auf der neuesten Version von WordPress und Divi getestet und es hat gut funktioniert.

7. Kampfanzug für Divi

Kampfanzug für Divi

Battle Suit for Divi hat nicht nur einen sehr coolen Namen, sondern auch viel zu bieten. Es ist ein Erweiterungsmodul, das mehr Post-, Fußzeilen-, Galerie- und Bildoptionen hinzufügt, Lightbox für Bild und Video hinzufügt, Bildeffekte, Posttitel- und Metaoptionen und eine Menge anderer Tools hinzufügt.

Da dies ein kostenloses Modul ist, ist hier viel los und das Modul macht alles zugänglich und sehr einfach zu bedienen.

8. Einfacher Divi Shortcode

Einfacher Divi Shortcode

Simple Divi Shortcode verwendet ein sehr leistungsfähiges Tool in WordPress, Shortcodes, und ermöglicht es Ihnen, sie an einer beliebigen Stelle in anderen Modulen zu platzieren. Es ist ein weiteres sehr einfaches Tool, das einen großen Unterschied machen kann, wenn Sie häufig Shortcodes auf Ihren Seiten verwenden.

Es gibt eine kostenlose und eine Premium-Version dieses Plugins, aber die kostenlose Option bietet alles, wofür Sie es wahrscheinlich benötigen.

9. Surbma Divi-Extras

Surbma Divi-Extras

Surbma Divi Extras erweitert Divi um einige weitere Funktionen, die einige von Ihnen möglicherweise nützlich finden. Eine Sache, die es auszeichnet, ist die Option für das Textlogo. Möglicherweise müssen Sie es nicht oft verwenden, aber wenn Sie dies tun, lohnt es sich, dieses Modul allein mit diesem Tool zu verwenden.

Das Modul fügt außerdem Optionen für Stil, Layout, Menü und Fußzeile hinzu und verfügt über eine sehr übersichtliche Option für die vertikale Mitte zum Kopieren innerhalb eines Moduls. Dies ist ein weiteres Werkzeug, das ein echter Lebensretter sein kann!

10 Popups für Divi

Popups für Divi

Popups für Divi sind sehr nützlich, wenn Sie ein einzelnes Popup erstellen möchten, aber kein spezielles Popup-Plugin für WordPress verwenden möchten. Es wird eine Funktion hinzugefügt, mit der Sie ein Element im Builder erstellen und als Popup für das Marketing verwenden können.

Es ist eine einfache Lösung für ein ernstes Problem und ideal zum Erstellen grundlegender Popups innerhalb einer Seite, ohne ein Popup-Plugin verwenden oder bezahlen zu müssen.

10 Premium Divi Module

Es gibt Hunderte von Premium-Divi-Modulen. Einige sind die Investition wert und andere weniger. Diese 10 sind definitiv Ihr Geld wert!

Divi Karussell Modul 2.0

Mit Divi Carousel Module 2.0 können Sie Karussells für fast alles in Divi bauen. Sie können für Produkte, Dienstleistungen, Testimonials und alle Arten von Werbefunktionen nützlich sein. Dieses Plugin macht sie möglich.

Sie können so viele Karussells erstellen, wie Sie möchten, und diese als Vorlagen speichern, die Sie überall verwenden können. Sie haben die volle Kontrolle darüber, wie sie aussehen und sich anfühlen, und das gesamte Entwerfen erfolgt innerhalb des Builders. Eine hervorragende Option für Displays.

2. Divi E-Commerce

Divi E-Commerce

Divi Ecommerce arbeitet sowohl mit Divi als auch mit WooCommerce zusammen, um einen Online-Shop zu erstellen. Es verfügt über einige Designs, die als Vorlagen verwendet werden können, einige benutzerdefinierte Seitenelemente, Demo-Inhalte, mit denen Sie schnell einsatzbereit sind, und alles, was Sie zum Erstellen eines einfachen Geschäfts benötigen.

Das Modul verfügt sogar über Seitenleisten, Social Sharing, Produktlayoutoptionen, Countdown-Uhren, trendige Produktmodule und viele weitere Optionen. Wenn Sie keine der Divi-Demos mögen, könnte dies das Modul für Sie sein.

3. Divi Headers Pack

Divi Headers Pack

Das Divi Headers Pack ist riesig. Es fügt über 750 neue Header hinzu, einige funktional, einige neue Designs. Es fügt hinzu-canvas Menüoptionen, reaktionsschnelle Kopfzeilen, Menüeffekte, Menüanimationen und eine Menge Werkzeuge zum Gestalten von Kopfzeilen.

Dieses Modul hat einen sehr engen Fokus, aber es lohnt sich zu investieren, wenn Sie Probleme haben, den perfekten Header zu finden. Wenn Sie es hier nicht finden, werden Sie es nirgendwo finden!

4. Divi Supreme Pro

Divi Supreme Pro

Divi Supreme Pro enthält eine Reihe von Modulen, mit denen Sie Ihre Kreativität bei der Verwendung von Divi steigern können. Zu den Modulen gehören Verlaufstext, Flipbox, Textteiler, Divi-Typisierung, Supreme Button, Facebook-Feed und eine Reihe anderer.

In diesem Modul ist viel enthalten, über 40 verschiedene Module und 7 Premium-Erweiterungen. In Anbetracht des Preises ist Divi Supreme Pro ein Schnäppchen!

5. Divi Veranstaltungskalender

Divi Veranstaltungskalender

Divi Event Calendar kann verwendet werden, um eine komplette Event-Management-Website zu erstellen oder um Events zu einer Standard-Site hinzuzufügen. Es verwendet den Standard Divi Builder um Events zu erstellen und hat alles, was Sie brauchen, um sie zu gestalten und anzuzeigen.

Dieses Modul enthält einen Kalender, ein Karussell, einen Event-Feed und ein Seitenmodul, mit denen Sie eine voll funktionsfähige Event-Website oder einen Event-Bereich erstellen können.

6. Table Maker

Table Maker

Manche Leute finden Tabellen einfach, während andere sie als frustrierendes Durcheinander empfinden. Wenn Sie im letzteren Lager sind, ist die Table Maker Modul ist für Sie. Es ermöglicht Ihnen, eine Tabelle schnell in eine Seite einzubetten und alles daran zu gestalten.

Sie können Bilder, Symbole, Texte, Schaltflächen und sogar Zeilen für Handys reduzieren. Es ist ein sehr leistungsfähiges Plugin, mit dem Sie in kurzer Zeit Tabellen zu jeder Seite hinzufügen und gestalten können. Dafür lohnt es sich, es zu kaufen.

7. Divi-modales Popup

Divi-modales Popup

Wenn Sie Popups verwenden möchten und Popups für Divi nicht ausreichen, ist Divi Modal Popup genau das Richtige. Es ist ein funktionsreiches Modul, mit dem Popups in kurzer Zeit aus Seitenladen, Zeitverzögerung und einer Reihe anderer Trigger erstellt werden können.

Noch wichtiger ist, dass Sie die gesamte Palette der Seitenelemente einschließen, Ihr Popup an einer beliebigen Stelle platzieren, es durch irgendetwas auf der Seite auslösen lassen und dem Popup selbst Animationen hinzufügen können. Wenn Sie das Engagement für Popups erhöhen möchten, verwenden Sie diese Option.

8. Responsiver Helfer von Divi

Responsiver Helfer von Divi

Der Divi Responsive Helper ist ein Tool, mit dem Sie genau sehen können, wie Ihre Seite im Builder auf Mobilgeräten geladen wird. Sie können auch ändern, wie es aussieht, wie es geladen wird, die Reihenfolge der Elemente ändern und vollständig steuern, wie Ihre Site auf Mobilgeräten aussieht.

Das Modul enthält auch ein sehr intelligentes automatisches Fixer-Tool, mit dem Sätze oder Absätze neu ausgeglichen werden können, damit sie besser aussehen. Das allein macht den Kauf wert!

Divi Mauerwerk Galerie

Die Divi Masonry Gallery ist ideal, wenn Sie mehr von einem Portfolio oder einer Blog-Seite möchten. Es verwendet das Standard-Mauerwerkslayout und bietet die Möglichkeit, verschiedene Formen zu erstellen, Spalten zu ändern, Speicherplatz hinzuzufügen oder zu entfernen, modale Popups hinzuzufügen und eine bestimmte Galerie für Mobilgeräte zu konfigurieren.

Wenn Sie eine bildreiche Website entwerfen und mehr mit Mauerwerk tun möchten, können Sie mit diesem Modul alles über die vertraute Builder-Oberfläche erledigen.

10 Divi MadMenü

Divi MadMenü

Divi MadMenu fügt dem Menübereich von weitere Optionen hinzu Divi Builder. Wenn die Standardeinstellungen nicht ausreichen, fügt dieses Modul weitere hinzu. Es teilt auch eine Kopfzeile in separate Abschnitte auf, um eine einfache Anpassung zu ermöglichen.

Mit dem Modul können Sie steuern, wie das Menü auf verschiedenen Bildschirmgrößen funktioniert, verschiedene Layouts für verschiedene Geräte festlegen, Ajax-Elemente für Produkte hinzufügen, Aktionen und andere Elemente aufrufen. Es ist eine leistungsstarke Methode, um Header zu meistern.

Wenn Sie nach zusätzlichen Funktionen suchen, lesen Sie unseren Artikel über Divi Plugins oder Besuche unsere Bewertung von DiviFlash.

So entwickeln Sie Ihr eigenes benutzerdefiniertes Divi-Modul

Möchten Sie Ihr eigenes Divi-Modul entwickeln? Haben Sie ein Problem, das nicht von einem vorhandenen Modul abgedeckt wird?

Dieser Teil des Artikels ist hier, um zu helfen.

Wir werden die Grundlagen der Entwicklung Ihres eigenen benutzerdefinierten Divi-Moduls skizzieren. Sie benötigen grundlegende PHP-Kenntnisse, um diesen Abschnitt abzuschließen, da Divi Builder definiert Module als PHP-Klassen.

Zuerst müssen Sie eine Divi-Erweiterung erstellen. Sie müssen dies zuerst tun, da Ihr benutzerdefiniertes Divi-Modul in einer Erweiterung, einem Thema oder einem untergeordneten Thema implementiert ist und die Erweiterung am einfachsten zu erstellen ist.

Lesen Sie diese Anleitung, um Ihre Erweiterung zu erstellen. Wenn Sie fertig sind, kehren Sie hierher zurück, um Ihr Modul zu erstellen.

Öffnen Sie Ihre Erweiterung und suchen Sie Includes / Module

Erstellen Sie ein Verzeichnis mit dem Namen SimpleHeader

Erstellen Sie eine Datei in SimpleHeader und nennen Sie sie SimpleHeader.php

Fügen Sie Folgendes in die Datei ein und speichern Sie es


Klasse SIMP_SimpleHeader erweitert ET_Builder_Module {
          public $ slug = 'simp_simple_header';
          public $ vb_support = 'on';
          öffentliche Funktion init () {
                   $ this-> name = esc_html __ ('Einfacher Header', 'simp-simple-extension');
          }
          öffentliche Funktion get_fields () {
                   Array zurückgeben (
                             'Überschrift' => Array (
                                      'label' => esc_html __ ('Überschrift', 'simp-simple-extension'),
                                      'Typ' => 'Text',
                                      'option_category' => 'basic_option',
                                      'description' => esc_html __ ('Geben Sie hier Ihre gewünschte Überschrift ein.', 'simp-simple-extension'),
                                      'toggle_slug' => 'main_content',
                             ),
                             'content' => array (
                                      'label' => esc_html __ ('Content', 'simp-simple-extension'),
                                      'type' => 'tiny_mce',
                                      'option_category' => 'basic_option',
                                      'description' => esc_html __ ('Der hier eingegebene Inhalt wird unter dem Überschriftentext angezeigt.', 'simp-simple-extension'),
                                      'toggle_slug' => 'main_content',
                             ),
                   );
          }
          öffentliche Funktion rendern ($ unprocessed_props, $ content = null, $ render_slug) {
          }
}
neuer SIMP_SimpleHeader;

Wenn Sie Ihr PHP kennen, sehen Sie einen einfachen Header, der von verwendet werden kann Divi Builder. Sie sehen eine Kopfzeile, einige Inhalte und einen Hintergrund.

Fügen Sie der Datei nun etwas HTML hinzu, damit sie gerendert werden kann.

Fügen Sie nach 'public function render ($ unprocessed_props, $ content = null, $ render_slug) {' Folgendes hinzu

                   return sprintf (

                             ' % 1 $ s

                             % 2 $ s ',

                             esc_html ($ this-> Requisiten ['Überschrift']),

                             $ this-> Requisiten ['Inhalt']

                   );

          }

}

neuer SIMP_SimpleHeader;

Ihre vollständige Datei sollte folgendermaßen aussehen:


Klasse SIMP_SimpleHeader erweitert ET_Builder_Module {
          public $ slug = 'simp_simple_header';
          public $ vb_support = 'on';
          öffentliche Funktion init () {
                   $ this-> name = esc_html __ ('Einfacher Header', 'simp-simple-extension');
          }
          öffentliche Funktion get_fields () {
                   Array zurückgeben (
                             'Überschrift' => Array (
                                      'label' => esc_html __ ('Überschrift', 'simp-simple-extension'),
                                      'Typ' => 'Text',
                                      'option_category' => 'basic_option',
                                      'description' => esc_html __ ('Geben Sie hier Ihre gewünschte Überschrift ein.', 'simp-simple-extension'),
                                      'toggle_slug' => 'main_content',
                             ),
                             'content' => array (
                                      'label' => esc_html __ ('Content', 'simp-simple-extension'),
                                      'type' => 'tiny_mce',
                                      'option_category' => 'basic_option',
                                      'description' => esc_html __ ('Der hier eingegebene Inhalt wird unter dem Überschriftentext angezeigt.', 'simp-simple-extension'),
                                      'toggle_slug' => 'main_content',
                             ),
                   );
          }
          öffentliche Funktion rendern ($ unprocessed_props, $ content = null, $ render_slug) {
                   return sprintf (
                             ' % 1 $ s
                             % 2 $ s ',
                             esc_html ($ this-> Requisiten ['Überschrift']),
                             $ this-> Requisiten ['Inhalt']
                   );
          }
}
neuer SIMP_SimpleHeader;

Wenn ja, ist es jetzt an der Zeit, die React Komponentenklasse, die Divi Builder das Modul rendern.

Erstellen Sie eine Datei und nennen Sie sie SimpleHeader.jsx

Fügen Sie Folgendes ein und speichern Sie es

// Externe Abhängigkeiten
importieren React, { Komponente, Fragment } von 'react';
// Interne Abhängigkeiten
import './style.css';
Klasse SimpleHeader erweitert Component {
  statischer Slug = 'simp_simple_header';
  render () {
    Rückkehr (
      
        {this.props.content ()}
      
    );
  }
}
Standard-SimpleHeader exportieren;

Navigieren Sie zu include / modules / index.js in Ihrer Erweiterungsdatei

Fügen Sie Folgendes hinzu und speichern Sie es

// Interne Abhängigkeiten
Importieren Sie SimpleHeader aus './SimpleHeader/SimpleHeader'.
Standard exportieren [
  Einfacher Kopf,
];

Fügen Sie nachfolgend Folgendes zu SimpleHeader.jsx hinzu   

render () {
    Rückkehr (
und speichern Sie es.
  
        {this.props.heading}
        

Die vollständige Datei sollte nun folgendermaßen aussehen:

// Externe Abhängigkeiten
importieren React, { Komponente, Fragment } von 'react';
// Interne Abhängigkeiten
import './style.css';
Klasse SimpleHeader erweitert Component {
  statischer Slug = 'simp_simple_header';
  render () {
    Rückkehr (
      
        {this.props.heading}
        
          {this.props.content ()}
        
      
    );
  }
}
Standard-SimpleHeader exportieren;

Öffnen Sie die style.css Ihres Moduls und fügen Sie sie hinzu

.simp-simple-header-Heading {
          Rand unten: 20px;
}

Das war's für die Entwicklung Ihres Divi-Moduls. Jetzt müssen Sie es nur noch testen!

Öffnen Sie den Microsoft Store auf Ihrem Windows-PC. Divi Builder, suchen Sie Ihr Simple Header-Modul und versuchen Sie, es auf einer Seite zu verwenden. Wenn Sie den Code richtig eingegeben haben, sehen Sie eine einfache Header-Option.

Zusammenfassung der Divi-Module

Wir haben über 70 kostenlose und Premium-Divi-Module aufgenommen, die alles abdecken, von der Erstellung von Popups bis zum Hinzufügen zusätzlicher Designfunktionen zu Divi Builder. Einige sind Nischenmodule, die Sie nicht sehr oft verwenden werden, aber einige sind für die reibungslose und effiziente Nutzung von Divi Builder.

Wir glauben, dass sie einen Querschnitt dessen darstellen, was verfügbar ist, was funktioniert und was zu vernünftigen Preisen angeboten wird. Was denken Sie?

Verwenden Sie eines dieser Divi-Module? Haben Sie Module vorzuschlagen?

Über den Autor
David Attard
David ist seit 21 Jahren in der Online- und Digitalbranche tätig. Er verfügt über umfangreiche Erfahrung in der Software- und Webdesignbranche mit WordPress, Joomla und den damit verbundenen Nischen. Er hat mit Softwareentwicklungsagenturen, internationalen Softwareunternehmen und lokalen Marketingagenturen zusammengearbeitet und ist jetzt Head of Marketing Operations bei Aphex Media – einer SEO-Agentur. Als digitaler Berater liegt sein Fokus darauf, Unternehmen dabei zu helfen, sich durch die Kombination ihrer Website und der heute verfügbaren digitalen Plattformen einen Wettbewerbsvorteil zu verschaffen. Seine Mischung aus Technologieexpertise gepaart mit ausgeprägtem Geschäftssinn verschafft seinen Schriften einen Wettbewerbsvorteil.

Eine Sache noch... Wussten Sie, dass Leute, die nützliche Dinge wie diesen Beitrag teilen, auch FANTASTISCH aussehen? ;-);
Bitte kontaktieren Sie uns, wenn Sie Probleme im Zusammenhang mit dieser Website haben oder lass a nützlich Kommentieren Sie mit Ihren Gedanken und teilen Sie dies dann Ihren Facebook-Gruppen mit, die dies nützlich finden würden, und lassen Sie uns gemeinsam die Vorteile nutzen. Vielen Dank für das Teilen und nett zu sein!

Disclosure: Diese Seite enthält möglicherweise Links zu externen Websites für Produkte, die wir lieben und von ganzem Herzen empfehlen. Wenn Sie Produkte kaufen, die wir vorschlagen, können wir eine Empfehlungsgebühr verdienen. Solche Gebühren haben keinen Einfluss auf unsere Empfehlungen und wir akzeptieren keine Zahlungen für positive Bewertungen.

Autor (en) Empfohlen am:  Inc Magazin Logo   Sitepoint-Logo   CSS Tricks Logo    Webdesignerdepot-Logo   WPMU DEV Logo   und viele mehr ...