Tutorials

Abstand zwischen Aufzählungspunkten in WordPress hinzufügen [2025 Easy Guide]

Melden

Hier ist ein umfassendes Tutorial, das speziell für WordPress-Nutzer im Jahr 2025 erstellt wurde.

Ein sauberer Zeilenabstand (Line-Height) und ausreichend Platz zwischen den einzelnen Punkten einer Liste verbessern die Lesbarkeit deiner Website enorm. Standardmäßig kleben die Bullet Points in vielen WordPress-Themes jedoch eng aneinander.

In diesem Guide zeige ich dir die drei einfachsten Wege, wie du 2025 mehr Platz in deine Listen bringst – ohne dass du ein Programmierprofi sein musst.

Methode 1: Der schnellste Weg über den Block-Editor (Gutenberg)

Seit den neuesten WordPress-Updates bieten viele Standard-Blocks (und Themes wie Astra, GeneratePress oder OceanWP) integrierte Abstandsoptionen.

  1. Öffne den Beitrag oder die Seite, die du bearbeiten möchtest.
  2. Klicke auf den Listen-Block.
  3. Schau in der rechten Seitenleiste unter dem Reiter Block nach dem Bereich Abmessungen (Dimensions) oder Stil.
  4. Suche nach Block-Zwischenraum (Block Spacing). Hier kannst du den Regler verschieben, um den Abstand zwischen den einzelnen <li>-Elementen zu vergrößern.
    • Hinweis: Wenn du diese Option nicht siehst, unterstützt dein aktuelles Theme diese spezifische Gutenberg-Funktion noch nicht direkt im Editor. Nutze in diesem Fall Methode 2.

Methode 2: Globaler Abstand mit CSS (Empfohlen für Konsistenz)

Wenn du möchtest, dass alle Listen auf deiner gesamten Website den gleichen, sauberen Abstand haben, ist CSS die beste Wahl. Keine Sorge, es ist nur eine Zeile Code.

  1. Gehe in deinem WordPress-Dashboard zu Design > Customizer.
    • (Falls du ein Block-Theme nutzt: Design > Editor > Klicke auf die Vorschau > Stile (Halbmond-Icon) > Zusätzliches CSS).
  2. Klicke auf den Reiter Zusätzliches CSS.
  3. Kopiere den folgenden Code und füge ihn dort ein:
/* Abstand zwischen den einzelnen Listenpunkten */
ul li {
    margin-bottom: 15px; /* Hier kannst du den Wert anpassen */
}

/* Den Abstand beim letzten Punkt entfernen, damit der Textfluss stimmt */
ul li:last-child {
    margin-bottom: 0;
}
  1. Klicke auf Veröffentlichen. Nun haben alle ungeordneten Listen (Bullet Points) einen schönen Abstand nach unten.

Methode 3: Abstand zwischen zwei kompletten Listen (Spacer-Block)

Möchtest du nicht den Abstand innerhalb einer Liste ändern, sondern den Abstand zwischen zwei verschiedenen Listen-Blöcken vergrößern?

  1. Klicke auf das (+)-Icon zwischen den beiden Listen.
  2. Suche nach dem Block Abstandshalter (Spacer).
  3. Ziehe den blauen Punkt nach oben oder unten, um genau den Platz zu schaffen, den du benötigst.

Methode 4: Für Profis – Die Globalen Stile (Site Editor)

Wenn du ein modernes Block-Theme (FSE - Full Site Editing) wie Twenty Twenty-Four oder Twenty Twenty-Five verwendest:

  1. Gehe zu Design > Editor.
  2. Klicke auf das Stile-Icon (oben rechts, der schwarz-weiße Kreis).
  3. Wähle Blöcke aus.
  4. Suche in der Liste nach Liste.
  5. Hier kannst du unter Layout oder Abmessungen den Innen- und Außenabstand für alle Listen-Blöcke global festlegen.

Bonus-Tipp: Zeilenhöhe anpassen

Oft wirkt eine Liste gedrängt, weil die Zeilenhöhe (Line Height) zu gering ist. Du kannst dies im CSS-Code aus Methode 2 einfach ergänzen:

ul li {
    margin-bottom: 12px;
    line-height: 1.6; /* Sorgt für mehr Luft innerhalb eines Punktes */
}

Fazit

Für die meisten Nutzer ist Methode 2 (CSS) die beste Wahl, da sie einmal eingestellt wird und dann automatisch für alle neuen Beiträge funktioniert. Wenn du nur punktuell Abstände brauchst, ist der Block-Editor (Methode 1) ideal.

Hast du Fragen oder suchst du nach einem speziellen Design für deine Listen? Schreib es in die Kommentare!

0