So fügen Sie benutzerdefiniertes CSS in WordPress hinzu (Anfängerfreundlich) 

Haben Sie jemals versucht, eine Farbe zu ändern oder etwas auf Ihrer WordPress-Website auszublenden, nur um festzustellen, dass es keine Option dafür gibt? Ich war auch schon da. Ich erinnere mich, dass ich viel zu lange in meinen Theme-Einstellungen nach einer einfachen Schriftartänderung gesucht habe, die einfach nicht möglich war.

Da habe ich von benutzerdefiniertem CSS erfahren. Es ist eine schnelle Möglichkeit, kleine visuelle Probleme auf Ihrer Website zu beheben, ohne Theme-Dateien zu bearbeiten oder einen Entwickler zu beauftragen.

Wenn Sie neu hier sind, machen Sie sich keine Sorgen. Sie müssen keine Codes schreiben oder verstehen, wie Websites im Hintergrund funktionieren.

In diesem Leitfaden zeige ich Ihnen anfängerfreundliche Möglichkeiten, benutzerdefiniertes CSS zu WordPress hinzuzufügen. Ich führe Sie auch durch mein Lieblingstool für diese Aufgabe, SeedProd, das den gesamten Prozess erheblich erleichtert.

Methoden zum Hinzufügen von benutzerdefiniertem CSS in WordPress:

Was ist benutzerdefiniertes CSS?

CSS steht für Cascading Style Sheets. Es ist eine einfache Sprache, die steuert, wie Ihre WordPress-Website aussieht.

Zum Beispiel ändert dieser CSS-Code eine Überschriftenfarbe zu Rot:

h1 {
  color: red;
}

Und dieser blendet ein Element auf der Seite aus:

.hidden {
  display: none;
}

Sie müssen keinen Code wie diesen von Grund auf neu schreiben. Meistens kopieren und fügen Sie ihn einfach an der richtigen Stelle ein.

Der Schlüssel ist zu wissen, wo Sie Ihr benutzerdefiniertes CSS platzieren, und genau das zeige ich Ihnen als Nächstes.

Warum benutzerdefiniertes CSS in WordPress hinzufügen?

Manchmal möchten Sie eine Schaltfläche einfärben, eine Überschrift zentrieren oder einen zusätzlichen Abstand entfernen, und Ihr Theme bietet Ihnen keine Möglichkeit dazu.

Hier kommt benutzerdefiniertes CSS ins Spiel. Es gibt Ihnen die Kontrolle über die kleinen Designdetails, die Ihre Website genau richtig aussehen und sich anfühlen lassen.

Mit CSS sind Sie nicht an die Standardeinstellungen Ihres WordPress-Themes gebunden. Sie können Ihr Layout, Ihren Stil und Ihre Abstände feinabstimmen, ohne das Theme zu wechseln oder zusätzliche WordPress-Plugins zu installieren.

Denken Sie daran: CSS hilft bei der Anpassung Ihres Designs, behebt aber keine größeren visuellen Fehler, die benutzerdefiniertes CSS nicht beheben kann, wie z. B. unübersichtliche Layouts oder schlechte Navigation.

Wie fügen Sie also tatsächlich benutzerdefiniertes CSS in WordPress hinzu?

Es gibt verschiedene Möglichkeiten, aber ich beginne mit der, die ich am häufigsten verwende und die ich empfehle, wenn Sie die volle Kontrolle ohne den Aufwand wünschen.

1. Benutzerdefiniertes CSS mit SeedProd hinzufügen (mein bevorzugter Weg)

Wenn Sie SeedProd noch nie verwendet haben, ist es ein Drag-and-Drop-WordPress-Builder, der die Anpassung Ihrer Website super einfach macht, auch wenn Sie kein Entwickler sind.

Ich benutze es ständig, weil ich vollständige Themes oder Landingpages erstellen kann, ohne Code anfassen zu müssen. Und wenn ich doch ein wenig CSS hinzufügen möchte, bietet mir SeedProd einen einfachen Ort dafür.

Bevor wir zu den Schritten kommen, ist es hilfreich, SeedProd auf Ihrer Website eingerichtet zu haben. Wenn Sie es noch nicht verwendet haben, finden Sie hier ein paar anfängerfreundliche Tutorials, die Ihnen den Einstieg erleichtern:

