So ändern Sie Ränder in WordPress (Anfängerleitfaden)

Das Ändern von Abständen in WordPress ist eine einfache Möglichkeit, das Design Ihrer Website zu verbessern. Abstände schaffen Platz zwischen Elementen und machen Ihre Inhalte besser lesbar und optisch ansprechender.

Als allgemeine Best Practice verwenden wir immer Ränder und Abstände, wenn wir unsere WordPress-Websites gestalten. Wir haben festgestellt, dass dies einen positiven Einfluss darauf hat, wie Benutzer mit unseren Webseiten und Inhalten interagieren.

In diesem Anfängerleitfaden zeigen wir Ihnen, wie Sie Ränder in WordPress hinzufügen und anpassen. Wir erklären Ihnen verschiedene Methoden zum Ändern von Rändern in verschiedenen Bereichen Ihrer WordPress-Website.

Was sind Ränder (Margins) in WordPress und Webdesign?

Ränder sind der Abstand, der um eine Webseite oder andere Elemente innerhalb einer Webseite hinzugefügt wird.

Stellen Sie sich eine typische Webseite als leeres Blatt Papier vor. Ränder sind der weiße oder leere Raum um die Kanten des Papiers.

Der Zweck der Verwendung von Rändern besteht darin, sicherzustellen, dass Elemente innerhalb einer Webseite nicht gequetscht aussehen.

Ebenso können Ränder um verschiedene Elemente innerhalb des Seitenlayouts verwendet werden.

Sie können beispielsweise Ränder um Bilder ändern, damit diese nicht zu nah am Text sind, oder einen Rand hinzufügen, um Platz zwischen Ihrem Inhaltsbereich und der Seitenleiste zu schaffen.

In diesem Artikel werden wir viele Informationen behandeln. Klicken Sie auf die untenstehenden Links, um zu jedem gewünschten Abschnitt zu springen.

• Was ist der Unterschied zwischen Rand und Innenabstand?
• Warum Sie Abstände in WordPress hinzufügen oder ändern müssen?
• Wie fügt man Ränder in WordPress hinzu?
• Hinzufügen von Rändern in WordPress mit dem Full Site Editor
• Ränder im Block-Editor hinzufügen
• Ränder in WordPress mit SeedProd hinzufügen
• Ränder mit Thrive Architect ändern
• Ränder in WordPress mit CSS-Code ändern
• Hinzufügen und Ändern von Rändern mit benutzerdefiniertem CSS im WordPress-Theme
• Benutzerdefiniertes CSS zur Änderung von Abständen im Website-Editor
• Hinzufügen von Abständen mit CSS im Theme Customizer
• Ränder mit benutzerdefiniertem CSS-Code mit WPCode ändern
• Häufig gestellte Fragen zu Rändern in WordPress

Was ist der Unterschied zwischen Rand und Innenabstand?

Ränder und Abstände werden beide verwendet, um Weißraum im Webdesign hinzuzufügen. Sie werden jedoch sehr unterschiedlich verwendet.

Ränder fügen leeren Raum außerhalb eines Elements hinzu, während Innenabstände leeren Raum innerhalb eines Elements hinzufügen.

Ränder werden verwendet, um Abstand außerhalb eines Elements hinzuzufügen. Sie ermöglichen es Ihnen, sicherzustellen, dass genügend Platz zwischen den Elementen auf einer Webseite vorhanden ist.

Nun werfen wir einen Blick auf einige Beispiele, wann Ränder verwendet werden sollten.

1. Hinzufügen von Rändern, um den Abstand zwischen einem Bild und Text in einem Artikel zu vergrößern.

2. Anpassen von Rändern, um Abstand zwischen Abschnitten zu schaffen, z. B. zwischen dem Header und dem Inhaltsbereich.

Padding hingegen wird verwendet, um einen Pufferbereich zwischen Inhalt und den Rändern einer Box oder eines Elements hinzuzufügen.

Hier sind einige Beispiele, wann Sie zusätzliche Abstände verwenden möchten.

1. Anpassen des Abstands, um den Polsterbereich in Ihren Call-to-Action-Schaltflächen zu vergrößern.

