Hinzufügen von benutzerdefiniertem CSS in WordPress (für Anfänger geeignet) 

Haben Sie schon einmal versucht, eine Farbe zu ändern oder etwas auf Ihrer WordPress-Website auszublenden, nur um festzustellen, dass es dafür keine Option gibt? Das habe ich auch schon erlebt. 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 lernte ich die benutzerdefinierten CSS kennen. Es ist eine schnelle Möglichkeit, kleine visuelle Probleme auf Ihrer Website zu beheben, ohne dass Sie Theme-Dateien bearbeiten oder einen Entwickler einstellen müssen.

Keine Sorge, wenn Sie neu in diesem Bereich sind. Sie müssen nicht wissen, wie man programmiert, oder verstehen, wie Websites unter der Haube funktionieren.

In diesem Leitfaden zeige ich Ihnen anfängerfreundliche Möglichkeiten, benutzerdefinierte CSS zu WordPress hinzuzufügen. Ich zeige Ihnen auch mein Lieblingstool für diese Aufgabe, SeedProd, das den ganzen Prozess viel einfacher macht.

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, mit der das Aussehen Ihrer WordPress-Website gesteuert wird.

Mit diesem CSS-Code wird zum Beispiel die Farbe einer Überschrift in Rot geändert:

h1 {
  color: red;
}

Und dieses hier versteckt ein Element auf der Seite:

.hidden {
  display: none;
}

Sie müssen einen solchen Code nicht von Grund auf neu schreiben. Meistens reicht es, ihn zu kopieren und an der richtigen Stelle einzufügen.

Entscheidend ist, dass Sie wissen, wo Sie Ihr benutzerdefiniertes CSS einfügen können, und genau das werde ich Ihnen im Folgenden zeigen.

Warum benutzerdefinierte CSS in WordPress hinzufügen?

Manchmal möchten Sie die Farbe einer Schaltfläche ändern, eine Überschrift zentrieren oder einen zusätzlichen Abstand entfernen, und Ihr Design bietet Ihnen keine Möglichkeit, dies zu tun.

Hier kommt das benutzerdefinierte CSS ins Spiel. Es gibt Ihnen die Kontrolle über die kleinen Design-Details, die Ihrer Website das richtige Aussehen und Gefühl geben.

Mit CSS sind Sie nicht an die Standardeinstellungen des 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.

Aber denken Sie daran: Mit CSS können Sie Ihr Design optimieren, aber größere visuelle Fehler, wie unübersichtliche Layouts oder eine schlechte Navigation, lassen sich damit nicht beheben.

Wie fügt man also benutzerdefiniertes CSS in WordPress hinzu?

Es gibt mehrere Möglichkeiten, aber ich fange mit der an, die ich am häufigsten verwende und die ich empfehle, wenn Sie die volle Kontrolle haben wollen, ohne sich zu quälen.

1. Hinzufügen von benutzerdefinierten CSS mit SeedProd (Mein bevorzugter Weg)

Wenn Sie SeedProd noch nie verwendet haben, ist es ein Drag-and-Drop-WordPress-Builder, mit dem Sie Ihre Website ganz einfach anpassen können, selbst wenn Sie kein Entwickler sind.

Ich verwende es ständig, weil ich damit komplette Themes oder Landing Pages erstellen kann, ohne irgendeinen Code anzufassen. Und wenn ich ein bisschen CSS hinzufügen möchte, bietet mir SeedProd einen einfachen Ort dafür.

Bevor wir mit den einzelnen Schritten beginnen, ist es hilfreich, SeedProd auf Ihrer Website einzurichten. Wenn Sie es noch nicht verwendet haben, finden Sie hier ein paar anfängerfreundliche Anleitungen, die Ihnen den Einstieg erleichtern:

• Wie man ein benutzerdefiniertes WordPress-Theme ohne Code erstellt
• Wie man eine Landing Page in WordPress erstellt

Sobald Sie eine Landing Page oder ein Thema mit SeedProd erstellt haben, können Sie Ihr eigenes CSS hinzufügen. Beginnen wir damit, wie man das auf einer einzelnen Landing Page macht.

