Vertrauenswürdige WordPress-Tutorials, wenn Sie sie am dringendsten benötigen.
Anfängerleitfaden für WordPress
WPB Cup
25 Millionen+
Websites, die unsere Plugins verwenden
16+
Jahre WordPress-Erfahrung
3000+
WordPress-Tutorials von Experten

So ändern Sie die Seitenleiste in WordPress (4 Methoden)

Als wir anfingen, WordPress-Themes anzupassen, schien es, als sollte es einfach sein, die Seitenleiste von rechts nach links zu verschieben.

Dennoch haben wir festgestellt, dass viele Benutzer mit dieser grundlegenden Layoutänderung zu kämpfen haben, da jedes Theme sie anders handhabt und einige die Option nicht offensichtlich machen.

Nachdem wir Benutzern durch WPBeginner geholfen haben, haben wir gelernt, dass die Positionierung der Seitenleiste die Interaktion der Besucher mit Ihren Inhalten erheblich beeinflussen kann.

Ob Sie Design-Best-Practices befolgen oder sich an die Lesegewohnheiten Ihres Publikums anpassen, die Kenntnis, wie Sie die Position Ihrer Seitenleiste ändern, ist eine wertvolle Fähigkeit.

In dieser Anleitung zeigen wir Ihnen die einfachsten Möglichkeiten, die Position Ihrer Seitenleiste in WordPress zu ändern.

So ändern Sie die Seitenleistenposition in WordPress

💡Schnelle Antwort: So ändern Sie die Seitenleistenposition in Ihrem WordPress-Theme

Hier ist eine kurze Übersicht der Methoden, die wir behandeln werden, damit Sie zu der Methode springen können, die Ihren Bedürfnissen entspricht:

  • Methode 1: Verwenden Sie den WordPress Customizer – Dies ist die einfachste Option und am besten für Benutzer mit einem klassischen Theme geeignet, das bereits eine integrierte Einstellung zum Ändern des Seitenleistenlayouts bietet.
  • Methode 2: Verwenden Sie benutzerdefinierten CSS-Code – Diese Methode ist für Benutzer mit einem klassischen Theme gedacht, das keine integrierte Seitenleistenoption hat. Sie erfordert das Hinzufügen eines kleinen Code-Snippets.
  • Methode 3: Verwenden Sie den Full-Site Editor (FSE) – Dies ist die Standardmethode für alle, die ein modernes Block-Theme verwenden. Sie ziehen die Seitenleiste einfach per Drag & Drop an eine neue Position.
  • Methode 4: Verwenden Sie das CSS Hero Plugin – Dies ist die beste Wahl für Anfänger mit jedem Theme, die eine visuelle, codefreie Möglichkeit suchen, die Seitenleistenposition zu ändern und andere Designanpassungen vorzunehmen.

Wie ändere ich die Seitenleistenposition in meinem WordPress-Theme?

Um die Seitenleiste in Ihrem WordPress-Theme zu ändern, müssen Sie zuerst feststellen, ob Sie ein klassisches Theme oder ein Block-Theme verwenden. Die verwendete Methode hängt vollständig von Ihrem Theme-Typ ab.

Klassische Themes verwenden normalerweise den Theme Customizer oder benutzerdefiniertes CSS für diese Änderung. Block-Themes verwenden den neueren Full-Site Editor.

Hier erfahren Sie, wie Sie schnell überprüfen, welches Sie haben. Gehen Sie in Ihrem Dashboard zu Darstellung. Wenn Sie ein Menü mit der Bezeichnung „Editor“ sehen, verwenden Sie ein Block-Theme. Wenn Sie stattdessen „Anpassen“ und „Widgets“ sehen, haben Sie ein klassisches Theme.

Identifizierung eines klassischen und eines Block-Themes

Das Verschieben der Seitenleiste kann aus vielen Gründen nützlich sein. Zum Beispiel fühlen sich Websites mit rechts-nach-links Sprachen mit der Seitenleiste auf der linken Seite natürlicher an.

Sie möchten vielleicht auch die Benutzererfahrung auf Ihrer Website verbessern. Wenn Sie feststellen, dass Besucher auf Ihrer E-Commerce-Website Seiten in einem bestimmten Muster scannen, kann die Anpassung der Seitenleiste das Einkaufen intuitiver machen.

Mit all dem im Hinterkopf, schauen wir uns an, wie Sie die Seitenleistenseite auf Ihrem WordPress-Blog oder Ihrer Website ändern können.

