Divi-Plugin-Highlight – Gravity Divi-Modul

Gravity Forms ist eines der beliebtesten Formular-Plugins für WordPress. Es ist mit Divi kompatibel, das Shortcodes verwendet, aber dies nutzt nicht alle Möglichkeiten der Divi-Module. Glücklicherweise gibt es ein Plugin von Drittanbietern namens Gravity Divi Module, das dem Divi Builder Gravity Forms hinzufügt.

Gravity Divi Module ist ein Drittanbieter-Plugin von CodeCraters, das Gravity Forms vollständig in Ihre Divi- und Extra-Layouts integriert. Es ermöglicht Ihnen, Ihre Formulare mit den Anpassungen des Divi-Moduls zu gestalten. In diesem Plugin-Highlight schauen wir uns an, was das Modul kann. Für die Beispiele verwende ich Vorlagen von Gravity Forms und Bilder von Unsplash.com.

Weitere Informationen zu Gravity Forms finden Sie in den Elegant Themes-Artikeln:

• Gravity Forms – Ein detaillierter Blick auf die Personal Edition
• Wie man Schwerkraftformen so gestaltet, dass sie wie Divi aussehen (+ Bonus-Looks!)

Installation und Einstellungen des Gravity Divi-Moduls

Zunächst muss Gravity Forms installiert sein, um dieses Plugin verwenden zu können. Sobald Sie Gravity Forms installiert haben, laden Sie das Gravity Divi Module-Plugin hoch und aktivieren Sie es. Sobald das Plugin aktiviert ist, fügt es dem Divi Builder ein neues Modul namens Gravity Divi hinzu. Es ist keine Einrichtung erforderlich.

Mit der Einstellung Inhalt können Sie Ihr Formular auswählen, den Titel des Formulars anzeigen, die Beschreibung anzeigen, AJAX aktivieren, die Textfarbe auswählen und den Hintergrund anpassen.

Die Designeinstellungen umfassen Textanpassungen für den Formulartitel, die Beschreibung, die Elemente und den Text selbst. Ebenfalls enthalten sind Abstände für Ränder und Auffüllung sowie Schaltflächen-Styling. Diese Einstellungen geben Ihnen mehr Kontrolle als die Verwendung eines Gravity Forms-Shortcodes in einem Textmodul. Die erweiterten Einstellungen enthalten einen Registerindex, in dem Sie den Startreiter für die Felder des Formulars festlegen können.

Wählen Sie Ihre Formulare aus der Dropdown-Box aus. Wenn Sie Ihr Formular beim Erstellen Ihrer Divi-Seite noch nicht erstellt haben, können Sie eines erstellen, indem Sie auf den Link in den Inhaltseinstellungen unter Schwerkraftformular auswählen klicken. Nachdem Sie das Formular erstellt haben, wird es in dieser Dropdown-Box angezeigt.

Anpassungen vornehmen

Dies ist das erweiterte Kontaktformular mit dem Standardstil. Es passt zum Divi-Styling. Anpassungen sind einfach.

Hier sehen Sie einige grundlegende Anpassungen. Ich habe die Schriftgröße des Kopfzeilentextes erhöht, die Farben für alle Schriftarten geändert, ein Hintergrundbild mit dunkler Überlagerung hinzugefügt und Auffüllung hinzugefügt.

In diesem Beispiel habe ich den Formulartitel deaktiviert.

In diesem habe ich ein neues Formular aus der Dropdown-Box ausgewählt. Es behält die Einstellungen für Schriftarten und Hintergrund bei, da diese Anpassungen im Modul vorgenommen wurden. Dies ist ein kurzes Beispiel mit einer kurzen Beschreibung. Ich habe den Formulartitel deaktiviert und die Beschreibung aktiviert.

Gravity Divi-Modul in Divi-Layouts-Beispiele

Der größte Vorteil von Gravity Module ist der Divi Builder mit seinen Moduleinstellungen, was bedeutet, dass die Moduleinstellungen, die Sie gewohnt sind, für Gravity Forms verfügbar sind. Hier sehen Sie einige Beispiele innerhalb von Divi-Layouts.

Erweitertes Kontaktformular im Personenmodul-Layout

Dies ist das erweiterte Kontaktformular, das in ein einfaches Layout mit Hintergrundbild integriert ist. Um das Formular mit dem Seitendesign zu verschmelzen, habe ich den Text in hell geändert, die Schriftgröße des Titels auf 40 erhöht und den Text der Formularelemente in rot geändert.