2. Erhöhen des Innenabstands in einer Textspalte

Sowohl Innenabstand als auch Ränder werden im Webdesign häufig verwendet.

Leerräume verleihen jedem Design Luft, was es benutzerfreundlicher und eleganter macht.

Weitere Details finden Sie in unserem Tutorial über den Unterschied zwischen Abständen und Rändern in WordPress.

Warum Sie Abstände in WordPress hinzufügen oder ändern müssen?

Ränder sind ein entscheidender Aspekt des Webdesigns. Sie sorgen dafür, dass Ihre Website ansprechend und benutzerfreundlich aussieht.

Nach unserer Erfahrung mit A/B-Tests haben wir festgestellt, dass der strategische Einsatz von Weißraum oft einen positiven Einfluss auf die Konversionen hat.

Wenn Sie ein saubereres, besser organisiertes Design erstellen, bleiben Benutzer eher länger auf der Website und führen gewünschte Aktionen aus.

WordPress-Themes kümmern sich um das Design Ihrer WordPress-Website. Die meisten von ihnen leisten bereits hervorragende Arbeit bei der Festlegung von CSS-Regeln, um viel Weißraum durch Ränder im Layout Ihres Themes zu gewährleisten.

Dennoch müssen Sie möglicherweise gelegentlich Abstände hinzufügen, um Dinge anzupassen.

Zum Beispiel mögen Sie vielleicht den Rand um Ihre Navigationsmenüs nicht oder möchten mehr Rand um Ihre Call-to-Action-Buttons hinzufügen.

Ähnlich kann es Ihnen manchmal vorkommen, dass Elemente zu nah beieinander oder zu weit voneinander entfernt sind.

In diesem Fall müssen Sie die Ränder in WordPress selbst ändern.

Wie fügt man Ränder in WordPress hinzu?

Es gibt viele Möglichkeiten, Abstände in WordPress hinzuzufügen.

Je nachdem, wo Sie einen Rand hinzufügen möchten und welche Optionen Ihr WordPress-Theme bietet, müssen Sie eine Methode wählen, die für Sie funktioniert.

Beginnen wir mit den standardmäßigen integrierten Optionen in WordPress selbst, da diese für Anfänger am einfachsten sind.

Hinzufügen von Rändern in WordPress mit dem Full Site Editor

Wenn Sie ein blockbasiertes Theme mit Unterstützung für den Full Site Editor verwenden, können Sie den integrierten Website-Editor verwenden, um Ränder überall auf Ihrer WordPress-Website zu ändern.

Eine einfache Möglichkeit, dies zu überprüfen, ist ein Blick auf Ihr WordPress-Dashboard. Wenn Sie Darstellung » Editor sehen, dann haben Sie ein blockbasiertes Theme. Wenn Sie stattdessen Darstellung » Anpassen sehen, können Sie zu einer anderen Methode unten springen.

Zuerst müssen Sie zu Darstellung » Editor gehen, um den Website-Editor zu starten.

Klicken Sie im Website-Editor auf eine Vorlage in der linken Spalte oder klicken Sie irgendwo in das Vorschaufenster.

Klicken Sie als Nächstes auf den Bereich oder das Element, dessen Ränder Sie ändern möchten. In der rechten Spalte sehen Sie unter dem Tab 'Stil' die Option zum Anpassen der Ränder.

Wenn Sie die Ränder anpassen, hebt der Editor den Randbereich hervor.

Sie können auch Ränder oben, unten, rechts oder links hinzufügen.

Ränder im Block-Editor hinzufügen

Wenn Sie an einem Blogbeitrag oder einer Seite arbeiten, verwenden Sie den Block-Editor.

Der Block-Editor in WordPress ermöglicht es Ihnen, Abstände für verschiedene Blöcke hinzuzufügen und zu ändern.

Klicken Sie einfach auf den Block, an dem Sie Abstände hinzufügen/anpassen möchten. Wechseln Sie unter den Blockeinstellungen zum Tab „Stil“ und scrollen Sie nach unten zur Option „Dimensionen“ oder „Abstände“.

Ränder in WordPress mit SeedProd hinzufügen

