Ändern der Seitenränder in WordPress (Anleitung für Anfänger)

Das Ändern der Außenabstände in WordPress ist eine einfache Möglichkeit, das Design und die Benutzerfreundlichkeit Ihrer Website zu verbessern. Außenabstände erstellen Raum zwischen den Elementen, wodurch Ihre Inhalte besser lesbar und optisch ansprechender werden.

Als allgemeines Best-Practice-Verfahren verwenden wir bei der Gestaltung unserer Websites stets reichlich Außenabstände und Abstände. Wir haben festgestellt, dass sich dies positiv darauf auswirkt, wie die Benutzer mit unseren Seiten und Inhalten umgehen.

In diesem Leitfaden für Einsteiger zeigen wir Ihnen, wie Sie Außenabstände in WordPress hinzufügen und anpassen können. Sie lernen verschiedene Methoden kennen, um Außenabstände in verschiedenen Bereichen Ihrer WordPress-Website zu ändern.

Was sind Ränder in WordPress und Webdesign?

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

Stellen Sie sich eine typische Webseite wie ein leeres Blatt Papier vor. Ränder sind der weiße oder leere Raum an den Rändern des Papiers.

Die Verwendung von Rändern soll sicherstellen, dass die Elemente auf einer Webseite nicht zusammengequetscht aussehen.

In ähnlicher Weise können Ränder um verschiedene Elemente innerhalb des Seitenlayouts verwendet werden.

So können Sie beispielsweise die Ränder um Bilder ändern, damit sie nicht zu dicht am Text stehen, oder einen Rand hinzufügen, um Platz zwischen dem Inhaltsbereich und der Seitenleiste zu lassen.

In diesem Artikel werden wir eine Vielzahl von Informationen behandeln. Klicken Sie auf die Links unten, um zu einem beliebigen Abschnitt zu springen.

Was ist der Unterschied zwischen Rand und Auffüllung?

Rand und Füllung werden beide verwendet, um Leerraum im Webdesign hinzuzufügen. Sie werden jedoch sehr unterschiedlich verwendet.

Ränder fügen leeren Raum außerhalb eines Elements hinzu, und Füllung fügt leeren Raum innerhalb des Elements hinzu.

Ränder werden verwendet, um Platz außerhalb eines Elements hinzuzufügen. Damit können Sie sicherstellen, dass zwischen den Elementen auf einer Webseite genügend Platz ist.

Schauen wir uns nun einige Beispiele für die Verwendung von Außenabständen an.

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

2. Anpassung der Ränder, um Platz zwischen den Abschnitten zu schaffen, z. B. zwischen der Kopfzeile und dem Inhaltsbereich.

Padding hingegen wird verwendet, um den Abstand zwischen dem Inhalt und den Rändern eines Rahmens oder Elements aufzufüllen.

Hier sind einige Beispiele dafür, wann Sie zusätzliche Innenabstände verwenden sollten.

1. Anpassung der Polsterung, um den Platz für Ihre Call-to-Action-Schaltflächen zu vergrößern.

2. Vergrößern der Füllung in einer Textspalte

Sowohl Füllung als auch Ränder werden im Webdesign häufig verwendet.

Die Verwendung von Leerräumen verschafft jedem Design Raum zum Atmen, was es benutzerfreundlicher und eleganter macht.

Weitere Einzelheiten finden Sie in unserem Tutorial über den Unterschied zwischen Innenabständen und Außenabständen in WordPress.

Warum müssen Sie möglicherweise Ränder in WordPress hinzufügen oder ändern?

Außenabstände sind ein wichtiger Aspekt des Webdesigns. Sie lassen Ihre Website angenehm und benutzerfreundlich aussehen.

Wir führen auf allen unseren Websites gründliche A/B-Tests durch, um zu verstehen, wie die Benutzer mit einem Design interagieren. Die Ergebnisse zeigen immer wieder, dass das Hinzufügen von Außenabständen einen großen Einfluss auf die Konversionsrate hat.

Wenn Sie ein sauberes, übersichtliches Design erstellen, bleiben die Benutzer eher länger auf der Website und führen die gewünschten 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 mit Hilfe von Rändern viel Weißraum im Layout Ihres Themes zu gewährleisten.

Es kann jedoch vorkommen, dass Sie Außenabstände hinzufügen müssen, um die Dinge anzupassen.

Vielleicht gefällt Ihnen zum Beispiel der Außenabstand um Ihre Navigationsmenüs nicht oder Sie möchten mehr Außenabstand um Ihre Call-to-Action Buttons hinzufügen.

Vielleicht haben Sie auch das Gefühl, dass die Gegenstände zu nahe beieinander oder zu weit auseinander liegen.

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

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

Es gibt viele Möglichkeiten, in WordPress Ränder hinzuzufügen.