• So erstellen Sie ein benutzerdefiniertes WordPress-Theme ohne Code
• So erstellen Sie eine Landingpage in WordPress

Sobald Sie eine Landingpage oder ein Theme mit SeedProd erstellt haben, können Sie Ihr eigenes benutzerdefiniertes CSS hinzufügen. Beginnen wir damit, wie Sie dies auf einer einzelnen Landingpage tun.

So fügen Sie CSS zu einer Landingpage in SeedProd hinzu

Öffnen Sie zunächst Ihr WordPress-Dashboard und gehen Sie zu SeedProd » Landing Pages.

Suchen Sie die Landingpage, die Sie bearbeiten möchten, und klicken Sie auf den Link Bearbeiten daneben.

Dies öffnet den SeedProd Page Builder. Klicken Sie in der unteren linken Ecke auf das Zahnradsymbol, um Ihre Globalen Einstellungen zu öffnen.

Klicken Sie in der linken Seitenleiste auf den Tab Benutzerdefiniertes CSS.

Fügen Sie nun Ihr CSS ein. Hier ist zum Beispiel eines, das Ihren Absatztext formatiert:

p {
  font-style: italic;
  color: #444;
}

Klicken Sie auf die Schaltfläche Speichern in der oberen rechten Ecke.

Sie können Ihre Seite dann in der Vorschau anzeigen, um die gespeicherten Änderungen live auf Ihrer Website zu sehen.

So fügen Sie globales CSS mit dem Theme Builder von SeedProd hinzu

Wenn Sie den Theme Builder von SeedProd verwenden, um Ihre gesamte Website zu gestalten, können Sie benutzerdefiniertes CSS anwenden, das auf jeder Seite funktioniert.

Öffnen Sie zunächst Ihr WordPress-Dashboard und gehen Sie zu SeedProd » Theme Builder.

Suchen Sie die Vorlage namens Globales CSS und klicken Sie auf Design bearbeiten.

Klicken Sie im Builder auf das Zahnradsymbol in der unteren linken Ecke, um die Globalen Einstellungen zu öffnen.

Klicken Sie in der linken Seitenleiste auf den Tab Benutzerdefiniertes CSS.

Klicken Sie auf die Schaltfläche Benutzerdefiniertes CSS bearbeiten. Dies öffnet den WordPress Customizer in einem neuen Fenster.

Klicken Sie im Customizer auf Zusätzliches CSS und fügen Sie dann Ihren Code ein.

Zum Beispiel:

p {
  font-style: italic;
}

Dadurch wird der gesamte Absatztext auf Ihrer Website kursiv angezeigt.

Klicken Sie auf Veröffentlichen, um Ihre Änderungen zu speichern und sie websiteweit anzuwenden.

Sie können Ihre Seite jetzt aktualisieren, um die Änderungen live zu sehen.

Diese Methode ist hilfreich für globale Stiländerungen wie Schriftanpassungen, Abstände und Farbänderungen.

2. Benutzerdefiniertes CSS in WordPress ohne Page Builder hinzufügen

Wenn Sie keinen Page Builder wie SeedProd verwenden, können Sie trotzdem benutzerdefiniertes CSS direkt in WordPress hinzufügen. Die Schritte hängen vom Typ Ihres Themes ab, entweder ein klassisches Theme oder ein Block-Theme.

Klassische Themes verwenden das ältere Customizer-Tool und basieren oft auf Widgets und Seitenvorlagen. Block-Themes hingegen verwenden den neueren Site-Editor, mit dem Sie Ihre gesamte Website mit Blöcken gestalten können.

Beginnen wir mit klassischen Themes.

Verwenden Sie den WordPress Customizer (Klassische Themes)

Gehen Sie in Ihrem WordPress-Dashboard zu Darstellung » Anpassen.

Klicken Sie im Customizer-Menü auf Zusätzliches CSS.

Ein Textfeld wird angezeigt, in das Sie Ihren benutzerdefinierten Code einfügen können. Zum Beispiel:

p {
  color: #0073aa;
}

Dadurch wird der gesamte Absatztext auf Ihrer Website in einen Blauton geändert.

Sie sehen eine Live-Vorschau Ihrer Änderungen auf der rechten Seite, während Sie tippen.

Wenn Sie mit dem Ergebnis zufrieden sind, klicken Sie auf die Schaltfläche Veröffentlichen, um Ihre Änderungen zu speichern.

