Der Weißraum in WordPress ist der leere Bereich zwischen den Blöcken, der sich darauf auswirkt, wie sauber, lesbar und ausgewogen Ihre Seite aussieht. Wenn Sie es richtig machen, ist Ihr Inhalt leichter zu lesen und Ihr Design wirkt professioneller.
Ich habe schon viele Anfänger mit Seiten kämpfen sehen, die "unpassend" aussehen, ohne zu erkennen, dass das Problem in den Abständen liegt. Zu viel, und alles wirkt unzusammenhängend. Zu wenig, und es sieht unübersichtlich aus. Die gute Nachricht ist, dass Sie die Blockabstände in WordPress anpassen können, ohne den Code zu verändern.
In diesem Leitfaden zeige ich Ihnen drei einfache Möglichkeiten zur Anpassung der Abstände, die alle anfängerfreundlich sind und mit jedem WordPress-Theme funktionieren.
Warum Leerzeichen zwischen WordPress-Blöcken hinzufügen oder entfernen
Weißer Raum ist kein vergeudeter Platz. Er hilft den Lesern, sich auf Ihren Inhalt zu konzentrieren und den Fluss Ihrer Seite zu verstehen. Wenn die Abstände stimmen, sieht Ihr Layout bewusster aus und ist leichter zu lesen.
Die meisten WordPress-Themes fügen standardmäßig eigene Abstände oder Ränder hinzu, was dazu führen kann, dass Abschnitte ungleichmäßig aussehen. Durch die Anpassung dieser Abstände haben Sie mehr Kontrolle darüber, wie die einzelnen Teile Ihrer Seite miteinander verbunden sind.
Untersuchungen haben ergeben, dass Leerraum die Verständlichkeit um fast 20 % verbessern kann. Das bedeutet, dass ein paar kleine Änderungen an den Abständen dazu beitragen können, dass Ihre Inhalte leichter zu lesen sind und das Surfen mehr Spaß macht.
Aus diesem Grund sollten Sie die Abstände zwischen den Blöcken anpassen:
- Gruppieren Sie verwandte Inhalte zur besseren Übersichtlichkeit.
- Trennen Sie verschiedene Abschnitte, um den Fluss zu verbessern.
- Erleichtern Sie das Lesen und Navigieren auf den Seiten.
Durch einheitliche Abstände wirkt Ihre Website ausgefeilt, professionell und ist leichter zu navigieren.
Hinzufügen oder Entfernen von Leerzeichen zwischen WordPress-Blöcken mit SeedProd
Der einfachste Weg, den Leerraum in WordPress zu verwalten, ist SeedProd, ein Drag-and-Drop-Website-Builder, mit dem Sie komplette Seiten und Themen entwerfen können, ohne den Code zu berühren. Es wird von über einer Million Website-Besitzern verwendet, die eine vollständige visuelle Kontrolle über ihre Layouts wünschen.
Ich verwende SeedProd selbst, um meine eigene Website zu erstellen, und ich bin kein Designer. Ich finde es toll, dass ich jede Änderung live sehen kann, einschließlich der Anpassung des Platzes, des Verschiebens von Abschnitten und des Ausgleichs 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 bestehende Seite bearbeiten, um den Visual Builder zu starten.
Innerhalb des Builders können Sie Blöcke direkt auf Ihr Layout ziehen und ablegen und sofort sehen, wie Ihre Seite aussieht.
Um zusätzlichen Platz zu schaffen, ziehen Sie den Abstandshalterblock in Ihr Layout.
Verwenden Sie den Höhenregler im linken Bedienfeld, um den Weißraum zu vergrößern oder zu verkleinern, 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 die Abstände auch für jeden einzelnen Block fein abstimmen. Klicken Sie auf den Block, öffnen Sie die Registerkarte " Erweitert" im linken Bereich und suchen Sie den Abschnitt " Abstände ".
Hier können Sie den Rand (Platz außerhalb des Blocks) oder die Auffüllung (Platz innerhalb des Blocks) anpassen. Kleine Änderungen können Ihr Design viel ausgewogener und professioneller wirken lassen.
Wenn Sie mit dem Ergebnis zufrieden sind, klicken Sie auf " Speichern" und dann auf "Veröffentlichen", um Ihre Seite zu aktivieren. Sie können auch eine Vorschau Ihres Layouts auf mobilen Geräten anzeigen, um zu prüfen, wie die Abstände auf verschiedenen Geräten aussehen.
Wenn Sie Hilfe bei der Erstellung Ihrer ersten benutzerdefinierten Seite benötigen, lesen Sie unsere vollständige Anleitung zur Erstellung einer Landing Page in WordPress.
Hinzufügen oder Entfernen von Platz mit dem WordPress-Block-Editor
Der WordPress-Block-Editor (auch Gutenberg genannt) enthält integrierte Tools zur Steuerung des Leerraums. Sie können mit Spacer- und Separator-Blöcken ganz einfach Leerraum zwischen Blöcken hinzufügen oder entfernen, ohne zusätzliche WordPress-Plugins hinzuzufügen.
Öffnen Sie zunächst den Beitrag oder die Seite, die Sie bearbeiten möchten, und klicken Sie auf die Schaltfläche + Block hinzufügen. Geben Sie in der Suchleiste "Abstandhalter" ein und wählen Sie den Abstandhalter-Block aus der Liste aus.
Dadurch wird ein leerer Block in Ihr Layout eingefügt. Sie können den Griff am unteren Rand des Blocks ziehen oder die Seitenleisteneinstellungen verwenden, um die Höhe anzupassen. Je größer der Wert für die Höhe ist, desto mehr Leerraum erscheint zwischen Ihren Blöcken.
Für kleinere visuelle Unterbrechungen können Sie stattdessen den Separator-Block verwenden. Er fügt eine dezente Trennlinie hinzu, die dazu beiträgt, Abschnitte zu trennen, ohne zu viel Leerraum zu schaffen.
Sie können auch die Abstände für jeden einzelnen Block fein abstimmen.
Wählen Sie den Block aus, öffnen Sie das Einstellungsfeld auf der rechten Seite und suchen Sie unter "Abmessungen" nach den Optionen "Rand" oder " Auffüllung". Damit können Sie innerhalb oder außerhalb jedes Blocks Platz hinzufügen oder entfernen, um eine genauere Steuerung zu ermöglichen.
Wenn Sie feststellen, dass die Abstände uneinheitlich sind, öffnen Sie die Listenansicht. Hier werden alle Blöcke auf Ihrer Seite angezeigt, so dass Sie doppelte Abstandsblöcke oder Lücken, die angepasst werden müssen, leicht erkennen können.
Wenn alles ausgewogen aussieht, klicken Sie auf Aktualisieren, um Ihre Änderungen zu speichern. Prüfen Sie Ihre Seite immer sowohl auf dem Desktop als auch auf dem Mobiltelefon, um sicherzustellen, dass die Abstände auf allen Geräten natürlich wirken.
Abstand zwischen Blöcken mit benutzerdefiniertem CSS hinzufügen oder entfernen
Wenn Sie eine genauere Kontrolle über die Abstände wünschen, können Sie benutzerdefinierte CSS verwenden, um genaue Rand- oder Auffüllungswerte für Ihre Blöcke festzulegen. Diese Methode erfordert etwas mehr Einarbeitungszeit, liefert aber pixelgenaue Ergebnisse, die für die gesamte Website gelten.
Wählen Sie zunächst im Editor den Block aus, den Sie anpassen möchten. Öffnen Sie in der rechten Seitenleiste den Abschnitt " Erweitert" und suchen Sie das Feld " Zusätzliche CSS-Klassen".
Hier können Sie einen eigenen Klassennamen vergeben, z. B. custom-spacing.
Gehen Sie dann in Ihrem WordPress-Dashboard auf Darstellung " Anpassen " Zusätzliche CSS.
Diese Option erscheint nur bei Themes, die nicht den neuen Site Editor (FSE) verwenden. Wenn Ihr Theme den Site-Editor enthält, können Sie Ihr CSS stattdessen mit einem Plugin wie WPCode hinzufügen
Geben Sie im CSS-Editor eine einfache Regel wie diese ein:
.custom-spacing { margin-bottom: 20px; }
In diesem Beispiel wird unter jedem Block mit dieser Klasse ein Abstand von 20 Pixeln hinzugefügt. Um den Abstand vollständig zu entfernen, ändern Sie den Wert in 0 stattdessen. Sie können mit verschiedenen Werten experimentieren, um die richtigen Abstände für Ihr Layout zu finden.
Wenn Sie fertig sind, klicken Sie auf Veröffentlichen, um Ihre Änderungen zu speichern. Wenn Sie Caching-Plugins verwenden, leeren Sie anschließend Ihren Cache, um sicherzustellen, dass die neuen Stile korrekt angezeigt werden.
Benutzerdefiniertes CSS ist ideal, wenn Sie genaue Abstände für bestimmte Elemente benötigen, aber für die meisten Benutzer sind die visuellen Optionen in SeedProd oder dem Block-Editor schneller und einfacher.
Best Practices für WordPress-Blockabstände
Wenn Sie erst einmal verstanden haben, wie die Abstände in WordPress funktionieren, lohnt es sich, sich ein paar Minuten mehr Zeit zu nehmen, damit die Abstände auf Ihren Seiten einheitlich aussehen. Bei einem guten Weißraum geht es nicht darum, überall die gleiche Menge zu verwenden, sondern darum, ein Gleichgewicht zu schaffen, damit Ihr Inhalt leicht zu lesen und visuell verbunden ist.
- Halten Sie die Abstände einheitlich. Verwenden Sie ähnliche Abstände zwischen zusammenhängenden Abschnitten wie Text und Bildern, um Ihr Design absichtlich wirken zu lassen.
- Verwenden Sie mehr Platz für wichtige Bereiche. CTAs, Empfehlungsschreiben und hervorgehobene Abschnitte heben sich besser ab, wenn sie von zusätzlichem Weißraum umgeben sind.
- Straffen Sie gruppierte Elemente. Verringern Sie innerhalb von Spalten oder Inhaltsboxen die Ränder und die Polsterung, um die Elemente visuell miteinander zu verbinden.
- Vorschau auf allen Geräten. Ein Layout, das auf dem Desktop perfekt aussieht, kann auf dem Handy zu eng oder zu locker wirken. Prüfen Sie immer die mobile Vorschau.
- Denken Sie an Rand und Füllung. Der Rand fügt Platz außerhalb eines Blocks hinzu, während die Auffüllung Platz innerhalb des Blocks schafft. Passen Sie beides entsprechend Ihren Layoutanforderungen an.
- Bleiben Sie proportional. In der Regel sollten Sie zwischen größeren Abschnitten einen Abstand von 40-60 px einhalten und innerhalb gruppierter Inhalte kleinere Abstände einhalten.
Wenn Sie die Abstände bewusst und einheitlich halten, wirken Ihre Seiten ausgefeilt, professionell und sind leichter zu lesen.
FAQs über WordPress-Blockabstände
Hier finden Sie einige kurze Antworten auf häufige Fragen zum Hinzufügen oder Entfernen von Leerzeichen zwischen Blöcken in WordPress.
Die richtige Gestaltung des Weißraums kann den Eindruck Ihrer Website völlig verändern. Wenn Ihr Inhalt Platz zum Atmen hat, ist er leichter zu lesen und sieht insgesamt besser aus.
Ganz gleich, ob Sie den Block-Editor verwenden, ein wenig CSS hinzufügen oder die Seiten mit SeedProd visuell erstellen, der Schlüssel ist Konsistenz. Wenn Sie einmal ausgewogene Abstandswerte gefunden haben, sollten Sie diese auf Ihrer gesamten Website beibehalten, um ein kohärentes Erlebnis für die Besucher zu schaffen.
Wenn Sie Ihre Layouts weiter verbessern möchten, finden Sie hier einige hilfreiche Anleitungen:
- Wie man einen Box Shadow in WordPress hinzufügt
- Wie man Seitentitel in WordPress ausblendet
- Wie man das Blog-Layout in WordPress ändert
- Wie man eine Seite in WordPress auf volle Breite bringt
Vielen Dank fürs Lesen! Wir würden uns freuen, Ihre Meinung zu hören. Bitte beteiligen Sie sich an der Konversation auf YouTube, X und Facebook, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.
