How to Add Custom CSS Styles for Your WPForms

Markdown anzeigen

Möchten Sie benutzerdefinierte CSS-Stile zu Ihrer Website hinzufügen? Dieses Tutorial bietet Ihnen mehrere Optionen, wie Sie diese Snippets mit Schritt-für-Schritt-Anleitungen für jede optionale Methode, die Sie zum Hinzufügen Ihres CSS wählen, zu Ihrer Website hinzufügen können.

Mit dieser hilfreichen Anleitung können Sie ganz einfach auswählen, auf welche Weise Sie die Snippets zu Ihrer Website hinzufügen möchten. Sobald Sie Ihre Implementierungsmethode ausgewählt haben, können Sie mit der Erkundung der Entwicklerdokumentation beginnen, um auszuwählen, welche CSS-Snippets Sie zu Ihrer Website hinzufügen möchten!

Um die Fülle aller verfügbaren Snippets zu sehen, erkunden Sie bitte unsere Entwicklerdokumentation.

Sehen Sie sich unser Video-Tutorial für eine praxisnahe Ansicht an, wie Sie benutzerdefinierte CSS-Snippets zu Ihrer Website hinzufügen.

Implementierungsoptionen

CSS ist ein leistungsstarkes Werkzeug zum Stylen Ihrer Website und Ihrer Formulare. Es gibt 3 Hauptansätze, um benutzerdefiniertes CSS zu Ihrer Website hinzuzufügen.

Verwendung des WPCode-Plugins (empfohlen)

Die Verwendung des WPCode-Plugins ist sehr schnell und einfach, um CSS-Snippets zu Ihrer Website hinzuzufügen.

Nur einer der vielen Gründe, warum wir die Verwendung dieses Plugins zum Hinzufügen von benutzerdefinierten Snippets zu Ihrer Website dringend empfehlen, ist, dass es vor dem Speichern Ihres Snippets eine integrierte Prüfung gibt. Wenn ein Semikolon fehlt oder eine zusätzliche Klammer hinzugefügt wird, wird das Snippet nicht gespeichert. Dies verhindert, dass Probleme auf Ihrer Website aufgrund eines falsch kopierten und eingefügten CSS-Snippets auftreten können. Und ja, selbst mit der kostenlosen Version erhalten Sie diese zusätzliche Prüfung, bevor Ihr Snippet aktiv wird.

Um mehr über dieses Plugin zu erfahren, besuchen Sie bitte die Website für weitere Informationen, einschließlich dedizierter Dokumentation.

Nachdem das Plugin installiert ist, navigieren Sie im Menü auf der linken Seite Ihres WordPress-Dashboards zu Code Snippets und wählen Sie + Snippet hinzufügen. Klicken Sie dann einfach auf Eigene Codes hinzufügen (Neues Snippet) und dann auf die blaue Schaltfläche Snippet verwenden, um ein neues CSS-Snippet zu erstellen.

Klicken Sie im WPCode-Menü auf + Snippet hinzufügen

Wenn Ihr neuer Snippet-Bildschirm erscheint, geben Sie dem Snippet einen Namen, der für Sie sinnvoll ist, damit Sie und Ihre Website-Administratoren dessen Zweck verstehen. Wählen Sie im Dropdown-Menü Code-Typ CSS, da wir in dieses Snippet nur CSS einfügen werden.

Fügen Sie im Abschnitt Code-Vorschau Ihr CSS hinzu. Hier ist ein Beispiel für die Zwecke dieser Dokumentation.

/* write your CSS code here */
	ul#wpforms-999-field_27 li label, 
	ul#wpforms-999-field_26 li label {
    padding: 10px;
    transition: all ease 0.3s;
    background: linear-gradient(to right, #e27730 50%, #cd631d 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    color: white;
	}
	
	ul#wpforms-999-field_27 li.wpforms-selected label, 
	ul#wpforms-999-field_27 li label:hover, 
	ul#wpforms-999-field_26 li.wpforms-selected label, 
	ul#wpforms-999-field_26 li label:hover {
		cursor: pointer;
		border-radius: 2px;
		background-position: right top;
	}
	
	ul#wpforms-999-field_27 li input, 
	ul#wpforms-999-field_26 li input {
		display: none;
	}
	
	ul#wpforms-999-field_27 li, 
	ul#wpforms-999-field_26 li {
		float: left;
		width: auto;
		display: inline-block;
		padding: 10px 10px 10px 0!important;
	}