Hinzufügen von CSS zu einer Landing Page in SeedProd

Um zu beginnen, öffnen Sie Ihr WordPress-Dashboard und gehen Sie zu SeedProd " Landing Pages.

Suchen Sie die Landing Page, die Sie bearbeiten möchten, und klicken Sie auf den Link Bearbeiten neben der Seite.

Dadurch wird der SeedProd-Seitenersteller geöffnet. Klicken Sie in der unteren linken Ecke auf das Zahnradsymbol, um die globalen Einstellungen zu öffnen.

Klicken Sie in der linken Seitenleiste auf die Registerkarte Custom 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 dann eine Vorschau Ihrer Seite anzeigen, um die gespeicherten Änderungen live auf Ihrer Website zu sehen.

Globales CSS mit dem Theme Builder von SeedProd hinzufügen

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.

Um zu beginnen, öffnen Sie Ihr WordPress-Dashboard und gehen Sie zu SeedProd " Theme Builder.

Suchen Sie die Vorlage mit dem Namen Global 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 die Registerkarte Custom CSS.

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

Klicken Sie im Customizer auf Additional CSS und fügen Sie Ihren Code ein.

Zum Beispiel:

p {
  font-style: italic;
}

Dadurch wird der gesamte Absatztext auf Ihrer Website kursiv dargestellt.

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

Sie können nun Ihre Seite aktualisieren, um die Aktualisierung live zu sehen.

Diese Methode ist hilfreich, um globale Stiländerungen wie Schriftart, Abstände und Farben vorzunehmen.

2. Hinzufügen von benutzerdefinierten CSS in WordPress ohne einen Page Builder

Wenn Sie keinen Page Builder wie SeedProd verwenden, können Sie dennoch benutzerdefinierte CSS direkt in WordPress hinzufügen. Die Schritte hängen von der Art des Themas ab, das Sie verwenden, entweder ein klassisches Thema oder ein Blockthema.

Klassische Themes verwenden das ältere Customizer-Tool und stützen sich 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 den klassischen Themen.

Verwenden Sie den WordPress Customizer (klassische Themes)

Gehen Sie in Ihrem WordPress-Dashboard zu Erscheinungsbild " Anpassen.

Klicken Sie im Menü Customizer auf Additional CSS.

Es erscheint ein Textfeld, in das Sie Ihren eigenen Code einfügen können. Zum Beispiel:

p {
  color: #0073aa;
}

Dies ändert den gesamten Absatztext auf Ihrer Website in einen blauen Farbton.

Während Sie tippen, sehen Sie rechts eine Live-Vorschau Ihrer Änderungen.

Wenn Sie mit dem Aussehen 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 sie erfordert keine WordPress-Plugins.

Verwenden Sie den Site-Editor (Blockthemen)

Wenn Ihre WordPress-Website ein Block-Theme verwendet, verwalten Sie Ihr Design mit dem vollständigen Site-Editor anstelle des Customizers.

Um zu beginnen, gehen Sie in Ihrem WordPress-Dashboard zu Darstellung " Editor.

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

Klicken Sie dann auf das kleine Bleistiftsymbol mit der Aufschrift 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 Zusätzliches CSS aus dem Dropdown-Menü.

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

p {
  color: #0073aa;
}

Dadurch wird die Textfarbe des Absatzes auf Ihrer gesamten Website geändert.

Klicken Sie in der oberen rechten Ecke auf Speichern, um die Änderungen zu übernehmen.

⚠️ Wenn Sie das Feld "Additional CSS" nicht sehen, unterstützt Ihr Block-Theme es 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 Site Editor nicht unterstützt oder wenn Sie einfach nur eine saubere Möglichkeit suchen, Ihr CSS an einem Ort zu verwalten, empfehle ich ein Plugin wie WPCode.

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

Sobald Sie WPCode installiert und aktiviert haben, gehen Sie in Ihrem WordPress-Dashboard zu Code Snippets " + Snippet hinzufügen.

Klicken Sie auf das Feld Benutzerdefinierten Code hinzufügen (neues Snippet) und geben Sie Ihrem Snippet einen Namen, z. B. Custom CSS Styles.

