So erstellen Sie eine Toggle-Registerkarte für einen Sticky Header in Divi
Veröffentlicht: 2021-05-05Sticky Header können effektiv sein, um Ihr Menü und andere wichtige CTAs für Benutzer zugänglich zu halten. Manchmal können klebrige Kopfzeilen jedoch ablenken, insbesondere bei großen Kopfzeilen auf kleineren Bildschirmgrößen. Normalerweise greifen wir darauf zurück, den Header zu verkleinern und/oder Elemente im Sticky-Zustand auszublenden, um mehr Platz für Inhalte zu schaffen. Das Erstellen einer Umschaltregisterkarte für diese klebrigen Kopfzeilen könnte jedoch eine großartige Alternative sein. Das Einfügen einer kleinen Umschalt-Registerkarte unter der Sticky-Kopfzeile gibt Benutzern die Möglichkeit, diese Sticky-Kopfzeile jederzeit aus- und einzublenden. In diesem Tutorial zeigen wir Ihnen, wie Sie in Divi eine Umschaltregisterkarte für einen Sticky-Header erstellen.
Lass uns anfangen!
Vorgeschmack
Hier ist ein kurzer Blick auf die Sticky Header Toggle Tab, die wir in diesem Tutorial erstellen werden. Beachten Sie, wie die Umschaltregisterkarte sichtbar wird, sobald der Benutzer über die Höhe der Kopfzeile hinaus scrollt. Dann kann der Benutzer den Sticky-Header umschalten, indem er auf die Registerkarte klickt. Sobald der Benutzer zum Anfang der Seite zurückscrollt, wird die Kopfzeile sichtbar und die Registerkarte wird ausgeblendet.
Und hier ist ein Codepen, der dasselbe Konzept demonstriert.
Laden Sie die Toggle Tab für Sticky Header-Vorlage 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.
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.
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!
Gehen Sie wie folgt vor, um die Vorlage in Ihre Divi-Bibliothek zu importieren:
- Navigieren Sie zum Divi Theme Builder.
- Klicken Sie oben rechts auf der Seite auf das Portabilitätssymbol.
- Wählen Sie im Portabilitäts-Popup die Registerkarte Import aus.
- Wählen Sie die Download-Datei von Ihrem Computer aus.
- Klicken Sie dann auf die Schaltfläche Importieren.
Sobald dies erledigt ist, wird die Vorlage im Divi Theme Builder verfügbar sein.
Von dort aus können Sie die Vorlageneinstellungen öffnen und die Vorlage einer oder allen Seiten Ihrer Website zuweisen, um die Ergebnisse zu testen. Oder Sie können auf den Kopfzeilenvorlageneditor öffnen klicken, um das Vorlagenlayout zu bearbeiten.
Kommen wir zum Tutorial, ja?
Teil 1: Hochladen der vorgefertigten Header-Vorlage in den Divi Theme Builder
Um den Erstellungsprozess für dieses Tutorial zu beschleunigen, verwenden wir einen vorgefertigten Header, der kostenlos von unserem Blog heruntergeladen werden kann.
Laden Sie die Vorlage herunter
Um die vorgefertigte Kopfzeilenvorlage zu erhalten, gehen Sie zu dem Beitrag mit unserer KOSTENLOSEN Kopf- und Fußzeilenvorlage für Divis Interpreter Layout Pack.
Geben Sie dann Ihre E-Mail-Adresse in die E-Mail-Option ein. Sobald Sie fertig sind, sehen Sie die Schaltfläche "Dateien herunterladen". Klicken Sie auf die Schaltfläche, um die Datei herunterzuladen.
Nachdem die Datei heruntergeladen wurde, entpacken Sie die JSON-Datei.
Importieren Sie die Vorlage
Navigieren Sie als Nächstes zu Divi > Theme Builder. Und klicken Sie oben rechts auf der Seite auf das Portabilitätssymbol.
Wählen Sie die Registerkarte Importieren, wählen Sie die gerade entpackte JSON-Datei, deaktivieren Sie die Optionen und klicken Sie auf die Schaltfläche Importieren.
Wählen Sie als Nächstes die Option „Als statische Layouts importieren…“ und klicken Sie erneut auf die Schaltfläche „Importieren“.
Öffnen Sie den Header-Vorlagen-Editor
Nachdem die Vorlage in den Theme Builder geladen wurde, löschen Sie die Fußzeile der Vorlage und klicken Sie auf Änderungen speichern. Klicken Sie dann auf das Bearbeitungssymbol, um die benutzerdefinierte Kopfzeile der Vorlage zu bearbeiten.
Ebenen modal öffnen und vorhandenes Codemodul löschen
Im Header Layout - Editor, öffnen Sie das Einstellungen - Menü am unteren Rand der Seite und klicken Sie auf die Schichten Symbol sehen die Schichten zu öffnen modal. Dies wird uns helfen, zukünftig einfacher auf unsere Divi-Elemente zuzugreifen.
Klicken Sie im Ebenen-Modal auf den Schalter Alle öffnen/schließen, damit Sie alle Divi-Elemente sehen können. Löschen Sie in der zweiten Zeile des Abschnitts das Codemodul. Wir benötigen diesen benutzerdefinierten Code für dieses Tutorial nicht.
Teil 2: Erstellen eines Sticky Headers mit Toggle Tab in Divi
Die Abschnittseinstellungen
Für diese Kopfzeile werden wir den gesamten Abschnitt kleben, damit die Kopfzeile beim Scrollen am oberen Rand der Seite bleibt. Wir werden dem Abschnitt auch eine benutzerdefinierte CSS-Klasse geben, die wir später mit unserem benutzerdefinierten Code ansprechen können.
Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:
- CSS-Klasse: et-divi-sticky-header
- Klebrige Position: Bleiben Sie oben
Erstellen der Umschaltregisterkarte mit einem Blurb-Modul
Als Nächstes erstellen wir unsere Toggle-Registerkarte mit einem Klappenmodul.
Fügen Sie dazu ganz unten in der zweiten Zeile unter dem Menümodul ein neues Klappenmodul hinzu.
Öffnen Sie dann die Klappeneinstellungen und aktualisieren Sie den Inhalt wie folgt:
- Titelinhalt löschen
- Körperinhalt löschen
- Symbol verwenden: JA
- Symbol: Pfeil nach oben (siehe Screenshot)
- Hintergrundfarbe: #ffffff
Aktualisieren Sie auf der Registerkarte "Design" Folgendes:
- Symbolfarbe: #1a3066
- Symbolschriftgröße verwenden: JA
- Symbolschriftgröße: 40px
- Breite: 45px
- Höhe: 45px
- Rand: 0px
- Abgerundete Ecken: 12 px unten links, 12 px unten rechts
- Transformieren X-Achse übersetzen: 100%
- Bild-/Symbolanimation: Keine Animation
HINWEIS: Wenn die Transformationsübersetzung Y auf 100 % gesetzt ist, bewegt sich das Symbol um genau 100 % der Symbolhöhe (45px) nach unten.
Aktualisieren Sie auf der Registerkarte Erweitert Folgendes:
- CSS-Klasse: et-divi-sticky-toggle
- Position: Absolut
- Ort: unten rechts
- Horizontaler Versatz: 20px
- Z-Index: -1
Da der Klappentext nun eine absolute Position hat (mit der Transformationsübersetzung Y 100%), befindet sich der Klappentext (Umschaltregister) direkt unter dem gesamten Kopfzeilenbereich. Dies ist wichtig, damit die Umschaltregisterkarte sichtbar/anklickbar bleibt, wenn wir die Kopfzeile beim Klicken auf die Umschaltregisterkarte anzeigen/ausblenden.
Benutzerdefinierten Code hinzufügen
Um die Funktionalität hinzuzufügen, die wir für diesen Sticky-Header-Umschalter benötigen, müssen wir benutzerdefiniertes CSS und JQuery hinzufügen.
Dazu fügen wir unterhalb des Klappenmoduls ein neues Codemodul hinzu.
Fügen Sie in das Codeinhaltsfeld das folgende CSS ein und achten Sie darauf, den Code in die erforderlichen Style-Tags einzuschließen.
.et-divi-sticky-toggle {
visibility: hidden;
opacity: 0;
transition: all 400ms;
}
.et-divi-sticky-toggle:hover {
cursor: pointer;
}
.et-divi-sticky-toggle.et-show-toggle {
visibility: visible;
opacity: 1;
}
.et-divi-sticky-header {
transition: all 400ms !important;
}
.et-divi-sticky-header.et-hide-sticky-header {
transform: translateX(0%) translateY(-100%) !important;
}
.et-divi-sticky-toggle .et-pb-icon {
margin-bottom: 0px;
transition: all 400ms;
}
.et-hide-sticky-header .et-divi-sticky-toggle .et-pb-icon {
transform: rotateX(180deg);
}
Fügen Sie unter dem endenden script-Tag, das das benutzerdefinierte CSS umgibt, die folgende JQuery ein und achten Sie darauf, den Code in die erforderlichen script-Tags einzuschließen.
jQuery(document).ready(function ($) {
// variables for header and toggle
$stickyHeader = $(".et-divi-sticky-header");
$stickyToggle = $(".et-divi-sticky-toggle");
// attach scroll event handler function to window that
// uses the windows scroll position (winScrollTop) and
// the height of the header (headerHeight) to hide/show
// toggle once the user scrolls beyond the header height.
$(window).on("scroll", function () {
winScrollTop = $(window).scrollTop();
headerHeight = $stickyHeader.height();
if (
winScrollTop >= headerHeight &&
!$stickyToggle.hasClass("et-show-toggle")
) {
$stickyToggle.addClass("et-show-toggle");
} else if (
winScrollTop < headerHeight &&
$stickyToggle.hasClass("et-show-toggle")
) {
$stickyToggle.removeClass("et-show-toggle");
$stickyHeader.removeClass("et-hide-sticky-header");
}
});
// attach click event function on toggle tab that
// toggles the "et-hide-sticky-header" class.
$stickyToggle.on("click", function (e) {
$stickyHeader.toggleClass("et-hide-sticky-header");
});
});
Endergebnis
Um das Endergebnis anzuzeigen, müssen Sie die Vorlage mit dem neuen Header einer Seite oder allen Seiten Ihrer Website zuweisen.
Speichern Sie dazu das Layout und beenden Sie den Header-Vorlagen-Editor.
Öffnen Sie dann die Vorlageneinstellungen (das Zahnradsymbol) für die Vorlage mit der neuen Kopfzeile des Sticky Toggle-Tabs. Wählen Sie auf der Registerkarte Verwenden auf die Option Alle Seiten aus und klicken Sie auf die Schaltfläche Speichern.
WICHTIG: Dadurch wird der Header auf allen Seiten Ihrer Website angezeigt. Stellen Sie also sicher, dass Sie eine Staging-Site und nicht Ihre Live-Website verwenden.
Öffnen Sie nun eine beliebige Seite Ihrer Website, um das Ergebnis anzuzeigen.
Hier ist eine Vorschau, wie es auf Desktop, Tablet und Telefon aussehen wird.
Abschließende Gedanken
In diesem Tutorial haben wir Ihnen gezeigt, wie Sie einen Toggle-Tab für einen Sticky-Header erstellen. Dies kann eine hilfreiche Lösung sowohl für Entwickler sein, die wichtige Sticky-Header-Inhalte für Benutzer zugänglich halten möchten, als auch für Benutzer, die diesen Header jederzeit aus- oder einblenden möchten. Hoffentlich wird dies für ein zukünftiges Projekt nützlich sein!
Ich freue mich von Ihnen in den Kommentaren zu hören.
Danke schön!