So entfernen Sie Seitenleisten aus Divi

Das Entfernen der Seitenleiste aus der Standardseitenvorlage von Divi kann problemlos durchgeführt werden, wenn Sie den Divi Builder verwenden. Da die Standardseitenvorlagen von Divi (mit der Seitenleiste) jedoch immer noch auf Seiten wie 404 und Archiven angezeigt werden, möchten Sie möglicherweise die Seitenleiste ganz aus Ihrer Vorlage entfernen.

Die offensichtlichste Möglichkeit, das standardmäßige Layout der rechten Seitenleiste von Divi zu überschreiben, besteht darin, den Divi Builder zum Entwerfen der Seite oder des Beitrags zu verwenden. Wenn Sie den Divi Builder jedoch nicht für eine Seite oder einen Beitrag verwenden möchten, gibt es zwei Möglichkeiten, die Seitenleiste zu entfernen. Die erste besteht darin, das Seitenlayout pro Seite zu ändern, wenn Sie eine einzelne Seite oder einen Beitrag bearbeiten. Die zweite Möglichkeit besteht darin, die Standardseiten- oder Beitragsvorlage zu überschreiben, indem Sie eine benutzerdefinierte Vorlage im Divi Theme Builder erstellen.

Heute zeige ich Ihnen die verschiedenen Möglichkeiten, um Seitenleisten aus Divi's Standardvorlage zu entfernen und die Vorlagen mit dem Divi Builder zu überschreiben. Hoffentlich werden Sie damit mit den Tools ausgestattet, die Sie benötigen, um eine konsistent gestaltete Website in voller Breite zu erstellen.

Lass uns anfangen!

Entfernen von Seitenleisten auf Seiten mithilfe der Divi-Seiteneinstellungen

Ändern des Standardlayouts der rechten Seitenleiste für einzelne Beiträge oder Seiten

Für Seiten oder Beiträge, die den Divi Builder nicht verwenden, enthält das Standardseitenlayout eine rechte Seitenleiste, die wie folgt aussieht:

Wenn Sie den Divi Builder für diese Seite oder diesen Beitrag nicht verwenden möchten und die Seitenleiste einfach pro Seite entfernen möchten, suchen Sie beim Bearbeiten Ihrer Seite einfach das Feld Divi-Seiteneinstellungen in der Seitenleiste und wählen Sie Vollbreite (oder nein) sidebar ) für Ihr Seitenlayout.

Dadurch wird die Seitenleiste für diesen bestimmten Beitrag oder diese Seite entfernt.

Entfernen von Seitenleisten auf der WooCommerce-Shop-, Kategorie- und Produktseite mit Divi-Theme-Optionen

Wenn Sie WooCommerce installiert haben, finden Sie in den Divi-Designoptionen einige Optionen, um das Seitenlayout von WC-Shop-, Kategorie- und Produktseiten zu ändern.

Um die Seitenleiste auf den WC-Shop- und Kategorieseiten zu entfernen, navigieren Sie zu Divi > Themenoptionen. Suchen Sie auf der Registerkarte "Allgemein" die Option "Shop-Seiten- und Kategorieseitenlayout für WooCommerce" und ändern Sie das Layout in "Keine Seitenleiste" oder "Vollbreite".

Um die Seitenleiste für Produktseiten zu entfernen, navigieren Sie zu Divi > Designoptionen. Wählen Sie die Registerkarte Builder aus. Wählen Sie unter Beitragstyp-Integration das Produktlayout „Keine Seitenleiste“ aus der Dropdown-Liste aus.

Entfernen von Seitenleisten durch Erstellen benutzerdefinierter Vorlagen mit dem Theme Builder

Das Entfernen von Seitenleisten für jede Seite/jeden Beitrag mit den Divi-Seiteneinstellungen ist eine gute Lösung, wenn Sie neue Beiträge und Seiten einzeln erstellen. Dies kann jedoch ziemlich umständlich sein, insbesondere wenn Sie sich entscheiden, Seitenleisten von allen Seiten zu entfernen. Außerdem wird die Standardvorlage (mit einer Seitenleiste) immer noch auf Seiten wie 404 und Archiven angezeigt. Vielleicht möchten Sie die Seitenleiste aus einer Seite oder einer Beitragsvorlage entfernen. Dazu können Sie mit dem Divi Theme Builder benutzerdefinierte Vorlagen erstellen. Dies gibt Ihnen die volle Kontrolle darüber, welche Seiten Sie in den Seitenleisten global ausblenden möchten.

