So erstellen Sie eine globale transparente schwebende Menüleiste mit Divis Theme Builder

Suchen Sie nach einer Möglichkeit, Ihren globalen Header über den Heldenabschnitten Ihrer Seiten zu platzieren? Im heutigen Divi-Tutorial zeigen wir Ihnen genau, wie das geht. Wir erstellen einen atemberaubenden globalen Header von Grund auf neu (mit Divis Theme Builder) und wenden einen schwebenden Effekt auf die Menüleiste an. Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie die globale Header-Vorlage für die schwebende Menüleiste KOSTENLOS herunter

Um die globale Header-Vorlage für die schwebende Menüleiste in die Hände zu bekommen, müssen Sie sie 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!

Abonnieren Sie unseren Youtube-Kanal

1. Gehen Sie zu Divi Theme Builder und fügen Sie eine neue Vorlage hinzu

Gehe zum Divi Theme Builder

Beginnen Sie mit dem Divi Theme Builder.

Beginnen Sie mit dem Erstellen eines globalen Headers

Klicken Sie dann auf „Globalen Header hinzufügen“ und fahren Sie fort, indem Sie „Globalen Header erstellen“ auswählen.

2. Beginnen Sie mit dem Erstellen des globalen Headers

Abschnittseinstellungen

Hintergrundfarbe

Sobald Sie sich im Vorlageneditor befinden, sehen Sie einen Abschnitt auf der Seite. Öffnen Sie diesen Abschnitt und ändern Sie die Hintergrundfarbe in eine vollständig transparente. Dadurch kann alles unterhalb des Abschnitts durchscheinen.

• Hintergrundfarbe: rgba(0,0,0,0)

Größe

Wechseln Sie als nächstes zum Design-Tab des Abschnitts und ändern Sie die Breite.

• Breite: 100%

Abstand

Entfernen Sie auch alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Z-Index

Und um sicherzustellen, dass der Abschnitt über allen Inhalten des Hero-Abschnitts angezeigt wird, müssen wir den Z-Index des Abschnitts in den Sichtbarkeitseinstellungen erhöhen.

• Z-Index: 99999

Neue Zeile hinzufügen

Spaltenstruktur

Nachdem Sie die Abschnittseinstellungen abgeschlossen haben, können Sie mithilfe der folgenden Spaltenstruktur eine neue Zeile hinzufügen:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen wie folgt:

• Spaltenhöhen ausgleichen: Ja
• Breite: 100%
• Maximale Breite: 100%

Abstand

Fügen Sie als nächstes eine benutzerdefinierte obere und untere Polsterung hinzu.

• Obere Polsterung: 2vw
• Untere Polsterung: 0vw

Hauptelement

Gehen Sie dann zur Registerkarte Erweitert und stellen Sie sicher, dass die Spalten auf kleineren Bildschirmgrößen nebeneinander bleiben, indem Sie dem Hauptelement der Zeile eine einzelne Zeile CSS-Code hinzufügen.

display: flex;

Spalte 2

Hintergrundfarbe

Fahren Sie fort, indem Sie die Einstellungen von Spalte 2 öffnen und die Hintergrundfarbe in eine halbtransparente ändern.

• Hintergrundfarbe: rgba(255,255,255,0.71)

Grenze

Fügen Sie der Spalte auch einen unteren Rand hinzu.

• Breite des unteren Rands: 2px
• Farbe des unteren Rands: #f4583f

Box Schatten

Und erzeugen Sie einen schwebenden Effekt, indem Sie einen subtilen Kastenschatten hinzufügen.

• Vertikale Position des Kastenschattens: 20px
• Stärke der Box-Schattenunschärfe: 50px
• Stärke der Box-Schattenausbreitung: -20px
• Schattenfarbe: rgba(0,0,0,0.23)

Bildmodul zu Spalte 1 hinzufügen

Logo hochladen

Nachdem Sie die Zeilen- und Spalteneinstellungen vorgenommen haben, können Sie die Module hinzufügen, beginnend mit einem Bildmodul in Spalte 1. Laden Sie ein Logo mit transparentem Hintergrund hoch.

