So fügen Sie Ihrem Divi Global Header zwei nebeneinander liegende Schaltflächen hinzu

Klare Handlungsaufforderungen auf Ihren Seiten sind für die meisten Websites eine Notwendigkeit. Und was gibt es besseres, um auf einige Ihrer wichtigsten CTAs aufmerksam zu machen, als sie in Ihrem Header zu platzieren? Im heutigen Tutorial zeigen wir Ihnen, wie Sie mit Divis Theme Builder zwei nebeneinander liegende Schaltflächen zu Ihrem globalen Header hinzufügen. Einer der Knöpfe ist primär, der andere sekundär. Sie können auch die JSON-Datei des globalen Headers kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie die globale Header-Vorlage KOSTENLOS herunter

Um die kostenlose globale Header-Vorlage in die Hände zu bekommen, müssen Sie sie zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

1. Gehen Sie zu Divi Theme Builder und erstellen Sie einen globalen Header

Gehe zum Divi Theme Builder

Gehen Sie zunächst zum Divi Theme Builder und klicken Sie auf „Globalen Header hinzufügen“.

Globalen Header erstellen

Fahren Sie fort, indem Sie auf „Globalen Header erstellen“ klicken.

2. Erstellen Sie ein globales Header-Design

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
• Untere Polsterung: 0px

Z-Index

Stellen Sie sicher, dass Sie auch den Z-Index des Abschnitts in den Sichtbarkeitseinstellungen erhöhen. Dadurch wird sichergestellt, dass der globale Header-Inhalt über allen Seiten- und Post-Inhalten angezeigt wird.

• Z-Index: 99999

Neue Zeile hinzufügen

Spaltenstruktur

Nachdem Sie die Abschnittseinstellungen abgeschlossen haben, fügen Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Größe

Öffnen Sie die Zeileneinstellungen, ohne Module hinzuzufügen, und lassen Sie die Zeile die gesamte Breite des Abschnittscontainers einnehmen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja
• Breite: 100%
• Maximale Breite: 100%

Abstand

Ändern Sie auch die linken und rechten Auffüllwerte der Zeile.

• Linke Polsterung: 2vw (Desktop), 10vw (Tablet & Telefon)
• Rechte Polsterung: 2vw (Desktop), 10vw (Tablet & Telefon)

Hauptelement

Um den gesamten Spalteninhalt zu zentrieren, fügen wir diese beiden Zeilen CSS-Code zum Hauptelement der Zeile hinzu.

display: flex;
align-items: center;

Entfernen Sie die Desktop-Anzeigeeigenschaft auf Tablets und Mobilgeräten.

display: block;

Spalte 1

Grenze

Fahren Sie fort, indem Sie die Einstellungen von Spalte 1 öffnen und nur auf dem Desktop einen rechten Rand hinzufügen.

• Breite des rechten Rands: 1 Pixel (Desktop), 0 Pixel (Tablet und Telefon)
• Farbe des rechten Rands: #d8d8d8

Z-Index

Erhöhen Sie auch den Z-Index der Spalte.

• Z-Index: 11

Spalte 2

Hauptelement

Öffnen Sie dann die Einstellungen von Spalte 2 und fügen Sie die folgenden CSS-Codezeilen zum Hauptelement der Spalte hinzu, um sie in zwei Spalten zu verwandeln.

display: grid;
grid-template-columns: 50% 50%;

Menümodul zu Spalte 1 hinzufügen

Menü auswählen

Zeit, Module hinzuzufügen! Fügen Sie in Spalte 1 ein Menümodul hinzu und wählen Sie ein Menü Ihrer Wahl aus.

Logo hochladen

Laden Sie als nächstes ein Logo hoch.

Layout

Wechseln Sie zur Registerkarte Design des Moduls und stellen Sie sicher, dass die folgenden Layouteinstellungen gelten:

• Stil: Linksbündig
• Richtung des Dropdown-Menüs: Abwärts

Menütext

Ändern Sie als nächstes die Menütexteinstellungen.

• Farbe des aktiven Links: #ef6f49
• Menüschrift: Montserrat
• Schriftstärke im Menü: Halbfett
• Menüschriftart: Großbuchstaben
• Menütextfarbe: #333333 (Standard), #ef6f49 (Hover)
• Menütextgröße: 0.7vw (Desktop), 1.8vw (Tablet), 2.5vw (Telefon)
• Menübuchstabenabstand: 1px