SeedProd ist das beste WordPress-Page-Builder-Plugin auf dem Markt. Es ermöglicht Ihnen, ganz einfach benutzerdefinierte Seiten für Ihre Website zu erstellen.

Sie können ihn sogar verwenden, um ein benutzerdefiniertes WordPress-Theme von Grund auf neu zu erstellen.

Mehrere unserer Partner-Marken haben ihre gesamten Websites mit SeedProd gestaltet und lieben es. Um mehr zu erfahren, lesen Sie unsere vollständige SeedProd-Bewertung.

SeedProds intuitiver Drag-and-Drop-Seitenersteller ermöglicht es Ihnen, die Ränder für jedes Element im Editor einfach anzupassen.

Zuerst müssen Sie das SeedProd Plugin installieren und aktivieren. Weitere Details finden Sie in unserem Tutorial zur Installation eines WordPress-Plugins.

Als Nächstes müssen Sie zu SeedProd » Landing Pages navigieren und dann auf die Schaltfläche „Neue Landing Page hinzufügen“ klicken.

Danach werden Sie aufgefordert, eine Vorlage für Ihre Seite auszuwählen.

SeedProd bietet Dutzende von fertigen Vorlagen, die Sie als Ausgangspunkt verwenden können, oder Sie können mit einer leeren Vorlage beginnen.

Klicken Sie, um Ihre Vorlage auszuwählen, und geben Sie dann einen Namen für Ihre Landing Page ein.

Dies startet den Seitenersteller von SeedProd.

Sie sehen eine Live-Vorschau Ihrer Seite auf der rechten Seite. Und Elemente, die Sie Ihrer Seite hinzufügen können, in der linken Spalte.

Sie können auf jedes Element auf der Seite zeigen und klicken, um es zu bearbeiten.

Wenn Sie auf ein Element klicken, wird es ausgewählt und Sie sehen seine Optionen in der linken Spalte. Wechseln Sie von hier aus zur Registerkarte „Erweitert“ und klicken Sie auf die Option „Abstand“.

Von hier aus können Sie Ränder und Innenabstände für das ausgewählte Element ändern.

Wenn Sie mit der Bearbeitung Ihrer Seite fertig sind, vergessen Sie nicht, oben rechts auf die Schaltfläche „Speichern“ und „Veröffentlichen“ zu klicken.

Danach können Sie Ihre Website besuchen, um die Änderungen in Aktion zu sehen.

Ränder mit Thrive Architect ändern

Thrive Architect ist ein benutzerfreundlicher WordPress Page Builder, mit dem Sie eine Drag-and-Drop-Oberfläche verwenden können, um WordPress-Seiten zu gestalten.

Während des Tests haben wir festgestellt, dass es über 300 Vorlagen gibt, die Sie als Ausgangspunkt verwenden können. Außerdem können Sie es auch zum Bearbeiten Ihrer WordPress-Beiträge und -Seiten verwenden und dabei das Layout und den Stil Ihres vorhandenen WordPress-Themes übernehmen.

Um mehr zu erfahren, lesen Sie unsere vollständige Thrive Architect-Bewertung.

Um Thrive Architect zu installieren, müssen Sie sich zuerst in Ihr Konto auf der Thrive Themes-Website einloggen.

Von dort aus müssen Sie das Thrive Product Manager-Plugin herunterladen und installieren. Weitere Details finden Sie in unserem Tutorial zur Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie die Seite Thrive Product Manager besuchen.

Klicken Sie auf die Schaltfläche 'In mein Konto einloggen', um WordPress mit Ihrem Thrive Themes-Konto zu verbinden.

Nach der Verbindung sehen Sie die Liste der verfügbaren Thrive Themes-Produkte unter Ihrem Konto.

Klicken Sie auf das Kontrollkästchen 'Produkt installieren' unter Thrive Architect und dann auf die Schaltfläche 'Ausgewählte Produkte installieren' unten.

Thrive Product Manager wird nun das Thrive Architect-Plugin für Sie installieren.

