Abstand zwischen WordPress-Blöcken hinzufügen oder entfernen 

Sie haben eine Seite in WordPress erstellt und etwas sieht nicht richtig aus. Zwei Blöcke sind zu weit voneinander entfernt oder eine Lücke lässt sich einfach nicht schließen, egal wie oft Sie den Rand auf Null setzen.

Ich habe viele Anfänger gesehen, die mit Seiten kämpfen, die „nicht richtig“ aussehen, ohne zu erkennen, dass das Problem der Abstand ist. Zu viel Abstand wirkt getrennt, zu wenig wirkt überladen.

Sie können Abstände zwischen Blöcken in WordPress selbst hinzufügen oder entfernen, mit oder ohne Code. Ich zeige Ihnen zuerst, wie Sie herausfinden, woher eine Lücke stammt, und behebe sie dann mit SeedProd, dem Block-Editor, Blockabstand oder etwas CSS.

Warum Leerzeichen zwischen WordPress-Blöcken hinzufügen oder entfernen

Die meisten unordentlich aussehenden Seiten, bei denen ich um Hilfe gebeten wurde, haben kein Schrift- oder Farbproblem. Sie haben ein Abstandproblem.

Weißraum ist kein verschwendeter Raum. Er hilft den Menschen, sich auf Ihre Inhalte zu konzentrieren und den Fluss Ihrer Seite zu verstehen.

Die meisten WordPress-Themes fügen standardmäßig ihre eigene Polsterung oder Ränder hinzu, was Abschnitte ungleichmäßig aussehen lassen kann. Durch die Anpassung dieser Abstände erhalten Sie mehr Kontrolle darüber, wie jeder Teil Ihrer Seite verbunden ist.

Forschungen zeigen, dass Leerraum die Verständlichkeit um fast 20 % verbessern kann. Das bedeutet, dass ein paar kleine Abstandsanpassungen Ihre Inhalte leichter lesbar und angenehmer zu durchsuchen machen können.

Hier sind die Gründe, warum Sie Ihre Blockabstände feinabstimmen möchten:

• Gruppieren Sie zusammengehörige Inhalte für bessere Klarheit.
• Trennen Sie verschiedene Abschnitte, um den Fluss zu verbessern.
• Machen Sie Seiten leichter lesbar und navigierbar.

Herausfinden, woher der Abstand stammt

Bevor Sie etwas ändern, finden Sie heraus, woher der Abstand tatsächlich stammt. Die meisten Abstandprobleme lassen sich auf einige wenige Stellen zurückführen, und die falsche zu beheben, ist der Grund, warum Lücken sich nicht bewegen lassen.

Ich beginne immer mit der Listenansicht, da ein vergessener Abstandhalter-Block häufiger die Ursache ist als jede Theme-Einstellung. Hier ist die Reihenfolge, in der ich die Dinge überprüfe:

• Überprüfen Sie den Block über der Lücke: Klicken Sie darauf und sehen Sie sich seinen unteren Rand und seine Polsterung unter Abmessungen an.
• Überprüfen Sie den Block darunter: Klicken Sie darauf und überprüfen Sie seinen oberen Rand und seine Polsterung.
• Listenansicht öffnen: Suchen Sie nach einem verirrten Abstandhalter-Block oder einem leeren Absatz, den Sie löschen können.
• Überprüfen Sie den übergeordneten Block: Wenn die Blöcke sich innerhalb eines Gruppen- oder Spaltenblocks befinden, wählen Sie das übergeordnete Element aus und sehen Sie sich seinen Blockabstand an.
• Schließen Sie Ihr Theme aus: Wenn der Editor in Ordnung aussieht, die Live-Seite aber nicht, stammt der Abstand von der Theme-CSS. Klicken Sie mit der rechten Maustaste auf die Lücke auf der Live-Seite und wählen Sie „Untersuchen“, um die Regel zu sehen, die sie hinzufügt.