Ich habe die Zeile des Moduls im selben Abschnitt wie die Person-Module platziert, sodass sich das Hintergrundbild auf das Gravity-Modul erstreckt. Das Formular passt in das Design der Seite und sieht nicht so aus, als hätte ich nur ein Formular unten auf der Seite angehängt.

Anmeldelayout

In diesem Beispiel werden einige Layoutelemente aus dem kostenlosen Homepage-Layout für Universitäten und Hochschulen verwendet.

Das Gravity-Modul wird in einem 2/3, 1/3-Layout mit einem Textmodul platziert.

Ich habe den Formulartitel und AJAX aktiviert, damit das mehrseitige Formular die Seite nicht neu lädt, wenn der Benutzer auf Weiter klickt. Die Schriftart des Formulartitels ist auf 30 % festgelegt. Es passt gut in das Styling des Layouts. Weitere Änderungen waren nicht erforderlich.

Hochzeitsantwort

Dieses verwendet weiche Farben und elegante Schriftarten, die sich mit dem Foto vermischen (in diesem Bild sind sie möglicherweise schwer zu erkennen. Normalerweise würde ich einen höheren Kontrast verwenden, aber für eine Hochzeitswebsite wird ein weicherer Kontrast bevorzugt). Die Farben werden dem Foto selbst entnommen und dann abgedunkelt, um die Lesbarkeit zu verbessern.

Dieses Layout ist ein einzelnes Modul mit einem Hintergrund im Abschnitt. Ich habe alle Schriftarten in Tangerine geändert, die Schriftgröße erhöht und sie fett gemacht und die Farben basierend auf den Farben im Bild auf Tan oder Rot angepasst.

Pizza-Bestellformular

In diesem Beispiel wird die Formularvorlage Pizza erstellen aus Gravity Forms verwendet.

Dieses Layout verwendet ein 1/3, 2/3 Layout mit einem Gravity-Modul und mehreren Bildmodulen. Ich habe einen Hintergrund im Abschnitt und eine Überlagerung in der Reihe mit Auffüllung hinzugefügt, damit alles in den entworfenen Raum passt.

Ich habe den Text auf Light gesetzt, die Schriftarten in Arimo geändert und die Schriftgröße für jedes Element des Formulars separat angepasst.

Ich habe den Schaltflächentext und den Rand auf Weiß gesetzt und den Randradius der Schaltfläche auf 30 angepasst.

Zusätzliches Thema mit erweitertem Kontaktformular im Personenmodul-Layout

Das Schwerkraftmodul ist auch mit Extra kompatibel. Hier sehen Sie das erste Beispiel (Erweitertes Kontaktformular im Personenmodul-Layout) mit Extra. Für die Seite in Extra verwende ich eine Seitenvorlage in voller Breite. Sie sieht genauso aus wie die Divi-Seite.

Die einzige Änderung, die ich vorgenommen habe, ist die Gestaltung der Schaltflächen. Die blaue Schaltfläche passte nicht so gut und der weiße Text sieht gut aus vor dem blauen Hintergrund.

Lizenz und Support

Das Plugin wird mit einer unbegrenzten Lizenz geliefert, sodass Sie es auf beliebig vielen Websites installieren können, sowohl für Sie als auch für Ihre Kunden. Es beinhaltet auch lebenslange Updates und 6 Monate Support.

Das Gravity Divi-Modul kann im Shop des Entwicklers erworben werden.

Abschließende Gedanken

Das Gravity Divi-Modul bietet eine großartige Möglichkeit, Ihre Gravity-Formulare in Ihre Divi-Layouts zu integrieren. Es fügt mehr Funktionen hinzu, als nur die Shortcodes von Gravity Forms zu verwenden. Alle Vorteile von Gravity Forms werden durch den Divi Builder und die Einstellungen des Moduls verbessert, einschließlich Hintergrundeinstellungen wie Bild, Überlagerungen und Farbverläufe, Schriftart- und Schaltflächeneinstellungen, Auffüllung usw.

Wenn Sie daran interessiert sind, Gravity Forms mit dem Divi Builder zu verwenden, könnte das Gravity Divi Module die Lösung sein, die Sie brauchen.

Jetzt bist du dran. Haben Sie das Gravity Divi-Modul verwendet? Teilen Sie uns Ihre Meinung in den Kommentaren unten mit.

Ausgewähltes Bild über Bloomicon / shutterstock.com