Diese Methode funktioniert gut mit älteren Themes, die den Customizer unterstützen, und erfordert keine WordPress-Plugins.

Verwenden Sie den Website-Editor (Block-Themes)

Wenn Ihre WordPress-Website ein Block-Theme verwendet, verwalten Sie Ihr Design über den vollständigen Website-Editor anstelle des Customizers.

Gehen Sie zunächst im WordPress-Dashboard zu Darstellung » Editor.

Klicken Sie in der linken Seitenleiste auf das Symbol Stile. Es sieht aus wie ein Halbmond oder eine Farbpalette.

Klicken Sie dann auf das kleine Stiftsymbol mit der Bezeichnung Stile bearbeiten.

Sie sehen nun den WordPress-Editor. Klicken Sie in der oberen rechten Ecke des Bildschirms auf das Drei-Punkte-Menü (⋮) und wählen Sie im Dropdown-Menü Zusätzliches CSS.

Fügen Sie Ihren benutzerdefinierten Code in das Feld ein. Zum Beispiel:

p {
  color: #0073aa;
}

Dadurch wird die Farbe des Absatztextes auf Ihrer gesamten Website geändert.

Klicken Sie oben rechts auf Speichern, um die Änderungen zu übernehmen.

⚠️ Wenn Sie den Bereich Zusätzliches CSS nicht sehen, unterstützt Ihr Block-Theme dies möglicherweise nicht. In diesem Fall können Sie ein Plugin wie WPCode verwenden oder zu einem Builder wie SeedProd wechseln.

3. Verwenden Sie ein benutzerdefiniertes CSS-Plugin

Wenn Ihr Theme den Customizer oder den Website-Editor nicht unterstützt oder Sie einfach eine saubere Möglichkeit suchen, Ihr CSS an einem Ort zu verwalten, empfehle ich die Verwendung eines Plugins wie WPCode.

WPCode ist ein leichtgewichtiges WordPress-Plugin, mit dem Sie benutzerdefinierte Code-Snippets wie CSS, HTML, JavaScript oder PHP sicher hinzufügen können, ohne Ihre Theme-Dateien zu bearbeiten.

Nachdem Sie WPCode installiert und aktiviert haben, gehen Sie im WordPress-Dashboard zu Code-Snippets » + Snippet hinzufügen.

Klicken Sie in das Feld Fügen Sie Ihren benutzerdefinierten Code hinzu (Neues Snippet) und geben Sie Ihrem Snippet einen Namen, z. B. Benutzerdefinierte CSS-Stile.

Wählen Sie unter Code-Typ im Dropdown-Menü CSS-Snippet aus.

Fügen Sie nun Ihr CSS in das Codefeld ein. Zum Beispiel:

p {
  color: #0073aa;
}

Scrollen Sie nach unten und wählen Sie Automatisch einfügen, um das CSS auf Ihrer gesamten Website anzuwenden.

Klicken Sie dann auf Snippet speichern und schalten Sie den Schalter oben auf Aktiv.

Das war's! Ihre benutzerdefinierten Stile sind jetzt auf Ihrer gesamten Website live, und Sie können jederzeit zu diesem Snippet zurückkehren, um Änderungen vorzunehmen.

4. Bearbeiten Sie Ihre Theme-Dateien (nicht empfohlen)

Diese Methode funktioniert nur, wenn Sie ein klassisches Theme verwenden. Block-Themes bieten keinen Zugriff auf den Theme-Datei-Editor im WordPress-Dashboard.

Wenn Sie ein klassisches Theme verwenden und mit der Codebearbeitung vertraut sind, können Sie benutzerdefiniertes CSS direkt in die style.css-Datei Ihres Themes einfügen. Dies empfehle ich jedoch nicht, es sei denn, Sie wissen, was Sie tun.

Wenn Sie Theme-Dateien direkt bearbeiten, können Ihre Änderungen bei Updates verloren gehen. Sie sehen auch keine Live-Vorschau, und selbst ein kleiner Tippfehler kann Ihr Layout beschädigen.

Wenn Sie jedoch ein Child-Theme verwenden oder wissen, wie Sie Ihre Website wiederherstellen können, falls etwas schief geht, erfahren Sie hier, wie es geht.

Gehen Sie im WordPress-Dashboard zu Darstellung » Theme-Datei-Editor.

