In WordPress ist der Innenabstand der Abstand zwischen dem Inhalt und dem Rand innerhalb eines Blocks, während ein Außenabstand der Abstand zwischen zwei separaten Blöcken ist.
Das Verständnis des Unterschieds zwischen den beiden ist wichtig für jeden, der das Design und Layout seiner WordPress Website verfeinern möchte.
Bei WPBeginner haben wir viel Erfahrung mit der Erstellung von Websites und eCommerce-Shops auf WordPress. Dadurch haben wir ein tieferes Verständnis für die verschiedenen Designelemente, die die Plattform bietet, einschließlich Innenabstände und Außenabstände.
In diesem Artikel zeigen wir Ihnen den Unterschied zwischen den Funktionen Innenabstand und Außenabstände und wie man sie in WordPress verwendet.
Was ist Padding in WordPress?
Die Padding-Funktion auf Ihrer WordPress-Website wird verwendet, um Platz innerhalb eines Blocks zu schaffen.
So können Sie beispielsweise innerhalb eines Textblocks Platz hinzufügen, um das Layout optisch ansprechender zu gestalten und zu verhindern, dass der Text zu dicht an den Blockrändern erscheint.
Sie können die Füllung auch verwenden, um den Fluss des Inhalts in Ihrem WordPress-Blog zu steuern. Wenn Sie z. B. den oberen und unteren Teil eines Textblocks auffüllen, können Sie den Besuchern das Lesen des Inhalts erleichtern.
Was ist ein Außenabstand in WordPress?
Ein Außenabstand ist ein Leerzeichen um den Rand eines WordPress-Blocks und der ihn umgebenden Elemente.
Auf diese Weise können Sie Leerzeichen zwischen zwei verschiedenen Blöcken einfügen und so ein übersichtlicheres und offeneres Layout der Website erstellen.
Sie können zum Beispiel oben und unten an einem Textblock Ränder hinzufügen, damit er auch bei einer Größenänderung des Bildschirms sichtbar bleibt.
Darüber hinaus können Sie auch Ränder verwenden, um Platz zwischen Bild- und Textblöcken hinzuzufügen, um Ihre Website optisch ansprechend und für die Nutzer leichter zugänglich zu machen.
Was ist der Unterschied zwischen Innenabständen und Außenabständen in WordPress?
Hier ist eine kurze Liste der Unterschiede zwischen den Funktionen Innenabstand und Außenabstand in WordPress:
| Padding | Margin |
|---|---|
| Padding means adding space between the content and the border of the block. | The margin feature adds space outside the border of the block. |
| Using padding does not affect the other blocks on your website. | Using a margin affects other blocks on your website. |
| Padding can create a buffer around a block. | Margins can create space between two different blocks. |
Wie man Padding in WordPress verwendet
Der WordPress Full Site Editor (FSE) ist standardmäßig mit der Padding-Funktion ausgestattet.
Beachten Sie jedoch, dass Sie, wenn Sie kein blockbasiertes Theme verwenden, Ihrer WordPress-Website keine Polsterung hinzufügen können, es sei denn, Sie verwenden benutzerdefiniertes CSS.
Wenn Sie jedoch ein Block-Theme haben, können Sie die Seite Design “ Editor in der Seitenleiste des WordPress-Administrators aufrufen, um den vollständigen Website-Editor zu starten.
Dort wählen Sie in der linken Seitenleiste „Vorlagen“ einfach die Seitenvorlage aus, in der Sie Ihren Blöcken Polsterungen hinzufügen möchten. In dieser Seitenleiste werden alle Vorlagen für die verschiedenen Seiten Ihrer Website angezeigt.
Danach wird die von Ihnen gewählte Vorlage auf dem Bildschirm angezeigt.
Klicken Sie hier auf die Schaltfläche „Bearbeiten“, um mit der Anpassung Ihrer Seitenvorlage im vollständigen Site-Editor zu beginnen.
Wählen Sie dann den Block aus, in dem Sie eine Auffüllung hinzufügen möchten. Denken Sie daran, dass dies bedeutet, dass Sie Platz zwischen dem Inhalt und dem Rand des Blocks schaffen werden.
Dadurch werden die Einstellungen des Blocks in der Blocktafel auf der rechten Seite des Bildschirms geöffnet.
Von hier aus müssen Sie nach unten zum Abschnitt „Abmessungen“ scrollen und auf das Menü mit den drei Punkten klicken. Daraufhin öffnet sich eine Eingabeaufforderung, in der Sie die Option „Auffüllung“ auswählen müssen.
Als Nächstes verwenden Sie die beiden Schieberegler, um Ihrem Block horizontale und vertikale Füllung hinzuzufügen.
Beachten Sie, dass diese Schieberegler alle Seiten des Blocks aufpolstern.
Wenn Sie jedoch nur die obere, untere, linke oder rechte Seite des Blocks auffüllen möchten, können Sie dies auch tun, indem Sie auf das Symbol „Auffülloptionen“ im Auffüllbereich klicken.
Daraufhin wird eine Eingabeaufforderung geöffnet, in der Sie die verschiedenen Seiten des Blocks auswählen können, denen Sie Polsterungen hinzufügen möchten.
Beachten Sie, dass Sie die Option „Benutzerdefiniert“ wählen müssen, wenn Sie mehr als einer Seite des Blocks unterschiedliche Abstände hinzufügen möchten.
Dadurch werden auf dem Bildschirm vier verschiedene Schieberegler eingeblendet, mit denen der Block rechts, links, unten oder oben aufgefüllt werden kann.
Wenn Sie fertig sind, klicken Sie einfach auf die Schaltfläche „Speichern“, um Ihre Einstellungen zu speichern.
Wie man Außenabstände in WordPress verwendet
Genau wie der Innenabstand ist die Funktion des Außenabstands in den WordPress Editor für Websites integriert. Beachten Sie jedoch, dass diese Funktion nicht verfügbar ist, wenn Sie kein Block-Theme verwenden.
Gehen Sie dazu vom WordPress-Dashboard aus auf die Seite Design “ Editor.
Dort wählen Sie in der linken Spalte die Seitenvorlage aus, zu der Sie Ränder hinzufügen möchten.
Dadurch wird die von Ihnen gewählte Seitenvorlage auf dem Bildschirm geöffnet.
Wählen Sie hier einfach die Schaltfläche „Bearbeiten“, um mit der Anpassung Ihrer Vorlage im vollständigen Site-Editor zu beginnen.
Wählen Sie dann den Block aus, den Sie bearbeiten möchten, und blättern Sie im Blockbedienfeld auf der rechten Seite nach unten zum Abschnitt „Abmessungen“.
Verwenden Sie hier einfach die beiden Schieberegler, um die horizontalen und vertikalen Ränder für die oberen, unteren, linken und rechten Ecken des Blocks gleichmäßig einzustellen. Mit dieser Funktion wird um den von Ihnen gewählten Block herum Platz geschaffen.
Wenn Sie jedoch mehrere Schieberegler verwenden möchten, um unterschiedliche Ränder um den Block herum hinzuzufügen, klicken Sie auf das Symbol „Randoptionen“ in diesem Abschnitt.
Daraufhin wird eine neue Eingabeaufforderung auf dem Bildschirm geöffnet, in der Sie eine Seite des Blocks auswählen können, um einen Rand hinzuzufügen.
Wenn Sie jedoch mehrere Seiten mit unterschiedlichen Rändern versehen möchten, können Sie die Option „Benutzerdefiniert“ wählen.
Im Blockbedienfeld werden nun verschiedene Schieberegler angezeigt, mit denen Sie verschiedene Ränder um den Block herum einstellen können.
Wenn Sie fertig sind, vergessen Sie nicht, oben auf die Schaltfläche „Speichern“ zu klicken, um Ihre Einstellungen zu speichern.
Weitere Tipps zur vollständigen Bearbeitung von Websites in WordPress
Neben dem Hinzufügen von Füllungen und Rändern zu Ihren Blöcken können Sie auch den vollständigen Site-Editor verwenden, um Ihr gesamtes WordPress-Theme anzupassen.
Sie können zum Beispiel alle Ihre Seitenvorlagen gestalten, Ihr eigenes benutzerdefiniertes Logo hinzufügen, Markenfarben auswählen, das Layout ändern, die Schriftgröße anpassen, Hintergrundbilder hinzufügen und vieles mehr.
Sie können auch Vorlagen und verschiedene Blöcke zu Ihrer Website hinzufügen, um sie noch individueller anzupassen. Weitere Informationen finden Sie in unserem Leitfaden für Einsteiger, wie Sie Ihr WordPress Theme individuell anpassen können.
Sie können die FSE auch verwenden, um eine Kopfzeile, ein Navigationsmenü oder benutzerdefiniertes CSS zu Ihrer Website hinzuzufügen.
Darüber hinaus können Sie globale Stile verwenden, um die Konsistenz Ihrer Website zu gewährleisten. Weitere Anweisungen finden Sie in unserem Leitfaden zur individuellen Anpassung von Farben auf Ihrer WordPress Website.
Wenn Sie jedoch den vollständigen Site-Editor nicht verwenden möchten und mehr Kontrolle über das Erscheinungsbild Ihrer Website wünschen, können Sie SeedProd verwenden, um Seiten und sogar Ihr gesamtes Thema zu erstellen.
Es ist der beste Page-Builder für Landing Pages auf dem Markt und verfügt über einen Drag-and-drop-Builder. Das macht es super einfach, ein tolles Theme für Ihre Website zu erstellen.
Weitere Einzelheiten finden Sie in unserem Tutorial zur einfachen Erstellung eines benutzerdefinierten WordPress-Themes.
Wir hoffen, dieser Artikel hat Ihnen geholfen, den Unterschied zwischen den Funktionen Innenabstand und Außenabstand in WordPress zu verstehen. Vielleicht interessieren Sie sich auch für unseren Leitfaden für Einsteiger zum Ändern der Höhe und Breite von Blöcken in WordPress und unsere Top-Picks für die besten Gutenberg-Block Plugins für WordPress.
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.
Jiří Vaněk
These are exactly those details that a person doesn’t often remember and then tries to figure out what that slider actually does. Thanks to the mentioned GIFs, it’s beautifully explained what padding and margin specifically do. It’s superb. It’s like a mnemonic aid. What you read, you usually forget, but what you see, you tend to remember much better.
A Owadud Bhuiyan
I always just remembered that the margin is from the outside and padding from the inside.
Also, I kept remembering that margin is an important factor regarding the responsive issue on a website.