So erstellen Sie eine verschiebbare Push-Sidebar in Divi

Seitenleisten können großartig sein, aber sie können auch Platzverschwendung sein. Aus diesem Grund kann das Erstellen einer verschiebbaren Push-Sidebar eine perfekte Option für diejenigen sein, die eine Sidebar haben möchten, die den Benutzer nicht vom Hauptinhalt der Seite ablenkt. Darüber hinaus bietet diese Art von Seitenleiste dem Benutzer die Möglichkeit, die Seitenleiste jederzeit anzuzeigen oder auszublenden.

Der Schiebe-Push-Effekt ist insofern einzigartig, als die Seitenleiste von der linken Seite der Seite eingeschoben wird, während gleichzeitig der Hauptinhalt der Seite verschoben (oder zusammengedrückt) wird, um die Seitenleiste in das Ansichtsfenster einzupassen. Kurz gesagt, es schiebt die Seitenleiste und schiebt die Seite.

Sobald die Seitenleiste erstellt ist, wird sie zu einem vielseitigen Werkzeug für alle Arten von Anwendungen, einschließlich Menüs und Formularen.

Lasst uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf das Design, das wir in diesem Tutorial erstellen werden.

Laden Sie das Layout KOSTENLOS herunter

Um das Slide-Push-Sidebar-Layout aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Um das Abschnittslayout in Ihre Divi-Bibliothek zu importieren, navigieren Sie zur Divi-Bibliothek.

Klicken Sie auf die Schaltfläche Importieren.

Wählen Sie im Portabilitäts-Popup die Registerkarte Import und wählen Sie die Download-Datei von Ihrem Computer.

Klicken Sie dann auf die Schaltfläche Importieren.

Sobald dies erledigt ist, wird das Abschnittslayout im Divi Builder verfügbar sein.

Um es einer Seite oder Vorlage hinzuzufügen, müssen Sie einen neuen Abschnitt hinzufügen und das Abschnittslayout aus der Bibliothek auswählen.

Kommen wir zum Tutorial, ja?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
3. Wählen Sie die Option „Wählen Sie ein vorgefertigtes Layout“.
   
4. Wählen Sie das Event-Layout-Paket und klicken Sie auf , um das Layout der Event-Homepage zu verwenden.
   

So erstellen Sie eine verschiebbare Push-Sidebar in Divi

Um die Sliding Push Sidebar zu erstellen, müssen wir einen neuen regulären Abschnitt verwenden. Wir werden den Abschnitt so dimensionieren und positionieren, dass er zu einer festen Seitenleiste wird, die sich öffnet, wenn Sie auf eine Schaltfläche klicken, den Hauptinhaltsbereich auf der rechten Seite drücken (und zusammendrücken), um Platz für die Seitenleiste zu schaffen.

Bau der Sektion

Zuerst fügen wir der Seite einen neuen regulären Abschnitt hinzu.

Verschieben Sie dann den Abschnitt oben auf der Seite.

Abschnittseinstellungen

Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie die zu fixierende Position wie folgt:

• Position: Behoben
• Z-Index: 9999

Aktualisieren Sie auf der Registerkarte Design die Größe und den Abstand wie folgt:

• Breite: 350px (Desktop und Tablet), 100% (Telefon)
• Höhe: 100%
• Polsterung: 100px oben, 0px unten

Die Auffüllung soll Platz für die Kopfzeile oben auf der Seite schaffen.

Geben Sie als Nächstes auf der Registerkarte "Erweitert" dem Abschnitt eine CSS-Klasse:

• CSS-Klasse: et-push-sidebar

Sobald die CSS-Klasse eingerichtet ist, geben Sie dem Abschnitt eine Hintergrundfarbe:

• Hintergrundfarbe: #1a1e36

Um eine auffälligere Trennung zu erstellen, kehren Sie zur Registerkarte Design zurück und fügen Sie einen rechten Rahmen hinzu.

• Breite des rechten Rands: 2px
• Farbe des rechten Rands: #eeeeee

Das kümmert sich um den Abschnitt, der als Hauptcontainer für unsere Sidebar dient. Jetzt ist es an der Zeit, mit dem Erstellen der beiden Schaltflächen zu beginnen, mit denen wir die Seitenleiste öffnen und dann schließen werden.

Erstellen der Seitenleisten-Umschaltschaltflächen

Es gibt zwei Schaltflächen zum Umschalten der Seitenleiste. Die erste Schaltfläche ist ein „X“-Symbol, das die mobile Version der Seitenleiste nach dem Öffnen schließt. Das „X“ wird mit einem Klappenmodul erstellt. Die zweite ist die Hauptschaltfläche, die wir mit einem Klappenmodul erstellen, das mit vertikalem Text gedreht und absolut neben der Seitenleiste / dem Abschnitt positioniert wird.

Lasst uns anfangen.

Erstellen der Zeile für die Schaltflächen