Als Nächstes sehen Sie den Abschnitt Einfügen. Da wir CSS hinzufügen, wählen wir für die Einfügemethode Automatisch einfügen und für den Speicherort Website-weit im Header.

Sobald Sie Ihren Codeausschnitt hinzugefügt haben, klicken Sie auf Codeausschnitt speichern. Dadurch wird der Codeausschnitt gespeichert, aber nicht automatisch aktiviert. Nachdem Sie ihn zum ersten Mal gespeichert haben, werden Sie feststellen, dass der Status des Codeausschnitts standardmäßig auf Inaktiv gesetzt ist. Schalten Sie einfach den Schalter von Inaktiv auf Aktiv um und klicken Sie auf Aktualisieren, um den Codeausschnitt als Aktiv zu setzen.

WPCode bietet Ihnen eine sehr einfache und unkomplizierte Möglichkeit, CSS zu Ihrer Website hinzuzufügen

Verwendung von CSS Hero

Wenn Sie es vorziehen, keinen Code anzufassen, bietet WPForms ein vollständiges Tutorial zur Verwendung von CSS Hero. Um mehr darüber zu erfahren, folgen Sie bitte diesem Tutorial.

Erstellen eines Child-Themes

Child-Themes werden für fortgeschrittene Entwicklungen empfohlen. Sie können herausfinden, wie Sie ein Child-Theme erstellen, indem Sie diesem Tutorial folgen.

In jedem Child-Theme befindet sich die erforderliche style.css. In dieser Datei würden Sie Ihr benutzerdefiniertes CSS hinzufügen.

Verwendung des WordPress Customizers

Seit WordPress Version 4.5 bietet WordPress ein integriertes Werkzeug, um benutzerdefinierte CSS-Stile zu Ihrem Theme oder jedem installierten Plugin hinzuzufügen. Dies macht es zu einer beliebten Wahl für das Hinzufügen Ihres CSS.

Um mehr über den WordPress Customizer zu erfahren, lesen Sie die Dokumentation.

Sie finden den WordPress Customizer, indem Sie zu Design » Customizer » Zusätzliches CSS navigieren.

WordPress Customizer zum Hinzufügen Ihres benutzerdefinierten CSS

Denken Sie daran, nach dem Hinzufügen Ihres CSS auf die Schaltfläche Veröffentlichen zu klicken, um Ihre Änderungen zu speichern. Solange das Theme aktiv bleibt, wird Ihr benutzerdefiniertes CSS angewendet.

Wenn Sie Ihr Theme deaktivieren, wird Ihr benutzerdefiniertes CSS entfernt, da jedes hier hinzugefügte benutzerdefinierte CSS an das Theme selbst gebunden ist.

Notizen

Wenn Sie benutzerdefinierten Code zu Ihrer Website hinzufügen, ist es wichtig, sicherzustellen, dass Sie Ihren Code schützen. Unabhängig davon, welchen Ansatz Sie wählen, ist es immer eine gute Idee, zuerst ein Backup Ihrer Website zu erstellen. Auf diese Weise haben Sie bei Bedarf Zugriff auf ältere Versionen von Website-Dateien und der Datenbank.

Zusätzliche Links

Weitere Informationen zu benutzerdefiniertem CSS für WPForms finden Sie in diesen Referenzlinks:

FAQ

F: Wie hilft mir das beim Hinzufügen von benutzerdefiniertem CSS für WPForms?

A: Dieses Tutorial ist nicht speziell für WPForms Custom CSS, sondern für jedes benutzerdefinierte CSS, das Sie Ihrer Website hinzufügen möchten.

Finden Sie einfach die für Sie einfachste Option, um Code-Snippets hinzuzufügen, einschließlich der in den Abschnitten Tutorials und Snippets erwähnten WPForms-Code-Snippets.

So fügen Sie benutzerdefinierte CSS-Stile für WPForms hinzu

KI-Zusammenfassung