So entfernen Sie den Rand der Divi-Sidebar

Eine Sache, die fast jeder Divi-Benutzer wissen möchte, wie man mit dem Divi-Thema vorgeht, ist das Entfernen des Rands der Seitenleiste. Glücklicherweise ist dies eine einfache Aufgabe. Dies kann mit Code erfolgen, aber noch wichtiger ist, dass es mit dem Divi Theme Builder ganz einfach ist. In diesem Artikel zeigen wir Ihnen, wie Sie den Rand der Divi-Seitenleiste mit beiden Methoden entfernen, und wir werden sehen, warum Sie mit dem Divi Theme Builder die besten Ergebnisse erzielen.

Die Standard-Divi-Sidebar

Die Divi-Standardseiten- und Beitragslayouts platzieren eine Linie zwischen dem Inhalt und der Seitenleiste. Viele der Seitenleistenelemente können mit dem Theme-Anpasser gestaltet oder angepasst werden, aber diese Zeile gehört nicht dazu. Dies ist ein Bereich, in dem WordPress-Optionen fehlen.

Mit den Divi-Themenoptionen können Sie die Seitenleiste nach rechts oder links verschieben, enthalten jedoch keine Stiloptionen.

Divi fügt auch Einstellungen hinzu, mit denen Sie das Seitenleistenlayout auf Seiten- und Beitragsebene auswählen können. Dazu gehört sogar die Option, die Seitenleiste zu entfernen, damit keine Widgets angezeigt werden, sodass der Inhaltsbereich die volle Breite der Webseite nutzen kann.

Diese Optionen geben Ihnen die Kontrolle über das Layout, aber nicht über das Styling, und sie entfernen nicht den Rand der Seitenleiste. Sehen wir uns zwei Methoden an, um den Rand der Divi-Seitenleiste zu formatieren oder zu entfernen.

Seitenleistenrahmen von Divi mit Code entfernen oder gestalten

Sehen wir uns zunächst an, wie Sie den Rand der Seitenleiste des Divi-Designs entfernen oder formatieren, indem Sie Code zu Divi hinzufügen.

Sie müssen etwas CSS zum Feld Divi Theme Options Custom CSS hinzufügen. Um auf das benutzerdefinierte CSS-Feld zuzugreifen, gehen Sie im WordPress-Dashboard-Menü zu Divi > Theme-Optionen . Bleiben Sie auf der Registerkarte Allgemein und scrollen Sie zum Ende der Einstellungen, um Ihren Code einzufügen.

Hier ist das CSS, das Sie benötigen:

#main-content .container:before {
width:0;
}
.et_pb_widget_area_right { border-left:0 !important; }
.et_pb_widget_area_left { border-right:0 !important; }

Dieser Code teilt WordPress mit, dass der Rand des Widget-Bereichs keine Breite hat, was dazu führt, dass er nicht angezeigt wird.

Fügen Sie den Code in das Feld Benutzerdefiniertes CSS ein und speichern Sie die Änderungen.

Die Grenze ist jetzt entfernt. CSS funktioniert mit dem Divi-Theme, um den Rand der Seitenleiste zu entfernen, aber es ist nicht ideal und nicht jeder möchte mit Code jeglicher Art umgehen. Was ist, wenn Sie die Blog-Seite mit dem Divi Builder erstellen möchten? Die beste Option ist die Verwendung des Divi Theme Builder.

So verwenden Sie den Theme Builder von Divi, um den Rand der Divi-Sidebar ohne Code zu entfernen

Es ist auch möglich, das Divi-Design zu verwenden, um den Rand der Seitenleiste ohne Code zu entfernen. Gehen Sie zum Divi Theme Builder, indem Sie im WordPress-Dashboard-Menü Divi > Theme Builder auswählen. Wenn Sie noch kein Blog-Layout haben, wählen Sie Neue Vorlage hinzufügen aus .

Diese Vorlage wird Ihrer Blogseite, Archivseite oder jeder anderen gewünschten Seite zugewiesen. Stellen Sie also sicher, dass Sie diese Seite zuerst erstellt haben.

Es öffnet sich ein Modal, in dem Sie auswählen können, wo diese Vorlage angezeigt wird. Wählen Sie Ihre Blogseite unter Bestimmte Seiten aus . Sie können auch Archivseiten, Autorenseiten, Kategorieseiten, Datumsseiten, Tag-Seiten und vieles mehr erstellen. Klicken Sie auf Speichern, wenn Sie Ihre Auswahl getroffen haben.

Deiner Seite ist nun eine leere Vorlage zugewiesen. Als Nächstes müssen Sie das Blog-Layout erstellen. Klicken Sie auf den Bereich mit der Bezeichnung Benutzerdefinierten Körper hinzufügen .

Dadurch wird ein Dropdown-Feld geöffnet, in dem Sie entweder einen benutzerdefinierten Körper erstellen oder einen aus der Bibliothek hinzufügen können. Klicken Sie auf Ihre Auswahl. Ich wähle den benutzerdefinierten Körper zu bauen.

Divi Sidebar-Modul

