Leerraum zwischen WordPress-Blöcken hinzufügen oder entfernen (4 Möglichkeiten)

Obwohl der Block-Editor von WordPress so einfach zu bedienen ist, haben viele Benutzer Probleme mit der Steuerung des Leerzeichens zwischen den Blöcken. Vielleicht sind Sie frustriert, wenn sich Ihre Inhalte zu eng oder zu weit auseinandergezogen anfühlen und die Standard-Optionen für die Abstände einfach nicht ausreichen.

Wir haben von zahlreichen Besuchern gehört, die mit genau diesem Problem konfrontiert sind. Deshalb haben wir einige effektive Möglichkeiten gefunden, um dieses Problem zu umgehen, damit Sie die volle Kontrolle über Ihre Seitenlayouts haben und eine ausgefeilte, professionell aussehende Website erstellen können.

In diesem Artikel zeigen wir Ihnen Schritt für Schritt, wie Sie Leerraum zwischen WordPress-Blöcken hinzufügen oder entfernen können.

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

WordPress macht das Erstellen von benutzerdefinierten Seiten und Beiträgen mit dem integrierten WordPress-Block-Editor einfach.

Möglicherweise stellen Sie jedoch fest, dass beim Hinzufügen bestimmter Blöcke zu viel oder zu wenig Leerraum vorhanden ist. Durch Hinzufügen oder Entfernen von Leerzeichen zwischen Ihren WordPress-Blöcken können Sie individuelle Seiten-Layouts erstellen, die genau Ihren Vorstellungen entsprechen.

Durch die Anpassung des Leerzeichens zwischen den Blöcken können Sie zusammengehörige Inhalte gruppieren oder verschiedene Abschnitte voneinander trennen. Dies hilft, die Aufmerksamkeit Ihrer Besucher zu lenken und macht deutlich, welche Elemente miteinander verbunden sind.

Außerdem tragen die richtigen Abstände dazu bei, den Inhalt aufzulockern, so dass die Besucher Ihre Informationen leichter lesen und verstehen können.

Alles in allem kann eine größere Kontrolle über das endgültige Design Ihrer WordPress-Website zu einem besseren Benutzererlebnis führen.

Schauen wir uns also an, wie Sie Leerraum zwischen WordPress-Blöcken auf Ihrer Website hinzufügen oder entfernen können. Verwenden Sie einfach die unten stehenden Links, um direkt zur gewünschten Methode zu springen:

Video-Anleitung

Wenn Sie eine schriftliche Anleitung bevorzugen, dann lesen Sie einfach weiter.

Methode 1: Hinzufügen von Leerraum zwischen WordPress-Blöcken mit dem Block-Editor

Der einfachste Weg, Leerraum zwischen Ihren Blöcken einzufügen, ist die Verwendung des Gutenberg-Blockeditors. Es gibt einen integrierten Abstandsblock, mit dem Sie mit ein paar Klicks Leerraum hinzufügen können.

Öffnen Sie dazu den Beitrag oder die Seite, die Sie bearbeiten möchten, und klicken Sie auf den ‚Plus‘-Button zum Hinzufügen eines Blocks.

Suchen Sie dann nach „Spacer“ und wählen Sie den Block aus.

Dadurch wird automatisch ein Abstandhalter in die Seite eingefügt.

Sie können ihn größer oder kleiner machen, indem Sie den Block nach oben oder unten ziehen.

Wenn Sie fertig sind, klicken Sie einfach auf die Schaltfläche „Aktualisieren“, um Ihre Änderungen zu speichern.

Wenn Sie ein Blockthema verwenden, können Sie auch den Full Site Editor verwenden, um die Blockabstände in Ihren Themenvorlagen anzupassen.

Weitere Informationen finden Sie in unserem Leitfaden für Einsteiger zur vollständigen Bearbeitung von WordPress-Websites.

Neben dem Einfügen von Abstandsblöcken können Sie auch den Außenabstand Ihrer Blöcke erhöhen, um mehr Platz zwischen ihnen und anderen Blöcken zu schaffen. Diese Optionen können Sie in der Seitenleiste für die Blockeinstellungen erkunden.

Sie können auch den Innenabstand des Blocks anpassen. Je kleiner der Innenabstand, desto weniger Platz ist zwischen den Blöcken, und einige Blöcke haben standardmäßig einen zusätzlichen Innenabstand. Sie können dies also als eine Möglichkeit betrachten, den Abstand zwischen den Blöcken zu verringern.

Weitere Einzelheiten finden Sie in unserem Leitfaden zu Padding vs. Margin in WordPress.

Vielleicht möchten Sie auch diese Anleitungen lesen, um den Block-Editor optimal zu nutzen:

• Wie man den Mehr-Block in WordPress richtig verwendet
• Hinzufügen eines Zeilenumbruchs in WordPress (neue Zeilenabstände)
• Auswahl und Verwendung verschachtelter Blöcke in WordPress
• Hinzufügen von mehrspaltigem Inhalt in WordPress-Beiträgen (kein HTML erforderlich)