Erstellen Sie eine neue einspaltige Zeile innerhalb des Abschnitts/der Seitenleiste.

Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

• Dachrinnenbreite: 1
• Breite: 100%
• Padding: 0px oben, 0px unten

Aktualisieren Sie auf der Registerkarte Erweitert die Positionsoptionen wie folgt:

• Position: Absolut
• Z-Index: 1

Erstellen des Schließen-Symbols „X“

Um das Schließen-Symbol „X“ zu erstellen, fügen Sie der Zeile ein Klappenmodul hinzu. Es kann einfacher sein, ein neues Modul mit dem Ebenen-Modal hinzuzufügen, da es etwas schwierig ist, auf die Dinge zu klicken.

Inhalt

Öffnen Sie dann die Klappeneinstellungen. Nehmen Sie auf der Registerkarte Inhalt den Titel- und Hauptinhalt heraus und fügen Sie das X-Symbol zum Klappentext hinzu.

• Symbol verwenden: JA
• Symbol: x (siehe Screenshot)

Entwurf

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Symbolfarbe: #eeeeee
• Bild-Icon-Platzierung: Links
• Symbolschriftgröße verwenden: JA
• Symbolschriftgröße: 40px
• Breite: 50px

Bringen Sie als Nächstes das Symbol etwas nach unten, indem Sie die folgende transform translate-Eigenschaft hinzufügen:

• Transformieren Übersetzen X : 100px
• Transformieren Übersetzen Y : -10px

Fortschrittlich

Deaktivieren Sie auf der Registerkarte Erweitert den Klappentext auf Tablet und Desktop, damit wir ihn nur auf dem Telefondisplay sehen.

• Deaktivieren Ein: Tablet und Desktop

Fügen Sie dann dem Klappentext eine CSS-Klasse hinzu und weisen Sie ihr eine feste Position zu, damit sie beim Scrollen durch den Seitenleisteninhalt auf dem Telefondisplay sichtbar bleibt.

• CSS-Klasse: et-slide-push-close
• Position: Behoben
• Ort: Oben rechts

Das kümmert sich um die Schaltfläche "X" Schließen-Symbol.

Erstellen der Umschaltfläche der Haupt-Sidebar

Um den Umschaltknopf für die Haupt-Sidebar zu erstellen, fügen Sie ein Klappenmodul unter dem vorhandenen "X"-Symbol hinzu.

Inhalt

Aktualisieren Sie den Titel und klicken Sie auf den Abwärtspfeil, um ihn zu verwenden.

• Titel: Veranstaltungsinfo
• Symbol verwenden: JA
• Symbol: Pfeil nach unten (siehe Screenshot)

Als nächstes fügen Sie dem Klappentext eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: #eeeeee

Entwurf

Aktualisieren Sie auf der Registerkarte "Design" Folgendes:

• Symbolfarbe: #1a1e36
• Bild-/Symbolplatzierung: Links
• Symbolschriftgröße verwenden: JA
• Symbolschriftgröße: 25px
• Titelschriftart: Overpass
• Schriftstärke des Titels: Fett
• Titelschriftart: TT
• Titeltextfarbe: #1a1e36
• Abstand der Titelbuchstaben: 2px
• Höhe der Titelzeile: 1.2em
• Polsterung: 0.6em oben, 1em links, 1em rechts
• Abgerundete Ecken: 5px an den unteren beiden Ecken

Um den Klappentext außerhalb des Abschnitts zu positionieren und zu drehen, verwenden Sie die Transformationsoptionen wie folgt:

• Transformieren Übersetzen Y : 100px
• Transformieren Drehen Z : -90deg
• Ursprung der Transformation: oben rechts

Fortschrittlich

Aktualisieren Sie auf der Registerkarte Erweitert Folgendes:

• CSS-Klasse: et-slide-push-toggle
• Position: Absolut
• Ort: Rechte Mitte

Hinzufügen von benutzerdefiniertem Code mit einem Codemodul

Sobald die beiden Schaltflächen fertig sind, können wir den benutzerdefinierten Code hinzufügen, der die Schiebe-Push-Funktionalität bereitstellt, die wir für die Seitenleiste benötigen.

Um den Code hinzuzufügen, fügen Sie zunächst ein Codemodul zu derselben Spalte hinzu.

Fügen Sie dann den folgenden Code in das Codemodul ein.

<style>
  #page-container, #et-main-area, .et-push-sidebar, .et-slide-push-toggle .et-pb-icon {
    transition: all 300ms !important;
  }
/*
 * use if using blank template with no header or footer
 * 
  #page-container.et-push-sidebar-active {
    margin-left: 350px;
  }
*/  
  #page-container.et-push-sidebar-active #et-main-area {
    margin-left: 350px;
  }  
  .et-push-sidebar {  
    transform: translateX(-100%);
  }
  .et-fb .et-push-sidebar {  
    transform: translateX(0%);
  }
  .et-push-sidebar-active .et-push-sidebar {
    transform: translateX(0%);
  }
  .et-slide-push-toggle, .et-slide-push-close {
    cursor:pointer;
  }
  .et-push-sidebar-active .et-slide-push-toggle .et-pb-icon {
    transform: rotate(180deg);
  }