Wir haben 4 einfache Methoden, und Sie können die Schnelllinks unten verwenden, um zu der von Ihnen bevorzugten zu springen:

Methode 1: So ändern Sie die Seitenleisten-Seite mit dem WordPress Customizer (Klassische Themes)

Diese Methode ist für Personen, die ein klassisches Theme verwenden. Das bedeutet, dass Sie den WordPress Customizer weiterhin zur Gestaltung Ihres Website-Designs verwenden können und der Abschnitt 'Widgets' im Menü 'Darstellung' des WordPress-Adminbereichs weiterhin existiert.

Wenn der Theme-Customizer in Ihrem WordPress-Dashboard fehlt, verwenden Sie wahrscheinlich ein Block-Theme und müssen zur dritten Methode springen.

Manchmal bieten Entwickler klassischer Themes mehrere Sidebar-Platzierungen an, aus denen Sie wählen können. Sie können bestätigen, ob dies zutrifft, indem Sie den WordPress Customizer verwenden und dort die gewünschte Sidebar-Position auswählen.

Gehen Sie zuerst zu Darstellung » Anpassen. Wir verwenden das Hestia Theme als Beispiel.

Klicken Sie auf Anpassen für Hestia

Gehen Sie hier in der linken Spalte zur Seite Darstellungseinstellungen » Allgemeine Einstellungen

Wie Sie sehen können, hat Hestia drei Seitenleisten-Vorlagen: eine ohne Seitenleiste, eine mit einer linken Seitenleiste und eine mit einer rechten Seitenleiste. Dies ermöglicht es uns, die Seite der Seitenleiste mit einem Klick zu ändern. Hier haben wir die Seite der Seitenleiste nach links geändert.

Diese Einstellung steuert das Standard-Seitenleistenlayout für Ihre gesamte Website. Hestia ermöglicht es Ihnen jedoch auch, die Seitenleistenposition des Blogs separat anzupassen, sodass sie nur Ihre Blogbeiträge oder die Beitragsseite betrifft.

Seitenleistenposition in Hestia ändern

Nachdem Sie die Änderungen vorgenommen haben, können Sie die verfügbaren Widgets wie gewohnt zur Seitenleiste hinzufügen. Weitere Informationen finden Sie in unserem Leitfaden zum Hinzufügen und Verwenden von Widgets in WordPress.

Klicken Sie dann einfach auf „Veröffentlichen“.

Obwohl dies eine praktische Funktion ist, hängt alles vom Theme ab. Wir empfehlen dringend, die Dokumentation Ihres Themes zu prüfen, um zu sehen, ob Sie die Seitenleiste über den Customizer ändern können.

Wenn nicht, springen Sie zur nächsten Methode.

Methode 2: So ändern Sie die Seitenleistenseite mit Code (klassische Themes)

Wenn Ihr klassisches Theme keine mehreren Seitenleisten zur Auswahl anbietet, können Sie die Seitenleistenseite manuell mit CSS-Code ändern.

Die meisten klassischen Themes verwenden eine CSS-Eigenschaft namens float, um die Seitenleiste und den Inhaltsbereich nebeneinander zu positionieren. Unser Ziel ist es, das CSS für beide Elemente zu finden und einfach ihre Float-Richtung umzukehren.

Wir empfehlen die Verwendung einer Staging-Umgebung und/oder eines Child-Themes, um mit dieser Methode zu experimentieren. Auf diese Weise wirkt sich ein Fehler nicht auf Ihr übergeordnetes Theme und/oder Ihre Live-Website aus.

Außerdem kann die Verwendung eines Child-Themes verhindern, dass Ihre Änderungen überschrieben werden, wenn ein Theme-Update erfolgt.

Schritt 1: Verwenden Sie das Inspektionstool, um Ihre Seitenleisten-CSS-Klasse zu lokalisieren

Das Erste, was Sie tun werden, ist, Ihre Website zu öffnen. Bewegen Sie dann den Mauszeiger über den Bereich Ihrer Seitenleiste und verwenden Sie das Inspektionswerkzeug Ihres Browsers.

Wenn Sie Chrome verwenden, können Sie einfach mit der rechten Maustaste auf den Bereich klicken und 'Untersuchen' auswählen.

Weitere Informationen finden Sie in unserem Leitfaden zu den Grundlagen des Inspect Elements.

Überprüfung des WordPress-Seitenleistenbereichs

Nun möchten Sie Ihren Cursor über die HTML- und CSS-Zeilen auf der oberen rechten Seite der Seite bewegen.

