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 600.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 die Seitenleiste eines WordPress-Themas geändert werden soll.

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 die Benutzer die Seiten von links nach rechts scannen. Sie empfehlen, wichtige Inhalte links anzuordnen, damit die Benutzer diese Inhalte zuerst sehen. Dies kann jedoch rückgängig gemacht werden, wenn Ihre Website in einer RTL-Sprache verfasst ist (rechts auf der linken Seite).

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

Viele Websites in WordPress verwenden das typische Layout von Blogs mit zwei Spalten. Eine für den Inhalt und die andere 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 Seiten der Seitenleiste manuell ändern. Gehen Sie weiter und entdecken Sie 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, müssen Sie zuerst 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-Designdateien zu bearbeiten. Schauen Sie sich 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 Tool "Inspector" in Ihrem Browser, um den Quellcode anzuzeigen. Zeigen Sie mit der Maus auf den betroffenen Bereich im Browser, klicken Sie mit der rechten Maustaste und wählen Sie "Inspector" aus dem Browser-Menü.

inspizieren Browser-Tool

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Wenn Sie Ihre Maus in der Ansicht des Quellcodes bewegen, werden Sie die betroffenen Bereiche in der Echtzeitvorschau 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 Herunterladen des Stylesheets auf dem 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. Es erlaubt Ihnen, CSS zu bearbeiten, ohne Code zu schreiben, und es funktioniert mit jedem WordPress-Theme.

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, mit denen Sie Ihre Website vor möglichen Angriffen schützen können.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

Zu den Funktionen gehören: Echtzeitschutz, exzellenter Kundensupport, regelmäßige Updates, ein IP-Adressblocker, exzellente Dokumentation, die 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 reaktionsfähigen Slider-Vorlagen auswählen und eine davon mit nur wenigen Klicks in Ihre Website importieren können. Es ist ein komplettes Paket von Vorlagen, perfekt für Slider Revolution. Sie müssen es also zuerst 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, 24 / 7-Kundenunterstützung, coole und coole Animationen, die Verfügbarkeit von Video-Tutorials für den Schnellstart, Unterstützung für Google Fonts und mehr.

Download | Demo | Web-Hosting

3. Kontaktieren Sie uns

Das Kontaktformular ist ein erstklassiges WordPress-Plugin und ein einfaches Tool mit zahlreichen Personalisierungsoptionen, mit dem 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

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

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

Entdecken Sie weitere empfohlene Ressourcen, die Sie bei der Erstellung und Verwaltung Ihrer Website unterstützen.

Fazit

Es! Das war's für dieses Tutorial. Wir hoffen, dass es Ihnen dabei hilft, die Seitenleiste Ihres WordPress-Blogs zu ändern. Zögern Sie 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

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