Je nachdem, wo Sie einen Rand hinzufügen möchten und welche Optionen in Ihrem WordPress-Theme zur Verfügung stehen, müssen Sie eine Methode wählen, die für Sie geeignet ist.

Beginnen wir mit den standardmäßig eingebauten Optionen in WordPress selbst, da sie für Anfänger am einfachsten sind.

Hinzufügen von Außenabständen in WordPress mit dem Full Website-Editor

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

Gehen Sie zunächst auf Design “ Editor, um den Website-Editor zu starten.

Wählen Sie im Site-Editor eine Vorlage aus der linken Spalte oder klicken Sie auf eine beliebige Stelle im Vorschaufenster.

Klicken Sie dann auf den Bereich oder das Element, dessen Außenabstände Sie ändern möchten. In der rechten Spalte sehen Sie unter dem Tab „Stil“ die Option zur Anpassung der Außenabstände.

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

Sie können auch wählen, ob Sie oben, unten, rechts oder links Ränder hinzufügen möchten.

Hinzufügen von Außenabständen im Block-Editor

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

Mit dem Block-Editor in WordPress können Sie Außenabstände für verschiedene Blöcke hinzufügen und ändern.

Klicken Sie einfach auf den Block, zu dem Sie Außenabstände hinzufügen/anpassen möchten. Wechseln Sie unter den Blockeinstellungen zum Tab „Stil“ und blättern Sie nach unten zur Option „Abmessungen“ oder „Außenabstände“.

Hinzufügen von Rändern in WordPress mit SeedProd

SeedProd ist das beste WordPress-Seitenerstellungs-Plugin auf dem Markt. Es ermöglicht Ihnen, benutzerdefinierte Seiten für Ihre Website leicht zu erstellen. Sie können es sogar verwenden, um ein benutzerdefiniertes WordPress-Theme von Grund auf zu erstellen.

Mit dem intuitiven Drag-and-Drop-Seitenersteller von SeedProd können Sie die Ränder für jedes beliebige Element innerhalb des Editors einfach anpassen.

Zunächst müssen Sie das SeedProd-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.

Als nächstes müssen Sie SeedProd “ Landing Pages besuchen und dann auf den Button ‚Add New Landing Page‘ klicken.

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

SeedProd wird mit Dutzenden von vorgefertigten Vorlagen geliefert, die Sie als Ausgangspunkt verwenden können, oder Sie können mit einer leeren Vorlage beginnen.

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

Dadurch wird der Seitenersteller von SeedProd gestartet.

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

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

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

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

Wenn Sie Ihre Seite fertig bearbeitet haben, vergessen Sie nicht, auf die Buttons „Speichern“ und „Veröffentlichen“ in der oberen rechten Ecke zu klicken.

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

Margen mit Thrive Architect ändern

Thrive Architect ist eines der besten WordPress-Seitenerstellungstools, mit dem Sie WordPress-Seiten über eine Drag-and-Drop-Oberfläche gestalten können.

Es wird mit über 300+ Templates geliefert, die Sie als Ausgangspunkt verwenden können. Außerdem können Sie damit auch Ihre WordPress-Beiträge und -Seiten bearbeiten und das Layout und den Stil Ihres bestehenden WordPress-Themes übernehmen.

Um Thrive Architect zu installieren, müssen Sie sich zunächst bei Ihrem Konto auf der Thrive Themes-Website anmelden.

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

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

Klicken Sie auf die Schaltfläche „Bei meinem Konto anmelden“, um WordPress mit Ihrem Thrive Themes-Konto zu verbinden.

Sobald Sie verbunden sind, 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“ am unteren Rand.

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

Danach können Sie einen WordPress-Beitrag oder eine Seite bearbeiten oder neu erstellen und auf den Button „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 Ihr Theme-Template verwenden, um eine ‚Normale Seite‘ oder ein ‚Vorgefertigte Landing Page‘-Template zu erstellen.

Wenn Sie die Option ‚Vorgefertigte Landing Page‘ wählen, zeigt Ihnen das Plugin eine Reihe von Templates zur Auswahl an.

Klicken Sie einfach auf das Bild, das demjenigen ähnelt, das Sie erstellen möchten.

Egal, ob es sich um eine normale Seite (mit den Stilen Ihres Themes) oder eine Landing Page handelt, der Page Builder von Thrive Architect hat dieselben Funktionen.

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

Sie können auf ein Element zeigen oder klicken, um es auszuwählen. Oder Sie klicken auf die Schaltfläche [+] 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 hier auf den Tab ‚Layout & Position‘, um die Außenabstände und Innenabstände zu ändern.

Sie sehen eine visuelle Darstellung von Rand und Füllung.

Gehen Sie mit der Maus auf eine beliebige Seite des Randes und ziehen Sie den Griff, um den Rand zu vergrößern oder zu verkleinern.

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

Wenn Sie fertig sind, vergessen Sie nicht, auf den Button Arbeit speichern zu klicken und dann die Option Speichern und Beenden des Editors für Beiträge zu wählen.

