Divi-Produkt-Highlight: Gravity Forms Styler-Modul für Divi

Das Gravity Forms Styler-Modul für Divi ist ein im Divi Marketplace verfügbares Plugin, mit dem Sie den Stil Ihrer Gravity Forms ganz einfach direkt in der vertrauten Divi Builder-Oberfläche anpassen können. Mit diesem Plugin können Sie Gravity Forms wie jedes andere Modul zu Ihren Divi-Layouts hinzufügen. Mit den Optionen auf der Registerkarte „Design“ haben Sie die volle Kontrolle über jeden Formularaspekt.

Eine einzigartige Funktion dieses Plugins besteht darin, dass Sie direkt im Divi Builder eine Vorschau des gesamten Formulars, des Formulars mit Validierungsfehlern und der Bestätigungsnachrichtenseite anzeigen können. In diesem Produkt-Highlight werfen wir einen genaueren Blick auf das Gravity Forms Styler-Modul für Divi und helfen Ihnen bei der Entscheidung, ob es das richtige Produkt für Sie ist.

Lass uns anfangen!

Installieren des Gravity Forms Styler-Moduls für Divi

Stellen Sie zunächst sicher, dass das Gravity Forms-Plugin auf Ihrer Website installiert und aktiviert ist. Kaufen Sie außerdem das Plugin „Gravity Forms Styler Module for Divi“ vom Divi Marketplace und laden Sie die Plugin-Datei herunter.

Um das Plugin zu installieren, öffnen Sie die Seite „Neu hinzufügen“ unter der Überschrift „Plugins“ im WordPress-Dashboard. Klicken Sie auf die Schaltfläche „Plugins hochladen“ und dann auf „Datei auswählen“, um die Plugin-Datei von Ihrem Computer auszuwählen. Klicken Sie abschließend auf „Jetzt installieren“ und das Plugin wird Ihrer Website hinzugefügt.

Sobald das Plugin installiert ist, klicken Sie auf Plugin aktivieren.

Gravity Forms Styler-Modul für Divi

Das Gravity Forms Styler-Modul für Divi ist ein Modul, das dem Divi Builder hinzugefügt wird. Das bedeutet, dass Sie Gravity Forms überall dort hinzufügen können, wo Sie jedes andere Divi-Modul hinzufügen könnten, was Ihnen die ultimative Flexibilität bei Ihren Layouts und Designs bietet. Fügen Sie zunächst eine neue Seite zu Ihrer Website hinzu und wählen Sie die Option Divi Builder.

Klicken Sie auf der neuen Seite auf das graue Plus-Symbol, um ein Modul einzufügen. Wählen Sie das Modul Gravity Form aus der Liste aus.

Inhaltseinstellungen

Öffnen Sie die Optionen für das Gravity Form-Modul. Mit der ersten Option mit dem Titel „Form“ können Sie die Schwerkraftform auswählen, die Sie anzeigen möchten.

Sie können auch den im Formular angezeigten Titel und die Beschreibung anpassen. Sie können jedes dieser Elemente ausblenden, einen benutzerdefinierten Titel oder eine benutzerdefinierte Beschreibung festlegen oder den in den Gravity Forms-Einstellungen festgelegten Titel oder die Beschreibung anzeigen.

Als Nächstes können Sie Ajax für Formularübermittlungen aktivieren. Wenn diese Option aktiviert ist, wird die Seite nach dem Absenden des Formulars nicht neu geladen. Sie können den Startregisterindex für die Formularfelder und Standardfeldwerte in den Inhaltseinstellungen festlegen.

Hintergrund

Auf der Registerkarte „Inhalt“ können Sie dem Gravity Forms-Modul auch einen Hintergrund hinzufügen. Mit den umfangreichen Hintergrundoptionen von Divi können Sie eine Hintergrundfarbe, einen Farbverlauf, ein Bild, ein Video, ein Muster oder eine Maske hinzufügen, um einzigartige Layouts für Ihr Formular zu erstellen.

Designeinstellungen

Gehen wir nun zur Registerkarte „Design“ über. Hier können Sie das Design jedes Elements im Formular vollständig anpassen.

Schriftart

Auf der Registerkarte „Schriftart“ können Sie die Stile für den Text im Formular festlegen. In diesem Abschnitt können Sie Schriftart, Schriftstärke, Stil, Ausrichtung, Farbe, Textgröße, Buchstabenabstand, Zeilenhöhe und Textschatten festlegen. Hier stelle ich die Schriftart und Schriftfarbe ein.