Wählen Sie unter Codetyp die Option CSS Snippet aus der Dropdown-Liste.

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 Ihre gesamte Website anzuwenden.

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

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

4. Bearbeiten Sie Ihre Themendateien (nicht empfohlen)

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

Wenn Sie ein klassisches Theme verwenden und mit der Bearbeitung von Code vertraut sind, können Sie benutzerdefiniertes CSS direkt in die style.css Datei. Ich empfehle dies jedoch nur, wenn Sie wissen, was Sie tun.

Wenn Sie Themendateien direkt bearbeiten, können Ihre Änderungen bei Aktualisierungen verloren gehen. Außerdem sehen Sie keine Live-Vorschau, und selbst ein kleiner Tippfehler kann Ihr Layout zerstören.

Wenn Sie jedoch ein Child-Theme verwenden oder wissen, wie Sie Ihre Website wiederherstellen können, wenn etwas schief geht, können Sie dies hier tun.

Gehen Sie in Ihrem WordPress-Dashboard zu Erscheinungsbild " Editor für Themendateien.

Klicken Sie in der Liste der Dateien auf der rechten Seite auf style.css.

Blättern Sie bis 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 eine viel sicherere Option.

Bonus: Benutzerdefiniertes CSS auf Seiten oder Blöcke ausrichten

Manchmal möchten Sie nicht, dass Ihr CSS für die gesamte Website gilt, sondern nur für eine Seite oder einen einzelnen Block. Das können Sie mit Seiten-IDs oder benutzerdefinierten CSS-Klassen erreichen.

Verwendung von Seiten-IDs in WordPress

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

Um die Seiten-ID zu finden, besuchen Sie die Seite in Ihrem Browser, klicken Sie mit der rechten Maustaste auf eine beliebige Stelle und wählen Sie Inspizieren.

Suchen Sie im Code nach der <body> Tag. Es enthält eine Klasse wie page-id-37.

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

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

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

Verwendung der Blockeinstellungen von SeedProd

Wenn Sie SeedProd verwenden, können Sie bestimmte Blöcke anvisieren, 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 Fenster auf die Registerkarte Erweitert, suchen Sie die Option Attribute und erweitern Sie sie.

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

Fügen Sie dann in Ihr globales oder seitenbezogenes benutzerdefiniertes CSS-Feld etwas wie das folgende ein:

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

Nachdem Sie die Seite gespeichert und in der Vorschau angezeigt haben, sehen Sie Ihre Änderungen in diesem speziellen Block, ohne dass sich diese auf den Rest Ihrer Website auswirken.

FAQs zum Hinzufügen von benutzerdefiniertem CSS in WordPress

Sind Sie bereit, Ihre WordPress-Website anzupassen?

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

Sie können einzelne Blöcke gestalten, Ihr gesamtes Theme optimieren oder kleine Änderungen vornehmen, damit Ihre Website genau so aussieht, wie Sie es wünschen. Egal, ob Sie SeedProd, WPCode oder eines der integrierten WordPress-Tools verwenden, wichtig ist, dass Sie sich nicht mit den Standardeinstellungen Ihres Themes begnügen müssen.

Wenn Sie mehr Kontrolle haben möchten, ohne die Themadateien zu bearbeiten, ist SeedProd der einfachste Weg, um Ihre Seiten zu erstellen und zu gestalten, ohne dass Code erforderlich ist.

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

• Wie Sie Ihre WordPress-Homepage bearbeiten
• Wie man Kopfzeilen in WordPress anpasst
• Wie man Testimonials zu WordPress-Seiten hinzufügt
• Wie man eine benutzerdefinierte 404-Seite in WordPress erstellt
• Wie man ein Kontaktformular in WordPress hinzufügt

Stacey Corrin Autorin

Stacey schreibt seit über 10 Jahren über WordPress und digitales Marketing und noch viel länger über andere Themen. Darüber hinaus ist sie fasziniert von Webdesign, Benutzererfahrung und SEO.

Vollständige Bio sehen

WordPress SEO Content Marketing Digitales Marketing SaaS Werbetexten Webgestaltung