So entwerfen Sie eine schwebende Fußzeilenschublade in Divi

Footer-Schubladen sind nützliche Ergänzungen für jede Website, da sie zusätzliche Inhalte speichern, auf die Benutzer leicht zugreifen können. Fußzeilen-Schubladen sind Container mit Webinhalten (wie ein Divi-Abschnitt), die durch Klicken auf eine Schaltfläche oder per Mauszeiger geöffnet und geschlossen werden können. Es ist, als hätte man ein kleines Versteck für Premium-Inhalte.

In diesem Tutorial werden wir eine schwebende Fußzeilenschublade in Divi entwerfen. Wir fügen die Fußzeilenschublade zum globalen Fußzeilenbereich der Website-Vorlage hinzu, damit die Fußzeilenschublade zusammen mit dem regulären Fußzeileninhalt Site-weit zugänglich ist.

Mit dem Verfahren, das wir verwenden werden, kann jeder Divi-Abschnitt (und sein Inhalt) in Minuten in eine Fußzeilenschublade umgewandelt werden.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf die feste Fußzeilenschublade, die wir in diesem Tutorial erstellen werden.

Laden Sie das Layout KOSTENLOS herunter

Um die Designs 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!

So fügen Sie die Footer Drawer-Vorlage zu Ihrer Divi-Site hinzu

WARNUNG!: Das Hinzufügen dieser Vorlage überschreibt die Standard-Website-Vorlage (sofern vorhanden) auf Ihrer Divi-Site. Wir empfehlen, dies zu einer Test-Site hinzuzufügen, damit Sie auf einer Live-Site nichts durcheinander bringen.

Um die Schubladenvorlage für feste Fußzeilen in Ihre eigene Website zu importieren, entpacken Sie die heruntergeladene ZIP-Datei, um auf die JSON-Datei zuzugreifen.

Gehen Sie dann zum WordPress-Dashboard und navigieren Sie zu Divi > Theme Builder.

Klicken Sie dann oben rechts auf der Seite auf das Portabilitätssymbol.

Wählen Sie im Portabilitäts-Popup die gerade entpackte JSON-Datei aus und wählen Sie die Option "Backup vor dem Import herunterladen", nur für den Fall, dass Sie zuvor etwas in der Standard-Website-Vorlage hatten, das Sie nicht überschreiben wollten.

Klicken Sie dann auf die Schaltfläche Importieren.

Speichern Sie zuletzt die Änderungen am Theme Builder und zeigen Sie eine Live-Seite an, um die feste Fußzeile zu sehen.

Kommen wir nun zum Tutorial, oder?

Teil 1: Hinzufügen einer globalen Fußzeile

Mit dem Theme Builder von Divi können Sie die Standardfußzeile durch eine neue ersetzen, indem Sie das Standard-Website-Template aktualisieren.

Um eine globale Fußzeile zu erstellen, gehen Sie zum WordPress-Dashboard und navigieren Sie zu Divi > Theme Builder. Klicken Sie dann in der Standard-Website-Vorlage auf den Bereich "Globale Fußzeile hinzufügen".

Wählen Sie dann aus der Dropdown-Liste die Option „Globale Fußzeile erstellen“.

Vorgefertigtes Layout zum globalen Footer-Layout hinzufügen

Dadurch wird der Vorlagen-Layout-Editor bereitgestellt, in dem Sie sofort mit den drei Auswahlmöglichkeiten aufgefordert werden, wie Sie mit dem Erstellen beginnen möchten. Wählen Sie die Option „Ein vorgefertigtes Layout auswählen“.

Suchen Sie im Popup-Fenster Aus Bibliothek laden das Layout der Landing Page-Layout für Schreibwarengeschäfte. Klicken Sie dann auf „Dieses Layout verwenden“.

Löschen Sie unerwünschte Inhalte aus dem vorgefertigten Layout

Nachdem das Layout in den Editor geladen wurde, stellen Sie das Popup-Fenster „Ebenen“ bereit, indem Sie im Einstellungsmenü auf das Ebenensymbol klicken. Löschen Sie dann alle Abschnitte im Layout mit Ausnahme der letzten beiden.

Verschieben und beschriften Sie die beiden Abschnitte

