Abstand vs. Rand – Was ist der Unterschied in WordPress?

In WordPress ist der Abstand der Raum zwischen dem Inhalt und dem Rand innerhalb eines Blocks, während der Rand der Raum zwischen zwei separaten Blöcken ist.

Das Verständnis des Unterschieds zwischen beiden ist wichtig für jeden, der das Layout seiner WordPress-Website verfeinern möchte.

Wir haben vielen Benutzern geholfen, ihre Websites zu gestalten, und eine Sache, auf die wir uns immer konzentrieren, ist der Abstand. Hier helfen Ränder und Innenabstand wirklich. Richtig eingesetzt, verbessern sie die Lesbarkeit und verleihen Ihrer Website ein sauberes, ausgewogenes Aussehen.

In diesem Artikel zeigen wir Ihnen den Unterschied zwischen den Funktionen für Innenabstand und Rand und wie Sie diese in WordPress verwenden.

Hier ist ein kurzer Überblick darüber, was wir in diesem Leitfaden behandeln werden:

Was ist Abstand in WordPress?

Die Abstandsfunktion auf Ihrer WordPress-Website wird verwendet, um Platz innerhalb eines Blocks zu schaffen.

Sie können beispielsweise Platz innerhalb eines Textblocks hinzufügen, um dessen Layout optisch ansprechender zu gestalten. Außerdem verhindert dies, dass der Text zu nahe an den Rändern des Blocks erscheint.

Sie können auch Innenabstand verwenden, um zu steuern, wie der Inhalt auf Ihrem WordPress-Blog fließt.

Wenn Sie beispielsweise einem Textblock oben und unten einen Innenabstand hinzufügen, können Besucher den Inhalt leichter lesen.

Was ist ein Rand in WordPress?

Ein Rand ist ein Abstand um den Rand eines WordPress-Blocks und seiner umgebenden Elemente.

Dies kann Ihnen helfen, Platz zwischen zwei verschiedenen Blöcken hinzuzufügen und so ein saubereres und offeneres Website-Layout zu schaffen.

Sie können beispielsweise einem Bildblock einen Rand hinzufügen, um etwas Freiraum zwischen ihm und einem Textblock darunter zu schaffen. Dies hilft, Ihr Layout sauberer und organisierter aussehen zu lassen.

Was ist der Unterschied zwischen Innenabstand und Außenabstand in WordPress?

Hier ist eine kurze Liste der Unterschiede zwischen den Abstands- und Randfunktionen in WordPress:

Abstand	Rand
Polsterung bedeutet, Abstand zwischen dem Inhalt und dem Rand des Blocks hinzuzufügen.	Die Randfunktion fügt Platz außerhalb des Blocks hinzu.
Das Hinzufügen von Innenabstand vergrößert die Größe des Blocks.	Die Verwendung eines Rands beeinflusst andere Blöcke auf Ihrer Website.
Abstand erzeugt einen Puffer innerhalb des Blocks, zwischen dem Inhalt und seinem Rand.	Ränder können Platz zwischen zwei verschiedenen Blöcken schaffen.

So verwenden Sie Innenabstand in WordPress

Standardmäßig verfügt der WordPress Full Site Editor (FSE) über die Abstandsfunktion.

Beachten Sie jedoch, dass Sie, wenn Sie kein blockbasiertes Theme verwenden, keine Polsterung zu Ihrer WordPress-Website hinzufügen können, es sei denn, Sie verwenden benutzerdefiniertes CSS.

Wenn Sie jedoch ein Block-Theme haben, können Sie die Seite Darstellung » Editor in der Seitenleiste der WordPress-Administration aufrufen, um den vollständigen Website-Editor zu starten.

Wählen Sie dort im Seitenbereich „Vorlagen“ die Vorlage aus, zu der Sie Ihren Blöcken einen Abstand hinzufügen möchten. Dieser Seitenbereich zeigt alle Vorlagen für verschiedene Seiten Ihrer Website an.

Nachdem Sie dies getan haben, öffnet sich die von Ihnen gewählte Vorlage auf dem Bildschirm.