Die Quelle zu benennen, bevor Sie eine einzige Einstellung ändern, trennt eine Fünf-Minuten-Korrektur von einer Stunde Versuch und Irrtum.

Der weiße Raum zwischen Ihrem Header und Body fällt normalerweise in die letzte Kategorie. Er wird von Ihrem Theme oder Template festgelegt, daher passen Sie ihn im Website-Editor oder mit etwas CSS an, nicht bei Ihren Inhaltsblöcken.

Leerzeichen zwischen WordPress-Blöcken mit SeedProd hinzufügen oder entfernen

Der einfachste Weg, weißen Raum in WordPress zu verwalten, ist mit SeedProd, einem Drag-and-Drop-Website-Builder, mit dem Sie vollständige Seiten und Themes gestalten können, ohne Code anzufassen. Es wird von über einer Million Website-Besitzern verwendet, die die volle visuelle Kontrolle über ihre Layouts wünschen.

Ich selbst benutze SeedProd, um meine eigene Website zu erstellen, und ich bin kein Designer. Was ich liebe, ist, dass ich jede Änderung live sehen kann, einschließlich der Anpassung von Abständen, dem Verschieben von Abschnitten und dem Ausbalancieren von Layouts, bis alles genau richtig aussieht.

Nachdem Sie das Plugin installiert und aktiviert haben, öffnen Sie SeedProd » Landing Pages in Ihrem WordPress-Dashboard.

Von hier aus können Sie eine neue Seite erstellen oder eine vorhandene bearbeiten, um den visuellen Builder zu starten.

Innerhalb des Builders können Sie Blöcke direkt auf Ihr Layout ziehen und sofort sehen, wie Ihre Seite aussieht.

Um zusätzlichen Platz hinzuzufügen, ziehen Sie den Abstandhalter-Block in Ihr Layout.

Verwenden Sie den Höhenschieberegler im linken Bereich, um den Leerraum zu vergrößern oder zu verringern, wo immer Sie ihn benötigen. Ich füge oft etwas Platz zwischen Abschnitten wie Hero-Bannern, Testimonials und CTAs hinzu, damit jeder einzelne hervorsticht.

Sie können den Abstand auch für jeden Block einzeln feinabstimmen. Klicken Sie auf den Block, öffnen Sie die Registerkarte Erweitert im linken Bereich und suchen Sie nach dem Abschnitt Abstand.

Hier können Sie den Rand (Abstand außerhalb des Blocks) oder den Innenabstand (Abstand innerhalb des Blocks) anpassen. Kleine Anpassungen hier können Ihrem Design ein viel ausgewogeneres und professionelleres Aussehen verleihen.

Wenn Sie mit den Ergebnissen zufrieden sind, klicken Sie auf Speichern und dann auf Veröffentlichen, um Ihre Seite live zu schalten. Sie können Ihre Layout-Vorschau auch auf Mobilgeräten anzeigen, um zu sehen, wie der Abstand auf verschiedenen Geräten aussieht.

Für Hilfe beim Erstellen Ihrer ersten benutzerdefinierten Seite lesen Sie unseren vollständigen Leitfaden zum Thema Erstellen einer Landingpage in WordPress.

Abstand hinzufügen oder entfernen mit dem WordPress Block-Editor

Der WordPress-Block-Editor (auch Gutenberg genannt) verfügt über integrierte Werkzeuge zur Steuerung von weißem Raum. Der Block, der einen leeren Raum zwischen anderen Blöcken hinzufügt, ist der Abstandhalter-Block, und Sie können ihn ohne zusätzliche WordPress-Plugins anpassen.

Ich verwende den Block-Editor für schnelle Abstandsänderungen bei Beiträgen, bei denen ich nicht den vollständigen Builder benötige. Öffnen Sie dazu den Beitrag oder die Seite, die Sie bearbeiten möchten, klicken Sie auf die Schaltfläche + Block hinzufügen, geben Sie dann „Abstandhalter“ ein und wählen Sie den Abstandhalter-Block aus.

