Divi-Plugin-Highlight: Caldera Forms Style Customizer für Divi und Extra

Caldera Forms fügt sich hervorragend in das Design Ihrer Website ein. Was wäre, wenn Sie es mit den bekannten Styling-Tools des Divi- und Extra-Theme-Customizers stylen möchten? Sie können dies mit einem Drittanbieter-Plugin namens Caldera Forms Style Customizer für Divi und Extra tun.

Caldera Forms kann mit den Standardoptionen des Theme-Anpassers gestaltet werden, jedoch gestalten diese Optionen das Design. Das heißt, wenn Sie den Stil des Texts Ihres Formulars ändern, ändern Sie auch den Stil des Textkörpers Ihrer Website. Wenn Sie Ihre Formulare getrennt von Ihren Inhalten gestalten möchten, müssen Sie normalerweise mit CSS von Hand stylen. Caldera Forms Style Customizer für Divi und Extra löst dieses Problem, indem es Styling-Funktionen zum Theme Customizer hinzufügt.

In diesem Plugin-Highlight werfen wir einen Blick auf das Caldera Forms Style Customizer for Divi and Extra Plugin und sehen, wie einfach es zu bedienen ist. Dieses Drittanbieter-Plugin kann über Caldera Forms erworben werden. Wie der Name schon sagt, funktioniert es sowohl mit Divi als auch mit Extra.

Installation und Aktivierung

Laden Sie das Plugin wie gewohnt hoch und aktivieren Sie es. Es müssen keine Einstellungen vorgenommen werden. Die Funktionen sind sofort einsatzbereit.

Anpassen eines Formulars

Ich habe das Standard-Kontaktformular in eine Seite mit allen Standard-Styling eingefügt. Ich werde alle meine Anpassungen an diesem Formular nacheinander vornehmen. Dann sehen wir ein oder zwei Beispiele.

Die neuen Styling-Features werden dem Theme Customizer hinzugefügt. Öffnen Sie den Theme Customizer (oder Module Customizer – beide funktionieren) und klicken Sie auf Caldera Forms Style Customizer .

Dadurch werden 20 neue Anpassungsregisterkarten hinzugefügt, um jeden Aspekt des Formulars anzupassen, einschließlich Text, Schaltflächen, Felder, Kippschalter, Datumsauswahl, Breadcrumbs usw. Hier sehen Sie jede Einstellung.

Textfelder

Textfelder ändert die Farbe von Text, Platzhalter und Rahmen sowie Rahmenbreite, Rahmenradius und Einzelzeilenhöhe der Felder.

Textfelder schweben

Textfelder-Hover ändert die Text-, Feld- und Rahmenfarben.

Textfelder Fokus

Textfeld-Fokus ändert die Farbe des Textes, des Hintergrunds und des Rahmens des Felds, das den Fokus hat. In diesem Beispiel hat das Feld in der Mitte Hover, aber das Feld mit dem dunklen Hintergrund hat den Fokus.

Dropdown-Auswahl

Dropdown-Auswahl passt die Hintergrund-, Text-, Pfeil- und Rahmenfarben an. Sie können auch die Breite und den Radius des Rahmens anpassen.

Dropdown-Auswahl-Hover

Dropdown-Auswahl Hover steuert die Farbe von Hintergrund, Text, Pfeil und Rahmen beim Hover.

Kontrollkästchen und Optionsfelder

Kontrollkästchen und Optionsfelder passt die Farbe der ausgewählten Elemente Ihrer Kontrollkästchen und Optionsfelder an.

Kippschalter

Toggle Switches passt die Farben des Hintergrunds, der Schriftart und des Rahmens sowohl des nicht ausgewählten als auch des ausgewählten Schalters einzeln an. Sie können auch die Rahmenbreite und den Radius beider Schalter gemeinsam anpassen.

Kippschalter schweben

Kippschalter Hover passt die Farben des Hintergrunds, der Schriftart und des Rahmens des ausgewählten und nicht ausgewählten Schalters unabhängig voneinander an. Dies ist der nicht ausgewählte Schalter.

Der blaue ist der ausgewählte Schalter.

Senden-Schaltfläche

Die Schaltfläche "Senden" steuert die Hintergrund-, Schriftart- und Rahmenfarben sowie den Rahmenradius, die Schaltflächenbreite und ihre Position. Sie können auch die Schriftgröße und den Buchstabenabstand anpassen. Eine Texttransformationsfunktion ändert die Groß-/Kleinschreibung des Textes. Wählen Sie Kleinbuchstaben, Großbuchstaben, Großbuchstaben, Initialen oder erben.

Senden-Button-Hover

Übergeben Schaltfläche Hover steuert die Hover-Farben für Hintergrund, Schriftart und Rahmen.

Reset-Knopf

Die Schaltfläche „Zurücksetzen“ steuert die Hintergrund-, Schriftart- und Rahmenfarben. Sie können auch die Schriftgröße und den Buchstabenabstand, die Schaltflächenbreite, die Schaltflächenposition, die Rahmenbreite und den Rahmenradius anpassen. Dieser hat auch Texttransformation.

