Wenn Sie jemals versucht haben, Dinge in WordPress zu verschieben, aber nicht herausfinden konnten, wie Sie mehr Platz hinzufügen können, sind Sie nicht allein. Eine der häufigsten Fragen zum Layout, die ich erhalte, ist, wie man die Seitenränder einer Seite ändert.
Seitenränder schaffen Freiraum zwischen Blöcken, Bildern und Abschnitten. Sie machen Ihre Inhalte leichter lesbar und Ihre Seiten polierter.
In diesem Tutorial führe ich Sie Schritt für Schritt und anfängerfreundlich durch die Änderung von Seitenrändern in WordPress.
In diesem Leitfaden:
Was ist ein Seitenrand in WordPress?
In WordPress ist ein Seitenrand der Abstand um die Kanten von Seitenelementen, der sie von anderen abhebt. Zu diesen Elementen gehören unter anderem Bilder, Überschriften, Widgets und Schaltflächen.
Ebenso gelten Seitenränder auch für den Abstand um ein Seitenlayout, wie z. B. den Header, den Footer und den Inhaltsbereich.
Die Änderung der Seitenränder einer Seite oder eines Elements ist ein entscheidender Teil des Website-Designs und kann die Funktionalität und das Erscheinungsbild Ihrer Website erheblich beeinflussen.
Der Unterschied zwischen Seitenrändern und Innenabständen
Seitenränder und Innenabstände beziehen sich beide auf den Abstand in Ihrem Design, aber jeder hat einen einzigartigen Zweck.
Seitenränder sind die Abstände, die sich außerhalb eines Elements befinden.
Sie schaffen einen Puffer um Ihre Inhalte und trennen sie von anderen Elementen auf der Seite. Dies kann die Lesbarkeit verbessern und Ihr Design effektiv organisieren.
Andererseits bezieht sich Innenabstand auf den Abstand, der sich innerhalb eines Elements befindet.
Innenabstand kann als „Polsterung“ zwischen dem Inhalt (wie Text oder Bild) und dem Rand seines enthaltenden Elements betrachtet werden. Dies macht Ihre Inhalte oft angenehmer für die Augen.
Im Wesentlichen, wenn Sie eine Pufferzone um die Außenkante Ihres Elements wünschen, sollten Sie den Seitenrand anpassen. Wenn jedoch der Abstand innerhalb eines Elements angepasst werden muss, schauen Sie sich den Innenabstand an.
Nachdem dies gesagt ist, sehen wir uns an, wie man Seitenränder in WordPress ändert.
So ändern Sie Seitenränder in WordPress mit SeedProd
Zuerst sehen wir uns an, wie Sie SeedProd verwenden, um Ihre WordPress-Seitenränder zu ändern.
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 erstellen, ohne programmieren zu müssen.
Die Point-and-Click-Einstellungen des SeedProd-Seitenerstellers ermöglichen es Ihnen, die Seitenrand-Einstellungen für jedes Element mit wenigen Klicks zu ändern.
Um zu beginnen, müssen Sie das SeedProd-Plugin installieren und aktivieren.
Wenn Sie dabei Hilfe benötigen, können Sie sich unseren Leitfaden zur Installation von SeedProd Pro ansehen. Er führt Sie durch den Installationsprozess und die Aktivierung Ihres Lizenzschlüssels.
Nach der Installation navigieren Sie in Ihrem WordPress-Dashboard zu SeedProd » Landing Pages und klicken Sie auf die Schaltfläche Neue Landing Page hinzufügen.
Sie sehen nun eine Bibliothek mit vorgefertigten Landingpage-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 Vorlage für eine leere Seite.
Nachdem Sie eine Vorlage ausgewählt haben, benennen Sie Ihre Seite und klicken Sie auf die Schaltfläche Speichern und mit der Bearbeitung der Seite beginnen. Dies startet die Vorlage im Drag-and-Drop-Seitenersteller von SeedProd.
Beim Öffnen der Seite sehen Sie rechts eine Vorschau des Designs und links 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, werden dessen Einstellungen in der linken Seitenleiste geöffnet.
Im Tab „Erweitert“ eines jeden Elements finden Sie weitere Anpassungsoptionen. Dazu gehören Optionen zur Anpassung von Abständen, Innenabständen, Sichtbarkeit auf Geräten und mehr.
Klicken Sie in diesem Bereich, um den Tab Abstand zu erweitern. Geben Sie hier Ihre benutzerdefinierten Werte in die Felder für den Außenabstand ein, um die Außenabstände für dieses Element zu ändern.
Tun Sie dies für jedes Element, dessen Außenabstände Sie ändern möchten. Sie können auch unseren Schritt-für-Schritt-Leitfaden für weitere Details zu erstellen einer Landingpage in WordPress einsehen.
Wenn Sie mit den Änderungen zufrieden sind, speichern und veröffentlichen Sie Ihre Seite.
Nun können Sie die Seite besuchen, um zu sehen, wie Ihre neuen Außenabstände aussehen.
Alternative Methoden zum Ändern von Außenabständen in WordPress
Die Schönheit von WordPress liegt in seiner Vielseitigkeit. Wenn Sie SeedProd aus irgendeinem Grund nicht verwenden möchten oder können, machen Sie sich keine Sorgen.
Als Nächstes betrachten wir einige alternative Methoden, um Außenabstände auf Ihrer WordPress-Website zu ändern.
Außenabstände mit dem WordPress Block-Editor bearbeiten
Seit der Einführung von Gutenberg ist die Bearbeitung von Website-Außenabständen viel einfacher geworden. Keine Notwendigkeit für Programmierkenntnisse oder das Herunterladen zusätzlicher WordPress-Plugins.
Gehen Sie zunächst in Ihrem WordPress-Dashboard zu Seiten » Alle Seiten und bearbeiten Sie die Seite, deren Außenabstände Sie ändern möchten.
Klicken Sie als Nächstes auf den gewünschten Block, um das Blockeinstellungen-Panel in der rechten Seitenleiste zu öffnen. In diesem Beispiel möchten wir die Außenabstände des Button-Blocks ändern.
Wechseln Sie in der Einstellungsseitenleiste zur Registerkarte „Stile“, indem Sie auf deren Symbol klicken. Klicken Sie dann im Abschnitt „Dimensionen“ auf die Option „Außenabstand“, um die Außenabstände des Buttons zu ändern.
Vergessen Sie nicht, nach Ihren Anpassungen auf die Schaltfläche Aktualisieren zu klicken, um Ihre Änderungen zu speichern.
Außenabstände in WordPress mit CSS-Code ändern
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. Als Auffrischung können Sie diesen Leitfaden zu: wie man benutzerdefiniertes CSS in WordPress hinzufügt einsehen.
Wenn Sie sich jedoch mit ein wenig Programmierung wohlfühlen, kann CSS Ihnen eine unübertroffene Kontrolle über das Design Ihrer Website geben.
Identifizieren der CSS-Klasse eines Elements
Bevor Sie Abstände mit CSS ändern, müssen Sie entscheiden, welches Element Sie mit Ihrem Code ansprechen möchten. Der einfachste Weg, dies zu tun, ist die Verwendung des Inspektionswerkzeugs Ihres Browsers.
Klicken Sie zunächst mit der rechten Maustaste auf das Seitenelement, dessen Abstände Sie anpassen möchten. Wählen Sie im erscheinenden Menü „Untersuchen“ aus. Dadurch wird das Entwicklertools-Panel in Ihrem Browser geöffnet.
Hier sehen Sie den HTML-Code Ihrer Webseite und das CSS für die Seite. Sie können das angeklickte Element hervorheben, indem Sie den Mauszeiger über den Code bewegen.
Im Abschnitt „Styles“ des Panels sehen Sie das HTML-Element oder die CSS-Klasse, die Sie mit Ihrem benutzerdefinierten CSS ansprechen möchten.
In diesem Beispiel müssen wir einfach den folgenden Code kopieren und den Abstandswert in Pixeln ändern:
.wp-block-buttons>.wp-block-button {
display: inline-block;
margin: 0;
}
Für diese Anleitung ändern wir den Wert auf 100px.
Speichern Sie diesen Code nun in einem leeren Dokument oder Editor und fahren Sie mit dem nächsten Schritt fort: Hinzufügen des benutzerdefinierten CSS-Codes zu Ihrer Website.
Abstände mit CSS im Website-Editor hinzufügen und ändern
Wenn Sie ein blockbasiertes WordPress-Theme verwenden, das den WordPress-Website-Editor unterstützt, können Sie Ihren CSS-Code zum Bereich „Zusätzliches CSS“ hinzufügen.
Um ihn zu finden, gehen Sie zu Darstellung » Editor und wechseln Sie zum Tab 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ätzliches CSS“.
Fügen Sie Ihren benutzerdefinierten CSS-Code in das erscheinende Feld ein und klicken Sie dann auf Speichern, um Ihre Änderungen zu sichern.
Wenn Sie Ihre Website aufrufen, sehen Sie die Abstandsänderungen sofort.
Abstände mit CSS über den Theme-Customizer ändern
Wenn Sie ein klassisches WordPress-Theme verwenden, das keine Unterstützung für den Website-Editor enthält, können Sie Ihr benutzerdefiniertes CSS über den WordPress-Theme-Customizer hinzufügen.
Navigieren Sie dazu zu Darstellung » Themes und klicken Sie auf Anpassen.
Hier sehen Sie verschiedene Optionen, abhängig vom verwendeten Theme. Die benötigte Option ist die mit der Bezeichnung Zusätzliches CSS.
Fügen Sie Ihr benutzerdefiniertes CSS in das Feld ein, und Sie sehen, wie sich die Abstände in WordPress in der Live-Vorschau ändern.
Klicken Sie nun auf die Schaltfläche Veröffentlichen, um Ihre Änderungen zu speichern.
Als Nächstes: Weitere WordPress-Design-Tipps
Das Ändern von Abständen in WordPress kann Ihr Website-Design auf die nächste Stufe heben. Egal, ob Sie SeedProd oder eine dieser alternativen Methoden verwenden, Sie sind jetzt mit dem nötigen Wissen ausgestattet, um dies zu tun.
Denken Sie daran, dass jedes gute Design mit einem guten Layout beginnt. Deshalb ist die Kontrolle der Abstände Ihrer Website immer entscheidend für ein responsives und ansprechendes Website-Design.
Weitere Tipps zu WordPress-Designs finden Sie in unseren anderen Anleitungen:
- So machen Sie eine Seite in WordPress bildschirmfüllend
- So ändern Sie Schriftarten in WordPress-Themes
- So erstellen Sie animierte Particle.js-Hintergründe in WordPress
- So erstellen Sie eine vertikale Navigationsleiste in WordPress
- So fügen Sie eine benutzerdefinierte Suchleiste zu WordPress hinzu
Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.