Der Theme Builder von Divi ist ein leistungsstarkes Werkzeug zum Entwerfen globaler Vorlagen, die auf jede gewünschte Seite oder jeden gewünschten Beitrag angewendet werden. Jedes Mal, wenn Sie ein neues Textkörperlayout für eine Vorlage erstellen, überschreibt diese Vorlage das Standardseitenlayout von Divi (das eine Seitenleiste enthält). Um eine Seitenleiste auf Vorlagenebene zu entfernen, müssen Sie daher nur eine neue Vorlage im Divi Theme Builder erstellen und diese den Seiten oder Beiträgen Ihrer Wahl zuweisen.

Erstellen einer Blog-Post-Vorlage in voller Breite mit dem Divi Builder

Blog-Posts sind ein großartiges Beispiel dafür, wo möglicherweise eine Website-weite Vorlage ohne Seitenleiste erforderlich ist. Die integrierten dynamischen Inhaltsoptionen von Divi ermöglichen es Ihnen, eine Blogpost-Vorlage zu entwerfen, die mit dem Divi Builder und dynamischem Inhalt auf alle Blogposts auf der gesamten Website angewendet wird. Sobald dies erledigt ist, müssen Sie nur noch den tatsächlichen Inhalt des Hauptteils für alle zukünftigen Beiträge aktualisieren. Der Inhalt des neuen Beitrags übernimmt das Design der benutzerdefinierten Vorlage!

Hier ist ein kurzes Beispiel dafür:

Erstellen Sie zunächst eine neue Vorlage und weisen Sie die Vorlage Allen Beiträgen zu.

Fügen Sie dann der Vorlage einen benutzerdefinierten Textkörper hinzu.

Entwerfen Sie mit dem Vorlagenlayout-Editor das gesamte Layout mit dem Divi Builder in Kombination mit den integrierten dynamischen Inhaltsmodulen und -optionen von Divi.

Sie können beispielsweise das Beitragstitelmodul verwenden, um den Titel des Beitrags dynamisch anzuzeigen. Oder Sie ziehen den Beitragstitel als dynamischen Inhalt in den Textkörper eines Textbausteins und umschließen ihn mit H1-Tags.

Sie können ein Bildmodul verwenden, um das vorgestellte Bild als dynamischen Inhalt einzubinden.

Oder verwenden Sie eine Reihe von Klappenmodulen, die bestimmte Metadaten als dynamischen Inhalt abrufen, z.

Am wichtigsten ist, dass Sie das Modul Post Content einbeziehen, wenn Sie ein benutzerdefiniertes Body-Layout für Ihre Vorlage erstellen. Das Modul Post Content enthält den Bereich für den Seiten- oder Post-Content, der im Body-Bereich der Vorlage angezeigt werden soll.

Sobald die Vorlage erstellt wurde, können Sie mit dem standardmäßigen WordPress-Post-Editor ganz einfach einen neuen Blog-Post erstellen und diesen Blog-Post das Design der Blog-Post-Vorlage übernehmen lassen, die Sie mit dem Divi Theme Builder erstellt haben.

Weitere Informationen finden Sie in unserem Beitrag zum Entwerfen einer Blogbeitragsvorlage mit Divis Theme Builder.

Erstellen einer WooCommerce-Produktseitenvorlage in voller Breite mit dem Divi Builder

Wenn Sie die Standard-Seitenleiste für Produktseiten entfernen möchten, können Sie auch eine schöne Layoutvorlage in voller Breite für alle Ihre Blog-Posts erstellen. Ähnlich wie bei der Blog-Post-Vorlage können Sie auch die integrierten WooCommerce- (oder Woo-)Module von Divi verwenden, um eine benutzerdefinierte Website-weite Produktseitenvorlage ohne Seitenleiste zu erstellen.

Erstellen Sie dazu einfach eine neue Vorlage und weisen Sie die Vorlage „Alle Produkte“ zu.

Fügen Sie dann der Vorlage einen benutzerdefinierten Körper hinzu und klicken Sie auf , um das Körper-Layout mit dem Vorlagen-Editor zu erstellen.

Verwenden Sie dann den Divi Builder, um die dynamischen Woo-Module einzuschließen, um die Produktseitenvorlage zu entwerfen.

Nun legen Sie im Backend mit dem Standard-Produktseiten-Editor ein neues Produkt an, das Produkt übernimmt automatisch das Design der zugewiesenen Body-Vorlage.

Weitere Informationen finden Sie in unserem Beitrag zum Erstellen einer Website-weiten Vorlage für Woo-Produktseiten.

Erstellen von Archivseitenvorlagen in voller Breite mit dem Divi Builder

Der Theme Builder macht es auch einfach, Vorlagen für Archivseiten ohne Seitenleisten zu entwerfen. Der Schlüssel zum Erstellen einer Vorlage für eine Kategorieseite besteht darin, eine neue Vorlage zu erstellen und sie einer der vielen Archivvorlagen zuzuweisen, die im Divi Builder verfügbar sind. Sie können es beispielsweise allen Archivseiten der gesamten Site zuweisen oder Sie können es der Kategorieseitenvorlage zuweisen, sodass nur die Seiten angezeigt werden, die ein Archiv von Beiträgen innerhalb einer Kategorie anzeigen.