Danach können Sie einen neuen WordPress-Beitrag oder eine neue Seite bearbeiten oder erstellen und auf die Schaltfläche 'Mit Thrive Architect bearbeiten' oder 'Thrive Architect starten' klicken.

Thrive Architect wird Sie auffordern, eine Vorlage auszuwählen, wenn es sich um eine neue Seite handelt.

Sie können Ihre Theme-Vorlage verwenden, um eine „Normale Seite“ oder eine Vorlage für eine „Vorgefertigte Landing Page“ zu erstellen.

Wenn Sie eine Option für 'Vorgefertigte Landingpage' wählen, zeigt Ihnen das Plugin eine Reihe von Vorlagen zur Auswahl an.

Klicken Sie einfach, um diejenige auszuwählen, die dem ähnelt, was Sie erstellen möchten.

Ob es sich um eine normale Seite (mit den Stilen Ihres Themes) oder eine Landingpage handelt, der Page Builder von Thrive Architect bietet dieselben Funktionen.

Sie sehen eine Live-Vorschau Ihrer Seite mit einer Symbolleiste auf der rechten Seite und einem Einstellungsbereich auf der linken Seite.

Sie können mit der Maus auf ein Element zeigen und es anklicken, um es auszuwählen. Oder klicken Sie auf die Schaltfläche Hinzufügen [+] in der Symbolleiste, um ein neues Element hinzuzufügen.

Sobald Sie auf ein Element klicken, um es auszuwählen und zu bearbeiten, werden seine Einstellungen in der linken Spalte angezeigt.

Klicken Sie von hier aus auf die Registerkarte „Layout & Position“, um die Ränder und Abstände zu ändern.

Sie sehen eine visuelle Darstellung von Rand und Innenabstand.

Bewegen Sie Ihre Maus zu einer beliebigen Seite des Rands und ziehen Sie den Griff, um den Rand zu vergrößern oder zu verkleinern.

Sie können den Vorgang wiederholen, um die Ränder an jeder der vier Seiten zu ändern.

Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche 'Arbeit speichern' zu klicken und dann die Option 'Speichern und zum Beitragseditor wechseln' auszuwählen.

Sie können nun auf die Schaltfläche 'Veröffentlichen' oder 'Speichern' klicken, um Ihren WordPress-Beitrag oder Ihre Seite zu speichern.

Ränder in WordPress mit CSS-Code ändern

Diese Methode erfordert, dass Sie CSS-Code zu Ihrem WordPress-Theme hinzufügen. Sie benötigen außerdem ein sehr grundlegendes Verständnis von HTML und CSS.

Allerdings gibt Ihnen diese Methode mehr Flexibilität, da Sie manuell den Bereich auswählen können, in dem Sie Ränder hinzufügen oder anpassen möchten.

Hinzufügen und Ändern von Rändern mit benutzerdefiniertem CSS im WordPress-Theme

WordPress ermöglicht es Ihnen, benutzerdefiniertes CSS in Ihren WordPress-Theme-Optionen zu speichern. Je nach Ihrem WordPress-Theme gibt es jedoch mehrere Möglichkeiten, dies zu tun.

Bevor Sie Ränder mit CSS hinzufügen oder ändern, müssen Sie möglicherweise herausfinden, welches Element Sie mit Ihrem CSS-Code ansprechen müssen.

Wenn Sie beispielsweise die Ränder um den Hauptteil der Seite ändern möchten, können Sie den folgenden Code verwenden:

body { 
margin:50px; 
}

In diesem Code steht 'px' für Pixel, eine gängige Maßeinheit für Bildschirme. Die Verwendung der margin-Eigenschaft mit nur einem Wert wie diesem setzt den Rand für alle vier Seiten (oben, rechts, unten und links) gleichzeitig.

Der einfachste Weg, das anzusprechende Element zu finden, ist die Verwendung des Inspect-Tools in Ihrem Browser.

Öffnen Sie Ihre Website in einem neuen Browser-Tab und bewegen Sie die Maus über das Element, um das Sie Ränder ändern möchten. Klicken Sie dann mit der rechten Maustaste und wählen Sie 'Untersuchen' aus dem Browser-Menü.

