Möchten Sie mit Divi einen schönen transparenten und klebrigen Header erstellen?
Wenn es darum geht, einen globalen Header für Ihre Website, es gibt viele Möglichkeiten, sich ihm zu nähern. Einer der subtileren Ansätze ist ein transparenter Header.
Wenn Sie sich für einen transparenten Header entscheiden, dieser aber beim Scrollen klebrig sein muss, werden Sie dieses Tutorial lieben. Der Übergang zwischen transparent und klebrig ist mühelos!
Gehen wir.
Übersicht
Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis.
Erstellen Sie eine neue globale Kopfzeilenvorlage
Gehen Sie zu Divi > Theme Builder.
Abschnitt #1 Einstellungen
Hintergrundfarbe
Sobald Sie sich im Vorlageneditor befinden, werden Sie einen Abschnitt bemerken. Dieser Abschnitt ist der oberen Kopfleiste gewidmet, die Sie in der Vorschau dieses Artikels sehen können. Öffnen Sie die Abschnittseinstellungen und fügen Sie eine schwarze Hintergrundfarbe hinzu.
- Hintergrund: #000000
Abstand
Wechseln Sie zur Registerkarte Abschnittsstil und entfernen Sie standardmäßig alle inneren Ränder (oben und unten).
- Innerer Randscheitel: 0px
- Unterer interner Rand: 0px
Fügen Sie eine neue Zeile hinzu
Struktur der Spalte
Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:
Fügen Sie der Spalte ein Textmodul hinzu
Fügen Sie der Zeilenspalte einen Textbaustein hinzu und geben Sie eine Nachricht Ihrer Wahl ein.
Texteinstellungen
Wechseln Sie auf die Registerkarte Modulstil und ändern Sie die Texteinstellungen entsprechend:
- Textschrift: Oswald
- Textkopierstil: TT
- Textfarbe Text: #ffffff
- Text Textgröße:
- Desktop: 19px
- Tablet: 18px
- Telefon: 16px
- Textausrichtung: Zentriert
Abschnitt 2 hinzufügen
Abstand
Fügen Sie direkt unter dem ersten Abschnitt einen weiteren regulären Abschnitt hinzu. Dieser Abschnitt ist unserem transparenten Menü gewidmet, das beim Scrollen klebrig wird.
Öffnen Sie die Abschnittseinstellungen und entfernen Sie standardmäßig alle inneren Ränder (oben und unten) auf der Registerkarte Stil.
- Innerer Randscheitel: 0px
- Unterer interner Rand: 0px
Fügen Sie eine neue Zeile hinzu
Struktur der Spalte
Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:
Transparente Hintergrundfarbe
Öffnen Sie die Linieneinstellungen und wenden Sie eine vollständig transparente Hintergrundfarbe auf die Linie an.
- Hintergrund: rgba (255,255,255,0)
Sizing
Wechseln Sie zur Registerkarte Linienstil und ändern Sie die Größeneinstellungen.
- Benutzerdefinierte Bundstegbreite verwenden: Ja
- Spaltenabstand: 1
- Maximale Breite: 100%
- Maximale Breite: 100%
Abstand
Fügen Sie dann benutzerdefinierte interne (linke und rechte) Ränder hinzu.
- Linker Innenrand: 10 %
- Internes Margengesetz: 10 %
Schattenkiste
Wenden Sie als Nächstes einen transparenten Kastenschatten an. Später im Tutorial werden wir diesen Box-Schatten in einem klebrigen Zustand mit einer anderen Schattenfarbe verwenden.
- Feld-Schattenunschärfe-Stärke: 50px
- Schriftfarbe Untertitel: rgba (0,0,0,0)
Position
Um sicherzustellen, dass die Linie oben im angezeigt wird Inhalt Auf der Seite mit transparentem Hintergrund verwenden wir eine absolute Position für unsere Zeile auf der Registerkarte „Erweitert“.
- Position: Absolut
- Ort: Oben links
Spalte 2 Sichtbarkeit
Wir blenden auch die zweite Spalte unserer Zeile auf Tablets und Telefonen aus, um ein weniger komplexes Header-Design auf kleineren Bildschirmgrößen zu haben.
Menümodul zu Spalte 1 hinzufügen
Wählen Sie ein Menü aus
Nachdem unsere Zeileneinstellungen vorgenommen wurden, ist es an der Zeit, Module hinzuzufügen, beginnend mit einem Menümodul in Spalte 1. Wählen Sie das Menü Ihrer Wahl aus.
Logo herunterladen
Laden Sie dann ein Logo hoch.
Hintergrundfarbe entfernen
Entfernen Sie auch die Hintergrundfarbe aus dem Modul.
Menütexteinstellungen
Wechseln Sie auf die Registerkarte Stil des Moduls und ändern Sie die Menütexteinstellungen entsprechend:
- Schriftmenü: Oswald
- Softlight-Menü: Fett
- Menü Stil kopieren: TT
- Menütextfarbe: #efefef
- Menütextgröße: 18px
- Textausrichtung: rechts
Dropdown-Menüeinstellungen
Ändern Sie auch die Dropdown-Menüeinstellungen.
- Dropdown-Zeilenfarbe: rgba(0,0,0,0)
- Mobile Menü Hintergrundfarbe: rgba (0,0,0,0,95)
Symboleinstellungen
Ändern Sie als Nächstes die Symbolfarben in den Symboleinstellungen.
- Farbe des Einkaufswagensymbols: #ffffff
- Farbe des Suchsymbols: #ffffff
- Farbe des Hamburger-Menüsymbols: #ffffff
Logo-Einstellungen
Wir ändern auch die Farbe unseres Logos in den Logoeinstellungen, indem wir den Bildumkehrfilter ändern.
- Bild umkehren: 90 %
Sizing
Als nächstes weisen wir unserem Logo eine maximale Höhe zu.
- Logo Max. Breite: 40 Pixel
Abstand
Als Nächstes fügen wir bei kleinen Bildschirmgrößen eine obere und untere Polsterung hinzu.
- Maximale interne Marge:
- Tablet und Telefon: 10px
- Unterer Innenrand:
- Tablet und Telefon: 10px
Fügen Sie das Button-Modul in Spalte 2 hinzu
Text hinzufügen zu Knopf
In Spalte 2 benötigen wir als einziges Modul ein Button-Modul. Fügen Sie einen Text Ihrer Wahl hinzu.
Tastenausrichtung
Wechseln Sie zur Registerkarte Modulstil und ändern Sie die Schaltflächenausrichtung.
- Tastenausrichtung: rechts
Tasteneinstellungen
Passen Sie als Nächstes die Schaltfläche an.
- Benutzerdefinierte Stile für Button verwenden: Ja
- Schaltflächentextgröße: 16px
- Textfarbe der Schaltfläche: #ffffff
- Hintergrundschaltfläche: #ed4441
- Farbe des Schaltflächenrahmens: #ed4441
- Randradius-Schaltfläche: 0 Pixel
- Buchstabenabstand der Schaltfläche: 4px
- Schaltflächenschriftart: Oswald
- Schaltfläche „Weiches Licht“: Fettgedruckter Text
- Schaltfläche „Stil kopieren“: TT
- Schaltflächensymbol anzeigen: Ja
- Farbe des Schaltflächensymbols: #1a1a1a
Abstand
Und vervollständigen Sie die Modulparameter, indem Sie benutzerdefinierte Abstandswerte hinzufügen.
- Oberer Rand: -70px
- Oberer und unterer Innenrand: 25 px
Wenden Sie benutzerdefinierte Sticky-Effekte an
Machen Sie Abschnitt Nr. 2 klebrig
Jetzt, da wir die Grundlage für unseren Header gelegt haben, ist es an der Zeit, den Sticky-Effekt anzuwenden! Öffnen Sie dazu zunächst die Einstellungen im zweiten Abschnitt und wenden Sie die folgenden Sticky-Einstellungen auf die Registerkarte „Erweitert“ an:
- Sticky-Position: Oben bleiben
- Stick-Top-Offset: 0px
- Bottom Sticky Mimit: Keine
- Versatz von umgebenden klebrigen Elementen: JA
- Übergangsstandard und Sticky-Stile: JA
Hintergrundfarbe der Strichlinie
Jetzt, da die Sticky-Option aktiviert ist, können wir Sticky-Optionsänderungen an allen Elementen im Abschnitt vornehmen. Wir öffnen zunächst die Zeile mit unserem Menü und wenden eine weiße Hintergrundfarbe auf die Sticky-Option an.
- Hintergrundfarbe: #FFFFFF
Klebriger Zeilenabstand
Als nächstes ändern wir die Abstandswerte der Sticky-Funktion der Linie.
- Innerer Randscheitel: 0px
- Unterer interner Rand: 0px
Sticky-Row-Schattenbox
Wir ändern auch die Farbe des Box-Schattens in einem klebrigen Zustand.
- Schriftfarbe Untertitel: rgba(0,0,0,0.08)
Sticky-Line-Positionierung
Als Nächstes setzen wir die Zeilenpositionierung in einem klebrigen Zustand auf relativ zurück.
- Stellung: Relativ
- Versatzursprung: oben links
Sticky-State-Menütexteinstellungen
Als Nächstes ändern wir die Menütextfarbe in den Sticky-Status.
- Menütextfarbe: #000000
Menü-Dropdown-Einstellungen im Sticky-Zustand
Mit Hintergrundfarbe des mobilen Menüs in den Dropdown-Menüeinstellungen.
- Mobiles Menü, Hintergrundfarbe: #ffffff
Menüsymbolfarben im klebrigen Zustand
Ändern Sie auch die Symbolfarben in einem klebrigen Zustand.
- Farbe des Einkaufswagensymbols: #000000
- Farbe des Suchsymbols: #000000
- Farbe des Hamburger-Menüsymbols: #000000
Logofilter im klebrigen Zustand
Entfernen Sie als Nächstes den Invertfilter aus dem Logobild in einem klebrigen Zustand.
- Bildumkehrung: 0 %
Tastenabstand im klebrigen Zustand
Und schließen Sie das Tutorial ab, indem Sie den negativen oberen Rand von der Schaltfläche entfernen, wenn sie sich im klebrigen Zustand befindet.
- Oberer Rand: 0px
Übersicht
Nachdem wir nun alle Schritte durchlaufen haben, werfen wir einen letzten Blick auf das Endergebnis.
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
In diesem Artikel haben wir Ihnen gezeigt, wie Sie den Konstruktor von kombinieren Themen von Divi mit den neuen Sticky-Optionen. Insbesondere haben wir Ihnen gezeigt, wie Sie beim Scrollen von einer transparenten Kopfzeile zu einer klebrigen Kopfzeile mit einem anderen Stil wechseln.
Dieser Ansatz ermöglicht es Ihnen, Ihr Seitendesign mit Ihrem Menü zu verschmelzen, während Sie beim Scrollen immer noch eine schöne klebrige Kopfzeile beibehalten.
Wenn Sie mehr über Divi erfahren möchten, zögern Sie nicht, unseren Katalog zu besuchen Divi-Tutorials. Sie können sich auch beraten So erstellen Sie die Blog-Seite mit dem Divi-Blog-Modul
Wenn Sie Fragen oder Anregungen haben, können Sie im Kommentarbereich unten einen Kommentar hinterlassen.
Sie können sich aber auch beraten unsere Ressourcen, Wenn 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 inzwischen, Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