Wenn Sie sehen, dass Ihr gesamter Sidebar-Bereich hervorgehoben ist, klicken Sie auf diese Zeile. Bei uns war es <aside id=”secondary” class=”sidebar widget-area”>.

Die Zeile finden, die den WordPress-Seitenleistenbereich definiert

Der Tab 'Styles' am unteren Rand der Seite enthält alle CSS-Eigenschaften, die sich auf die Seitenleiste beziehen.

In unserem Fall haben wir gesehen, dass die CSS-Klasse für den Seitenleistenbereich .sidebar ist. Es gibt auch Regeln, die die Position der Seitenleiste bestimmen, die in diesem Fall die linke Seite ist.

Wichtig: Die Klassennamen wie .sidebar und .content-area, die in diesem Tutorial verwendet werden, sind spezifisch für unser Beispiel-Theme. Sie müssen die genauen Klassennamen verwenden, die Sie für Ihr eigenes Theme im vorherigen Schritt ermittelt haben.

Wir wissen das, weil die Seitenleiste auf die andere Seite wechselt, wenn wir die Regel margin-left deaktivieren.

Die CSS-Klasse für den WordPress-Seitenleistenbereich finden

Hier ist der Code für den Seitenleistenbereich unseres Themes:

.sidebar {
float: left;
margin-left: 75%;
padding: 0;
width: 25%;
}

Sie können diesen Code in einen Texteditor kopieren und einfügen, da wir ihn für einen späteren Schritt benötigen werden. Oder Sie können diesen Tab einfach für später geöffnet lassen.

Da wir nun die CSS-Klasse für den Seitenleistenbereich kennen, müssen wir auch die Klasse für den Hauptinhaltsbereich finden, der alle Ihre Beiträge oder den Beitragsinhalt anzeigt.

Was Sie tun können, ist, mit der Maus über die HTML- und CSS-Zeilen zu fahren, um zu sehen, welche Zeile den Hauptinhaltsbereich hervorhebt. Hier haben wir herausgefunden, dass es die Zeile <div id=”primary” class=”content-area”> war.

Die CSS-Klasse für den Hauptinhaltsbereich finden

Wie zuvor können Sie nach unten zum Tab „Styles“ scrollen, um zu sehen, welche CSS-Klasse für diesen Bereich gilt. In diesem Fall war es .content-area. Hier ist der Code dafür:

.content-area {
float: left;
margin-right: -100%;
width: 70%;
}

Wieder können Sie den CSS-Code Ihres Inhaltsbereichs kopieren und in einen Texteditor einfügen oder diesen Tab für den nächsten Schritt geöffnet lassen.

Jetzt, da wir die CSS-Klassen Ihrer Seitenleiste und Ihres Inhaltsbereichs kennen, können wir Ihre style.css-Theme-Datei bearbeiten, um die Seite der Seitenleiste zu ändern.

Schritt 2: Passen Sie die style.css-Datei Ihres Themes an

Normalerweise müssen Sie Ihre style.css direkt über den Dateimanager Ihres Webhosting-Anbieters oder einen FTP-Client bearbeiten. Die style.css-Datei kann jedoch ziemlich lang sein, und wenn Sie einen Fehler machen, kann dies das gesamte Website-Design beeinträchtigen und Ihre Benutzererfahrung ruinieren.

Deshalb empfehlen wir die Verwendung von WPCode. Wir haben festgestellt, dass dies der sicherste und einfachste Weg ist, benutzerdefiniertes CSS hinzuzufügen, ohne Ihre Theme-Dateien direkt zu bearbeiten.

Wenn Ihre Codeänderungen unbeabsichtigte Fehler verursachen, können Sie sie mit einem einzigen Klick deaktivieren, und Ihre Website wird wieder normal.

Um mehr zu erfahren, lesen Sie unsere WPCode-Bewertung.

Hinweis: Für dieses Tutorial können Sie die kostenlose WPCode-Version verwenden. Ein Upgrade auf einen Premium-Plan bietet Ihnen jedoch Zugriff auf erweiterte Funktionen. Weitere Informationen finden Sie in unserem vollständigen WPCode-Testbericht.

Installieren Sie zunächst WPCode in Ihrem WordPress. Wenn Sie eine Schritt-für-Schritt-Anleitung benötigen, lesen Sie unseren Leitfaden zur Installation eines WordPress-Plugins.