Dies fügt einen leeren Block in Ihr Layout ein. Ziehen Sie den Griff am unteren Rand des Blocks oder verwenden Sie die Einstellungen in der Seitenleiste, um die Höhe anzupassen. Je größer der Höhenwert, desto mehr weißer Raum erscheint zwischen Ihren Blöcken.

Für kleinere visuelle Unterbrechungen versuchen Sie stattdessen den Block Trennlinie. Er fügt eine dezente Trennlinie hinzu, die hilft, Abschnitte zu trennen, ohne zu viel leeren Raum zu schaffen.

Sie können den Abstand auch für jeden einzelnen Block feinabstimmen. Wählen Sie den Block aus, öffnen Sie das Einstellungen-Panel auf der rechten Seite und suchen Sie unter „Abmessungen“ nach den Optionen Abstand (Margin) oder Innenabstand (Padding).

Wenn Sie jemals inkonsistente Abstände bemerken, öffnen Sie das Panel Listenansicht. Es zeigt jeden Block auf Ihrer Seite an und erleichtert das Erkennen von doppelten Abstandhalter-Blöcken oder Lücken, die angepasst werden müssen. Wenn Sie einen einzelnen Abstandhalter oder einen leeren Absatz finden, löschen Sie ihn, um die Lücke zu schließen.

Wenn alles ausgewogen aussieht, klicken Sie auf Aktualisieren, um Ihre Änderungen zu speichern. Vorschau Ihrer Seite immer auf Desktop und Mobilgeräten, damit sich der Abstand auf allen Geräten natürlich anfühlt.

Abstand zwischen Absätzen entfernen

Das Drücken von Enter im Editor erstellt einen brandneuen Absatzblock, der eine vollständige Zeile Abstand zwischen den Absätzen hinzufügt. Um zwei Zeilen eng beieinander zu halten, drücken Sie stattdessen Umschalttaste + Enter, was einen Zeilenumbruch innerhalb desselben Blocks hinzufügt.

Für den Abstand zwischen separaten Absätzen wählen Sie einen aus und verringern Sie seinen Abstand im Abmessungsfenster.

Blockabstand anpassen, um Lücken zwischen Blöcken zu schließen

Wenn Abstand (Margin) und Innenabstand (Padding) der einzelnen Blöcke nichts bewirken, wird der Abstand durch Blockabstand festgelegt, den Raum, den ein übergeordneter Block zwischen seinen Kindern platziert. Dies ist die Korrektur, die Anfänger am häufigsten übersehen.

Ich greife darauf zurück, wenn sich eine Lücke nicht durch die eigenen Einstellungen eines Blocks schließen lässt, und normalerweise funktioniert es. Wählen Sie die beiden Blöcke in der Listenansicht aus, klicken Sie mit der rechten Maustaste und wählen Sie Gruppieren.

Wählen Sie die Gruppe aus, öffnen Sie das Abmessungen-Panel und finden Sie die Steuerung Blockabstand. Ziehen Sie sie auf 0, um die Lücke zu schließen, oder legen Sie einen benutzerdefinierten Wert fest, um die Blöcke gleichmäßig zu verteilen.

Dieselbe Einstellung steuert den Abstand zwischen Spalten. Wählen Sie den übergeordneten Spalten-Block aus, öffnen Sie Abmessungen und passen Sie seinen Blockabstand an, um den Abstand zwischen den einzelnen Spalten zu vergrößern oder zu verringern.

Bei einem Spaltenblock können Sie die Seiten entkoppeln, um die horizontalen und vertikalen Abstände separat einzustellen. Der vertikale Wert steuert den Abstand, wenn Ihre Spalten auf Mobilgeräten gestapelt werden.

Abstand zwischen Blöcken mit benutzerdefiniertem CSS hinzufügen oder entfernen

Wenn Sie eine präzisere Kontrolle über den Abstand wünschen, können Sie benutzerdefiniertes CSS verwenden, um genaue Abstands- oder Innenabstandswerte für Ihre Blöcke festzulegen. Ich greife nur dann zu CSS, wenn ich auf jeder Seite den gleichen Abstand benötige, da die visuellen Optionen für einmalige Korrekturen schneller sind.