Sobald die Abschnitte gelöscht wurden, sollten Sie zwei Abschnitte haben, einen mit der Bezeichnung „Fußzeile“ und den anderen mit der Bezeichnung „So funktioniert es“. Verschieben Sie den Abschnitt "Fußzeile" an den Anfang des Layouts.

Ändern Sie das Label des unteren Abschnitts in "Fußzeile". Dies wird der Abschnitt sein, den wir als Inhalt unserer Fußzeilen-Schublade verwenden werden.

Teil 2: Erstellen der Schublade für feste Fußzeilen

Nachdem wir nun einen der Abschnitte als Fußzeile und den anderen als Fußzeilen-Schublade festgelegt haben, können wir mit der Erstellung unserer festen Fußzeilen-Schublade beginnen. Beginnen wir mit der Erstellung des Klappensymbols, mit dem wir die Fußzeilenschublade umschalten.

Erstellen der Schaltfläche für die Fußzeilenschublade

Neue Zeile hinzufügen

Fügen Sie im unteren Abschnitt "Fußzeile" eine neue einspaltige Zeile hinzu.

Beschriften Sie die neue Zeile mit „Schubladentaste“, da dies die Zeile ist, die die Schaltfläche enthält, mit der die Schublade geöffnet und geschlossen wird. Verschieben Sie dann die Zeile an den Anfang des Abschnitts.

Zeilenpolsterung

Bevor wir ein Modul hinzufügen, öffnen Sie die Zeileneinstellungen und aktualisieren Sie die Auffüllung wie folgt:

• Padding: 0px oben, 0px unten

Abschnittspolsterung

Öffnen Sie dann die Einstellungen für den Bereich „Fußzeile“ und aktualisieren Sie die Polsterung wie folgt:

Um die anklickbare Schaltfläche zu erstellen, die die Fußzeilenschublade umschaltet, verwenden wir ein Klappenmodul mit einem Symbol. Und wir werden ihm eine einzigartige Wassertropfenform verleihen, indem wir die quadratische Form des Klappmodul-Containers mit dem Kreissymbol kombinieren.

So geht's.

Blurb-Modul hinzufügen

Fügen Sie der Zeile "Schubladenschaltfläche" oben im Abschnitt ein Klappenmodul hinzu.

Blurb-Inhalt/Symbol

Löschen Sie dann den standardmäßigen Titel- und Hauptinhalt und wählen Sie das Pfeilsymbol aus, das auf die obere linke Ecke zeigt (siehe Screenshot). Wir verwenden das teilweise gedrehte Symbol, weil wir es später drehen werden.

Klappendesign

Als nächstes geben Sie dem Klappentext wie folgt einen Hintergrund:

• Hintergrundfarbe: #081540

Aktualisieren Sie dann die Designeinstellungen wie folgt:

• Symbolfarbe: #eeeeee
• Kreissymbol: JA
• Kreisfarbe: #081540
• Symbolschriftgröße verwenden: JA
• Symbolschriftgröße: 17px

Klappengröße

Geben Sie dem Modul nun eine Höhe und eine Breite wie folgt ein:

• Breite: 30px
• Höhe: 30px

Dies führt dazu, dass das Kreissymbol den Klappenbehälter überläuft, um die Wassertropfenform zu erstellen.

Klappenposition

Als nächstes geben Sie dem Klappentext eine absolute Position in der oberen Mitte des Abschnitts.

• Position: Absolut
• Ort: Top Center

Einstellungen für Blurb-Transformation

Jetzt können wir die Transformationsoptionen verwenden, um den Klappentext/das Symbol nach oben zu drehen und direkt über dem Abschnittscontainer zu positionieren. Wenn wir nun den Abschnitt unter dem Browserfenster ausblenden, bleibt das Symbol sichtbar/anklickbar.

Aktualisieren Sie Folgendes:

• Transformieren Übersetzen X-Achse: -50%
• Transformieren Y-Achse übersetzen: -250%
• Transformieren Drehen Z-Achse: -45deg

Nehmen Sie dann die Standardsymbolanimation heraus:

• Bild-/Symbolanimation: Keine Animation

Wir werden JQuery verwenden, um die Schublade umzuschalten, daher müssen wir den Klappentext / das Symbol als anklickbares Element mit einer CSS-Klasse anvisieren, die wir später im Code verwenden werden. Fügen Sie die folgende CSS-Klasse hinzu:

