Springe zum Hauptinhalt

Wie die Seite der Sidebar auf Wordpress zu ändern

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Kürzlich hat uns einer unserer Leser gefragt, wie man die Seitenleiste eines WordPress-Themas ändert.

Diese Frage erhalten wir normalerweise von Benutzern, die die Position ihrer Seitenleiste von links nach rechts oder von rechts nach links ändern möchten.

In diesem Tutorial zeigen wir Ihnen, wie Sie die Position der Seitenleiste in WordPress ändern können.

Aber vorher, wenn Sie WordPress Discover noch nie installiert haben Wie man ein Wordpress-Blog 7 Schritte für die Installation et Wie finden, zu installieren und ein Wordpress-Theme auf Ihrem Blog aktivieren 

Dann zurück zu warum wir hier sind.

So ändern Sie die Position der Seitenleiste in WordPress e1568058176266

Warum die Position der Seitenleiste in WordPress ändern?

Usability-Experten glauben, dass Benutzer Seiten von links nach rechts scannen. Sie empfehlen, wichtige Inhalte links zu platzieren, damit Benutzer diese Inhalte zuerst sehen. Dies kann jedoch rückgängig gemacht werden, wenn Ihre Website in einer RTL-Sprache vorliegt (rechts auf der linken Seite).

Finden Sie heraus, ob sollte Ihr WordPress-Blog Seitenleisten haben

Viele WordPress-Websites verwenden das typische Blog-Layout mit zwei Spalten. Eine für den Inhalt und die andere Spalte für die Seitenleiste.

typische Inhaltsdemo WordPress-Seitenleiste

Wenn Sie noch nicht mit Websites vertraut sind, sollten Sie ein WordPress-Design auswählen, dessen bevorzugte Website eine Seitenleiste enthält.

Viele WordPress-Themes bieten Optionen zum Ändern der Seitenleiste in den Einstellungen der letzteren. Wenn Ihr WordPress-Theme diese Option jedoch nicht bietet, müssen Sie die Seitenleistenseite manuell ändern. Gehen Sie weiter, indem Sie entdecken So entfernen Sie die Seitenleiste in WordPress

Schauen wir uns die Methode an, die Sie verwenden sollten, um die Seitenleistenseite von WordPress mithilfe von CSS zu ändern.

Ändern der Seitenleiste mit CSS

Bevor Sie Änderungen an Ihrem WordPress-Theme vornehmen, sollten Sie zunächst die Erstellen eines untergeordneten Themas. Wenn Sie ein untergeordnetes Thema verwenden, können Sie Ihr übergeordnetes Thema aktualisieren, ohne Ihre Änderungen zu verlieren.

Entdecken Sie Wie für jedes Element auf Wordpress eine andere Seitenleiste angezeigt werden

Zweitens sollten Sie immer eine Sicherungskopie Ihrer WordPress-Website erstellen, wenn Sie Änderungen an Ihrem aktiven Thema in Echtzeit vornehmen.

Sie benötigen einen FTP-Client, um die WordPress-Themendateien zu bearbeiten. Konsultieren Sie die Anleitung, wie man FTP verwenden,.

Melden Sie sich mit dem FTP-Client bei Ihrer WordPress-Website an und navigieren Sie zum Themenordner. Es befindet sich normalerweise in:

 / Ihre_site / wp-content / themes / your-Thema-Ordner / 

Jetzt müssen Sie die Haupt-Stylesheet-Datei Ihres WordPress-Themas in einem Texteditor wie Notepad herunterladen und öffnen. Diese Datei wird aufgerufen style.cssund es befindet sich im Stammverzeichnis Ihres WordPress-Themas.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Entdecken Sie wie man WordPress Dateien und Ordner verwaltet

Suchen Sie in dieser Datei die CSS-Klasse Ihrer Seitenleiste. Im Allgemeinen ist diese Klasse " Seitenleiste “. In diesem Beispiel verwenden wir das Standard-WordPress-Theme " zwanzig fünfzehn Wer hat diese Klasse für die Sidebar:

.sidebar {float: left; Rand rechts: -100%; maximale Breite: 413px; Position: relativ; Breite: 29.4118%; }