Formularüberschrift

In den Einstellungen für Formularüberschriften können Sie den Stil der Schriftart für Formularüberschrift, Titelschriftart, Abstand und Rand, Rahmen und Hintergrund anpassen. Mit diesen Optionen können Sie den Überschriftenabschnitt unabhängig vom Rest des Formulars vollständig anpassen. Für dieses Beispiel habe ich den Formulartiteltext vergrößert.

Felder

Im Abschnitt „Feldeinstellungen“ können Sie den Stil der Formularfelder festlegen, einschließlich Hintergrundfarbe, Textfarbe, Fokusstil, Rand und Abstand, Schriftart und Rahmenstil. In diesem Abschnitt habe ich die Feldfarbe auf Weiß eingestellt.

Ich habe auch Fokusgrenzen aktiviert. Dadurch wird dem Rand des aktiven Felds ein einzigartiger Stil verliehen, wie Sie im Screenshot sehen können.

Feldfehler

Als Nächstes können Sie im Abschnitt „Feldfehler“ die Text-, Hintergrund- und Rahmenfarben für den Formularfeldfehler festlegen.

Etiketten

Im Abschnitt „Beschriftungen“ können Sie den Beschriftungstext formatieren, den Abstand und den Rand festlegen, den Rahmen formatieren und einen Hintergrund oder einen Rahmenschatten hinzufügen. Für dieses Beispiel habe ich die Textgröße des Etiketts erhöht und die Farbe geändert. Ich habe auch die untere Polsterung entfernt.

Erforderlicher Text

Im nächsten Abschnitt können Sie den gewünschten Text formatieren. Mit den Optionen können Sie das Sternchen, das neben den erforderlichen Feldern angezeigt wird, formatieren.

Unteretiketten

Als nächstes folgen die Einstellungen für die Unterbezeichnungen. Hier können Sie den Stil des Unteretikettentexts, den Abstand und den Rand, die Rahmenstile, den Hintergrund und den Rahmenschatten anpassen. Ich habe die Textfarbe des Unteretiketts auf Grau eingestellt und den oberen Rand angepasst.

Feldbeschreibung

Die Einstellungen für die Feldbeschreibung ähneln den letzten Einstellungen, bei denen Sie Textstil, Abstand und Rand, Rahmenstile, Hintergrund und Rahmenschatten anpassen können. In diesem Beispiel habe ich die Ränder angepasst, um Beschreibung und Titel näher zusammenzubringen.

Als Nächstes können Sie den Schriftstil für die Feldvalidierung in der Feldvalidierungseinstellung festlegen. Darüber hinaus können Sie den Abstand und den Rand, die Rahmenstile, den Hintergrund und den Rahmenschatten anpassen.

Fehlerbenachrichtigung

Die Einstellungen für die Fehlerbenachrichtigung sind sehr ähnlich und bieten Optionen zum Anpassen von Schriftart, Abstand, Rahmen, Hintergrund und Rahmenschatten.

Bestätigungsmeldung

Im nächsten Abschnitt geht es um die Anpassung der Bestätigungsnachricht. Sie können die Vorschauoption oben verwenden, um das Layout der Bestätigungsnachricht anzuzeigen.

Radio Knöpfe

In den Optionsfeldeinstellungen können Sie die Radiofarben, den Textstil und den Listenabstand festlegen. Hier habe ich die markierte Hintergrundfarbe geändert.

Kontrollkästchen

Ebenso können Sie in diesem Abschnitt die Farben der Kontrollkästchen, den Textstil und den Listenabstand ändern.

Datei-Uploads

Der Bereich zum Hochladen von Dateien kann hier angepasst werden. Sie können den Schriftstil, den Abstand, den Rahmen, den Hintergrund und den Rahmenschatten anpassen.

Abschnitt Pause

Hier können Sie den Schriftstil für die Beschreibung und Überschrift des Abschnittsumbruchs sowie den Abstand, den Rahmen, den Hintergrund und den Rahmenschatten anpassen.

Preisfelder

Mit diesem Modul können Sie auch die Preisfelder von Gravity Forms anpassen. Sie können die Felder Produktpreis, Versandpreis und Gesamtpreis gestalten.

Fortschrittsanzeige

