Klare Handlungsaufforderungen auf Ihren Seiten sind für die meisten Websites eine Notwendigkeit. Und wie können Sie besser auf einige Ihrer wichtigsten CTAs aufmerksam machen, als sie in Ihren Header zu setzen?
Im heutigen Tutorial zeigen wir Ihnen, wie Sie mit dem Button Builder zwei nebeneinander liegende Schaltflächen zu Ihrer globalen Kopfzeile hinzufügen. Themen von Divi. Eine der Tasten ist primär, die andere sekundär. Sie können auch die globale Header-JSON-Datei kostenlos herunterladen!
Übersicht
Bevor wir uns mit dem Tutorial befassen, werfen wir einen kurzen Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.
Büro
1. Greifen Sie auf Divi Theme Builder zu und erstellen Sie einen globalen Header
Gehen Sie zu Divi Theme Builder
Gehen Sie zunächst zu Divi Theme Builder und klicken Sie auf "Globalen Header hinzufügen".
Erstellen Sie einen globalen Header
Fahren Sie fort, indem Sie auf "Globalen Header erstellen" klicken.
2. Erstellen Sie ein Gesamt-Header-Design
Einen neuen Abschnitt hinzufügen
Abstand
Sobald Sie sich im Vorlageneditor befinden, werden Sie einen Abschnitt bemerken. Öffnen Sie die Abschnittseinstellungen und entfernen Sie alle standardmäßigen oberen und unteren Polster.
- Obere Polsterung: 0px
- Polsterung unten: 0px
Z Index
Stellen Sie außerdem sicher, dass Sie den Z-Index des Abschnitts in den Sichtbarkeitseinstellungen erhöhen. Dadurch wird sichergestellt, dass die Inhalt Der globale Header wird oben auf der gesamten Seite angezeigt und veröffentlicht Inhalt.
- Z-Index: 99999
Fügen Sie eine neue Zeile hinzu
Spaltenstruktur
Wenn Sie die Abschnittseinstellungen abgeschlossen haben, fügen Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzu:
Sizing
Öffnen Sie die Zeilenparameter, ohne Module hinzuzufügen, und lassen Sie die Zeile die gesamte Breite des Abschnittscontainers einnehmen.
- Verwenden Sie eine benutzerdefinierte Rinnenbreite: Ja
- Dachrinnenbreite: 1
- Spaltenhöhen ausgleichen: Ja
- Breite: 100%
- Maximale Breite: 100%
Abstand
Ändern Sie auch die Füllwerte links und rechts von der Linie.
- Linke Polsterung: 2vw (Schreibtisch), 10vw (Tablet und Telefon)
- Rechte Polsterung: 2vw (Schreibtisch), 10vw (Tablet und Telefon)
Hauptelement
Alles zu zentrieren Inhalt Spalten hinzufügen, werden wir diese beiden Zeilen CSS-Code zum Hauptelement der Zeile hinzufügen.
display: flex;align-items: center;
Entfernen Sie die Desktop-Anzeigeeigenschaft auf Tablet und Handy.
display: block;
Spalte 1
Grenze
Öffnen Sie anschließend die Einstellungen in Spalte 1 und fügen Sie nur auf dem Desktop einen rechten Rand hinzu.
- Breite des rechten Randes: 1 Pixel (Schreibtisch), 0 Pixel (Tablet und Telefon)
- Farbe des rechten Randes: # d8d8d8
Z Index
Erhöhen Sie auch den z-Index der Spalte.
- Z-Index: 11
Spalte 2
Hauptelement
Öffnen Sie dann die Einstellungen für Spalte 2 und fügen Sie dem Hauptspaltenelement die folgenden Zeilen CSS-Code hinzu, um es in zwei Spalten umzuwandeln.
display: grid;grid-template-columns: 50% 50%;
Fügen Sie ein Menümodul zu Spalte 1 hinzu
Wählen Sie das Menü
Es ist Zeit, Module hinzuzufügen! Fügen Sie Spalte 1 ein Menümodul hinzu und wählen Sie ein Menü Ihrer Wahl aus.
Logo herunterladen
Laden Sie dann ein Logo hoch.
Bereitstellung
Wechseln Sie zur Registerkarte Moduldesign und stellen Sie sicher, dass die folgenden Layouteinstellungen gelten:
- Stil: linksbündig
- Richtung des Dropdown-Menüs: nach unten
Menütext
Ändern Sie dann die Menütexteinstellungen.
- Aktive Linkfarbe: # ef6f49
- Menüschrift: Montserrat
- Schriftgröße des Menüs: Halb fett
- Menüschriftstil: Großbuchstaben
- Menütextfarbe: # 333333 (Standard), # ef6f49 (Hover)
- Menütextgröße: 0.7 VW (Desktop), 1.8 VW (Tablet), 2.5 VW (Telefon)
- Menübuchstabenabstand: 1px
Dropdown-Menütext
Nehmen Sie auch Änderungen an den Texteinstellungen im Dropdown-Menü vor.
- Hintergrundfarbe des Dropdown-Menüs: #ffffff
- Farbe der Linie im Dropdown-Menü: # ef6f49
Symbole
Ändern Sie als Nächstes die Farbe des Hamburger-Menüsymbols.
- Hamburger Menü Symbol Farbe: # 000000
Sizing
Fügen Sie den Größenparametern auch eine maximale Logo-Breite hinzu.
- Maximale Logobreite: 9 Vw (Schreibtisch), 12 Vw (Tablet), 15 Vw (Telefon)
CSS-Logo-Menü
Vervollständigen Sie die Moduleinstellungen, indem Sie dem Menülogo auf der Registerkarte "Erweitert" eine Zeile CSS-Code hinzufügen.
margin-right: 10vw;
Fügen Sie der 1-Spalte ein Codemodul hinzu
Fügen Sie dem Modul einen benutzerdefinierten CSS-Code hinzu
Das nächste und letzte Modul, das wir in Spalte 1 benötigen, ist ein Codemodul. Fügen Sie die folgenden Zeilen CSS-Code hinzu, um den Abstand zwischen den Menüelementen anzupassen:
<style>.et-menu>li {padding-left: 1.5vw !important;padding-right: 1.5vw !important;}</style>
Fügen Sie das erste Schaltflächenmodul zu Spalte 2 hinzu
Kopie hinzufügen
Fahren wir mit dem nächsten Modul fort! Fügen Sie das erste Schaltflächenmodul hinzu und geben Sie eine Kopie Ihrer Wahl ein.
Ajouter un lien
Fügen Sie dann einen Link zum Schaltflächenmodul hinzu.
Ausrichtung
Wechseln Sie zur Registerkarte Moduldesign und ändern Sie die Tastenausrichtung.
- Tastenausrichtung: Richtig
Tasteneinstellungen
Gestalten Sie auch die Schaltfläche.
- Verwenden Sie benutzerdefinierte Stile für die Schaltfläche: Ja
- Schaltflächentextgröße: 0.8vw (Desktop), 1.7vw (Tablet), 2.5vw (Telefon)
- Textfarbe der Schaltfläche: # 000000
- Hintergrundfarbe der Schaltfläche: # edeef0 (Standard), # d6d7d8 (Hover)
- Schaltflächenrandbreite: 0px
- Schaltflächenrandradius: 0px
- Tastenbuchstabenabstand: 2px
- Tastenschrift: Montserrat
- Schriftgröße der Schaltfläche: Halb fett
- Schaltflächenstil: Großbuchstaben
Abstand
Vervollständigen Sie die Moduleinstellungen, indem Sie benutzerdefinierte Füllwerte auf verschiedenen Bildschirmgrößen hinzufügen.
- Obere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
- Bodenpolsterung: 1 VW (Schreibtisch), 2 VW (Tablet), 3 VW (Telefon)
- Linke Polsterung: 2vw (Desktop), 4vw (Tablet), 6vw (Telefon)
- Rechte Polsterung: 2vw (Schreibtisch), 4vw (Tablet), 6vw (Telefon)
Klontastenmodul
Wenn Sie das erste Schaltflächenmodul abgeschlossen haben, klonen Sie es.
Link bearbeiten
Öffnen Sie das Modul für doppelte Schaltflächen und ändern Sie die URL.
Ausrichtung ändern
Ändern Sie auch die Ausrichtung des Moduls.
- Tastenausrichtung: links
Ändern Sie die Tasteneinstellungen
Nehmen Sie auch Änderungen an den Schaltflächeneinstellungen vor.
- Knopftextfarbe: #ffffff
- Hintergrundfarbe der Schaltfläche: # ef6f49 (Standard), # e06945 (Hover)
Hover-Transformationsskala
Vervollständigen Sie die Schaltflächeneinstellungen, indem Sie einen Hover-Effekt für die Transformationsskala hinzufügen.
- Rechts: 110%
- Niedrig: 110%
3. Speichern Sie die Änderungen am Themengenerator und am Vorschauergebnis
Sobald Ihr globaler Header fertig ist, speichern Sie alle am Theme Builder vorgenommenen Änderungen und sehen Sie sich das Ergebnis auf Ihrem an Website!
Übersicht
Nachdem wir alle Schritte durchlaufen haben, werfen wir einen letzten Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussieht.
Abschließende Gedanken
In diesem Tutorial haben wir Ihnen gezeigt, wie Sie mit dem Themengenerator von Divi zwei Schaltflächen nebeneinander zu Ihrem gesamten Header hinzufügen können.
Eine der hinzugefügten Schaltflächen ist primär, die andere sekundär. Das Hinzufügen von Schaltflächen zu Ihrer allgemeinen Kopfzeile hilft Ihnen, einige der wichtigsten CTAs in Ihrer hervorzuheben Website. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.