Ausrichtung

Wechseln Sie zur Design-Registerkarte des Moduls und ändern Sie die Ausrichtung.

• Bildausrichtung: Mitte

Größe

Ändern Sie auch die Breite des Moduls in den Größeneinstellungen.

• Breite: 8vw (Desktop), 14vw (Tablet), 21vw (Telefon)

Menümodul zu Spalte 2 hinzufügen

Menü auswählen

Weiter zur nächsten Spalte. Dort brauchen wir als einziges Modul ein Menümodul. Wählen Sie ein Menü Ihrer Wahl.

Hintergrundfarbe entfernen

Gehen Sie dann zu den Hintergrundeinstellungen und entfernen Sie die Hintergrundfarbe.

Layout

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie das Layout.

• Stil: Zentriert
• Richtung des Dropdown-Menüs: Abwärts

Menütext

Gestalten Sie auch die Menütexteinstellungen.

• Menüschrift: Muli
• Menütextfarbe: #6f6666
• Menütextgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)

Dropdown-Menü

Ändern Sie als Nächstes die Dropdown-Menüeinstellungen.

• Farbe der Dropdown-Menüzeile: #f4583f

Symbole

Verwenden Sie dieselbe Farbe für die Farbe des Hamburger-Menüsymbols in den Symboleinstellungen.

• Farbe des Hamburger-Menüsymbols: #f4583f

Abstand

Vervollständigen Sie die Einstellungen des Moduls, indem Sie in den Abstandseinstellungen einige obere und untere Abstände hinzufügen.

• Obere Polsterung: 1.5vw
• Untere Polsterung: 1.5vw

Schaltflächenmodul zu Spalte 3 hinzufügen

Kopie hinzufügen

Weiter zur nächsten und letzten Spalte. Fügen Sie ein Button-Modul mit einer Kopie Ihrer Wahl hinzu.

Ausrichtung

Ändern Sie als nächstes die Ausrichtung des Moduls.

• Tastenausrichtung: Mitte

Tasteneinstellungen

Fahren Sie fort, indem Sie die Schaltfläche entsprechend gestalten:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 0,9 vw (Desktop), 1,5 vw (Tablet), 2,5 vw (Telefon)
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #f4583f
• Breite des Tastenrahmens: 0px
• Farbe des Knopfrahmens: #f4583f
• Schaltflächenrandradius: 0px

• Schaltflächenschrift: Muli
• Schriftstärke der Schaltfläche: Fett

Abstand

Und vervollständigen Sie die Einstellungen des Moduls, indem Sie benutzerdefinierte Auffüllungen für verschiedene Bildschirmgrößen hinzufügen.

• Obere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Untere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Linke Polsterung: 2vw (Desktop), 3vw (Tablet), 4vw (Telefon)
• Rechte Polsterung: 2vw (Desktop), 3vw (Tablet), 4vw (Telefon)

Zusätzliche Abschnittseinstellungen

Standard-Hauptelement

Sobald Sie das Gesamtdesign fertiggestellt haben, müssen Sie nur noch eines tun; Platzieren des Abschnitts über Ihrem Seiteninhalt. Dazu müssen wir dem Hauptelement des Abschnitts zwei Zeilen CSS-Code hinzufügen.

position: absolute;
top: 0;

Hover-Hauptelement

Stellen Sie sicher, dass Sie der Hover-Option des Hauptelements dieselben CSS-Codezeilen hinzufügen. Dadurch wird verhindert, dass der Abschnitt flimmert, wenn Sie ihn mit der Maus bewegen.

position: absolute;
top: 0;

3. Builder-Änderungen speichern und Ergebnis anzeigen

Sobald Sie den Abschnitt ausgefüllt haben, können Sie den globalen Header speichern und das Ergebnis auf Ihrer Website anzeigen!

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit Divis Theme Builder eine schwebende Menüleiste erstellen. Dies ist eine großartige Möglichkeit, Ihre Kopfzeilen- und Heldenabschnitte zu mischen. Die Kopfzeile wird über dem ersten Abschnitt Ihrer Seite oder Ihres Beitrags platziert. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen!

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.