Dropdown-Menütext

Nehmen Sie auch einige Änderungen an den Texteinstellungen des Dropdown-Menüs vor.

• Hintergrundfarbe des Dropdown-Menüs: #ffffff
• Farbe der Dropdown-Menüzeile: #ef6f49

Symbole

Ändern Sie dann die Farbe des Hamburger-Menüsymbols.

• Hamburger Menüsymbol Farbe: #000000

Größe

Fügen Sie den Größeneinstellungen auch eine maximale Logobreite hinzu.

• Max. Logobreite: 9vw (Desktop), 12vw (Tablet), 15vw (Telefon)

Menü Logo CSS

Und vervollständigen Sie die Einstellungen des Moduls, indem Sie dem Menülogo auf der Registerkarte "Erweitert" eine Zeile CSS-Code hinzufügen.

margin-right: 10vw;

Codemodul zu Spalte 1 hinzufügen

Benutzerdefinierten CSS-Code zum Modul hinzufügen

Das nächste und letzte Modul, das wir in Spalte 1 benötigen, ist ein Code-Modul. Fügen Sie die folgenden CSS-Codezeilen hinzu, um den Abstand zwischen den Menüelementen anzupassen:

<style>
.et-menu>li {
padding-left: 1.5vw !important;
padding-right: 1.5vw !important;
}
</style>

Schaltflächenmodul Nr. 1 zu Spalte 2 hinzufügen

Kopie hinzufügen

Auf zum nächsten Modul! Fügen Sie das erste Schaltflächenmodul hinzu und geben Sie eine Kopie Ihrer Wahl ein.

Link hinzufügen

Fügen Sie als Nächstes einen Link zum Schaltflächenmodul hinzu.

Ausrichtung

Wechseln Sie zur Design-Registerkarte des Moduls und ändern Sie die Schaltflächenausrichtung.

• Tastenausrichtung: Rechts

Tasteneinstellungen

Stylen Sie auch die Schaltfläche.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 0,8 vw (Desktop), 1,7 vw (Tablet), 2,5 vw (Telefon)
• Schaltflächentextfarbe: #000000
• Hintergrundfarbe der Schaltfläche: #edeef0 (Standard), #d6d7d8 (Hover)
• Breite des Tastenrahmens: 0px

• Schaltflächenrandradius: 0px
• Tastenabstand der Buchstaben: 2px
• Button-Schriftart: Montserrat
• Tastenschriftstärke: Halbfett
• Schaltflächenschriftart: Großbuchstaben

Abstand

Vervollständigen Sie die Einstellungen des Moduls, indem Sie einige benutzerdefinierte Abstandswerte für verschiedene Bildschirmgrößen hinzufügen.

• Obere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Untere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Linke Polsterung: 2vw (Desktop), 4vw (Tablet), 6vw (Telefon)
• Rechte Polsterung: 2vw (Desktop), 4vw (Tablet), 6vw (Telefon)

Tastenmodul klonen

Sobald Sie das erste Button-Modul fertiggestellt haben, klonen Sie es.

Link ändern

Öffnen Sie das doppelte Button-Modul und ändern Sie die URL.

Ausrichtung ändern

Ändern Sie auch die Ausrichtung des Moduls.

• Tastenausrichtung: Links

Schaltflächeneinstellungen ändern

Nehmen Sie auch einige Änderungen an den Schaltflächeneinstellungen vor.

• Schaltflächentextfarbe: #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 Transformationsskalierung hinzufügen.

• Rechts: 110%
• Unten: 110 %

3. Speichern Sie die Änderungen im Theme Builder und sehen Sie sich das Ergebnis an

Sobald Ihr globaler Header fertig ist, speichern Sie alle Änderungen am Theme Builder und sehen Sie sich das Ergebnis auf Ihrer Website an!

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Tutorial haben wir Ihnen gezeigt, wie Sie Ihrem globalen Header mit dem Theme-Builder von Divi zwei nebeneinander liegende Schaltflächen hinzufügen. Eine der Schaltflächen, die wir hinzugefügt haben, ist die primäre, die andere ist sekundär. Durch das Hinzufügen von Schaltflächen zu Ihrem globalen Header können Sie einige der wichtigsten CTAs Ihrer Website hervorheben. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.