Hinzufügen von benutzerdefinierten CSS-Stilen für Ihre WPForms

Möchten Sie benutzerdefinierte CSS-Stile zu Ihrer Website hinzufügen? In diesem Tutorial finden Sie mehrere Möglichkeiten, wie Sie diese Schnipsel zu Ihrer Website hinzufügen können, mit Schritt-für-Schritt-Anweisungen für jede optionale Art, die Sie wählen, um Ihr CSS hinzuzufügen.

Mit dieser hilfreichen Anleitung können Sie ganz einfach auswählen, wie Sie die Snippets zu Ihrer Website hinzufügen möchten. Sobald Sie sich für eine Implementierungsmethode entschieden haben, können Sie in der Entwicklerdokumentation nachsehen, welche CSS-Snippets Sie zu Ihrer Website hinzufügen möchten!

Um einen Blick auf den Host aller verfügbaren Snippets zu werfen, schauen Sie bitte in unsere Entwicklerdokumentation.

In unserem Video-Tutorial erfahren Sie, wie Sie benutzerdefinierte CSS-Snippets zu Ihrer Website hinzufügen können.

Optionen für die Umsetzung

CSS ist ein leistungsstarkes Werkzeug für die Gestaltung Ihrer Website und Ihrer Formulare. Es gibt 3 Hauptansätze für das Hinzufügen von benutzerdefiniertem CSS zu Ihrer Website.

WPCode-Plugin verwenden (empfohlen)

Mit dem WPCode-Plugin lassen sich CSS-Snippets schnell und einfach zu Ihrer Website hinzufügen.

Einer der vielen Gründe, warum wir die Verwendung dieses Plugins für das Hinzufügen von benutzerdefinierten Snippets zu Ihrer Website dringend empfehlen, ist die integrierte Prüfung vor dem Speichern Ihres Snippets. Wenn ein Semikolon fehlt oder eine zusätzliche Klammer hinzugefügt wird, wird das Snippet nicht gespeichert. Dadurch wird verhindert, dass auf Ihrer Website Probleme aufgrund eines falsch kopierten und eingefügten CSS-Snippets auftreten können. Und ja, auch 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, wo Sie weitere Informationen und eine spezielle Dokumentation finden.

Sobald das Plugin installiert ist, navigieren Sie zum Menü " Code Snippets" im Menü auf der linken Seite Ihres WordPress-Dashboards und wählen Sie + Snippet hinzufügen. Als Nächstes klicken Sie einfach auf " Add Your Custom Code (New Snippet)" und dann auf die blaue Schaltfläche " Use Snippet", um ein neues CSS-Snippet zu erstellen.

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

Wenn der Bildschirm für das neue Snippet erscheint, geben Sie dem Snippet einen sinnvollen Namen, damit Sie und Ihre Website-Administratoren den Zweck des Snippets verstehen. Wählen Sie im Dropdown-Menü " Code-Typ " die Option "CSS" aus, da wir diesem Snippet nur CSS hinzufügen werden.

Fügen Sie im Abschnitt Codevorschau Ihr CSS ein. Hier ist ein Beispiel, das für die Zwecke dieser Dokumentation verwendet wird.

/* 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 " Standort" die Option " Site Wide Header".

Sobald Sie Ihr Snippet hinzugefügt haben, klicken Sie auf Snippet speichern. Dadurch wird das Snippet gespeichert, aber nicht automatisch aktiviert. Nach dem ersten Speichern werden Sie feststellen, dass der Status des Snippets standardmäßig auf Inaktiv gesetzt ist. Schalten Sie einfach den Schalter von Inaktiv auf Aktiv um und klicken Sie auf Aktualisieren, um das Snippet auf Aktiv zu setzen.

CSS Hero verwenden

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

Erstellen eines untergeordneten Themas

Child-Themes werden für fortgeschrittene Entwicklungen empfohlen. Wie Sie ein Child-Theme erstellen, erfahren Sie in diesem Tutorial.

In jedem Child-Theme befindet sich die erforderliche Datei style.css, in der Sie Ihr eigenes CSS hinzufügen können.

Verwendung des WordPress Customizers

Seit der WordPress-Version 4.5 verfügt WordPress über ein integriertes Tool zum Hinzufügen von benutzerdefinierten CSS-Styles zu Ihrem Theme oder einem von Ihnen installierten Plugin, was es zu einer beliebten Wahl für das Hinzufügen von CSS macht.

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

Sie finden den WordPress-Customizer, indem Sie zu Darstellung " Anpassen " Zusätzliche CSS navigieren.

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

Wenn Sie Ihr Thema deaktivieren, wird Ihr benutzerdefiniertes CSS entfernt, da jedes hier hinzugefügte benutzerdefinierte CSS an das Thema selbst angehängt ist.

Anmerkungen

Wenn Sie Ihrer Website benutzerdefinierten Code hinzufügen, ist es wichtig, dass Sie Ihren Code schützen. Unabhängig davon, für welchen Ansatz Sie sich entscheiden, sollten Sie immer zuerst eine Sicherungskopie Ihrer Website erstellen. Auf diese Weise haben Sie bei Bedarf Zugriff auf ältere Versionen der Website-Dateien und der Datenbank.

Zusätzliche Links

Für weitere Informationen über benutzerdefinierte CSS für WPForms, überprüfen Sie diese Referenz-Links:

FAQ

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

A: Dieses Tutorial ist nicht speziell für WPForms benutzerdefinierte CSS, sondern für jede benutzerdefinierte CSS können Sie auf Ihrer Website hinzufügen möchten.

Finden Sie einfach heraus, welche der obigen Optionen für Sie einfacher ist, um beliebige Code-Snippets hinzuzufügen, einschließlich der WPForms-Code-Snippets, die im Abschnitt Tutorials und Snippets erwähnt werden.

Hinzufügen von benutzerdefinierten CSS-Stilen für WPForms