Klicken Sie aus der Dateiliste auf der rechten Seite auf style.css.

Scrollen Sie zum Ende der Datei und fügen Sie Ihr CSS ein. Zum Beispiel:

p {
  color: #0073aa;
}

Klicken Sie auf Datei aktualisieren, um Ihre Änderungen zu speichern.

⚠️ Tun Sie dies nur, wenn Sie ein Child-Theme verwenden oder wissen, wie Sie Ihre Website sicher wiederherstellen können. Für die meisten Benutzer sind Tools wie SeedProd oder WPCode weitaus sicherere Optionen.

Bonus: Benutzerdefiniertes CSS auf Seiten oder Blöcke anwenden

Manchmal möchten Sie nicht, dass Ihr CSS die gesamte Website beeinflusst, sondern nur auf einer Seite oder einem einzelnen Block angewendet wird. Dies können Sie durch die Verwendung von Seiten-IDs oder benutzerdefinierten CSS-Klassen erreichen.

Seiten-IDs in WordPress verwenden

Jede Seite in WordPress hat eine eindeutige ID, die Sie verwenden können, um Stile nur für diese Seite anzusprechen.

Um die Seiten-ID zu finden, besuchen Sie die Seite in Ihrem Browser, klicken Sie mit der rechten Maustaste irgendwo und wählen Sie Untersuchen.

Suchen Sie im Code nach dem Tag <body>. Es wird eine Klasse wie page-id-37 enthalten.

Sie können dies dann in Ihrem CSS wie folgt verwenden:

.page-id-37 p {
  color: green;
}

Dadurch wird die Textfarbe des Absatzes nur auf dieser spezifischen Seite geändert.

SeedProd-Blockeinstellungen verwenden

Wenn Sie SeedProd verwenden, können Sie bestimmte Blöcke ansprechen, indem Sie einen benutzerdefinierten Klassennamen hinzufügen.

Öffnen Sie Ihre Seite im SeedProd-Builder und klicken Sie auf den Block, den Sie gestalten möchten. In meinem Fall möchte ich einen bestimmten Überschriftenblock gestalten.

Gehen Sie im linken Bereich zum Tab Erweitert, suchen Sie die Option Attribute und erweitern Sie sie.

Finden Sie das Feld mit der Bezeichnung CSS-Klasse und fügen Sie einen Klassennamen wie my-special-style hinzu.

Fügen Sie dann in Ihrem globalen oder seitenbezogenen Feld für benutzerdefiniertes CSS etwas wie folgt hinzu:

.my-special-style {
  background-color: #fff7e6;
  border-radius: 10px;
}

Nachdem Sie die Seite gespeichert und in der Vorschau angezeigt haben, sehen Sie Ihre Änderungen an diesem spezifischen Block, ohne den Rest Ihrer Website zu beeinträchtigen.

FAQs zum Hinzufügen von benutzerdefiniertem CSS in WordPress

Bereit, Ihre WordPress-Website anzupassen?

Wie Sie gesehen haben, gibt es mehrere einfache Möglichkeiten, benutzerdefiniertes CSS in WordPress hinzuzufügen, auch wenn Sie kein Entwickler sind.

Sie können einzelne Blöcke gestalten, Ihr gesamtes Theme anpassen oder kleine Änderungen vornehmen, die dazu beitragen, dass Ihre Website genau so aussieht, wie Sie es möchten. Egal, ob Sie SeedProd, WPCode oder eines der integrierten WordPress-Tools bevorzugen, wichtig ist, dass Sie sich nicht mit den Standardeinstellungen Ihres Themes zufriedengeben müssen.

Wenn Sie mehr Kontrolle wünschen, ohne Theme-Dateien zu bearbeiten, ist SeedProd der einfachste Weg, Ihre Seiten zu erstellen und zu gestalten, ganz ohne Code.

Möchten Sie Ihre WordPress-Website weiter anpassen? Hier sind einige Anleitungen, die ich als Nächstes empfehle:

• So bearbeiten Sie Ihre WordPress-Homepage
• Anpassen von Headern in WordPress
• So fügen Sie Testimonials zu WordPress-Seiten hinzu
• So erstellen Sie eine benutzerdefinierte 404-Seite in WordPress
• So fügen Sie ein Kontaktformular in WordPress hinzu