Haben Sie sich jemals gefragt, wie man die Seitenränder in WordPress ändert?
Ränder schaffen Platz zwischen den Elementen auf Ihrer Website. Sie machen Ihren Inhalt benutzerfreundlicher und verbessern gleichzeitig das Aussehen und die Wirkung Ihres Webdesigns.
In einem Gespräch mit einem unserer Leser erörterten wir, wie ein paar einfache Anpassungen der Seitenränder die Benutzerfreundlichkeit und die Gesamtästhetik seiner Website verbessern könnten.
Aus diesem Grund haben wir ein einfaches Tutorial zusammengestellt, das Ihnen zeigt, wie Sie die Seitenränder in WordPress für Anfänger ändern können.
In diesem Leitfaden
Was ist eine Marge in WordPress?
In WordPress ist ein Rand der Platz um die Kanten von Seitenelementen, der sie von anderen abhebt. Zu diesen Elementen können unter anderem Bilder, Überschriften, Widgets und Schaltflächen gehören.
In ähnlicher Weise gelten die Ränder auch für den Raum um ein Seitenlayout herum, z. B. für die Kopf- und Fußzeile und den Inhaltsbereich.
Die Änderung der Ränder einer Seite oder eines Elements ist ein wichtiger Bestandteil des Website-Designs und kann die Funktionalität und das Erscheinungsbild Ihrer Website erheblich beeinflussen.
Der Unterschied zwischen Rändern und Auffüllungen
Ränder und Auffüllungen sind beide mit den Abständen in Ihrem Entwurf verknüpft, erfüllen aber jeweils einen bestimmten Zweck.
Ränder sind die Zwischenräume, die sich an der Außenseite eines Elements befinden.
Sie bilden einen Puffer um Ihren Inhalt und trennen ihn von anderen Elementen auf der Seite. Dies kann dazu beitragen, die Lesbarkeit zu verbessern und Ihr Design effektiv zu organisieren.
Andererseits bezieht sich padding auf den Raum, der sich innerhalb eines Elements befindet.
Die Auffüllung kann als "Polster" zwischen dem Inhalt (z. B. Text oder ein Bild) und dem Rand des enthaltenen Elements betrachtet werden. Dadurch wird Ihr Inhalt oft besser lesbar.
Wenn Sie eine Pufferzone um den äußeren Rand Ihres Elements wünschen, sollten Sie den Rand anpassen. Wenn jedoch der Abstand innerhalb eines Elements angepasst werden muss, sollten Sie sich die Auffüllung ansehen.
Schauen wir uns also an, wie man die Ränder in WordPress ändern kann.
Wie man die Ränder in WordPress mit SeedProd ändert
Sehen wir uns zunächst an, wie Sie mit SeedProd Ihre WordPress-Ränder ändern können.
SeedProd ist einer der besten Drag-and-Drop-Website-Builder. Mit seinem visuellen Editor können Sie benutzerdefinierte Seiten für Ihre Website erstellen und sogar ein benutzerdefiniertes WordPress-Theme ohne Kodierung erstellen.
Die Point-and-Click-Einstellungen des SeedProd Page Builders ermöglichen es Ihnen, die Randeinstellungen für jedes Element mit wenigen Klicks zu ändern.
Um loszulegen, müssen Sie das SeedProd-Plugin installieren und aktivieren.
Wenn Sie dabei Hilfe benötigen, können Sie unsere Anleitung zur Installation von SeedProd Pro lesen. Sie führt Sie durch den Installationsprozess und zeigt Ihnen, wie Sie Ihren Lizenzschlüssel aktivieren.
Nach der Installation navigieren Sie in Ihrem WordPress-Dashboard zu SeedProd " Landing Pages und klicken auf die Schaltfläche Add New Landing Page.
Sie sehen nun eine Bibliothek mit vorgefertigten Landing Page-Vorlagen, die Sie als Ausgangspunkt für Ihre Seite verwenden können. Wenn Sie lieber von Grund auf neu beginnen möchten, gibt es auch eine leere Seitenvorlage.
Nachdem Sie eine Vorlage ausgewählt haben, geben Sie Ihrer Seite einen Namen und klicken Sie auf die Schaltfläche Speichern und mit der Bearbeitung der Seite beginnen. Dadurch wird die Vorlage in der Drag-and-Drop-Seitenerstellung von SeedProd gestartet.
Wenn Sie die Seite öffnen, sehen Sie auf der rechten Seite eine Vorschau des Designs und auf der linken Seite die Seitenelemente. Sie können jedes Element zu Ihrer Seite hinzufügen, indem Sie darauf klicken und es in die Vorschau ziehen.
Wenn Sie auf ein Element in der Vorschau klicken, können Sie außerdem dessen Einstellungen in der linken Seitenleiste öffnen.
Auf der Registerkarte "Erweitert" eines beliebigen Elements finden Sie weitere Anpassungsoptionen. Dazu gehören Optionen zum Anpassen von Abständen, Auffüllungen, Gerätesichtbarkeit und mehr.
Klicken Sie in diesem Bereich auf , um die Registerkarte Abstand zu erweitern. Geben Sie hier Ihre benutzerdefinierten Werte in die Randfelder ein, um die Ränder für dieses Element zu ändern.
Führen Sie dies für jedes Element durch, für das Sie die Ränder ändern möchten. In unserer Schritt-für-Schritt-Anleitung finden Sie weitere Details zum Erstellen einer Landing Page in WordPress.
Wenn Sie mit den Änderungen zufrieden sind, speichern und veröffentlichen Sie Ihre Seite.
Jetzt können Sie die Seite besuchen, um zu sehen, wie Ihre neuen Ränder aussehen.
Alternative Methoden zum Ändern der Ränder in WordPress
Die Schönheit von WordPress liegt in seiner Vielseitigkeit. Wenn Sie aus irgendeinem Grund SeedProd nicht verwenden wollen oder können, machen Sie sich keine Sorgen.
Als Nächstes sehen wir uns einige alternative Methoden zum Ändern der Seitenränder auf Ihrer WordPress-Website an.
Bearbeitung der Ränder mit dem WordPress-Blockeditor
Seit der Einführung von Gutenberg ist die Bearbeitung von Seitenrändern sehr viel einfacher geworden. Es sind keine Programmierkenntnisse oder das Herunterladen von zusätzlichen WordPress-Plugins erforderlich.
Gehen Sie zunächst in Ihrem WordPress-Dashboard auf Seiten " Alle Seiten und bearbeiten Sie die Seite mit den Rändern, die Sie ändern möchten.
Klicken Sie anschließend auf den gewünschten Block, um das Blockeinstellungsfenster in der rechten Seitenleiste zu öffnen. In diesem Beispiel möchten wir die Ränder des Schaltflächenblocks ändern.
Wechseln Sie in der Seitenleiste "Einstellungen" zur Registerkarte "Stile", indem Sie auf das entsprechende Symbol klicken. Klicken Sie dann im Abschnitt Abmessungen auf die Option Rand, um die Ränder der Schaltflächen zu ändern.
Vergessen Sie nicht, nach Ihren Anpassungen auf die Schaltfläche Aktualisieren zu klicken, um Ihre Änderungen zu speichern.
Ändern der Ränder in WordPress mit CSS-Code
Für diese Methode benötigen Sie ein allgemeines Verständnis von HTML und CSS. Außerdem müssen Sie Code zu Ihrem WordPress-Theme hinzufügen.
Wenn Sie sich jedoch ein wenig mit der Programmierung auskennen, können Sie mit CSS das Design Ihrer Website auf unvergleichliche Weise steuern.
Identifizierung der CSS-Klasse eines Elements
Bevor Sie die Ränder mit CSS ändern, müssen Sie entscheiden, auf welches Element Ihr Code abzielen soll. Am einfachsten geht das mit dem Inspektionstool Ihres Browsers.
Klicken Sie zunächst mit der rechten Maustaste auf das Seitenelement, für das Sie die Ränder anpassen möchten. Wählen Sie in dem Menü, das sich öffnet, die Option "Inspizieren". Dadurch wird das Bedienfeld "Entwicklungswerkzeuge" in Ihrem Browser geöffnet.
Hier sehen Sie den HTML-Code Ihrer Webseite und das CSS für die Seite. Sie können das Element, auf das Sie geklickt haben, hervorheben, indem Sie den Mauszeiger über den Code bewegen.
Im Abschnitt "Stile" des Bedienfelds sehen Sie das HTML-Element oder die CSS-Klasse, auf die Sie mit Ihrem benutzerdefinierten CSS abzielen.
In diesem Beispiel brauchen wir nur den folgenden Code zu kopieren und den Randwert in Pixel zu ändern:
.wp-block-buttons>.wp-block-button {
display: inline-block;
margin: 0;
}
Für diese Anleitung werden wir den Wert auf 100px ändern.
Speichern Sie diesen Code in einem leeren Dokument oder auf einem Notizblock, und fahren Sie mit dem nächsten Schritt fort: dem Hinzufügen des benutzerdefinierten CSS-Codes zu Ihrer Website.
Hinzufügen und Ändern von Rändern mit CSS im Site-Editor
Wenn Sie ein blockbasiertes WordPress-Theme verwenden, das den WordPress-Site-Editor unterstützt, können Sie Ihren CSS-Code in das Feld "Additional CSS" einfügen.
Gehen Sie dazu auf Darstellung " Editor und wechseln Sie zur Registerkarte Stile des Website-Editors. Klicken Sie dann auf die drei Punkte in der rechten Seitenleiste, um weitere Einstellungen anzuzeigen, und klicken Sie auf die Option "Zusätzliche CSS".
Fügen Sie in das angezeigte Feld Ihr benutzerdefiniertes CSS ein und klicken Sie dann auf Speichern, um Ihre Änderungen zu speichern.
Wenn Sie Ihre Website aufrufen, sehen Sie die Änderungen am Rand sofort.
Ändern der Ränder mit CSS über den Theme Customizer
Wenn Sie ein klassisches WordPress-Theme verwenden, das keine Unterstützung für den Site-Editor bietet, können Sie Ihre benutzerdefinierten CSS mithilfe des WordPress-Theme-Customizers hinzufügen.
Navigieren Sie dazu zu Erscheinungsbild " Themen und klicken Sie auf Anpassen.
Je nach dem von Ihnen verwendeten Thema werden hier verschiedene Optionen angezeigt. Die Option, die Sie benötigen, ist die mit Additional CSS bezeichnete.
Fügen Sie Ihr benutzerdefiniertes CSS in das Feld ein, und Sie werden sehen, wie sich die Ränder in WordPress in der Live-Vorschau ändern.
Klicken Sie nun auf die Schaltfläche Veröffentlichen, um Ihre Änderungen zu speichern.
Nächster Punkt: Weitere WordPress-Design-Tipps
Das Ändern von Rändern in WordPress kann das Design Ihrer Website auf die nächste Stufe heben. Egal, ob Sie SeedProd oder eine dieser alternativen Methoden verwenden, Sie sind jetzt mit dem nötigen Know-how ausgestattet, um dies zu tun.
Denken Sie daran, dass jedes gute Design mit einem guten Layout beginnt. Deshalb ist die Kontrolle der Seitenränder Ihrer Website immer entscheidend für ein ansprechendes und ansprechendes Website-Design.
Weitere WordPress-Design-Tipps finden Sie in unseren anderen Leitfäden:
- Wie man eine Seite in WordPress auf volle Breite bringt
- Wie man Schriftarten in WordPress-Themes ändert
- Wie man animierte Particle.js-Hintergründe in WordPress erstellt
- Wie man eine vertikale Navigationsleiste in WordPress erstellt
- Wie man eine benutzerdefinierte Suchleiste zu WordPress hinzufügt
Vielen Dank fürs Lesen! Wir würden uns freuen, Ihre Meinung zu hören. Bitte hinterlassen Sie einen Kommentar mit Ihren Fragen und Ihrem Feedback.
Sie können uns auch auf YouTube, X (früher Twitter) und Facebook folgen, um weitere hilfreiche Inhalte für Ihr Unternehmen zu erhalten.