Dies teilt Ihren Browserbildschirm, und Sie sehen den HTML-Code und das CSS hinter der Seite.

Sie können Ihre Maus über den Code bewegen, und Ihr Browser hebt den Bereich hervor, der davon betroffen ist.

Im Code sehen Sie das HTML-Element oder die CSS-Klasse, die Sie mit Ihrem benutzerdefinierten CSS ansprechen müssen. Betrachten Sie dies als die 'Adresse' für den spezifischen Teil der Seite, den Sie gestalten möchten.

Sie können hier sogar Ihre Ränder ausprobieren, um eine Vorschau anzuzeigen, wie es aussehen wird.

Diese Änderungen werden jedoch nicht in Ihrem Theme gespeichert und verschwinden, wenn Sie den Browser-Tab neu laden oder schließen.

Lassen Sie uns verschiedene Möglichkeiten durchgehen, wie Sie benutzerdefiniertes CSS in WordPress speichern können.

Benutzerdefiniertes CSS zur Änderung von Abständen im Website-Editor

Wenn Sie ein Block-Theme mit voller Website-Editor-Unterstützung verwenden. Dann können Sie hier benutzerdefiniertes CSS zu Ihrem Theme hinzufügen.

Gehen Sie zuerst zur Seite Darstellung » Editor, um den Website-Editor zu starten, und wechseln Sie dann zum Bereich „Stile“.

Klicken Sie am unteren Rand des Bedienfelds „Stile“ auf die Registerkarte „Zusätzliches CSS“.

Dies öffnet einen Texteditor, in den Sie Ihren benutzerdefinierten CSS-Code einfügen können. Ihr CSS-Code wird sofort angewendet, und Sie können die Änderungen auf dem Bildschirm sehen.

Wenn Sie mit den Änderungen zufrieden sind, vergessen Sie nicht, auf die Schaltfläche 'Speichern' zu klicken, um Ihre Änderungen zu speichern.

Hinzufügen von Abständen mit CSS im Theme Customizer

Wenn Sie ein klassisches Theme verwenden (ohne Unterstützung für den Website-Editor), können Sie Ihr benutzerdefiniertes CSS im Theme-Customizer speichern.

Gehen Sie zur Seite Darstellung » Anpassen, um den Theme-Customizer zu starten.

Der Customizer zeigt je nach Ihrem WordPress-Theme unterschiedliche Optionen an.

Sie müssen auf den Tab "Zusätzliches CSS" klicken, um ihn zu erweitern.

Der Tab wird verschoben, um Ihnen eine einfache Box anzuzeigen, in der Sie Ihr benutzerdefiniertes CSS hinzufügen können.

Sobald Sie eine gültige CSS-Regel hinzufügen, können Sie sehen, wie sie im Live-Vorschaufenster Ihrer Website angewendet wird.

Wenn Sie mit den Änderungen zufrieden sind, klicken Sie auf die Schaltfläche „Veröffentlichen“, um Ihre Änderungen zu speichern.

Ränder mit benutzerdefiniertem CSS-Code mit WPCode ändern

Der einfachste Weg, benutzerdefinierten CSS-Code in WordPress hinzuzufügen, ist die Verwendung des WPCode Plugins.

Es ist das beste WordPress-Code-Snippet-Plugin, mit dem Sie beliebigen CSS/HTML/PHP/JavaScript-Code zu Ihrer WordPress-Website hinzufügen können, ohne sie zu beschädigen.

Während unserer Bewertung fanden wir es super benutzerfreundlich. Um mehr über unsere Erfahrungen zu erfahren, lesen Sie unsere detaillierte WPCode-Bewertung.

Der Vorteil der Verwendung von WPCode ist, dass Sie Ihre CSS-Änderungen nicht verlieren, wenn Sie Ihr WordPress-Theme wechseln.

Das erste, was Sie tun müssen, ist das WPCode-Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in unserem Tutorial zur Installation eines WordPress-Plugins.

Gehen Sie nach der Aktivierung zur Seite Code Snippets » + Neu hinzufügen.

Bewegen Sie die Maus über die Option 'Add Your Custom Code (New Snippet)' in der Code-Snippet-Bibliothek und klicken Sie auf die Schaltfläche 'Use snippet'.