@media all and (max-width: 767px) {
  .et-push-sidebar-active .et-push-sidebar {
    overflow: scroll !important;
    overscroll-behavior: contain;
  }
  #page-container.et-push-sidebar-active #et-main-area, #page-container.et-push-sidebar-active {
    margin-left: 0px;
  }  
}  
</style>
<script>
(function($) {
  $(document).ready(function(){
    $('.et-slide-push-toggle').click(function(){
      $('#page-container').toggleClass('et-push-sidebar-active');
    });
    $('.et-slide-push-close').click(function(){
      $('#page-container').removeClass('et-push-sidebar-active');
    });    
  });
})( jQuery );   
</script>

Erstellen der Inhaltszeile der Seitenleiste

Die erste Zeile, die wir erstellt haben, war für die Schaltflächen und den Code, die die Seitenleistenfunktion machen. Diese nächste Zeile ist für den Inhalt der Seitenleiste.

Um die Inhaltszeile der Seitenleiste zu erstellen, fügen Sie unter der ersten Zeile in der Seitenleiste/im Abschnitt eine neue einspaltige Zeile hinzu.

Zeileneinstellungen

Öffnen Sie die Einstellungen der neuen Zeile und aktualisieren Sie Folgendes:

• Breite: 100%
• Höhe: 100%
• Polsterung: 5 % oben, 5 % unten, 5 % links, 5 % rechts

Aktualisieren Sie auf der Registerkarte Erweitert die Überlaufoptionen wie folgt:

• Horizontaler Überlauf: Scrollen (Desktop und Tablet), Auto (Telefon)
• Vertikaler Überlauf: Scrollen (Desktop und Tablet), Auto (Telefon)

Füllen der Sidebar mit Inhalten/Modulen

Nun, da Ihre Seitenleiste fertig ist, müssen Sie nur noch ein beliebiges Modul in die zweite Zeile der Seitenleiste nach Bedarf einfügen. In diesem Beispiel kopiere ich nur Module aus dem Layout der Event-Startseite und füge sie in die Spalte der Zeile ein.

Endergebnis

Sehen Sie sich das Endergebnis auf der Live-Seite an.

Hinzufügen der verschiebbaren Push-Sidebar zu einer Seitenvorlage

Wenn Sie diese Seitenleiste standardmäßig auf allen Ihren Seiten verwenden möchten, müssen Sie die Seitenleiste/den Abschnitt mit dem Divi Theme Builder zu einer Seitenvorlage hinzufügen.

Abschnittslayout in der Divi-Bibliothek speichern

Speichern Sie dazu zunächst den Abschnitt, der zum Erstellen der Seitenleiste verwendet wurde, in der Divi-Bibliothek. Klicken Sie dazu im Ebenenmodus auf die drei Punkte in der Seitenleiste, fügen Sie den Layoutnamen hinzu und speichern Sie ihn in der Bibliothek.

Erstellen Sie eine neue Seitenvorlage

Gehen Sie als Nächstes zum Theme Builder, erstellen Sie eine neue Vorlage und weisen Sie diese Vorlage allen Seiten zu.

Hinzufügen der verschiebbaren Seitenleiste zur Seitenvorlage

Klicken Sie anschließend auf , um die Seitenvorlage zu bearbeiten.

Fügen Sie im Vorlagenlayout-Editor einen neuen Abschnitt mit voller Breite hinzu.

Fügen Sie dann ein Modul für Postinhalt in voller Breite in den Abschnitt ein.

Klicken Sie als nächstes auf. Erstellen Sie einen neuen Abschnitt über dem Abschnitt mit voller Breite. Klicken Sie dann auf die Registerkarte Aus Bibliothek hinzufügen und wählen Sie das Abschnittslayout Sliding Push Sidebar aus der Bibliothek aus.

Sobald Sie fertig sind, können Sie die Seitenleiste mit dem Body-Layout-Editor nach Bedarf bearbeiten.

Theme Builder-Einstellungen speichern

Stellen Sie sicher, dass Sie die Änderungen im Theme Builder speichern.

Jetzt haben alle Ihre Seiten die Seitenleiste.

Abschließende Gedanken

Eine verschiebbare Push-Sidebar ist die perfekte Option für diejenigen unter Ihnen, die das Beste aus beiden Welten suchen – eine Sidebar, die im Vordergrund bleibt, ohne den Hauptinhalt der Seite zu beeinträchtigen (oder abzulenken). Fühlen Sie sich frei, es für alle möglichen Dinge wie Registrierungsformulare, E-Mail-Opt-Ins, Menüs und vieles mehr zu verwenden.

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

Danke schön!