Möchten Sie mit Divi einen seitlichen globalen Header erstellen?
In diesem Tutorial zeigen wir Ihnen, wie Sie einen global gedrehten Header erstellen, der auf der linken Seite Ihrer Seiten und Beiträge angezeigt wird. Die Hintergrundfarbe der Kopfzeile ist vollständig transparent, sodass die Inhalt der Seite/des Beitrags.
Wir haben dafür gesorgt, dass die globale Kopfzeile beim Scrollen auf der linken Seite fixiert bleibt, und wir haben auch das Menü zu einer mobilfreundlichen Version gemacht.
In diesem Tutorial zeigen wir Ihnen, wie Sie das Design von Grund auf neu erstellen können!
Gehen wir.
Übersicht
Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis, das wir erreichen möchten.
Gehen Sie zum Theme Builder von Divi und beginnen Sie mit der Erstellung eines globalen Headers
Gehen Sie im WordPress-Dashboard zu Divi > Themenersteller
Klicken Sie auf „Globale Kopfzeile hinzufügen“
wählen „Globale Kopfzeile erstellen“.
Beginnen Sie mit der Erstellung des globalen Seitenheaders
Einen neuen Abschnitt hinzufügen
Hintergrundfarbe
Sobald Sie sich im Vorlageneditor befinden, können Sie den Abschnitt bereits dort öffnen und die Hintergrundfarbe auf verschiedenen Bildschirmgrößen ändern.
- Hintergrundfarbe: rgba(0,0,0,0) (Desktop), #FFFFFF (Tablet und Telefon)
Sizing
Gehen Sie zur Registerkarte Design, ziehen Sie die Option herunter Größe und ändern Sie dann die Abschnittsgrößenparameter.
- Breite: 5vw (Desktop), 100 % (Tablet und Telefon)
- Mindesthöhe: 100 vw (Desktop), Auto (Tablet und Telefon)
Abstand
Ziehen Sie dann die Option Abstand nach unten und ändern Sie die Einstellungen wie folgt:
- Polsterung (oben und unten): 2vw
Schattenkiste
Dann gehe zu Box Schatten und fügen Sie benutzerdefinierte Boxschatten auf verschiedenen Bildschirmgrößen hinzu.
- Box Shadow Horizontale Position: 32px (Desktop), 0px (Tablet und Telefon)
- Box-Schattenunschärfe-Stärke: 49px
- Verbreitungsstärke: 0px (Desktop), 19px (Tablet und Telefon)
- Schattenfarbe: rgba(0,0,0,0.12)
Hinzufügen von benutzerdefiniertem CSS
Wir stellen auch sicher, dass der globale Seitenkopf auf der linken Seite fixiert bleibt, indem wir dem Hauptabschnittselement ein paar Zeilen CSS-Code hinzufügen.
position: fixed;
top: 0;
display: flex;
flex-wrap: wrap;
align-content: center;
Beim Bewegen des Mauszeigers über den Abschnitt
Stellen Sie sicher, dass Sie diese CSS-Codezeilen auch dem Hauptelement beim Hover des Abschnitts hinzufügen.
position: fixed;
top: 0;
Standardsichtbarkeit
Erhöhen Sie dann den z-Index in den Positionsparametern.
- Z-Index: 99999
Hover-Sichtbarkeit
Stellen Sie sicher, dass beim Schweben derselbe Wert gilt.
- Z-Index: 99999
Fügen Sie eine neue Zeile hinzu
Struktur der Spalte
Nachdem Sie die Abschnittseinstellungen abgeschlossen haben, fügen Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzu:
Sizing
Öffnen Sie, ohne noch Module hinzuzufügen, die Leitungseinstellungen und ändern Sie die Größeneinstellungen.
- Benutzerdefinierte Bundstegbreite verwenden: JA
- Rinnenbreite: 1
Abstand
Entfernen Sie auch alle Standardränder.
- Polsterung (oben und unten): 0px
Spaltenparameter
Benutzerdefiniertes CSS hinzugefügt (Tablet und Telefon)
Bei Tablet und Telefon entscheiden wir uns für ein völlig anderes Display. Wir werden drei verschiedene Module nebeneinander platzieren. Dazu müssen wir etwas CSS-Code hinzufügen.
Öffnen Sie die Spalteneinstellungen, gehen Sie zur Registerkarte Fortgeschrittener und fügen Sie die folgenden Zeilen CSS-Code in das Leerzeichen ein Hauptelement für Tablet und Handy:
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
Fügen Sie der Spalte ein Bildmodul hinzu
Logo herunterladen
Es ist Zeit, Module hinzuzufügen! Das erste Modul, das wir brauchen, ist ein Image-Modul. Laden Sie eine halbtransparente Logo-Bilddatei Ihrer Wahl hoch.
Sizing
Dann gehen Sie auf die Registerkarte Design und ändern Sie die Breite auf verschiedenen Bildschirmgrößen.
- Breite: 4 vw (Desktop), 12 vw (Tablet), 16 vw (Telefon)
Maßstab der Transformation
Erhöhen Sie die Größe des Moduls, indem Sie anschließend die Einstellungen für die Transformationsskalierung ändern.
- Rechts: 170 % (Desktop), 100 % (Tablet und Telefon)
- Niedrig: 170 % (Desktop), 100 % (Tablet und Telefon)
"Übersetzen Übersetzen"
Und schieben Sie das Modul nach rechts, indem Sie die folgenden Parameter ändern
- Unten: 1vw (Desktop), 0vw (Tablet und Telefon)
Fügen Sie der Spalte ein Menümodul hinzu
Wählen Sie das hinzuzufügende Menü aus
Das nächste Modul, das wir brauchen, ist das Menü-Modul. Wählen Sie ein Menü Ihrer Wahl.
Hintergrundfarbe entfernen
Entfernen Sie dann die Hintergrundfarbe vom Modul.
Bereitstellung
Dann gehen Sie auf die Registerkarte Design und ändern Sie die Layouteinstellungen.
- Stil: Zentriert
- Richtung des Dropdown-Menüs: Abwärts
Menütexteinstellungen
Ändern Sie auch die Menütexteinstellungen.
- Aktive Linkfarbe: #cecece
- Menüschrift: Montserrat
- Gewichtung der Menüschrift: Fett
- Textfarbe: #000000
- Menütextgröße: 0,9 vw (Desktop), 2 vw (Tablet), 2,5 vw (Telefon)
Menütext beim Hover
Ändern Sie die Farbe des Menütexts beim Hover.
- Menütextfarbe: #afafaf
Menüführung
Wir nehmen auch einige Änderungen an den Dropdown-Menüeinstellungen vor.
- Zeilenfarbe des Dropdown-Menüs: #000000
- Textfarbe des Dropdown-Menüs: #000000
Symbole
Ändern Sie dann die Farbe des Hamburger-Menüsymbols.
- Farbe des Hamburger-Menüsymbols: #000000
Abstand
Fügen Sie benutzerdefinierte Randwerte für verschiedene Bildschirmgrößen hinzu.
- Rand (oben und unten): 18 vw (Desktop), 0 vw (Tablet und Telefon)
- Rand (links und rechts): -13vw (Desktop), 0vw (Tablet und Telefon)
Rotation umwandeln
Um nun den Rotationseffekt zu erzeugen, spielen wir mit den Rotationswerten der Transformation des Moduls herum.
- Links: 270 Grad (Desktop), 0 Grad (Tablet und Telefon)
Fügen Sie der Spalte das Modul „Social Media Follow“ hinzu
Fügen Sie soziale Netzwerke hinzu
Kommen wir zum „Social Media Follow“-Modul, dem nächsten und letzten Modul, das wir benötigen, um unseren globalen Pivot-Header zu vervollständigen. Fügen Sie ein paar soziale Netzwerke Ihrer Wahl hinzu.
Symbolstile für soziale Medien zurücksetzen
Fahren Sie fort, indem Sie die Einstellungen für jedes soziale Netzwerk einzeln zurücksetzen. Dies wird uns helfen, ihre Hintergrundfarbe loszuwerden.
Ausrichtung
Wechseln Sie dann auf die Registerkarte Design des Moduls und ändern Sie die Ausrichtung des Moduls auf verschiedene Bildschirmgrößen.
- Ausrichtungsmodul: Links (Desktop), Rechts (Tablet und Telefon)
Symboleinstellungen
Ändern Sie schließlich auch die Symboleinstellungen.
- Symbolfarbe: #000000
- Benutzerdefinierte Symbolgröße verwenden: JA
- Symbolschriftgröße: 2,1 vw
Konstruktoränderungen speichern und Ergebnis anzeigen
Wenn Sie alle Module abgeschlossen haben, können Sie das Modell speichern und den Builder verlassen Themen von Divi und visualisieren Sie das Ergebnis auf Ihrem Website !
Übersicht
Nachdem wir nun alle Schritte durchlaufen haben, werfen wir einen letzten Blick auf das Ergebnis.
Büro
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
In diesem Artikel haben wir Ihnen gezeigt, wie Sie einen gedrehten globalen Header erstellen. Sofern Sie nichts anderes wählen, wird der von uns erstellte globale Header auf allen Ihren Beiträgen und Seiten angezeigt.
Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Siehe auch 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.
...