Methode 2: Hinzufügen oder Entfernen von Leerraum zwischen WordPress-Blöcken durch Hinzufügen von Custom CSS

Eine weitere Möglichkeit, Leerraum zwischen Ihren Blöcken hinzuzufügen oder zu entfernen, ist das Hinzufügen von benutzerdefiniertem CSS-Code zu Ihrem Thema.

Wenn Sie dies noch nicht getan haben, empfehlen wir Ihnen, einen Blick auf unsere Anleitung zu werfen, wie Sie Ihrer WordPress-Website ganz einfach benutzerdefinierte CSS hinzufügen können, bevor Sie beginnen.

Öffnen Sie dann die Seite oder den Beitrag, den Sie bearbeiten möchten, und klicken Sie auf den Block, in dem Sie den Leerraum hinzufügen oder entfernen möchten.

Klicken Sie dann im rechten Optionsfeld auf den Menüpunkt „Blockieren“.

Scrollen Sie dann nach unten zum Dropdown-Menü „Erweitert“ und klicken Sie es an. Daraufhin wird eine Reihe zusätzlicher Optionen für diesen Block angezeigt.

Fügen Sie dann in das Feld „Zusätzliche CSS-Klassen“ einfach den folgenden Code ein:

.add-remove-bottom-space

Dieses Snippet erstellt eine neue CSS-Klasse speziell für diesen Block.

Klicken Sie anschließend auf die Schaltfläche „Aktualisieren“, um Ihre Änderungen zu speichern.

Als Nächstes navigieren Sie zu Erscheinungsbild “ Anpassen, um den WordPress-Theme-Customizer aufzurufen.

Scrollen Sie dann nach unten und klicken Sie auf die Menüoption „Zusätzliche CSS“.

Daraufhin wird ein Feld angezeigt, in das Sie CSS-Code einfügen können.

Fügen Sie dann den folgenden Codeausschnitt in das Feld ein:

.add-remove-bottom-space {
 margin-bottom: 0;
}

Dieses Codeschnipsel setzt den unteren Rand auf Null und entfernt den Leerraum aus dem Block.

Wenn Sie am unteren Rand mehr Platz haben möchten, ändern Sie einfach die „0“ in etwas wie „20px“.

Sobald Sie Ihre Änderungen vorgenommen haben, klicken Sie auf die Schaltfläche „Veröffentlichen“, um die Änderungen zu aktivieren.

Wenn Sie ein Block-Theme verwenden, lesen Sie unsere Anleitung, wie Sie den fehlenden Theme Customizer in WordPress beheben können, um zu erfahren, wo Sie den CSS-Code hinzufügen müssen.

Speichern von benutzerdefiniertem CSS-Code mit einem Plugin

Wenn Sie im WordPress-Theme-Anpassungsprogramm benutzerdefinierte CSS hinzufügen, werden diese nur für das Theme gespeichert, das Sie gerade verwenden. Wenn Sie das WordPress-Theme wechseln, müssen Sie den CSS-Code in Ihr neues Theme kopieren.

Wenn Sie möchten, dass Ihr benutzerdefiniertes CSS unabhängig von dem verwendeten Thema angewendet wird, müssen Sie ein Plugin verwenden.

WPCode ist das beste Plugin für Codeschnipsel, mit dem Sie Ihrer WordPress-Website PHP, CSS und mehr hinzufügen können, ohne etwas kaputt zu machen.

Als Erstes müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie im WordPress-Admin-Dashboard auf Code Snippets “ + Snippet hinzufügen gehen.

Bewegen Sie hier den Mauszeiger über die Option „Benutzerdefinierten Code hinzufügen (neues Snippet)“ in der Code-Snippet-Bibliothek und klicken Sie auf die Schaltfläche „Snippet verwenden“.

Geben Sie einen Namen für Ihr Code-Snippet ein und fügen Sie dann Ihr benutzerdefiniertes CSS in das Feld „Codevorschau“ ein.

Stellen Sie sicher, dass Sie „CSS Snippet“ aus der Dropdown-Liste „Code-Typ“ auswählen.

Klicken Sie dann auf den Schieberegler oben, um Ihr Snippet zu aktivieren, und klicken Sie auf „Snippet speichern“, um es auf Ihrer WordPress-Website auszuführen.

Weitere Einzelheiten finden Sie in unserem Leitfaden zum einfachen Hinzufügen von benutzerdefiniertem CSS zu Ihrer WordPress-Website.

Alternativ können Sie auch das Simple Custom CSS Plugin verwenden: Nach der Aktivierung gehen Sie einfach zu Darstellung “ Benutzerdefiniertes CSS und fügen Ihren eigenen CSS-Code hinzu.

Wenn Sie fertig sind, klicken Sie einfach auf die Schaltfläche „Benutzerdefiniertes CSS aktualisieren“, um Ihre Änderungen zu speichern.

Methode 3: Hinzufügen oder Entfernen von Leerraum zwischen WordPress-Blöcken mit CSS Hero