Fügen Sie als Nächstes oben auf der Seite einen Titel für Ihren benutzerdefinierten CSS-Snippet hinzu. Dies kann alles sein, was Ihnen hilft, den Code zu identifizieren.

Schreiben Sie danach Ihren benutzerdefinierten CSS-Code auf oder fügen Sie ihn in das Feld 'Code Preview' ein und legen Sie den 'Code Type' fest, indem Sie die Option 'CSS Snippet' aus dem Dropdown-Menü auswählen.

Wenn Sie beispielsweise die Abstände um den gesamten Seitenkörper der Webseite hinzufügen oder ändern möchten, können Sie den folgenden CSS-Code verwenden:

body { 
margin:50px;
}

Scrollen Sie als Nächstes nach unten zum Abschnitt „Einfügen“ und wählen Sie die Methode „Automatisch einfügen“, um den Code auf Ihrer gesamten WordPress-Website auszuführen.

Wenn Sie den Code nur auf bestimmten Seiten oder Beiträgen ausführen möchten, können Sie die Methode 'Shortcode' wählen.

Nun müssen Sie zum Anfang der Seite zurückkehren und den Schalter auf 'Aktiv' stellen.

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

Sie können Ihre Website jetzt besuchen, um Ihr benutzerdefiniertes CSS in Aktion zu sehen.

Häufig gestellte Fragen zu Rändern in WordPress

Hier sind einige häufig gestellte Fragen unserer Leser zum Hinzufügen von Rändern in WordPress:

Was ist der Hauptunterschied zwischen Rand und Innenabstand?

Der Rand ist der Raum außerhalb des Rahmens eines Elements, der Abstand zwischen ihm und anderen Elementen schafft. Der Innenabstand ist der Raum innerhalb des Rahmens eines Elements, der eine Polsterung zwischen dem Inhalt und dem Rahmen selbst schafft.

Stellen Sie sich den Rand als den Abstand zwischen Bilderrahmen an einer Wand vor und den Innenabstand als den Passepartout innerhalb eines einzelnen Bilderrahmens.

Weitere Informationen finden Sie auch in unserem Leitfaden zu Abstand vs. Rand in WordPress.

Wie kann ich Ränder speziell für mobile Geräte ändern?

Um Ränder für Mobilgeräte anzupassen, können Sie CSS-Media-Queries verwenden. Dies ermöglicht es Ihnen, spezifische Stile für verschiedene Bildschirmgrößen anzuwenden.

Page-Builder-Plugins wie SeedProd bieten auch gerätespezifische Steuerelemente, mit denen Sie Ränder für Desktop-, Tablet- und Mobilansichten einfach ändern können.

Warum wird die Margin-Option für einen bestimmten Block im WordPress-Editor nicht angezeigt?

Nicht alle WordPress-Blöcke verfügen über integrierte Randsteuerungen, da dies von Ihrem Theme abhängen kann.

Wenn die Option fehlt, können Sie den Block in einen Gruppenblock einpacken, der über Einstellungen für Abstände (Margin und Padding) verfügt. Sie können auch eine der benutzerdefinierten CSS-Methoden verwenden, um den Block direkt anzusprechen.

Ist es besser, ein Plugin oder benutzerdefiniertes CSS zu verwenden, um Ränder zu ändern?

Für Anfänger ist ein Page-Builder-Plugin wie SeedProd oft einfacher, da es eine visuelle Oberfläche bietet.

Für fortgeschrittene Benutzer oder für standortweite Anpassungen bietet benutzerdefiniertes CSS mehr präzise Kontrolle.

Die Verwendung eines Plugins wie WPCode zum Hinzufügen Ihres CSS ist eine gute Wahl, da es Ihren Code schützt, wenn Sie Ihr Theme aktualisieren oder ändern.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Ränder in WordPress hinzufügen oder ändern. Möglicherweise möchten Sie auch lernen, wie Sie Bilder in WordPress nebeneinander stellen oder wie Sie Unterstreichungs- und Blocksatz-Textschaltflächen in WordPress hinzufügen.

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.