Wie Sie sehen, schwebt die Seitenleiste mit einem Rand von -100% nach links. Wir werden den Schwimmer nach rechts ändern:

.sidebar {float: rechts; Rand-links: -100%; maximale Breite: 413px; Position: relativ; Breite: 29.4118%; }

Speichern Sie Ihre Änderungen und laden Sie die Datei style.css mit einem FTP-Client auf Ihre Website hoch. Wenn Sie jetzt Ihre Website besuchen, sieht sie folgendermaßen aus:

Demo-Website, um die Sidebar

Wir haben zwar die Seitenleiste verschoben, aber den Inhaltsbereich nicht verschoben. " Zwanzig Fünfzehn Verwendet dieses CSS, um die Position des Inhaltsbereichs zu definieren.

.site-content {display: block; Schwimmer: links; ganz links: 29.4118%; Breite: 70.5882%; }

Wir werden es ändern, um den Inhalt nach rechts zu verschieben. Wie folgt:

.site-content {display: block; Schwimmer: links; Rand rechts: 29.4118%; Breite: 70.5882%; }

So sieht Ihre Website aus, nachdem Sie diesen CSS-Code angewendet haben.

neue Präsentation verschoben Sidebar-Website

Wie Sie sehen, haben wir die Position des Inhaltsbereichs und der Seitenleiste geändert. Es gibt jedoch immer noch einen weißen Block auf der linken Seite.

Gehen Sie weiter und entdecken Sie wie man WordPress Dateien und Ordner verwaltet

Diese Fehler treten häufig bei der Arbeit mit CSS auf. Es wird einige Detektivarbeit erfordern, um zu verstehen, was dies verursacht und wie es behoben werden kann.

Verwenden Sie das "Inspector" -Tool Ihres Browsers, um den Quellcode anzuzeigen. Zeigen Sie mit der Maus auf die betroffene Region im Browser, klicken Sie mit der rechten Maustaste und wählen Sie "Inspektor" aus dem Browser-Menü.

inspizieren Browser-Tool

Wenn Sie die Maus in der Quellcodeansicht bewegen, werden Sie die betroffenen Bereiche in der Live-Vorschau hervorheben. Im rechten Bereich sehen Sie das für das ausgewählte Element verwendete CSS.

Entdecken Sie unsere 5 WordPress-Plugins zum visuellen Bearbeiten von CSS in Ihrem Blog

Daher muss das CSS, das dem markierten Element entspricht, neu angepasst werden.