Eine weitere einsteigerfreundliche Möglichkeit, Leerraum zwischen WordPress-Blöcken hinzuzufügen oder zu entfernen, ist die Verwendung eines benutzerdefinierten CSS-Plugins für WordPress. Damit können Sie visuelle Änderungen an Ihrem WordPress-Blog vornehmen, ohne den CSS-Code zu bearbeiten.

Wir empfehlen die Verwendung des CSS Hero-Plugins. Damit können Sie fast jeden CSS-Stil auf Ihrer WordPress-Website bearbeiten, ohne eine einzige Zeile Code zu schreiben.

Als Erstes müssen Sie das Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserem Leitfaden für Einsteiger zur Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie auf die Schaltfläche „Zur Produktaktivierung übergehen“ klicken, um das Plugin zu aktivieren. Sie finden die Schaltfläche direkt über Ihrer Liste der installierten Plugins.

Daraufhin wird ein Bildschirm angezeigt, in den Sie Ihren Benutzernamen und Ihr Passwort eingeben müssen. Folgen Sie dann den Anweisungen auf dem Bildschirm. Sobald Ihr Konto verifiziert ist, werden Sie wieder zu Ihrem Dashboard weitergeleitet.

Als Nächstes müssen Sie die Seite oder den Beitrag öffnen, den Sie bearbeiten möchten, und dann auf die Schaltfläche „CSS Hero“ oben in der Symbolleiste der WordPress-Verwaltung klicken.

Dadurch wird dieselbe Seite geöffnet, auf der CSS Hero läuft. Das Plugin verwendet einen visuellen Editor, sodass Sie Ihre Änderungen in Echtzeit vornehmen können.

Wenn Sie auf ein beliebiges Element auf Ihrer Seite klicken, wird eine Symbolleiste auf der linken Seite der Seite angezeigt, mit der Sie Anpassungen vornehmen können.

Um Leerraum zwischen Ihren Blöcken zu entfernen oder hinzuzufügen, klicken Sie einfach auf die Option „Abstände“ und blättern Sie dann nach unten zum Abschnitt „Rand unten“.

Hier können Sie den Schieberegler nach oben oder unten bewegen, um Leerraum hinzuzufügen oder zu entfernen.

Alle Änderungen, die Sie vornehmen, werden automatisch auf Ihrer Seite angezeigt.

Wenn Sie mit den Änderungen fertig sind, müssen Sie auf die Schaltfläche „Speichern“ klicken, damit die Änderungen wirksam werden.

Methode 4: Hinzufügen oder Entfernen von Leerraum zwischen WordPress-Blöcken mit SeedProd

SeedProd ist der beste Drag-and-drop Page-Builder, der von über 1 Million Websites genutzt wird. Wir verwenden es, um individuelle Seiten für WPBeginner und andere Marken zu erstellen.

SeedProd verfügt über eine Bibliothek mit mehr als 300 Templates, mit denen Sie individuelle 404-Seiten, Verkaufsseiten, Landing Pages und vieles mehr erstellen können. Sie können damit sogar ein individuelles WordPress Theme erstellen, ohne Code zu schreiben.

Mit dem Drag-and-Drop-Builder haben Sie die volle Kontrolle über das Design Ihrer Website, und Sie können problemlos Abstände zu jedem Website-Element entfernen oder hinzufügen.

Weitere Informationen finden Sie in unserer Anleitung zum Erstellen einer benutzerdefinierten Seite in WordPress.

Wenn Sie Ihre Seite anpassen, können Sie mithilfe des Abstandsblocks überall Platz schaffen.

Ziehen Sie sie einfach an eine beliebige Stelle auf der Seite, an der Sie mehr Platz zwischen den Blöcken einfügen möchten.

Anschließend können Sie die Höhe mit dem Schieberegler anpassen.

Sie können auch die Abstände zwischen den einzelnen Blöcken festlegen. Klicken Sie dazu einfach auf einen beliebigen Block, dessen Abstand Sie vergrößern oder verkleinern möchten.

Klicken Sie auf die Registerkarte „Erweitert“, um das Optionsfeld auf der linken Seite zu öffnen.

Blättern Sie dann nach unten zum Dropdown-Menü „Abstand“ und klicken Sie es an.

Daraufhin wird ein Menü angezeigt, in dem Sie den „Rand“ einstellen können. Geben Sie einfach eine Zahl in das untere Randfeld ein, um Platz hinzuzufügen, oder löschen Sie die Zahl, um vorhandenen Leerraum zu entfernen.

Wenn Sie alle Änderungen vorgenommen haben, klicken Sie auf die Schaltfläche „Speichern“.

Wählen Sie dann das Dropdown-Menü „Veröffentlichen“, um Ihre Änderungen zu aktivieren.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie Sie Leerzeichen zwischen WordPress-Blöcken hinzufügen oder entfernen können. Vielleicht interessieren Sie sich auch für unseren Leitfaden zu WordPress-Blockrevisionen und unsere Expertenauswahl der besten Gutenberg-Block Plugins.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.