cigolla.ch

Abwechselnde Farben für Listen im WordPress Blockeditor (Gutenberg)

Written by

tci

in

,

Wenn du deine Inhalte im WordPress Blockeditor gestaltest, möchtest du vielleicht Listen optisch ansprechender machen – z. B. indem sich die Hintergrundfarbe der einzelnen Listeneinträge abwechselt. Das sorgt für bessere Lesbarkeit und ein aufgelockertes Design, vor allem bei längeren Aufzählungen.

In diesem Beitrag zeige ich zwei einfache Möglichkeiten, wie du genau das umsetzen kannst – ganz ohne Plugin!

Möglichkeit 1: Einzelne Listen einfärben mit CSS-Klasse

Schritt 1: Liste erstellen

  • Füge im Editor einen ganz normalen Listenblock ein (ul oder ol).
  • Gib deine Einträge wie gewohnt ein.

Schritt 2: CSS-Klasse hinzufügen

  • Klicke auf den Listenblock.
  • In der rechten Seitenleiste (unter „Erweitert“) findest du das Feld „Zusätzliche CSS-Klasse(n)“.
  • Gib dort z. B. bunte-liste ein.

Schritt 3: CSS einfügen

Gehe in dein WordPress-Backend unter:

Design → Customizer → Zusätzliches CSS

Füge folgenden Code ein:

CSS
.bunte-liste li:nth-child(odd) {
  background-color: #f0f0f0;
}

.bunte-liste li:nth-child(even) {
  background-color: #ffffff;
}

Du kannst natürlich deine Wunschfarben einsetzen – etwa #e0f7fa für ein helles Türkis oder #fff8e1 für ein sanftes Gelb.

Möglichkeit 2: Globales Styling für alle Listen

Du möchtest alle Listen auf deiner Website automatisch mit abwechselnder Hintergrundfarbe versehen – ohne für jede Liste extra eine CSS-Klasse zu vergeben? Auch das geht ganz einfach!

So geht’s:

  1. Öffne im WordPress-Backend den Editor für dein Theme (nicht zu verwechseln mit dem Seiten-/Beitragseditor).
    • Gehe zu Design → Editor (Full Site Editor).
  2. Wähle in der Übersicht links die Stil-Optionen aus („Stile“ oder „Styles“).
  3. Klicke auf „Blöcke“ und wähle den Block „Liste“.
  4. Scrolle nach unten zu „Erweitert“.
  5. Füge dort folgenden Code ein:
CSS
& li:nth-child(odd) {
  background-color: #f0f0f0;
}

& li:nth-child(even) {
  background-color: #ffffff;
}

Hier ist es wichtig, die einzelnen Definitionen mit einem «&» zu beginnen.

Dieser CSS-Code gilt dann standardmäßig für alle Listen, die du in deinen Beiträgen und Seiten anlegst.

Tipp: Auch Schriftfarbe, Abstand oder Rahmen lassen sich so ändern

Du kannst mit CSS noch viel mehr anstellen – etwa die Schriftgrösse verändern, Listenelemente einrücken oder Trennlinien zwischen den Einträgen einfügen. Zum Beispiel:

CSS
li {
  padding: 8px;
  border-bottom: 1px solid #ddd;
}

Fazit

Mit ein paar einfachen CSS-Zeilen bringst du Schwung in deine Listen! Ob du das Styling nur auf einzelne Listen anwenden willst oder global für deine Website – beide Wege sind schnell umsetzbar, auch ohne Programmierkenntnisse.

More posts