Springe zum Hauptinhalt

So erstellen Sie animierte Schubladen auf Divi

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Fußzeilenschubladen sind nützliche Ergänzungen zu jeder Website, da sie zusätzlichen Inhalt speichern, auf den Benutzer leicht zugreifen können. Fußzeilenschubladen sind Webinhaltscontainer (wie ein Divi-Bereich), die durch Klicken auf eine Schaltfläche oder Bewegen des Mauszeigers geöffnet und geschlossen werden können. Es ist wie ein kleiner Vorrat für Premium-Inhalte.

In diesem Tutorial werden wir eine schwebende Fußzeilenschublade in Divi entwerfen. Wir werden die Fußzeilenschublade zum gesamten Fußzeilenbereich der Website-Vorlage hinzufügen, sodass die Fußzeilenschublade mit dem normalen 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 dieser Vorlage wird die Standard-Website-Vorlage (falls vorhanden) auf Ihrer Divi-Site ersetzt. Wir empfehlen, dass Sie es einer Test-Site hinzufügen, damit Sie auf einer Live-Site nichts durcheinander bringen.

Um das Schubladenmodell mit fester Fußzeile in Ihre eigene Website zu importieren, entpacken Sie die Download-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 Standard-Website-Vorlage hatten, das Sie nicht hatten. wollte nicht ersetzen.

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.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

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:

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

  • 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:

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

.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 Seite Ihrer Website gehen, um das Endergebnis zu sehen.

Abschließende Gedanken

Ich hoffe, die schwebende Fußzeilenschublade hilft Ihnen dabei, den Inhalt auf unterhaltsame und zugängliche Weise zu bewerben. Wie jede Schublade können Sie sie mit fast allem füllen, was Sie sich vorstellen können.

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

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
0 Aktien
Aktie
tweet
Registrieren