Sie müssen einen globalen Header für Ihre erstellen Webseite mit Divi?
Ein globaler Header erscheint überall auf Ihrer Website, es sei denn, Sie haben einer Seite oder einem Beitrag eine andere Überschrift zugewiesen.
Fangen wir an!
Übersicht
Hier ist eine Vorschau des globalen Headers, den wir entwerfen werden.
Konfigurieren Sie Ihr Hauptmenü
Erstellen Sie zunächst Ihr Menü in den Darstellungseinstellungen Ihrer WordPress-Site.
Greifen Sie unter Divi auf die Option Theme Builder zu
In den Optionen von Divi-Thema, klicken Sie auf Designgenerator. Sobald Sie dort angekommen sind, werden Sie a bemerken Website-Vorlage Standardeinstellung.
Fügen Sie einen globalen Header hinzu und erstellen Sie ihn
Le Website-Vorlage default ist der Ort, an dem Sie mit der Erstellung Ihrer benutzerdefinierten globalen Kopfzeile, des globalen Hauptteils und der globalen Fußzeile beginnen können. Klicken Sie auf „Globalen Header hinzufügen“ und fahren Sie fort, indem Sie auf „Globalen Header erstellen“ klicken, um den Vorgang zu starten.
Abschnittseinstellungen
Sizing
Öffnen Sie die Abschnittseinstellungen, die Sie auf der Seite finden, ändern Sie auf der Registerkarte Stil die Abmessungen für verschiedene Bildschirmgrößen.
- Maximale Breite: 100 %
- Maximale Breite: 1280 Pixel (für PC und Tablet), 100 % (für Mobilgeräte)
Abstand
Entfernen Sie alle oberen und unteren inneren Ränder
- Innerer Randscheitel: 0px
- Unterer interner Rand: 0px
Grenze
Fügen Sie nun einen Randradius an der unteren linken und rechten Ecke des Abschnitts hinzu.
- Unten links: 50px
- Unten rechts: 50px
Schattenkiste
Lassen Sie uns auch einen subtilen Kastenschatten hinzufügen.
- Box-Schattenunschärfe-Stärke: 60px
- Schriftfarbe Untertitel: rgba(0,0,0,0.13)
Sichtbarkeit
- Horizontaler Überlauf: Sichtbar
- Vertikaler Überlauf: Sichtbar
Weisen Sie der Kopfzeile eine neue Zeile zu
Nachdem wir die allgemeinen Abschnittseinstellungen abgeschlossen haben, können wir mit dem Hinzufügen von Zeilen beginnen. Insgesamt benötigen wir zwei Zeilen; eine, die der Kopfzeile gewidmet ist, und eine, die die Anzeige von Menüelementen ermöglicht. Wir beginnen mit der Kopfzeile, indem wir eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:
Leitungseinstellungen
Hintergrundeinstellungen
Ohne der Linie Module hinzuzufügen, öffnen Sie die Linieneinstellungen und ändern Sie die Hintergrundfarbe.
- Hintergrund: #38383F
Sizing
Ändern Sie dann die Liniengrößenparameter.
- Benutzerdefinierte Bundstegbreite verwenden: JA
- Spaltenabstand: 1
- Maximale Breite: 100 %
- Maximale Breite: 100 %
Anzeigen
Stellen wir nun sicher, dass die Spalten auf kleineren Bildschirmen nebeneinander angezeigt werden, indem wir diese CSS-Codezeile zum Hauptzeilenelement hinzufügen.
01
display: flex;
Bildmodul in Spalte 1 hinzufügen
Logo herunterladen
Nachdem Sie die Zeileneinstellungen vorgenommen haben, können Sie mit dem Hinzufügen von Modulen beginnen. Fügen Sie in Spalte 1 ein Bildmodul hinzu und laden Sie Ihr Logo hoch.
Ausrichtung
Gehen Sie zur Registerkarte Stil und richten Sie das Bild links aus.
Sizing
Ändern Sie auch die Breite des Moduls.
Abstand
Fügen Sie auch benutzerdefinierte Randwerte hinzu.
Fügen Sie das Social-Media-Tracking-Modul in Spalte 2 hinzu
Fügen Sie soziale Netzwerke hinzu
Kommen wir zur zweiten Spalte. Dort benötigen wir ein Social-Media-Tracking-Modul. Fügen Sie die sozialen Netzwerke Ihrer Wahl hinzu. Sie können so viele soziale Medien hinzufügen, wie Sie möchten.
Hintergrundfarbe des sozialen Netzwerks
Öffnen Sie als Nächstes jedes soziale Netzwerk einzeln und ändern Sie die Hintergrundfarbe in eine vollständig transparente Farbe.
- Hintergrundfarbe: rgba (0,0,0,0)
Ausrichtung
Gehen Sie zurück zu den normalen Moduleinstellungen und ändern Sie dann die vollständige Ausrichtung des Moduls.
Symbol
Ändern Sie auch die Symboleinstellungen.
- Symbolfarbe: #FFFFFF
- Benutzerdefinierte Symbolgröße verwenden: Ja
- Symbolschriftgröße: 16px (PC und Tablet), 12px (Telefon)
Abstand
Fügen Sie einen oberen Rand hinzu.
Fügen Sie das Button-Modul in Spalte 3 hinzu
Wechseln Sie in die dritte Spalte und fügen Sie ein Button-Modul mit einem Text Ihrer Wahl hinzu.
Ausrichtung
Ändern Sie die Ausrichtung der Schaltfläche auf der Registerkarte Stil.
Tasteneinstellungen
Passen Sie die Schaltflächeneinstellungen wie folgt an:
- Benutzerdefinierte Stile für die Schaltfläche verwenden: Ja
- Schaltflächentextgröße: 12 Pixel (Desktop), 10 Pixel (Tablet), 8 Pixel (Telefon)
- Textfarbe der Schaltfläche: #ffffff
- Hintergrundschaltfläche: #ffae25
- Rahmenbreite der Schaltfläche: 0 Pixel
- Randradius-Schaltfläche: 0 Pixel
- Buchstabenabstand der Schaltflächen: 5 px (Desktop), 3 px (Tablet und Telefon)
- Schriftart-Schaltfläche: Keine öffnen
- Schaltfläche „Weiches Licht“: Fettgedruckter Text
- Schaltflächenstil kopieren: TT
Abstand
Marginwerte anpassen.
Weisen Sie der Menüleiste eine neue Zeile zu
Nachdem Sie die Zeile für den globalen Header ausgefüllt haben, können Sie direkt darunter eine weitere Zeile hinzufügen.
Leitungseinstellungen
Sizing
Öffnen Sie, ohne noch Module hinzuzufügen, die Linieneinstellungen und ändern Sie die Größeneinstellungen auf der Registerkarte Stil.
Abstand
Entfernen Sie dann alle unteren und oberen Ränder.
Fügen Sie der Spalte ein Menümodul hinzu
Wählen Sie Menü
Fügen Sie als Nächstes ein Menümodul zur Spalte hinzu und wählen Sie das Menü aus, das Sie im ersten Teil dieses Tutorials erstellt haben.
Bereitstellung
Wechseln Sie auf die Registerkarte Stil und ändern Sie die Layouteinstellungen wie folgt:
Connections
Ändern Sie auch die Farbe des aktiven Links auf der Registerkarte Stil.
- Farbe des aktiven Links: #ffae25
Menüführung
Machen Sie dasselbe für die Linienfarbe des Dropdown-Menüs in den Dropdown-Menüeinstellungen.
- Farbe der Dropdown-Zeilen: #ffae25
Symbol
- Farbe des Hamburger-Menüsymbols: #ffae25
Menütext
Mit Menütexteinstellungen.
- Menüschriftart: Prata
- Menütextfarbe: #000000
Header und Menüleiste bleiben oben
Bereichseinstellungen öffnen
Sobald Sie die zweite Zeile ausgefüllt haben, müssen Sie nur noch sicherstellen, dass der Abschnitt oben auf unseren Seiten und Beiträgen bleibt. Dazu öffnen wir erneut die Abschnittseinstellungen.
Fügen Sie dem Hauptelement benutzerdefiniertes CSS hinzu
Als nächstes gehen wir zur Registerkarte „Erweitert“ und fügen dem Hauptelement des Abschnitts einige Zeilen CSS-Code hinzu.
01
position: fixed;
02
top: 0;
03
left: 0;
04
right: 0;
Speichern Sie globale Header- und Design-Builder-Optionen
Nachdem Sie das gesamte globale Header-Design fertiggestellt haben, speichern Sie das Design, bevor Sie das Vorlagenlayout verlassen. Sobald Sie das Vorlagenlayout verlassen haben, speichern Sie Ihre gesamten Theme Builder-Änderungen und Sie sind fertig!
Übersicht
Nachdem wir nun alle Schritte durchlaufen haben, werfen wir einen letzten Blick auf das Ergebnis.
Zusammenfassung
In diesem Artikel haben wir Ihnen gezeigt, wie Sie mit dem neuen Theme Builder von Divi einen benutzerdefinierten globalen Header erstellen. Dieses Tutorial zeigt, wie einfach es ist, schöne Kopfzeilen zu erstellen und diese auf Ihr gesamtes Projekt anzuwenden Website oder bestimmte benutzerdefinierte Beitragstypen.
Wir hoffen, dass es Ihnen beim Anpassen Ihrer Website mit Theme Builder hilft.
Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie uns bitte einen Kommentar in der Kommentarbereich unten.
...