Sie können nun auf den Button „Veröffentlichen“ oder „Speichern“ klicken, um Ihren WordPress-Beitrag oder Ihre Seite zu speichern.

Ändern der Ränder in WordPress mit CSS-Code

Bei dieser Methode müssen Sie CSS-Code zu Ihrem WordPress-Theme hinzufügen. Außerdem benötigen Sie ein sehr grundlegendes Verständnis von HTML und CSS.

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

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

WordPress ermöglicht es Ihnen, benutzerdefinierte CSS in Ihren WordPress-Theme-Optionen zu speichern. Abhängig von Ihrem WordPress-Theme gibt es jedoch mehrere Möglichkeiten, dies zu tun.

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

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

body { 
margin:50px; 
}

Am einfachsten finden Sie heraus, welches Element Sie anvisieren müssen, indem Sie das Inspektionstool in Ihrem Browser verwenden.

Öffnen Sie Ihre Website in einem neuen Browser Tab und gehen Sie mit der Maus auf das Element, dessen Außenabstände Sie ändern möchten. Klicken Sie dann mit der rechten Maustaste darauf und wählen Sie im Browser-Menü die Option „Prüfen“.

Dadurch wird Ihr Browserbildschirm geteilt, und Sie sehen den HTML-Code und das CSS hinter der Seite.

Sie können mit der Maus über den Code fahren, und Ihr Browser hebt den betroffenen Bereich hervor.

Im Code sehen Sie das HTML-Element oder die CSS-Klasse, die Sie mit Ihrem benutzerdefinierten CSS ansprechen müssen.

Sie können hier sogar Ihre Ränder ausprobieren, um zu sehen, wie sie aussehen werden.

Diese Änderungen werden jedoch nicht in Ihrem Thema gespeichert und verschwinden, wenn Sie die Browser-Registerkarte neu laden oder schließen.

Gehen wir die verschiedenen Möglichkeiten durch, wie Sie dieses benutzerdefinierte CSS in WordPress speichern können.

Benutzerdefiniertes CSS zum Ändern der Ränder im Site-Editor verwenden

Wenn Sie ein Block-Theme mit vollständiger Unterstützung des Site-Editors verwenden. Hier erfahren Sie, wie Sie Ihrem Theme benutzerdefinierte CSS hinzufügen können.

Gehen Sie zunächst auf die Seite Design “ Editor, um den Website-Editor zu starten, und wechseln Sie dann zum Panel „Stile“.

Klicken Sie am unteren Rand des Bereichs „Stile“ auf den Tab „Zusätzliches CSS“.

Daraufhin wird ein Texteditor angezeigt, in den Sie Ihren benutzerdefinierten CSS-Code einfügen können. Ihr CSS-Code wird sofort übernommen, und Sie können die Änderungen auf dem Bildschirm sehen.

Wenn Sie mit den Änderungen zufrieden sind, vergessen Sie nicht, auf den Button „Speichern“ zu klicken, um Ihre Änderungen zu speichern.

Hinzufügen von Rändern mit CSS im Theme Customizer

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

Gehen Sie auf die Seite Erscheinungsbild “ Anpassen, um den Theme-Customizer zu starten.

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

Klicken Sie auf die Registerkarte Zusätzliches CSS, um sie zu erweitern.

Die Registerkarte verschiebt sich und zeigt ein einfaches Feld an, in dem Sie Ihr benutzerdefiniertes CSS hinzufügen können.

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

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

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

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

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

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

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

Rufen Sie nach der Aktivierung die Seite Code Snippets “ + Add New auf.

Gehen Sie mit der Maus auf die Option „Eigenen Code hinzufügen (neues Snippet)“ in der Code-Snippet-Bibliothek und klicken Sie auf die Schaltfläche „Snippet verwenden“.

Fügen Sie dann oben auf der Seite einen Titel für Ihr benutzerdefiniertes CSS-Snippet hinzu. Das kann alles sein, was Ihnen hilft, den Code zu identifizieren.

Schreiben oder fügen Sie anschließend Ihr benutzerdefiniertes CSS in das Feld „Codevorschau“ ein und legen Sie den „Codetyp“ fest, indem Sie die Option „CSS Snippet“ aus dem Dropdown-Menü auswählen.

Wenn Sie zum Beispiel die Ränder um die gesamte Webseite herum hinzufügen oder ändern möchten, können Sie den folgenden CSS-Code verwenden:

body { 
margin:50px;
}

Scrollen Sie dann 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 oberen Rand der Seite zurückkehren und den Schalter auf „Aktiv“ umlegen.

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

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

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie man Außenabstände in WordPress hinzufügt oder ändert. Vielleicht möchten Sie auch erfahren , wie man Bilder in WordPress nebeneinander stellt oder wie man Buttons in WordPress unterstreicht und ausrichtet.

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.