Ich habe ein zweispaltiges Layout gewählt und links ein Blog-Modul und rechts ein Sidebar-Modul platziert. Da es sich um ein Divi-Modul handelt, können Sie die Seitenleiste überall platzieren, aber ich gehe vom traditionellen rechten Design aus.

Das Modul wurde so konzipiert, dass es auf der rechten oder linken Seite platziert werden kann und platziert die Umrandung entsprechend. Standardmäßig ist das Modul so eingestellt, dass es als linke Seitenleiste angezeigt wird, sodass sich der Rahmen auf der rechten Seite der Widgets befindet.

Um das Layout zu ändern, öffnen Sie das Modul, wählen Sie die Registerkarte Design , sehen Sie sich den Abschnitt Layout an und wählen Sie Rechts im Dropdown-Feld Ausrichtung . In diesem Beispiel befindet sich jetzt der Rahmen links vom Widget-Bereich, sodass dies eine rechte Seitenleiste ist.

Verwenden Sie diese Einstellung, wenn Sie den Rand der Seitenleiste anzeigen möchten. Die Ausrichtung spielt keine Rolle, wenn Sie den Rahmen deaktivieren möchten. Ich bin sicher, Sie haben den Umschalter unter dem Dropdown-Feld Ausrichtung bereits bemerkt.

Die zweite Option im Abschnitt Layout ist ein Schalter namens Show Border Separator . Auf diese Weise können Sie die Grenze deaktivieren oder aktivieren. Es ist standardmäßig aktiviert. Klicken Sie einfach auf den Schalter. Der Rahmen wird jetzt aus der Seitenleiste entfernt. Speichern Sie das Layout und verlassen Sie den Editor. So einfach ist das.

Wählen Sie schließlich Änderungen speichern, bevor Sie den Divi Theme Builder verlassen. Es zeigt jetzt einen benutzerdefinierten Text für die Blog-Seite an.

Meine Blogseite zeigt jetzt die Seitenleiste ohne Rahmen. Natürlich gibt es noch ein paar weitere Dinge, die Sie tun können, wenn Sie ein besseres Design wünschen.

Erstellen eines benutzerdefinierten Divi-Sidebar-Rahmens

Wenn Sie das Divi-Design nicht verwenden möchten, um den Seitenleistenrahmen zu entfernen, aber nicht den standardmäßigen WordPress-Rahmen, können Sie mit dem Divi-Seitenleistenmodul einen benutzerdefinierten Seitenleistenrahmen erstellen.

In der Registerkarte Design des Seitenleiste Modul, navigieren Sie zu den Grenzeinstellungen. Hier können Sie eine Seite des Moduls mit einem Rahmen versehen. Wählen Sie jede Seite aus, die der Rahmen nicht anzeigen soll, und legen Sie die Rahmenbreite auf 0 fest. Sie können auch die Breite des Rahmens, eine Farbe und einen Stil auswählen. Zu den Stilen gehören Vollton, gestrichelte, gepunktete, doppelte, Nut, Grat, Einfügung, Anfang und keine.

Wählen Sie für die Seite, auf der der Rahmen angezeigt werden soll, die Rahmenbreite, -farbe und -art aus. In diesem Beispiel habe ich ausgewählt, dass der Rahmen nur auf der linken Seite des Moduls angezeigt wird. Ich habe die Rahmenbreite auf 7 Pixel, die Farbe auf Hellorange und den Rahmenstil auf gepunktet eingestellt.

Meine Blog-Seite zeigt jetzt meinen benutzerdefinierten Divi-Sidebar-Rahmen an.

Sie können den anderen drei Seiten sogar einen Kastenschatten hinzufügen, wenn Sie möchten. In diesem Beispiel habe ich die Ränder für die rechte Seite abgerundet. Ich habe auf den Link in der Mitte geklickt, damit der gepunktete Rand gerade bleibt. Ich habe auch den Boxschatten angepasst, um das gewünschte Design zu erhalten.

Hier ist mein endgültiger Entwurf mit dem gepunkteten Rand. Die Seitenleiste fügt sich gut in das Design des Blogs ein.

Zurück zu der Idee, das Divi-Design zu verwenden, um den Rand der Seitenleiste zu entfernen, hier ist mein endgültiges Blog-Layout. Ich mag, wie das ausgegangen ist. Dies zeigt, dass die Verwendung des Divi-Moduls viele Möglichkeiten für das Sidebar-Design eröffnet.

Abschluss

So sehen wir uns an, wie Sie das Divi-Design verwenden, um den Rand der Seitenleiste zu entfernen. Es ist einfach, es im Code zu entfernen, aber die Verwendung des Divi Theme Builder bietet Ihnen viel mehr Optionen, wodurch Sie mehr Kontrolle über das Design haben. Diese Funktion ist extrem einfach, aber die meisten Divi-Benutzer möchten sie lernen. Es ist auch eine gute Übung, um zu lernen, wie kleine Anpassungen in den Divi-Modulen einen großen Unterschied im Design Ihrer Website machen können.

Wir wollen von dir hören. Haben Sie Ihren Divi-Sidebar-Rahmen mit einer dieser Methoden entfernt? Teilen Sie uns Ihre Erfahrungen in den Kommentaren unten mit.

Ausgewähltes Bild über Andrew Rybalko / shutterstock.com