WPForms Farbe Progress Bar ändern

WPForms Update Version 1.8.3 (Ende 2023): Styling Tab für Elementor

WPForms ist eines der belieb­testen Plugins für das Erstellen von Formu­laren in WordPress. Mit dem Update auf Version 1.8.3 wurde eine neue Funktion einge­führt, die es Nutzern erlaubt, ihre Formulare einfacher zu gestalten. Dank des neuen “Style Tabs” im Elementor können WPForms-Nutzer nun grund­le­gende Styling-Einstel­lungen direkt im Editor vornehmen.

Das Problem: Anpassung der Progress Bar

Obwohl WPForms umfang­reiche Styling-Optionen bietet, gibt es Situa­tionen, in denen die Standard­op­tionen nicht ausreichen. Ein gutes Beispiel hierfür ist die Progress Bar, die in mehrstu­figen Formu­laren verwendet wird. Häufig fügt sich die Standard­farbe der Progress Bar nicht nahtlos in das Gesamt­design der Webseite ein. Dies kann das visuelle Erlebnis auf Ihrer Seite beein­träch­tigen und die Benut­zer­freund­lichkeit verringern.

Indivi­duelle Anpassung über CSS

Um die Farbe der Progress Bar Ihren Wünschen entspre­chend anzupassen, können Sie folgenden CSS-Code verwenden:

/* Ändert die Farbe der Fortschrittsanzeige */
.wpforms-page-indicator-page-progress {
    background-color: #4CAF50 !important; 
}

Ersetzen Sie #4CAF50 mit dem Hexade­zi­malwert Ihrer gewünschten Farbe, um das Aussehen der Progress Bar an Ihr Websei­ten­design anzupassen.

Imple­men­tierung des CSS-Codes

Imple­men­tierung des CSS-Codes im WordPress Custo­mizer

1. Öffnen Sie den WordPress Custo­mizer: Navigieren Sie in Ihrem WordPress-Dashboard zu “Design” und dann zu “Custo­mizer”.
2. Zusätz­liches CSS hinzu­fügen: Suchen Sie die Option “Zusätz­liches CSS” im Custo­mizer-Menü und fügen Sie den obigen CSS-Code dort ein.
3. Änderungen speichern: Verge­wissern Sie sich, dass Sie Ihre Änderungen speichern, damit die neuen Stile auf Ihrer Website wirksam werden.

Imple­men­tierung im Elementor Page Builder (empfohlen)

Wenn Sie den Elementor Page Builder verwenden, können Sie die CSS-Anpas­sungen direkt in das Design Ihrer Seite integrieren, ohne den WordPress Custo­mizer verwenden zu müssen. Dies ist besonders nützlich, wenn Sie spezi­fische Seiten oder Formulare haben, die eine indivi­duelle Anpassung erfordern. Hier ist, wie Sie den CSS-Code im Elementor Page Builder einfügen können:

1. Öffnen Sie Ihre Seite im Elementor Editor: Wählen Sie die Seite aus, auf der Sie das Formular platziert haben, und öffnen Sie sie im Elementor Editor.
2. Suchen Sie nach dem Custom CSS-Widget: Elementor bietet eine spezielle Funktion für benut­zer­de­fi­niertes CSS. Wenn Sie ein Element auswählen, finden Sie unten im linken Bereich unter “Erweitert” die Option „Benut­zer­de­fi­niertes CSS“.
3. Fügen Sie den CSS-Code ein: Geben Sie den oben genannten CSS-Code in das Feld für benut­zer­de­fi­niertes CSS ein. Achten Sie darauf, dass der Code genau zu dem Element passt, das Sie anpassen möchten, in diesem Fall die Progress Bar von WPForms.
4. Vorschau und Speichern: Überprüfen Sie die Änderungen in der Vorschau, um sicher­zu­stellen, dass die Progress Bar wie gewünscht aussieht. Wenn alles korrekt ist, speichern Sie Ihre Änderungen und veröf­fent­lichen Sie die Seite.

Vorteile der Verwendung von Elementor für CSS-Anpas­sungen

Die Verwendung von Elementor für das Einfügen von benut­zer­de­fi­niertem CSS bietet mehrere Vorteile:

• Seiten­spe­zi­fische Anpassung: Sie können Stilän­de­rungen auf einzelne Seiten oder Elemente beschränken, ohne das globale Styling der gesamten Website zu beein­flussen.
• Einfache Bedienung: Elementor’s Benut­zer­ober­fläche ist benut­zer­freundlich und ermög­licht es auch Nicht-Entwicklern, Stilän­de­rungen durch­zu­führen.
• Direkte Visua­li­sierung: Änderungen können in Echtzeit angesehen werden, was den Design­prozess beschleunigt und verein­facht.

Durch die Verwendung von Elementor in Kombi­nation mit WPForms können Sie das Erschei­nungsbild Ihrer Formulare nahtlos an das Gesamt­design Ihrer Website anpassen, um eine konsis­tente Benut­zer­er­fahrung zu gewähr­leisten.

Fazit

Durch das Anpassen der Progress Bar in WPForms können Sie sicher­stellen, dass Ihre Formulare nicht nur funktional, sondern auch optisch anspre­chend sind. Dies erhöht nicht nur die Benut­zer­freund­lichkeit, sondern stärkt auch das visuelle Branding Ihrer Website. Mit ein paar einfachen Schritten können Sie Ihre Formulare nahtlos in das Design Ihrer Website integrieren und so ein kohärentes Nutzer­er­lebnis schaffen.