Als nächstes kommt die Fortschrittsbalkenoption. Der Fortschrittsbalken wird im Formular angezeigt, wenn mehrere Seiten vorhanden sind, und bietet einen visuellen Indikator dafür, wie weit Sie im Formular fortgeschritten sind. In den Designeinstellungen können Sie den Stil des Fortschrittsbalkens anpassen. Sie können die Farben und die Balkenhöhe festlegen, die Schriftartoptionen anpassen, einen Rahmen hinzufügen und den Abstand anpassen.

Formularfußzeile

In den Optionen für die Formularfußzeile können Sie die Schaltflächenausrichtung, den Abstand, die Rahmenstile, den Hintergrund und die Schattenstile des Felds festlegen.

Button-Styling

Als nächstes folgen vier Abschnitte, in denen Sie die Schaltflächen im Formular anpassen können: Schaltfläche „Senden“, Schaltflächen für die Seitennavigation, Schaltfläche „Speichern und fortfahren“ und Schaltfläche „Alle auswählen“. In jedem dieser Abschnitte können Sie benutzerdefinierte Schaltflächenstile aktivieren, um den Stil an das Design Ihres Formulars anzupassen.

Größenbestimmung

In den Größeneinstellungen können Sie die Breite, Höhe und Ausrichtung des Formulars anpassen. Hier habe ich die Breite auf 75 % und die Ausrichtung auf Mitte eingestellt.

Abstand

Als Nächstes können Sie den Rand und den Abstand für das Formular ändern. Für dieses Beispiel habe ich auf jeder Seite etwas Polsterung hinzugefügt.

Grenze

In den Rahmeneinstellungen können Sie einen Rahmen um das Formular hinzufügen. Hier habe ich einen blauen Rand hinzugefügt.

Box Schatten

Als Nächstes können Sie dem Formular einen Boxschatten hinzufügen.

Filter

Hier können Sie mit verschiedenen Filtern die Darstellung des Formulars verändern.

Verwandeln

In den Transformationseinstellungen können Sie die Darstellung des Formulars mithilfe der Skalierungs-, Übersetzungs-, Rotations-, Neigungs- und Transformationsursprungseinstellungen anpassen.

Animation

Schließlich können Sie in diesem Abschnitt einen Animationseffekt auf das Formular anwenden. Sie können aus sieben verschiedenen Animationsstilen auswählen und die Animationsdauer, Verzögerung, Intensität und mehr anpassen.

Vorgefertigte Layouts

Das Gravity Forms Styler-Modul für Divi bietet außerdem Zugriff auf einige vorgefertigte Layouts für vollständig gestaltete Formulare. Sie können die Layouts von der Website des Plugin-Autors herunterladen. Diese Layouts sind eine großartige Möglichkeit, sich einen Vorsprung beim Styling-Prozess zu verschaffen.

Gravity Forms Styler-Modul für Divi-Layout-Beispiel

Hier ist ein Beispiel dafür, wie Sie Ihr Gravity Form mit dem Gravity Forms Styler-Modul für Divi gestalten.

Erste Seite

Zweite Seite

Validierungsfehler

Bestätigungsseite

Kaufen Sie das Gravity Forms Styler-Modul für Divi

Das Gravity Forms Styler-Modul für Divi ist im Divi Marketplace verfügbar. Die unbegrenzte Website-Nutzung und ein Jahr Support und Updates kosten 39 US-Dollar. Im Preis ist außerdem eine 30-tägige Geld-zurück-Garantie enthalten.

Abschließende Gedanken

Das Gravity Forms Styler-Modul für Divi bringt die gesamte Funktions- und Designflexibilität von Divi in ​​Ihre mit Gravity Forms erstellten Formulare. Da es so viele Möglichkeiten gibt, das Design jedes Elements individuell anzupassen, sind die Gestaltungsmöglichkeiten praktisch endlos. Wenn Sie es satt haben, benutzerdefiniertes CSS für den Stil Ihres Formulars zu verwenden, und eine einfache Möglichkeit suchen, Gravity Forms mit dem Divi Builder anzupassen, ist dies möglicherweise ein großartiges Produkt für Sie. Wir würden uns freuen, von Ihnen zu hören! Haben Sie das Gravity Forms Styler-Modul für Divi ausprobiert? Teilen Sie uns Ihre Meinung in den Kommentaren mit!