@media screen und (min-width: 59.6875em) {body: before {background-color: #fff; Kastenschatten: 0 0 1px rgba (0, 0, 0, 0.15); Inhalt: ""; Anzeige: Block; Höhe: 100%; Mindesthöhe: 100%; Position: feststehend; oben: 0; links: 0; Breite: 29.4118%; Z-Index: 0; / * Behebt einen Fehler beim Scrollen in Safari * /}

Dieser CSS-Code fügt oben links einen leeren Block mit 29,4118% width und eine Breite von 100% hinzu. So verschieben wir es nach rechts.

@media screen und (min-width: 59.6875em) {body: before {background-color: #fff; Kastenschatten: 0 0 1px rgba (0, 0, 0, 0.15); Inhalt: ""; Anzeige: Block; Höhe: 100%; Mindesthöhe: 100%; Position: feststehend; oben: 0; rechts: 0; Breite: 29.4118%; Z-Index: 0; / * Behebt einen Fehler beim Scrollen in Safari * /}

Nach dem Speichern und Hochladen des Stylesheets auf den Server sieht Ihre Website folgendermaßen aus.

neue Look Website Sidebar auf dem rechten Seite

Das Arbeiten mit CSS kann für Anfänger verwirrend sein. Wenn Sie nicht alle manuellen Arbeiten ausführen möchten, können Sie das versuchen WordPress CSS Hero Plugin. Sie können CSS bearbeiten, ohne Code schreiben zu müssen, und es funktioniert mit jedem WordPress-Thema.

Entdecken Sie auch einige Premium-WordPress-Plugins  

Sie können andere WordPress-Plugins verwenden, um ein modernes Erscheinungsbild zu erhalten und den Grip Ihres Blogs oder Ihrer Website zu optimieren.

Wir bieten Ihnen hier einige Premium-WordPress-Plugins an, die Ihnen dabei helfen werden.

1. Zxeion

Zxeion ist ein leistungsstarkes Premium-WordPress-Plugin, das für die Verbesserung der Sicherheit Ihrer Website verantwortlich ist. Dieses Plugin enthält eine Sammlung von Schutz- und Sicherheitstools, die Ihre Website vor möglichen Angriffen schützen.Zxeion WordPress-Plugins schützen die Website vor Malware-Virenangriffen

Das Echtzeit-Schutzsystem hilft Ihnen dabei, Bedrohungen für Ihre Website zu erkennen und zu blockieren, ohne dass Sie etwas unternehmen müssen.

Entdecken Sie auch unsere 7 Plugins, um Ihre Seitenleisten in WordPress zu verbessern

Seine Funktionen sind: Echtzeitschutz, exzellenter Kundensupport, regelmäßige Updates, IP-Adressblocker, exzellente Dokumentation, moderne und professionelle Benutzeroberfläche, dedizierter Kundensupport und andere

Download | Demo | Web-Hosting

2. Slaido 

Slaido ist ein Premium-WordPress-Plugin, mit dem Sie aus fast 320 reaktionsschnellen Slider-Vorlagen auswählen und mit nur wenigen Klicks eine davon in Ihre Website importieren können. Es ist ein komplettes Paket von Vorlagen, perfekt für Slider Revolution. Sie müssen also zuerst Letzteres installieren, um dieses WordPress-Plugin vollständig nutzen zu könnenSlaido Template Pack für Slider Revolution WordPress

Die Hauptmerkmale sind: ein ansprechendes Layout der Schieberegler, das einfache Importieren oder Exportieren von Schiebereglern, regelmäßige Updates, rund um die Uhr verfügbarer Kundensupport, flüssige und sehr coole Animationen, die Verfügbarkeit von Video-Tutorials für einen schnellen Start, Unterstützung für Google Fonts und vieles mehr.

Download | Demo | Web-Hosting

3. Kontaktieren Sie uns

Das Kontaktformular ist ein erstklassiges WordPress-Plugin und ein einfaches Tool mit zahlreichen Anpassungsoptionen, mit denen Sie ein klares und ermutigendes Formular anzeigen können, auf dem Ihre Besucher Sie kontaktieren können, indem sie ihre Nachricht hinterlassen.

Kontaktieren Sie uns über das WordPress-Kontaktformular-Plugin

Sie können die erforderlichen Felder definieren, das beste Layout der Felder auswählen und es vollständig anpassen, um Ihre Kunden oder Besucher zu ermutigen, ihre Vorschläge oder Nachrichten zu hinterlassen.

Wir laden Sie auch ein zu lesen: 10 WordPress-Plugins zum Erstellen und Verwalten einer Restaurant-Website

Richten Sie einfach die E-Mail-Adresse ein, unter der Sie die Nachrichten erhalten möchten, und verwenden Sie sie, um Ihr Unternehmen in die profitabelste Richtung zu führen.

Download | Demo | Web-Hosting

Empfohlene Ressourcen

Informieren Sie sich über andere empfohlene Ressourcen, die Sie beim Erstellen und Verwalten Ihrer Website unterstützen.

Fazit

Es! Das war's für dieses Tutorial. Wir hoffen, es hilft Ihnen dabei, die Seitenleiste Ihres WordPress-Blogs zu ändern. Zögere nicht zu Teile diesen Artikel mit deinen Freunden in deinen bevorzugten sozialen Netzwerken

Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung.

Wenn Sie Vorschläge oder Anmerkungen haben, hinterlassen Sie diese in unserer Rubrik commentaires.

...  

Dieser Artikel enthält 1 Kommentar

  1. […] In diesem Tutorial erfahren Sie, wie Sie die Position der Seitenleiste Ihres WordPress-Themas ändern. […]

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
1 Aktien
Aktie
tweet
Registrieren1