Untere Schubladen sind nützliche Ergänzungen für jeden Website, da sie zusätzliche Inhalte speichern, die für Benutzer leicht zugänglich sind. Footer-Schubladen sind Container für Webinhalte (wie ein Divi-Bereich), die geöffnet und geschlossen werden können, indem Sie auf eine Schaltfläche klicken oder den Mauszeiger darüber bewegen. Es ist, als hätte man einen kleinen Vorrat an Premium-Inhalten.

In diesem Tutorial entwerfen wir eine schwebende Fußzeilenschublade in Divi. Wir werden die Fußzeilenschublade zum globalen Fußzeilenbereich der hinzufügen Website-Vorlage damit die Fußzeilen-Schublade mit normalem Fußzeileninhalt auf der gesamten Website zugänglich ist.

Mit dem Prozess, den wir verwenden werden, kann jeder Divi-Abschnitt (und sein Inhalt) in wenigen Minuten in eine Fußzeilenschublade konvertiert werden.

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

Durch Hinzufügen dieses Modells wird die ersetzt Website-Vorlage standardmäßig (falls vorhanden) auf Ihrer Divi-Website. Wir empfehlen, es zu einer Test-Site hinzuzufügen, damit Sie auf einer Live-Site nichts durcheinander bringen.

So importieren Sie die Schubladenvorlage mit fester Fußzeile selbst Website, entpacken Sie die heruntergeladene ZIP-Datei, um auf die JSON-Datei zuzugreifen.

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

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

Wählen Sie im Portabilitätsfenster die JSON-Datei aus, die Sie gerade entpackt haben, und wählen Sie die Option „Backup vor dem Import herunterladen“, falls Sie zuvor etwas in der Website-Vorlage Standardeinstellung, die Sie nicht überschreiben möchten.

Klicken Sie dann auf die Schaltfläche Importieren.

Modell Divi importieren

Speichern Sie abschließend die Änderungen am Themengenerator und zeigen Sie eine Live-Seite an, um die feste Fußzeilenleiste anzuzeigen.

Speichern Sie die Änderungen am Divi-Layout

Nun zum Tutorial, okay?

Teil 1: Hinzufügen einer globalen Fußzeile

Mit dem Divi-Themengenerator können Sie die Standardfußzeile durch eine neue ersetzen, indem Sie die Standardwebsite-Vorlage aktualisieren.

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

Auswahl des Divi-Editors

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

Fügen Sie eine Divi-Modell-Fußzeile hinzu

Fügen Sie einem globalen Fußzeilenlayout ein vordefiniertes Layout hinzu

Dadurch wird der Modelllayout-Editor bereitgestellt, in dem Sie sofort mit den drei Auswahlmöglichkeiten für den Baubeginn aufgefordert werden. Wählen Sie die Option "Vordefiniertes Layout auswählen".

Wählen Sie ein vorkonstruiertes Divi-Modell

Suchen Sie im Popup-Fenster Aus Bibliothek laden das Layout der Zielseite des Briefpapiers. Klicken Sie dann auf "Dieses Layout verwenden".

Verwenden Sie ein Divi-Modell

Entfernen Sie unerwünschte Inhalte aus dem vorgefertigten Layout

Erweitern Sie nach dem Laden des Layouts in den Editor das Popup-Feld Ebenen, indem Sie im Einstellungsmenü auf das Ebenensymbol klicken. Löschen Sie dann alle Abschnitte des Layouts mit Ausnahme der letzten beiden.

Unnötigen Abschnitt löschen

Verschieben und beschriften Sie die beiden Abschnitte

Sobald die Abschnitte entfernt wurden, sollten Sie zwei Abschnitte haben, einen mit dem Titel "Fußzeile" und einen mit dem Titel "Wie es funktioniert". Verschieben Sie den Abschnitt "Fußzeile" an den Anfang des Layouts.

Divi Fußzeile

Ändern Sie den Wortlaut im unteren Bereich in "Fußzeilenschublade". Dies ist der Abschnitt, den wir als Inhalt unserer Fußzeilenschublade verwenden werden.

Ändern Sie die Beschriftung der Divi-Fußzeile

Teil 2: Erstellen der festen Fußzeilenschublade

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

Erstellung des Footer Drawer Buttons

Fügen Sie eine neue Zeile hinzu

Fügen Sie im unteren Fußzeilenbereich einer Spalte eine neue Zeile hinzu.

feste Fußschublade

Beschriften Sie die neue Zeile mit "Schubladenschaltfläche", da diese Zeile die Schaltfläche enthält, mit der die Schublade geöffnet und geschlossen wird. Verschieben Sie dann die Linie an den oberen Rand des Abschnitts.

Auswahllayout divi

Zeilenauffüllung

Öffnen Sie vor dem Hinzufügen eines Moduls die Zeileneinstellungen und aktualisieren Sie den Abstand wie folgt:

  • Auffüllen: 0px hoch, 0px niedrig
Confiuration Divi Abstand

Abschnittsauffüllung

Öffnen Sie dann die Einstellungen im Abschnitt "Fußzeilenschublade" und aktualisieren Sie die Polsterung wie folgt:

Konfiguration des Abstandsabschnitts

Um die anklickbare Schaltfläche zum Umschalten der Fußzeilenschublade zu erstellen, verwenden wir ein Klappentextmodul mit einem Symbol. Und wir werden ihm eine einzigartige Tropfenform geben, indem wir die quadratische Form des Klappentextbehälters mit dem Kreissymbol kombinieren.

So geht's

Fügen Sie ein Klappentext-Modul hinzu

Fügen Sie der Zeile "Schublade" oben im Abschnitt ein Präsentationstextmodul hinzu.

Fußzeile Schublade Divi
Klappentext Inhalt / Symbol