Für Abstände auf Ihrer gesamten Website bietet ein Block-Theme einen schnelleren Weg als CSS. Gehen Sie zu Darstellung » Editor » Stile » Layout und passen Sie dort den globalen Blockabstand an, der jede Seite auf einmal aktualisiert.

Entwickler können dieselben Werte direkt in der theme.json-Datei des Themes festlegen. Benutzerdefiniertes CSS über den Customizer ist das richtige Werkzeug für klassische (nicht-Block-)Themes oder wenn Sie einen genauen Wert für bestimmte Blöcke benötigen.

Um eine Klasse zu verwenden, wählen Sie zuerst den Block aus, den Sie im Editor anpassen möchten. Öffnen Sie in der rechten Seitenleiste den Abschnitt Erweitert und suchen Sie nach dem Feld mit der Bezeichnung Zusätzliche CSS-Klassen.

Hier können Sie einen benutzerdefinierten Klassennamen zuweisen, z. B. custom-spacing.

Gehen Sie als Nächstes zu Darstellung » Anpassen » Zusätzliches CSS in Ihrem WordPress-Dashboard. Diese Option wird nur bei klassischen Themes angezeigt, die den Website-Editor nicht verwenden. Wenn Ihr Theme den Website-Editor enthält, fügen Sie Ihr CSS stattdessen mit einem Plugin wie WPCode hinzu.

Geben Sie im CSS-Editor eine einfache Regel wie diese ein:

.custom-spacing { margin-bottom: 20px; }

Dieses Beispiel fügt 20 Pixel Abstand unter jedem Block mit dieser Klasse hinzu. Um den Abstand vollständig zu entfernen, ändern Sie den Wert stattdessen auf 0. Sie können mit verschiedenen Werten experimentieren, um den Abstand für Ihr Layout genau richtig einzustellen.

Wenn Sie fertig sind, klicken Sie auf Veröffentlichen, um Ihre Änderungen zu speichern. Wenn Sie Caching-Plugins verwenden, leeren Sie Ihren Cache anschließend, damit die neuen Stile korrekt angezeigt werden.

Benutzerdefiniertes CSS ist ideal, wenn Sie genaue Abstände für bestimmte Elemente benötigen. Für die meisten Benutzer sind die visuellen Optionen in SeedProd oder dem Block-Editor jedoch schneller und einfacher.

Bewährte Praktiken für WordPress Blockabstände

Der häufigste Fehler, den ich sehe, ist ein unterschiedlicher Abstand in jedem Abschnitt, wodurch selbst gute Inhalte unordentlich wirken. Sobald Sie verstehen, wie Abstände funktionieren, ist es ein paar zusätzliche Minuten wert, sie über Ihre Seiten hinweg konsistent zu halten.

Guter Weißraum bedeutet nicht, überall die gleiche Menge zu verwenden. Es geht darum, ein Gleichgewicht zu schaffen, damit Ihre Inhalte leicht zu lesen und visuell verbunden sind.

• Abstände konsistent halten: Verwenden Sie ähnliche Abstände zwischen zusammengehörigen Abschnitten, wie Text und Bildern, damit Ihr Design beabsichtigt wirkt.
• Mehr Platz für Schlüsselbereiche verwenden: CTAs, Testimonials und hervorgehobene Abschnitte fallen mehr auf, wenn sie von zusätzlichem Weißraum umgeben sind.
• Gruppierte Elemente straffen: Reduzieren Sie innerhalb von Spalten oder Inhaltsboxen Ränder und Innenabstände, um Elemente visuell zu verbinden.
• Auf allen Geräten in der Vorschau anzeigen: Ein Layout, das auf dem Desktop perfekt aussieht, kann auf Mobilgeräten zu eng oder zu locker wirken. Überprüfen Sie immer die mobile Vorschau.
• Denken Sie an Rand (Margin) vs. Innenabstand (Padding): Rand fügt außerhalb eines Blocks Leerraum hinzu, während Innenabstand Leerraum innerhalb des Blocks hinzufügt. Passen Sie jeden davon an Ihre Layoutanforderungen an.
• Bleiben Sie proportional: Als allgemeine Regel gilt: Verwenden Sie 40 bis 60 Pixel zwischen Hauptbereichen und kleinere Abstände innerhalb gruppierter Inhalte.

