Bedürfnisse um ein transparentes schwebendes Menü zu erstellen Divi ?
Suchen Sie nach einer Möglichkeit, Ihre allgemeine Kopfzeile über den Hauptabschnitten Ihrer Seiten zu platzieren? Im Tutorium Divi Heute zeigen wir Ihnen genau, wie das geht.
Wir erstellen einen atemberaubenden globalen Header von Grund auf neu (unter Verwendung des Konstruktors von Themen de Divi) und wir werden einen schwebenden Effekt auf die Menüleiste anwenden.
Gehen wir.
Übersicht
Bevor wir in dieses Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis, das wir erreichen möchten.
Gehen Sie zu Divis Theme Builder und fügen Sie eine neue Vorlage hinzu
Allez auf Divi > Theme Builder.
Erstellen Sie den globalen Header mit Divi Theme Builder
Klicken Sie auf „Globalen Header hinzufügen“ und fahren Sie fort, indem Sie „Globalen Header erstellen“ auswählen.
Abschnittseinstellungen
Hintergrundfarbe
Sobald Sie sich im Vorlageneditor befinden, werden Sie einen Abschnitt auf der Seite bemerken. Öffnen Sie diesen Abschnitt und ändern Sie die Hintergrundfarbe in eine vollständig transparente Farbe. Dadurch wird alles unterhalb des Abschnitts angezeigt.
- Hintergrund: rgba(0,0,0,0)
Sizing
Wechseln Sie dann zur Registerkarte Abschnittsstil und ändern Sie die maximale Breite.
- Maximale Breite (siehe Screenshot): 100 %
Abstand
Entfernen Sie auch alle standardmäßigen inneren Ränder oben und unten.
- Innerer Randscheitel: 0px
- Unterer interner Rand: 0px
Z-Index
Und um sicherzustellen, dass der Abschnitt den Überblick behält Inhalt Im Heldenbereich müssen wir den Z-Index in den Sichtbarkeitseinstellungen erhöhen.
- Z-Index: 99999
Fügen Sie eine neue Zeile hinzu
Struktur der Spalte
Nachdem Sie die Abschnittseinstellungen abgeschlossen haben, können Sie eine neue Zeile hinzufügen, indem Sie die folgende Spaltenstruktur verwenden:
Sizing
Öffnen Sie, ohne Module hinzuzufügen, die Zeileneinstellungen und ändern Sie die Größeneinstellungen wie folgt:
- Spaltenhöhen harmonisieren: Ja
- Maximale Breite: 100%
- Maximale Breite: 100%
Abstand
Fügen Sie dann benutzerdefinierte interne Ränder hinzu (oben und unten).
- Maximale interne Marge: 2vw
- Unterer Innenrand: 0vw
Hauptelement
Gehen Sie als Nächstes zur Registerkarte Erweitert und stellen Sie sicher, dass die Spalten auf kleineren Bildschirmgrößen nebeneinander bleiben, indem Sie dem Hauptzeilenelement eine einzelne Zeile CSS-Code hinzufügen.
display: flex;
Spalte 2
Hintergrundfarbe
Fahren Sie fort, indem Sie die Einstellungen der Spalte 2 öffnen und die Hintergrundfarbe in eine halbtransparente Farbe ändern.
- Hintergrundfarbe: rgba (255,255,255,0.71)
Grenze
Fügen Sie der Spalte außerdem einen unteren Rand hinzu.
- Breite des unteren Randes: 2px
- Farbe der Schaltfläche und des unteren Rahmens: #f4583f
Schattenkiste
Und erzeugen Sie einen schwebenden Effekt, indem Sie einen subtilen Kastenschatten hinzufügen.
- Schattenbox: [Aufnahme ansehen]
- Ausgangsposition: 20px
- Bogen-Schatten-Unschärfe-Stärke: 50px
- Box-Schatten-Ausbreitungsstärke: -20px
- Schriftfarbe Untertitel: rgba(0,0,0,0.23)
Fügen Sie Spalte 1 ein Bildmodul hinzu
Logo herunterladen
Nachdem Sie die Zeilen- und Spalteneinstellungen vorgenommen haben, ist es an der Zeit, die Module hinzuzufügen, beginnend mit einem Bildmodul in Spalte 1. Laden Sie ein Logo mit transparentem Hintergrund hoch.
Ausrichtung
Wechseln Sie auf die Registerkarte Modulstil und ändern Sie die Ausrichtung.
- Bildausrichtung: Zentriert
Sizing
Ändern Sie auch die Breite des Moduls in den Größeneinstellungen.
- Maximale Breite: 8 vw (Desktop), 14 vw (Tablet), 21 vw (Telefon)
Menümodul zu Spalte 2 hinzufügen
Wählen Sie ein Menü aus
Kommen wir zur nächsten Spalte. Dort brauchen wir als einziges Modul ein Menu-Modul. Wählen Sie ein Menü Ihrer Wahl.
Hintergrundfarbe entfernen
Gehen Sie dann zu den Hintergrundeinstellungen und entfernen Sie die Hintergrundfarbe.
Bereitstellung
Wechseln Sie auf die Registerkarte Modulstil und bearbeiten Sie das Layout.
- Stil: Zentriert
- Dropdown-Menü: nach unten
Menütext
Gestalten Sie auch die Menütexteinstellungen.
- Menüschriftart: Mulish
- Menütextfarbe: #6f6666
- Textgrößenmenü: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
Menüführung
Ändern Sie dann die Einstellungen im Dropdown-Menü.
- Farbe der Dropdown-Zeilen: #f4583f
Symbole
Verwenden Sie dieselbe Farbe für die Symbolfarbe des Hamburger-Menüs in den Symboleinstellungen.
- Farbe des Hamburger-Menüsymbols: #f4583f
Abstand
Vervollständigen Sie die Moduleinstellungen, indem Sie die obere und untere Polsterung in den Abstandseinstellungen hinzufügen.
- Maximale interne Marge: 1,5 vw
- Unterer Innenrand: 1,5 vw
Fügen Sie das Button-Modul in Spalte 3 hinzu
Text zur Schaltfläche hinzufügen
Kommen wir zur nächsten und letzten Spalte. Fügen Sie ein Button-Modul mit einem Text Ihrer Wahl hinzu.
Ausrichtung
Ändern Sie dann die Ausrichtung des Moduls.
- Schaltflächenausrichtung: zentriert
Tasteneinstellungen
Fahren Sie fort, indem Sie die Schaltfläche entsprechend anpassen:
- Benutzerdefinierte Stile für Button verwenden: Ja
- Schaltflächentextgröße: 0,9 vw (Desktop), 1,5 vw (Tablet), 2,5 vw (Telefon)
- Textfarbe der Schaltfläche: #ffffff
- Hintergrundschaltfläche: #f4583f
- Rahmenbreite der Schaltfläche: 0 Pixel
- Rahmenfarbe der Schaltfläche: #f4583f
- Randradius-Schaltfläche: 0 Pixel
- Button-Schriftart: Mulish
- Schaltfläche „Dimmlicht“: Fettgedruckter Text
Abstand
Vervollständigen Sie die Moduleinstellungen, indem Sie benutzerdefinierte Polsterung auf verschiedenen Bildschirmgrößen hinzufügen.
- Oberer und unterer interner Rand: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
- Linker und rechter interner Rand: 2vw (Desktop), 3vw (Tablet), 4vw (Telefon)
Zusätzliche Abschnittsparameter
Standard-Hauptelement
Sobald Sie die allgemeine Anpassung abgeschlossen haben, müssen Sie noch etwas tun; Platzieren Sie den Abschnitt über dem Inhalt Ihrer Seite. Dazu müssen wir dem Hauptelement des Abschnitts zwei Zeilen CSS-Code hinzufügen.
position: absolute;
top: 0;
Hauptelement beim Schweben
Stellen Sie sicher, dass Sie dieselben CSS-Codezeilen zur Hover-Option des Hauptelements hinzufügen. Dadurch wird verhindert, dass der Abschnitt flackert, wenn Sie den Mauszeiger darüber bewegen.
position: absolute;
top: 0;
Konstruktoränderungen speichern und Ergebnis anzeigen
Sobald Sie den Abschnitt abgeschlossen haben, können Sie die globale Kopfzeile speichern und das Ergebnis auf Ihrer Website anzeigen!
Übersicht
Nachdem wir nun alle Schritte durchlaufen haben, werfen wir einen letzten Blick auf das Ergebnis.
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
So ! Das war es für diesen Artikel. Wir haben Ihnen gezeigt, wie Sie mit Divis Theme Builder eine schwebende und transparente Menüleiste erstellen. Die Kopfzeile wird über dem ersten Abschnitt Ihrer Seite oder Ihres Beitrags platziert.
Um sich mit dem Theme Builder von Divi vertraut zu machen, können Sie auch unseren Artikel weiterlesen So erstellen Sie einen globalen Header mit dem Theme Builder von Divi
Sie können sich auch beraten lassen unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
