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

Möchten Sie die Seitenränder in WordPress ändern?

Ränder sind eines der wichtigsten Designelemente, die die Benutzerfreundlichkeit und die Ästhetik eines jeden Designs erheblich verbessern können. Sie fügen Abstände zwischen den Elementen hinzu, so dass Ihr Inhalt lesbar und alles leicht zu erkennen ist.

In diesem Leitfaden für Einsteiger zeigen wir Ihnen, wie Sie in WordPress Ränder hinzufügen und ändern können. Wir zeigen Ihnen verschiedene Methoden, um Ränder 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 Menge Themen 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.

Beispiele:

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.

Beispiele:

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.

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

Ränder sind ein wichtiger Aspekt des Webdesigns. Sie sorgen dafür, dass Ihre Website für Ihre Nutzer angenehm und einfach zu bedienen ist.

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.

Gelegentlich kann es jedoch erforderlich sein, Ränder hinzuzufügen, um Dinge anzupassen.

Vielleicht gefällt Ihnen zum Beispiel der Rand um Ihre Navigationsmenüs nicht oder Sie möchten mehr Rand um Ihre Call-to-Action-Schaltflächen 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 Rändern in WordPress mit dem Full Site 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.

Zunächst müssen Sie den Editor unter Erscheinungsbild “ Editor aufrufen, um den Site-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 Ränder Sie ändern möchten. In der rechten Spalte sehen Sie unter der Registerkarte Stil die Option zum Anpassen der Ränder.

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 Rändern im Block-Editor

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

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

Klicken Sie einfach auf den Block, dem Sie Ränder hinzufügen/anpassen möchten. Wechseln Sie unter den Blockeinstellungen zur Registerkarte Stil und scrollen Sie nach unten zur Option Abmessungen oder Ränder.

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 die Schaltfläche 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 seine Optionen in der linken Spalte. Wechseln Sie hier zur Registerkarte 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 die Bearbeitung Ihrer Seite abgeschlossen haben, 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.

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+ Vorlagen 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-Themas ü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 die Schaltfläche Mit Thrive Architect bearbeiten klicken.

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

Sie können Ihre Themenvorlage verwenden, um eine normale Seite oder eine vorgefertigte Landing Page-Vorlage zu erstellen.

Wenn Sie die Option „Vorgefertigte Landing Page“ wählen, zeigt Ihnen das Plugin eine Reihe von Vorlagen, aus denen Sie wählen können.

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 die Registerkarte Layout & Position, um die Ränder und die Auffüllung 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 die Schaltfläche Arbeit speichern zu klicken und dann die Option Speichern und den Post-Editor verlassen zu wählen.

Sie können nun auf die Schaltfläche 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 einer neuen Browser-Registerkarte und gehen Sie mit der Maus auf das Element, dessen Ränder Sie ändern möchten. Wählen Sie dann im Browsermenü die Option „Inspizieren“ aus.

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 Erscheinungsbild “ Editor, um den Site-Editor zu starten, und wechseln Sie dann zum Bedienfeld Stile.

Klicken Sie unten im Bedienfeld „Stile“ auf die Registerkarte „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 die Schaltfläche 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 die Schaltfläche 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.

Hinweis: Es gibt auch eine kostenlose Version von WPCode, die Sie verwenden können.

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 Sie Ränder in WordPress hinzufügen oder ändern können. Vielleicht interessiert Sie auch unser kompletter WordPress-Theme-Entwicklungs-Spickzettel oder unser Leitfaden zur Anpassung von WordPress-Themes.

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.