KI-Zusammenfassung
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.
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.
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.
Verwendung von CSS Hero
Wenn Sie keinen Code anfassen möchten, bietet WPForms eine vollständige Anleitung zur Verwendung von CSS Hero. Um mehr darüber zu erfahren, folgen Sie bitte dieser Anleitung.
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 oder des Website-Editors
WordPress enthält ein integriertes Werkzeug zum Hinzufügen von benutzerdefiniertem CSS zu Ihrem Theme oder jedem installierten Plugin, was dies zu einer beliebten Wahl macht. Wo Sie es finden, hängt von der Art des Themes ab, das Sie verwenden.
Um mehr über den WordPress Customizer zu erfahren, lesen Sie die Dokumentation.
Bei klassischen Themes navigieren Sie zu Design » Customizer » Zusätzliches CSS.
Bei Block-Themes blendet WordPress den Customizer aus. Gehen Sie zu Design » Editor und öffnen Sie Stile, um die Option Zusätzliches CSS zu finden. Wenn Sie sie nicht finden können, zeigt die Anleitung von WordPress zum Anwenden von benutzerdefiniertem CSS, wo sie in Ihrer Version zu finden ist.
Denken Sie daran, Ihre Änderungen nach dem Hinzufügen Ihres CSS zu speichern. Solange das Theme aktiv bleibt, wird Ihr benutzerdefiniertes CSS angewendet.
Zusätzliche Links
Weitere Informationen zu benutzerdefiniertem CSS für WPForms finden Sie in diesen Referenzlinks:
- Styling-Dokumentation für WPForms
- Eine vollständige Liste der Dokumentationen zum Stylen von WPForms mit CSS
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.