FAQs zu WordPress Blockabständen

Hier sind einige schnelle Antworten auf häufig gestellte Fragen zum Hinzufügen oder Entfernen von Abständen zwischen Blöcken in WordPress.

Welcher Block fügt einen Leerraum zwischen anderen Blöcken hinzu?

Der Abstandhalter-Block (Spacer). Fügen Sie im WordPress-Editor einen Abstandhalter-Block hinzu, wo immer Sie einen Abstand wünschen, und stellen Sie dann seine Höhe in Pixel ein, um zu steuern, wie viel Platz erscheint.

Für eine dünne Trennlinie anstelle von leerem Raum verwenden Sie den Trennlinien-Block (Separator). Beide sind integriert, sodass Sie kein Plugin benötigen.

Wie entferne ich den weißen Leerraum zwischen dem Header und dem Body in WordPress?

Dieser Abstand ist fast immer ein Abstand des Themes oder Templates und nicht etwas auf Ihren Inhaltsblöcken.

Öffnen Sie in einem Block-Theme Darstellung » Editor » Stile » Layout und reduzieren Sie den globalen Blockabstand (Block Spacing) oder bearbeiten Sie den Header-Template-Teil. In einem klassischen Theme entfernen Sie ihn mit einer kleinen benutzerdefinierten CSS-Regel, die auf den Header- oder Hauptinhaltsbereich abzielt.

Warum gibt es immer noch einen Abstand, nachdem ich Rand und Innenabstand auf 0 gesetzt habe?

Weil der Abstand nicht von diesem Block kommt. Er wird normalerweise durch den Blockabstand (Block Spacing) des übergeordneten Gruppen- oder Spaltenblocks, einen verbleibenden Abstandhalter-Block oder die Standard-CSS Ihres Themes festgelegt.

Wählen Sie den übergeordneten Block aus und überprüfen Sie seinen Blockabstand (Block Spacing), öffnen Sie die Listenansicht (List View), um verirrte Abstandhalter zu finden, und verwenden Sie dann die Browser-Inspektion (Inspect), wenn der Abstand nur auf der Live-Seite angezeigt wird.

Beeinflusst der WordPress-Abstand die SEO?

Nicht direkt, aber saubere Layouts verbessern die Lesbarkeit und Benutzererfahrung. Je einfacher Ihre Seiten zu lesen und zu navigieren sind, desto wahrscheinlicher ist es, dass Besucher länger bleiben, was indirekt bessere Engagement-Signale unterstützen kann.

Bringen Sie Ihren Blockabstand in Ordnung

Wenn Sie Ihren Abstand richtig einstellen, ändert sich das Gefühl Ihrer gesamten Website. Wenn Ihr Inhalt Raum zum Atmen hat, ist er leichter zu lesen und sieht polierter aus.

Ob Sie den Block-Editor, ein wenig CSS oder visuelles Erstellen verwenden, der Schlüssel ist Konsistenz. Wenn Sie jede Änderung live sehen möchten, während Sie die Dinge abmessen, erstellen Sie Ihre Seiten mit SeedProd und überspringen Sie das Rätselraten.

Wenn Sie Ihre Layouts weiter verbessern möchten, finden Sie hier einige hilfreiche Anleitungen, die Sie als Nächstes erkunden können:

• So fügen Sie einen Schatteneffekt (Box Shadow) in WordPress hinzu
• So blenden Sie Seitentitel in WordPress aus
• Wie man das Blog-Layout in WordPress ändert
• So machen Sie eine Seite in WordPress bildschirmfüllend

Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.