Gehen Sie anschließend zu Code-Snippets » + Snippet hinzufügen. Wählen Sie dann „Eigene Codes hinzufügen (Neues Snippet)“ und klicken Sie auf die Schaltfläche „+ Benutzerdefiniertes Snippet hinzufügen“.

Hinzufügen eines neuen benutzerdefinierten Code-Snippets in WPCode

Geben Sie nun einen Titel für Ihren benutzerdefinierten Code ein. Es kann etwas wie 'Seitenleisten-Seite ändern' sein.

Ändern Sie dann den Code-Typ auf „CSS-Snippet“.

Ändern der Seitenleistenseite in WPCode

Sobald Sie fertig sind, müssen Sie die CSS-Code-Schnipsel Ihrer Seitenleiste und Inhaltsbereiche in das Code-Vorschaufenster einfügen.

Sie können sie durch einen leeren Abstand trennen, um sie leicht identifizieren zu können, wie hier:

.sidebar {
float: left;
margin-left: 75%;
padding: 0;
width: 25%;
}

.content-area {
float: left;
margin-right: -100%;
width: 70%;
}

Nun passen wir diesen CSS-Code an. Sie möchten die CSS-Eigenschaften ändern, die die Platzierung der Seitenleiste und des Hauptinhaltsbereichs definieren.

In unserem Fall haben diese CSS-Klassen Eigenschaften für float, margin, padding und width, aber dies kann je nach Ihrem Theme unterschiedlich aussehen.

Für unseren Seitenleistenbereich haben wir left in den float- und margin-Eigenschaften durch right ersetzt. Das bedeutet, dass der Seitenleistenbereich in die entgegengesetzte Richtung der ursprünglichen Platzierung angezeigt wird.

.sidebar {
float: right;
margin-right: 75%;
padding: 0;
width: 25%;
}

Nachdem dieser Teil erledigt ist, ändern wir die Platzierung des Inhaltsbereichs. Was für uns funktionierte, war, dass wir float: left in float: right und margin-right in margin-left geändert haben. Dies weist WordPress an, den Inhaltsbereich nach rechts zu verschieben.

Zusätzlich haben wir die Eigenschaften position: relative und right: 100% hinzugefügt. Diese stellen sicher, dass unser Inhaltsbereich nicht zu weit nach rechts verschoben wird.

.content-area {
float: right;
margin-left: -100%;
width: 70%;
position: relative;
right: 100%;
}

Noch einmal, was für unser Theme funktioniert, funktioniert möglicherweise nicht für Ihres, da jedes Theme unterschiedliche Namen für seine CSS-Klassen hat und unterschiedliche Eigenschaften verwendet. Wir empfehlen, diese vollständige CSS-Referenz zu lesen, um herauszufinden, was für Ihr Theme am besten funktioniert.

Darüber hinaus können Sie gerne mit den Prozentwerten für Breite und Ränder im Code experimentieren, um die Platzierung der Seitenleiste anzupassen.

Nachdem Sie Ihren Codeausschnitt geändert haben, scrollen Sie nach unten zum Abschnitt „Einfügen“. Stellen Sie sicher, dass die Einfügungsmethode auf „Automatisch einfügen“ eingestellt ist.

Wählen Sie für den Speicherort 'Site-weite Fußzeile', damit Ihr Code den vorhandenen Code in Ihrer style.css-Datei überschreiben kann.

Klicken Sie nun auf den Schalter oben rechts, um den Code auf „Aktiv“ zu setzen und klicken Sie auf „Snippet speichern“. Vorschau Ihrer Website, um die Ergebnisse zu sehen.

Auswahl des Speicherorts für den Website-Footer in WPCode

Wenn Sie sich die obigen Screenshots ansehen, können Sie sehen, dass sich die Seitenleiste auf unserer Demo-Website auf der rechten Seite befand.

Nach der Bearbeitung des Codes in style.css hat das Theme nun eine linke Seitenleiste:

Die Seitenleiste in WordPress erfolgreich mit CSS-Code auf die andere Seite ändern

Nachdem Sie die Seitenleiste verschoben haben, können Sie mit der Änderung oder dem Hinzufügen weiterer Seitenleisteninhalte beginnen. Hier sind einige Ideen, die Ihnen helfen sollen:

💡Profi-Tipp: Einige moderne Themes verwenden ein CSS-System namens Flexbox anstelle von Floats.

Wenn Sie das Inspektionstool verwenden und eine Eigenschaft wie display: flex; im Container finden, der Ihren Inhalt und Ihre Seitenleiste enthält, können Sie möglicherweise einfach flex-direction: row-reverse; hinzufügen, um die Seitenleiste zu vertauschen.