Entfernen Sie dann den Standardtitel und den Textinhalt und wählen Sie das Pfeilsymbol aus, das auf die obere linke Ecke zeigt (siehe Screenshot). Wir verwenden das teilweise gedrehte Symbol, da wir es später drehen werden.

Wählen Sie Icon Footer Drawer Divi
Klappentext Design

Geben Sie dann den Präsentationstext wie folgt ein:

  • Hintergrundfarbe: # 081540
Ändern Sie den Divi-Hintergrund

Aktualisieren Sie dann die Entwurfsparameter wie folgt:

  • Symbolfarbe: #eeeeee
  • Kreissymbol: JA
  • Kreisfarbe: # 081540
  • Verwenden Sie die Schriftgröße des Symbols: JA
  • Symbol Schriftgröße: 17 Pixel
Passen Sie Klappentext-Divi-Taste an
Größe des Präsentationstextes

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

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

Dadurch läuft das Kreissymbol in den Textbehälter über, um die Wassertropfenform zu erstellen.

Bearbeiten Sie das Design der Divi-Schaltflächen
Klappentextposition

Geben Sie dem Präsentationstext dann eine absolute Position in der oberen Mitte des Abschnitts.

  • Position: Absolut
  • Ort: Top Center
Ändern Sie die Position der Divi-Taste
Klappentext-Transformationseinstellungen

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 die folgenden Elemente:

  • Transformieren X-Achse übersetzen: -50%
  • Translation der Y-Achsen-Translation: -250%
  • Drehung der Z-Achse transformieren: -45 Grad

Entfernen Sie dann die Standard-Symbolanimation:

  • Bild- / Symbolanimation: Keine Animation
Divi-Taste zurückgeben

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

  • CSS-Klasse: Zielschublade
Definieren Sie einen Divi-Selektor

Einstellungen für den Fußzeilen-Schubladenabschnitt

Jetzt werden wir den Abschnitt "Fußzeile Schublade" mit der Option "Übersetzung übersetzen" ausblenden. Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:

  • Transformieren Y-Achse übersetzen: 100%

Das Schöne an der Verwendung der Transformation ist, dass die Prozentwerte auf der tatsächlichen Größe des Elements basieren. Somit sind 100% auf der Y-Achse direkt relativ zur Höhe des Abschnitts (nomatter, was es zu einem bestimmten Zeitpunkt ist). Mit anderen Worten, das Element wird genau um seine eigene Höhe nach unten bewegt.

Transformationsabschnitt divi

Um die "Fußzeilen-Schublade" wieder sichtbar zu machen, müssen wir die Transformationsübersetzung, die wir gerade dem Abschnitt hinzugefügt haben, umkehren. Dazu müssen wir das Element mit einer CSS-Klasse als Ziel festlegen und die Übersetzungstransformation deaktivieren, indem wir auf das Symbol klicken (den gesamten Abschnitt an seine ursprüngliche Position zurückbringen).

Fügen Sie dem Fußzeilen-Schubladenabschnitt eine CSS-Klasse hinzu

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

  • CSS-Klasse: has-transform
Klasse hinzufügen hat Transformations-Divi

Fußzeilenschubladenbereich Feste Position

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

Aktualisieren Sie die Position des Abschnitts "Fußzeilenschublade" wie folgt:

  • Position: fest
  • Ort: unten links
  • Z-Index: 13
Ändern Sie die Position in der Divi-Ecke

Deaktivieren Sie mobile Inhalte

Da Sie nur eine begrenzte Menge an Inhalten für Fußzeilenschubladen haben, die sowohl für Tablets als auch für Telefone geeignet sind (aufgrund der begrenzten Bildschirmhöhe), müssen Sie nicht wesentliche Elemente auf dem Display deaktivieren / ausblenden. In diesem Beispiel wird die mittlere Zeile des Abschnittslayouts ausgeblendet.

Abschnitt auf dem Handy ausblenden

Öffnen Sie die Einstellungen von der vorletzten Zeile im Abschnitt „Fußzeile“. Aktualisieren Sie auf der Registerkarte "Erweitert" die Sichtbarkeitsoption, um die Leitung auf dem Telefon und Tablet auszuschalten.

Kontrollieren Sie den Sichtbarkeitsbereich

Benutzerdefinierten Code hinzufügen

Um die Funktionen zum Klicken und Umschalten in der Fußzeilenschublade hinzuzufügen, müssen Sie der Seite benutzerdefiniertes CSS und JQuery hinzufügen. Erstellen Sie dazu unter dem für die Schaltfläche verwendeten Blurb-Modul ein neues Codemodul.

Modulcode hinzufügen

Fügen Sie dann den folgenden Code in den Codebereich ein:

.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;}(function($) {$(document).ready(function(){$('.drawer-target').click(function(){$(this).toggleClass('toggle-icon-animation');      $('.has-transform').toggleClass('toggle-drawer-animation');   });    });})( jQuery );   
Divi-Code-Modul hinzufügen

Änderungen speichern

Denken Sie daran, das Layout zu speichern, bevor Sie den Editor verlassen.

Speichern Sie Divi-Änderungen

Speichern Sie auch die Änderungen im Themengenerator.

Änderungen speichern

Endergebnis

Jetzt können wir zu jeder Ihrer Seiten gehen Website um das Endergebnis zu sehen.

Abschließende Gedanken

Ich hoffe, die schwebende Fußzeilenschublade wird Ihnen helfen fördern Inhalte auf unterhaltsame und zugängliche Weise präsentieren. Wie jede Schublade können Sie sie mit fast allem füllen, was Ihnen einfällt.

Andere Ressourcen

Hier finden Sie eine Liste von Tutorials, mit denen Sie mit den internen Funktionen von Divi mehr erreichen können.

Übersetzt von: Elegant Themes