Klicken Sie von hier aus auf die Schaltfläche „Bearbeiten“, um mit der Anpassung Ihrer Seiten-Vorlage im vollständigen Website-Editor zu beginnen.

Wählen Sie als Nächstes den Block aus, zu dem Sie Innenabstand hinzufügen möchten. Denken Sie daran, dass Sie dadurch Platz zwischen dem Inhalt und dem Rahmen des Blocks schaffen.

Dies öffnet die Einstellungen des Blocks im Block-Panel auf der rechten Seite des Bildschirms.

Scrollen Sie von hier aus nach unten zum Abschnitt „Dimensionen“ und klicken Sie auf das Drei-Punkte-Menü. Dies öffnet ein Dialogfeld, in dem Sie die Option „Abstand“ auswählen müssen.

Verwenden Sie als Nächstes einfach die beiden Schieberegler, um Ihrem Block horizontalen und vertikalen Innenabstand hinzuzufügen.

Beachten Sie, dass diese Schieberegler allen Seiten des Blocks einen Abstand hinzufügen.

Wenn Sie jedoch nur oben, unten, links oder rechts vom Block einen Abstand hinzufügen möchten, können Sie dies auch tun, indem Sie im Abstandsabschnitt auf das Symbol „Abstandsoptionen“ klicken.

Dies öffnet eine Eingabeaufforderung, von der aus Sie die verschiedenen Seiten des Blocks auswählen können, zu denen Sie Innenabstand hinzufügen möchten.

Beachten Sie, dass Sie, wenn Sie mehr als einer Seite des Blocks unterschiedliche Innenabstände hinzufügen möchten, die Option „Benutzerdefiniert“ auswählen müssen.

Dies ermöglicht es Ihnen, benutzerdefinierte Polsterungen für die Ober-, Rechts-, Unter- und linke Seite des Blocks festzulegen.

Wenn Sie fertig sind, klicken Sie einfach auf die Schaltfläche „Speichern“, um Ihre Einstellungen zu speichern.

So verwenden Sie Ränder in WordPress

Genau wie der Innenabstand ist die Randfunktion in den Full Site Editor von WordPress integriert. Beachten Sie jedoch, dass diese Funktion nicht verfügbar ist, wenn Sie kein Block-Theme verwenden.

Der Prozess zum Hinzufügen von Rändern ist dem Hinzufügen von Innenabstand sehr ähnlich.

Sie können beginnen, indem Sie zu Darstellung » Editor gehen und die Vorlage öffnen, die Sie anpassen möchten, genau wie wir es im obigen Abschnitt getan haben.

Wählen Sie von hier aus einfach die Schaltfläche „Bearbeiten“, um mit der Anpassung Ihrer Vorlage im Full Site Editor zu beginnen.

Wählen Sie als Nächstes den Block aus, den Sie bearbeiten möchten, und scrollen Sie im Blockbedienfeld auf der rechten Seite nach unten zum Abschnitt „Abmessungen“.

Von hier aus können Sie die beiden Schieberegler verwenden, um gleiche horizontale und vertikale Ränder für alle Seiten des Blocks festzulegen. Diese Funktion schafft Platz um den von Ihnen gewählten Block.

Sie können jedoch auch mehrere Schieberegler verwenden, um unterschiedliche Abstände um den Block hinzuzufügen. Klicken Sie dazu in dem Abschnitt auf das Symbol „Abstandsoptionen“.

Dies öffnet eine neue Eingabeaufforderung auf dem Bildschirm, von der aus Sie eine Seite des Blocks auswählen können, um einen Rand hinzuzufügen.

Wenn Sie jedoch unterschiedliche Ränder zu mehreren Seiten hinzufügen möchten, können Sie die Option „Benutzerdefiniert“ auswählen.

Das Block-Panel zeigt nun verschiedene Schieberegler auf dem Bildschirm an, mit denen Sie unterschiedliche Ränder um den Block herum festlegen können.

Wenn Sie fertig sind, vergessen Sie nicht, oben auf die Schaltfläche 'Speichern' zu klicken, um Ihre Einstellungen zu speichern.

Weitere Tipps für die Bearbeitung der gesamten Website in WordPress