Methode 3: So ändern Sie die Seitenleistenposition mit FSE (Block-Themes)

Wenn Sie ein Block-Theme verwenden, sehen Sie im WordPress-Adminbereich keinen Bereich für Widgets. Sie fragen sich vielleicht, wie Sie die Seite der Seitenleiste ändern können, wenn dieses Menü nicht existiert.

Glücklicherweise ist der Prozess viel einfacher als bei klassischen Themes. Das liegt daran, dass Block-Themes Gutenberg-Blöcke verwenden und Sie die Elemente einfach per Drag & Drop verschieben können, um ihre Position mit dem Full-Site-Editor (FSE) zu ändern.

Zweitens haben Block-Themes normalerweise eine Vorlage, die eine Seitenleiste enthält. Wir müssen diese nur ändern, und jede Seite, die die Vorlage verwendet, wird davon betroffen sein. Sie können die Dokumentation Ihres Themes überprüfen, um zu sehen, wie die Vorlage heißt, um darauf zuzugreifen.

Zur Demonstration verwenden wir das Theme Twenty Twenty-Four, das zufällig eine Seite mit einer Seitenleisten-Vorlage hat.

Gehen Sie zuerst in Ihrem Dashboard zu Darstellung » Editor.

Auswahl des Full-Site-Editors aus dem WordPress-Admin-Panel

Hier sehen Sie einige Menüs, um Ihr Block-Theme anzupassen.

Wählen Sie 'Vorlagen'.

Auswahl des Menüs "Vorlagen" in FSE

Suchen Sie nun die Vorlage mit der Seitenleiste, die Sie bearbeiten möchten.

In Twenty Twenty-Four sind das „Seite mit Seitenleiste“ und „Einzelbeitrag mit Seitenleiste“. Je nach Theme wird der Name der Vorlage möglicherweise nicht klar darauf hinweisen, dass sie eine Seitenleiste hat. Überprüfen Sie daher erneut die Dokumentation Ihres Themes.

Wählen Sie diese Seitenleisten-Vorlage aus.

Auswahl der Seitenvorlage mit Seitenleiste im Full-Site-Editor

Typischerweise enthalten Block-Themes die Seitenleiste und den Hauptinhaltsbereich in einem Spalten-Block. Dies hält alles ordentlich, organisiert und gut voneinander getrennt.

Um die Seitenleiste zu ändern, müssen Sie nur die Spalte auswählen, aus der die Seitenleiste besteht, und diese verschieben.

Der einfachste Weg, dies zu tun, ist, auf die Funktion 'Listenansicht' auf der linken Seite der Seite zu klicken.

Klicken Sie dann auf den Block 'Spalten', um ihn zu erweitern, und fahren Sie mit der Maus über dessen Inhalt, bis Sie die Spalte finden, die die Elemente der Seitenleiste enthält.

In unserem Fall hat es geholfen, dass das Twenty Twenty-Four Theme einen Template-Teil namens 'Sidebar' hat, sodass die Identifizierung einfach war. Allerdings können einige Themes nur eine normale, unbenannte Gruppe von Blöcken enthalten, die die Seitenleiste bilden.

Sie wissen, dass Sie die richtige Spalte ausgewählt haben, wenn eine rechteckige Hervorhebung und eine Symbolleiste um die gesamte Gruppe von Blöcken für die Seitenleiste erscheinen.

Öffnen der Listenansicht-Funktion in FSE

Nun sehen Sie in der Symbolleiste der Seitenleistenspalte Pfeile, mit denen Sie die Platzierung der Spalte ändern können.

Klicken Sie darauf und je nachdem, wie der Spaltenblock gestaltet ist, müssen Sie möglicherweise mit der Position experimentieren, bis Sie die richtige Passform gefunden haben.

Verschieben der Seitenleiste in FSE

Der Theme-Entwickler hat möglicherweise einige leere Spalten hinzugefügt, um Platz zwischen dem Hauptinhaltsbereich und dem Seitenleistenbereich zu schaffen.

Wenn Sie ihn löschen möchten, suchen Sie einfach die richtige leere Spalte über die Listenansicht-Funktion wie zuvor. Klicken Sie dann in der Block-Symbolleiste auf das Drei-Punkte-Menü und wählen Sie 'Löschen'.

Eine leere Spalte in FSE löschen