• CSS-Klasse: draw-target

Einstellungen für den Fußzeilenbereich

Jetzt werden wir den Abschnitt „Fußzeilenfach“ mit der Option „Transformieren“ ausblenden. Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:

• Transformieren Y-Achse übersetzen: 100%

Das Schöne an der Verwendung von transform translate hier ist, dass die Prozentwerte auf der tatsächlichen Größe des Elements basieren. 100% auf der Y-Achse sind also direkt relativ zur Höhe des Abschnitts (unabhängig davon, was es zu einem bestimmten Zeitpunkt ist). Mit anderen Worten, das Element wird genau um die eigene Höhe nach unten verschoben.

Um das „Fußzeilenfach“ wieder sichtbar zu machen, müssen wir die Transformationsübersetzung, die wir gerade dem Abschnitt hinzugefügt haben, rückgängig machen. Dazu müssen wir das Element mit einer CSS-Klasse anvisieren und die Transformationsübersetzung beim Klicken auf das Symbol deaktivieren (den gesamten Abschnitt an seine ursprüngliche Position zurückbringen).

CSS-Klasse zum Footer-Drawer-Abschnitt hinzufügen

Fügen Sie auf der Registerkarte "Erweitert" die folgende CSS-Klasse hinzu:

• CSS-Klasse: has-transform

Feste Position des Fußzeilen-Schubladenabschnitts

Für den letzten Schritt müssen wir die Fußzeilenschublade so anpassen, dass sie (zusammen mit dem Symbol) am unteren Rand des Browserfensters schwebt.

Aktualisieren Sie die Position des Abschnitts „Fußzeile“ wie folgt:

• Position: Behoben
• Ort: Unten links
• Z-Index: 13

Deaktivieren von Inhalten für Mobilgeräte

Da Sie nur eine begrenzte Anzahl von Inhalten der Fußzeilen-Schublade haben, die auf Tablet und Telefon passen (aufgrund der begrenzten Höhe der Bildschirme), müssen Sie die Anzeige der nicht wesentlichen Elemente deaktivieren/ausblenden. In diesem Beispiel werden wir die mittlere Zeile des Abschnittslayouts ausblenden.

Öffnen Sie die Einstellungen für die vorletzte Zeile im Bereich „Fußzeile“. Aktualisieren Sie auf der Registerkarte "Erweitert" die Sichtbarkeitsoption, um die Zeile auf dem Telefon und Tablet zu deaktivieren.

Hinzufügen des benutzerdefinierten Codes

Um die Klick- und Umschaltfunktion zur Fußzeilenschublade hinzuzufügen, müssen wir der Seite benutzerdefiniertes CSS und JQuery hinzufügen. Erstellen Sie dazu unterhalb des für die Schaltfläche verwendeten Klappenmoduls ein neues Codemodul.

Fügen Sie dann den folgenden Code in das Codefeld ein:

<style>
  .has-transform, .drawer-target {
    transition: all 400ms ease-in-out;
  } 
  .toggle-drawer-animation {
    transform: none !important;
  }
  .toggle-icon-animation {
    transform: rotate(-135deg) !important;
  }  
  .drawer-target {
    cursor: pointer;
  }
</style>
<script>
(function($) {
  $(document).ready(function(){
    $('.drawer-target').click(function(){
      $(this).toggleClass('toggle-icon-animation');      
      $('.has-transform').toggleClass('toggle-drawer-animation');   
    });    
  });
})( jQuery );   
</script>

Änderungen speichern

Vergessen Sie nicht, das Layout zu speichern, bevor Sie den Editor verlassen.

Speichern Sie die Änderungen auch im Theme Builder.

Endergebnis

Jetzt können wir zu einer beliebigen Seite Ihrer Website gehen, um das Endergebnis zu sehen.

Und hier ist es auf dem Handy.

Beachten Sie, dass sich die globale Fußzeile auch an der richtigen Stelle am unteren Rand der Seite befindet, sowie die feste Fußzeilenschublade.

Abschließende Gedanken

Hoffentlich hilft Ihnen die schwebende Fußzeilenschublade dabei, Inhalte auf unterhaltsame und zugängliche Weise zu bewerben. Wie jede Schublade können Sie sie mit fast allem füllen, was Ihnen einfällt.

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

Danke schön!