Das erste wesentliche Element des dynamischen Inhalts für eine Archivvorlage muss den Beitrags-/Archivtitel enthalten.

Das zweite wesentliche Element dynamischer Inhalte ist das eigentliche Archiv der anzuzeigenden Beiträge. Fügen Sie dazu ein Blog-Modul hinzu und wählen Sie die Option zum Anzeigen der Beiträge für die aktuelle Seite.

Eine vollständige Anleitung finden Sie in unserem Beitrag zum Erstellen einer Kategorieseitenvorlage für Ihr Blog mit dem Divi Theme Builder.

Erstellen einer 404-Seitenvorlage mit voller Breite mit dem Divi Builder

Der Theme Builder macht es auch einfach, eine 404-Seitenvorlage für Ihre Divi-Website ohne die Standard-Seitenleiste zu entwerfen. Eine 404-Seite basiert nicht unbedingt auf dynamischen Inhalten. Sie können also mit dem Divi Builder alles entwerfen, was Sie möchten.

Eine vollständige Anleitung finden Sie in unserem Beitrag zum Erstellen einer 404-Seitenvorlage mit dem Divi Theme Builder.

Erstellen einer Suchseitenvorlage in voller Breite mit dem Divi Builder

Der Theme Builder macht es auch einfach, eine Suchergebnisseiten-Vorlage für Ihre Divi-Website ohne die Standard-Seitenleiste zu entwerfen. Wie bei Kategorieseitenvorlagen besteht der Schlüssel zum Erstellen einer Vorlage für Suchergebnisse darin, einen benutzerdefinierten Textbereich zu erstellen und Folgendes einzuschließen:

1: Ein Beitrags-/Archivtitel als dynamischer Inhalt

2: Das Blog-Modul zum Anzeigen der Beiträge für die aktuelle Seite.

3: Ein Suchmodul, mit dem Benutzer die Suche nach Bedarf fortsetzen können.

Eine vollständige Anleitung finden Sie in unserem Beitrag zum Erstellen einer Suchergebnisseite für Ihre Website mit dem Divi Theme Builder.

Erstellen Sie keine Textvorlage in voller Breite für alle Seiten, es sei denn, Sie haben einen bestimmten Grund

Das Erstellen einer benutzerdefinierten Vorlage mit einem Body-Layout in voller Breite für alle Ihre Seiten mag zunächst eine gute Idee sein. Es kann jedoch sein, dass es nicht wie erwartet funktioniert. Sie können beispielsweise den Bereich begrenzen, den Sie mit Divi Builder für die Seite verwenden können, oder einen Textbereich erstellen, der für Seiten, die den Divi Builder nicht verwenden, zu breit ist. Aus diesem Grund ist es besser, eine Seitenvorlage nur für die Seiten zu erstellen, die den Divi Builder nicht verwenden werden.

Weitere Informationen finden Sie in der Dokumentation zum Erstellen einer globalen Körpervorlage.

Entfernen der Standard-Sidebar mit benutzerdefiniertem CSS

Wenn Sie die Standard-Themeseitenlayouts von Divi verwenden, ohne den Divi Builder zu verwenden, oder wenn Sie die Seitenleiste auf der gesamten Site loswerden möchten, ohne sie mit individuellen Seiteneinstellungen oder Theme-Builder-Vorlagen überschreiben zu müssen, können Sie ein gutes altes CSS verwenden .

Navigieren Sie zu Divi > Themenoptionen. Fügen Sie auf der Registerkarte "Allgemein" den folgenden Code in das Feld "Benutzerdefiniertes CSS" unten auf der Seite ein:

/*** Take out the divider line between content and sidebar ***/
#main-content .container:before {background: none;}
 
/*** Hide Sidebar ***/
#sidebar {display:none;}
 
/*** Expand the content area to fullwidth ***/
@media (min-width: 981px){
#left-area {
    width: 100%;
    padding: 23px 0px 0px !important;
    float: none !important;
}
}

Abschließende Gedanken

Beim Erstellen einer Website ist es wichtig, dass alle Ihre Seiten das gleiche konsistente Layout und Design aufweisen. Wenn Sie also eine Site mit einem Layout in voller Breite mit dem Divi Builder erstellen, möchten Sie dieses Layout möglicherweise standardmäßig für alle Ihre Seiten beibehalten. Dies könnte die Benutzererfahrung verbessern. Wenn überhaupt, haben Sie jetzt die Möglichkeit, Ihre Seitenleistenanzeigen nach Belieben anzupassen.

Ich hoffe, dass Sie dies für Ihre Website und zukünftige Projekte nützlich finden werden.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!