Neben dem Hinzufügen von Abständen und Rändern zu Ihren Blöcken können Sie den Full Site Editor auch verwenden, um Ihr gesamtes WordPress-Theme anzupassen.

Zum Beispiel können Sie alle Ihre Seiten-Vorlagen gestalten, Ihr eigenes benutzerdefiniertes Logo hinzufügen, Markenfarben auswählen, das Layout ändern, die Schriftgröße anpassen, Hintergrundbilder hinzufügen und mehr.

Sie können Ihrem Website auch Muster und verschiedene Blöcke hinzufügen, um sie weiter anzupassen. Details finden Sie in unserem Anfängerleitfaden unter wie Sie Ihr WordPress-Theme anpassen.

Sie können FSE auch verwenden, um einen Header, ein Navigationsmenü oder benutzerdefiniertes CSS zu Ihrer Website hinzuzufügen.

Zusätzlich können Sie globale Stile verwenden, um die Konsistenz auf Ihrer gesamten Website zu gewährleisten. Weitere Anweisungen finden Sie in unserem Leitfaden zur Anpassung der Farben auf Ihrer WordPress-Website.

Wenn Sie den Full Site Editor jedoch nicht mögen und mehr Kontrolle über das Erscheinungsbild Ihrer Website wünschen, können Sie SeedProd verwenden, um Seiten und sogar Ihr gesamtes Theme zu erstellen.

Es verfügt über einen Drag-and-Drop-Builder, mit dem Sie ganz einfach ein beeindruckendes Theme für Ihre Website erstellen können.

Weitere Details finden Sie in unserem Tutorial zum einfachen Erstellen eines benutzerdefinierten WordPress-Themes.

Möglicherweise möchten Sie auch unseren vollständigen SeedProd-Testbericht lesen.

Häufig gestellte Fragen

Hier sind einige Fragen, die unsere Leser häufig zum Innenabstand und Außenabstand in WordPress stellen:

Was ist der Hauptunterschied zwischen Innenabstand und Rand?

Der einfachste Weg, sich den Unterschied zu merken, ist, dass der Innenabstand (Padding) der Raum innerhalb eines Elements ist, zwischen dem Inhalt und seinem Rahmen.

Außenabstand ist der Platz außerhalb eines Elements, der Abstand zwischen ihm und anderen benachbarten Elementen schafft.

Wann sollte ich Innenabstand anstelle eines Randes verwenden?

Sie sollten Abstände verwenden, wenn Sie mehr Freiraum um den Inhalt innerhalb eines Blocks schaffen müssen.

Sie könnten beispielsweise einem Gruppenblock eine Polsterung hinzufügen, damit der Text darin die Ränder nicht berührt. Verwenden Sie einen Rand, wenn Sie zwei separate Blöcke voneinander wegdrücken müssen.

Kann ich Innenabstand und Ränder mit einem klassischen WordPress-Theme anpassen?

Die visuellen Steuerelemente für Abstand und Rand sind Teil des Vollständigen Website-Editors und nur in Block-Themes verfügbar.

Mit einem klassischen Theme müssten Sie benutzerdefinierten CSS-Code hinzufügen, um den Abstand für verschiedene Elemente auf Ihrer Website anzupassen.

Was ist der Unterschied zwischen den Einstellungen für Rand und Blockabstand?

Blockabstand ist eine globale Einstellung, die automatisch einen konsistenten vertikalen Abstand zwischen allen Blöcken anwendet.

Ein Außenabstand ist eine Einstellung, die Sie auf einen einzelnen Block anwenden, um benutzerdefinierten Platz darum herum hinzuzufügen, was die globale Blockabstandseinstellung überschreiben kann.

Wir hoffen, dieser Artikel hat Ihnen geholfen, den Unterschied zwischen den Padding- und Margin-Funktionen in WordPress zu verstehen. Möglicherweise sind Sie auch an unserem Anfängerleitfaden zum Ändern der Blockhöhe und -breite in WordPress und unseren Top-Auswahlen für die besten Gutenberg-Block-Plugins für WordPress interessiert.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.