Oder wenn Sie mehr Platz zwischen dem Seitenleistenbereich und dem Inhaltsbereich schaffen möchten, können Sie den Tab „Blockeinstellungen“ öffnen und zum Abschnitt „Stile“ wechseln.

Dann können Sie im Abschnitt „Abmessungen“ den Schieberegler für den Abstand, Rand oder Blockabstand ziehen.

Anpassen des Blockabstands von Spalten in FSE

Wenn Sie fertig sind, klicken Sie auf „Speichern“.

Dann können Sie alle Seiten auf Mobilgeräten und Desktops in der Vorschau anzeigen lassen, die die gerade bearbeitete Vorlage verwenden, um zu sehen, wie sie aussieht.

Erfolgreiches Ändern der Seitenleistenseite mit FSE

Was ist, wenn Sie die Vorlage bearbeitet haben, aber Ihre Seiten oder Beiträge sie nicht verwenden?

Alles, was Sie tun müssen, ist, die Seite oder den Beitrag im Block-Editor zu öffnen. Klicken Sie dann im Bereich der Beitragseinstellungen auf den Link im Feld „Vorlage“ und wählen Sie „Vorlage tauschen“ aus.

Ändern einer Seiten-Vorlage im Block-Editor

Wählen Sie nun einfach die Vorlage aus, die die Seitenleiste verwendet.

Danach können Sie die Seite oder den Beitrag aktualisieren.

Auswahl der Seitenleisten-Vorlage im Block-Editor

Weitere Tipps und Tricks zur Verwendung des Full-Site-Editors oder Block-Editors finden Sie in diesen Anleitungen:

Methode 4: So ändern Sie die Seitenleisten-Seite mit CSS Hero (Alle Themes)

Die nächste Methode verwendet ein kostenpflichtiges Plugin namens CSS Hero, das das beste WordPress-Plugin für die visuelle CSS-Bearbeitung ist. Dieses Plugin erleichtert die Anpassung des CSS Ihres Themes, ohne Code anfassen zu müssen, was es großartig für Anfänger macht.

Diese Methode funktioniert auch mit allen Themes. Wenn Sie also feststellen, dass die vorherigen Methoden etwas einschränkend sind, können Sie diese stattdessen verwenden. Allerdings gibt es keine kostenlose Plugin-Version, sodass Sie einen kostenpflichtigen Plan erwerben müssen.

Weitere Informationen über das Plugin und seine Preise finden Sie in unserem CSS Hero-Testbericht.

Laden Sie zunächst das Plugin auf Ihren Computer herunter und installieren Sie es auf Ihrer WordPress-Website. Schritt-für-Schritt-Anleitungen finden Sie in unserem Anfängerleitfaden zur Installation eines WordPress-Plugins.

Nach der Installation sehen Sie ein Menü 'CSS Hero' in der Symbolleiste. Klicken Sie darauf, um den visuellen CSS-Editor zu öffnen.

CSS Hero in WordPress öffnen

Beachten Sie, dass da nicht alle WordPress-Themes gleich funktionieren, die Art und Weise, wie Sie CSS Hero verwenden, um die Seitenleiste zu ändern, unterschiedlich sein wird. Daher ermutigen wir Sie, mit der Plattform zu experimentieren, um herauszufinden, was für Sie am besten funktioniert.

Nichtsdestotrotz zeigen wir Ihnen, welche Einstellungen wir angepasst haben, um die Seitenleiste von der rechten auf die linke Seite zu verschieben.

Klicken Sie zuerst auf den Seitenleistenbereich auf Ihrer Seite. Sie wissen, dass Sie den richtigen Bereich angeklickt haben, wenn alle Elemente in Ihrer Seitenleiste als Gruppe ausgewählt sind und einen rechteckigen Hervorhebungsrahmen um sie herum haben.

Seitenleiste in CSS Hero auswählen

Auf der linken Seite der Seite sehen Sie einige Menüs, um Ihre Elemente anzupassen.

Nach unserer Erfahrung sind die Einstellungen, die die Platzierung der Seitenleiste ändern können, Position, Maße und Abstände.

Die Einstellungen für Positionen, Maße und Abstände in CSS Hero

Die Position bestimmt, wie die Seitenleiste im Verhältnis zu den anderen Elementen auf der Seite platziert wird. Hier können Sie „Absolut“ auswählen, was Ihnen einige Freiheiten bei der Platzierung der Seitenleiste gibt.

Von hier aus können Sie die Pixel für Oben, Rechts, Unten und Links ändern, um die Seitenleiste zu platzieren.