Reset-Knopf-Hover

Schaltflächen-Hover zurücksetzen passt die Schaltflächenfarben für Hintergrund, Text und Rahmen an.

Andere Tasten

Caldera hat mehrere andere Arten von Tasten. Andere Schaltflächen steuern alles außer Senden und Zurücksetzen. Passen Sie die Farben für Schriftart, Rahmen und Hintergrund an und passen Sie die Rahmenbreite und den Radius an. In diesem Beispiel habe ich die Schaltflächen Zurück und Weiter erstellt.

Andere Schaltflächen schweben

Andere Schaltflächen Hover steuert die Hover-Farben für Schriftarten, Rahmen und Hintergrund.

Datumsauswahl

Die Datumsauswahl enthält normale und Hover-Farben auf derselben Registerkarte. Passen Sie die Farben für Schriftart und Hintergrund an. In diesem Beispiel fahre ich mit der Maus über die 10 und die 12 ist ausgewählt.

Dateiliste hochladen

Dateiliste hochladen steuert die Farben für den Hintergrund und den Text in der Liste der hochgeladenen Dateien.

Abschnitt Pause

Abschnittswechsel steuert die Farbe, die Rahmenbreite sowie die oberen und unteren Ränder des Abschnittswechsels.

Semmelbrösel

Mit Breadcrumbs können Sie die Farben für die Schriftarten sowohl für die aktive Seite als auch für andere Links, das Trennzeichen, den Hintergrund und den Rahmen auswählen. Passen Sie die Rahmenbreite und den Radius an.

Erfolgsmeldung

Erfolgsalarm passt die Schriftart-, Hintergrund- und Rahmenfarben sowie den Rahmenradius und die Breite an. Es passt auch die Kastenhöhe an.

Sonstig

Verschiedenes gibt Ihnen die Kontrolle über die Farben für das erforderliche Symbol, fehlerhafte Felder, Beschreibungstext, Kreditkartenfarbe und Position des Kreditkartensymbols. Der Beschreibungstext enthält die Optionen für Schriftgröße, Buchstabenabstand und Textumwandlung. Ich habe Großbuchstaben gewählt.

Beispiele

Ich habe ein Formular zum Hochladen des Lebenslaufs erstellt (eigentlich ist es in Caldera Forms integriert, aber ich habe auf die Schaltfläche geklickt, um es auszuwählen) und es als Modal festgelegt. Zuerst möchte ich die Seite mit dem Divi Builder stylen.

Ich habe ein Hintergrundbild hinzugefügt und Farben ausgewählt, die eher kontrastieren als mit dem Hintergrund verschmelzen.

Dieser verwendet die gleichen Einstellungen mit einem anderen Hintergrund. Dieses Mal habe ich das Formular nicht in einem Modal verwendet. Anstatt einen weißen Hintergrund zu haben, werden die Formularfelder direkt über dem Bild platziert.

Import Export

Es ist ganz einfach, Ihre Caldera Forms-Stile, die Sie im Customizer erstellt haben, zu importieren oder zu exportieren. Gehen Sie im Dashboard zu Caldera Forms , Styles – Import/Export . Dadurch werden die Stile als JSON-Datei importiert und exportiert, sodass Sie Ihre Caldera-Formularstile problemlos auf jeder Website verwenden können, die dieses Plugin verwendet. Ihr gesamtes Styling wird mit dem Styling der importierten Datei überschrieben.

Lizenz und Support

Das Plugin kann als einjährige Lizenz (jährlich wiederkehrende) erworben werden. Die Lizenz ermöglicht die Verwendung des Plugins auf einer, fünf oder fünfzehn Websites (je nachdem, welche Stufe Sie wählen) und beinhaltet ein Jahr Support und Updates.

Abschließende Gedanken

Es fand dieses Plugin einfach zu bedienen. Die Customizer-Einstellungen sind intuitiv. Sie sind gut beschriftet und sinnvoll angeordnet. Ich hatte keine Probleme, die gewünschten Einstellungen zu finden. Ich würde gerne eine einfache Möglichkeit sehen, auf einmal zu den Standardeinstellungen zurückzukehren oder globale Anpassungen vorzunehmen (z. B. die Gesamtdunkelheit aller Farben zu erhöhen oder zu verringern). Das ist wahrscheinlich nicht realistisch, aber es klingt interessant.

Es ist nicht möglich, einzelne Formulare mit den Customizer-Einstellungen zu stylen. Alle Formulare verwenden dasselbe Styling als globale Einstellung und müssen individuell mit den Styling-Funktionen von Caldera gestaltet werden. Dies liegt in der Natur des Theme Customizers. Wenn Sie daran interessiert sind, Ihre Caldera Forms auf globaler Ebene zu gestalten, gibt es keinen einfacheren Weg, als den Caldera Forms Style Customizer für Divi und Extra zu verwenden.

Wir wollen von dir hören. Haben Sie das Plugin Caldera Forms Style Customizer für Divi und Extra ausprobiert? Lassen Sie uns in den Kommentaren wissen, was Sie davon halten.

Ausgewähltes Bild über Irina Strelnikova / shutterstock.com