Ändern der Positionseinstellungen der Seitenleiste mit CSS Hero

Sie sehen, dass sich nun die Seitenleiste und der Hauptinhaltsbereich auf derselben Seite befinden.

Um dies zu beheben, können Sie mit der Maus über den Container fahren, der den Hauptinhaltsbereich bildet, und darauf klicken.

Auswählen des Hauptinhaltsbereichs in CSS Hero

Passen Sie nun im linken Bedienfeld die Einstellungen für die Position an, bis Sie die richtige Einstellung gefunden haben.

Wir haben die Position auf „Relativ“ belassen und die Pixel für „Rechts“ angepasst.

Ändern der Positionseinstellungen des Hauptinhaltsbereichs in CSS Hero

Technisch gesehen ist das alles, was Sie tun müssen. Wenn Sie jedoch die Größe der Seitenleiste anpassen möchten, wählen Sie den Seitenleistenbereich aus und gehen Sie zu den Einstellungen „Maße“.

Hier können Sie die Breite und Höhe der Seitenleiste ändern.

Ändern der Maßeinstellungen in CSS Hero

Wenn Sie den Abstand zwischen dem Seitenleistenbereich und dem Hauptinhaltsbereich ändern möchten, können Sie zu „Abstände“ gehen.

Sie sehen hier einige Schieberegler, um den Innenabstand und Außenabstand des Elements anzupassen.

Ändern der Abstände in CSS Hero

Wir ermutigen Sie erneut, die Einstellungen dieses Plugins zu erkunden, um die Seitenleistenseite nach Ihren genauen Wünschen zu ändern.

Wenn Sie fertig sind, können Sie unten rechts auf der Seite auf die Schaltfläche „Speichern“ klicken.

Änderungen in CSS Hero speichern

Alternative: Benutzerdefinierte Seitenleisten mit einem WordPress Page Builder Plugin erstellen

Bisher haben wir Methoden untersucht, um die Position der Seitenleiste für Ihre gesamte Website zu ändern. Aber was ist, wenn Sie nur bestimmte Seitenleisten für bestimmte Seiten oder Beitragstypen wünschen? Schließlich benötigt nicht jede Seite den gleichen Seitenleisteninhalt.

Zum Beispiel könnte Ihre Homepage von einer allgemeineren Seitenleiste mit Social-Media-Icons und einem Call-to-Action profitieren. Eine Produktseite könnte jedoch besser mit einer Seitenleiste sein, die verwandte Produkte oder Kundenrezensionen anzeigt.

In diesem Fall möchten Sie möglicherweise benutzerdefinierte Seitenleisten für Ihr WordPress-Theme erstellen. Mit benutzerdefinierten Seitenleisten können Sie:

  • Weisen Sie bestimmten Seiten oder Beitragstypen spezifische Seitenleisten zu. Dies ermöglicht es Ihnen, Ihre Seitenleisteninhalte an die spezifischen Bedürfnisse jeder Seite anzupassen.
  • Erstellen Sie eine dynamischere und ansprechendere Benutzererfahrung. Indem Sie relevante Inhalte in der Seitenleiste anbieten, können Sie Besucher fesseln und sie dazu anregen, Ihre Website weiter zu erkunden.

Hier kommt ein WordPress Page Builder Plugin ins Spiel. Diese Plugins bieten Drag-and-Drop-Funktionalität und umfangreiche Vorlagenbibliotheken, sodass Sie ganz einfach benutzerdefinierte Seitenleisten erstellen können.

Wir empfehlen die Verwendung von SeedProd, einem beliebten und anfängerfreundlichen Plugin zum Erstellen von Seiten und Themes. Mit SeedProd können Sie mit seiner benutzerfreundlichen Oberfläche ganz einfach benutzerdefinierte Seiten und Themes gestalten.

Ziehen Sie die Blöcke, die Sie verwenden möchten, direkt in die Seitenleiste

Sie können diese Artikel für weitere Informationen lesen:

Alternativ können Sie den Thrive Architect Page Builder verwenden. Dieses Tool bietet ebenfalls unzählige Theme-Kits und Landingpage-Vorlagen und bietet sogar eine Funktion, um ein klebriges, schwebendes Seitenleisten-Widget zu erstellen. Dies ist nützlich, um Ihre Seitenleiste beim Scrollen der Benutzer auf der Seite klebrig zu halten.

Häufig gestellte Fragen zu WordPress-Seitenleisten

Hier sind einige Fragen, die unsere Leser häufig zu den Seitenleisten auf ihren Websites stellen:

Wie ändere ich die Position der Seitenleiste in WordPress?

Die Methode, die Sie verwenden, hängt von Ihrem Theme ab. Bei klassischen Themes können Sie die Position im Theme Customizer ändern, falls die Option vorhanden ist, oder durch Hinzufügen von benutzerdefiniertem CSS. Bei modernen Block-Themes können Sie die Sidebar-Spalte einfach im Full-Site-Editor per Drag & Drop auf die andere Seite ziehen.

Wie passe ich die Sidebar in WordPress an?

Sie können den Inhalt der Sidebar mit Widgets oder Blöcken anpassen. Wenn Sie ein klassisches Theme haben, navigieren Sie zu Darstellung » Widgets, um Elemente hinzuzufügen oder zu entfernen.

Wenn Sie ein Block-Theme verwenden, gehen Sie zu Darstellung » Editor und bearbeiten Sie das Sidebar-Template-Teil direkt, indem Sie beliebige WordPress-Blöcke hinzufügen oder entfernen.

Wie füge ich eine linke und rechte Sidebar in WordPress hinzu?

Das Hinzufügen einer linken und rechten Sidebar erfordert ein Theme, das ein Drei-Spalten-Layout unterstützt.

Wenn Ihr Theme diese Option nicht integriert hat, ist der einfachste Weg, ein benutzerdefiniertes Drei-Spalten-Layout zu erstellen, mit einem WordPress Page Builder Plugin wie SeedProd oder Thrive Architect.

Wie ändere ich die Breite der Sidebar in WordPress?

Der zuverlässigste Weg, die Breite der Sidebar zu ändern, ist mit benutzerdefiniertem CSS. Sie können das Inspektionstool Ihres Browsers verwenden, um den CSS-Selektor Ihrer Sidebar zu finden und dann eine neue Breitenregel hinzuzufügen, wie z. B. .sidebar { width: 30%; }.

Alternativ können Sie mit einem Plugin wie CSS Hero die Breite visuell ohne Code anpassen.

Wir hoffen, dieses WordPress-Tutorial hat Ihnen geholfen zu lernen, wie Sie die Seitenleiste in WordPress ändern. Möglicherweise möchten Sie auch unseren Artikel über das Hinzufügen eines Vollbild-Responsive Menüs in WordPress und unsere Liste der besten WordPress Seitenleisten-Tricks für maximale Ergebnisse lesen.

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.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, wenn Sie auf einige unserer Links klicken, können wir eine Provision verdienen. Sehen Sie wie WPBeginner finanziert wird, warum das wichtig ist und wie Sie uns unterstützen können. Hier ist unser Redaktionsprozess.

Das ultimative WordPress-Toolkit

Erhalten Sie KOSTENLOSEN Zugang zu unserem Toolkit – eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Leserinteraktionen

8 CommentsLeave a Reply

  1. Das wäre schön, wenn es funktionieren würde. Es hat es verschoben, aber meine Seitenleiste ganz nach unten auf die Seite geschoben.

    • Es klingt, als ob Ihr spezifisches Theme möglicherweise widersprüchliches CSS oder Ähnliches hat. Wenn Sie sich an den Support des Themes wenden, sollten diese Ihnen helfen können.

      Admin

  2. wie man das Kommentarfeld in WordPress von rechts nach links verschiebt
    erster Kommentar dann das Veröffentlichungsdatum dann die Kategorie

  3. Das ist ein schöner Artikel, das Verschieben von rechts nach links funktioniert hier. Ich würde auch vorschlagen, dafür eine neue Vorlage zu erstellen, bei der eine die Seitenleiste links und die andere die Seitenleiste rechts anzeigt. Dies gibt den Benutzern die Möglichkeit, das gewünschte Design für die Seite auszuwählen.

  4. So gut dieses Tutorial auch ist, mir ist aufgefallen, dass es voller Fehler ist. Zum Beispiel gibt es keine Änderungen zwischen der @media-Regel und der geänderten. Bitte überprüfen Sie alle Codes im Artikel noch einmal.
    Danke trotzdem...

Hinterlassen Sie eine Antwort

Vielen Dank, dass Sie einen Kommentar hinterlassen. Bitte beachten Sie, dass alle Kommentare gemäß unserer Kommentarrichtlinie moderiert werden und Ihre E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwenden Sie KEINE Schlüsselwörter im Namensfeld. Führen wir ein persönliches und bedeutungsvolles Gespräch.