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

Juxaposed Button Divi

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".

Verwenden des Theme Builder

Erstellen Sie einen globalen Header

Fahren Sie fort, indem Sie auf "Globalen Header erstellen" klicken.

Kopfkonfiguration

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
Divi Space Konfiguration

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
Z-Index-Konfiguration

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:

Layoutkonfiguration

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%
Dimensionskonfiguration

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)
Divi Line Einstellungen

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;

Konfiguration im Divi-Linienstil

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
Konfiguration der Spaltenränder

Z Index

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

  • Z-Index: 11
Erweiterte Einstellungen für die Spaltenkonfiguration

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%;

Konfiguration des Spaltenstils 1

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.

Auswahlmenü-Modul

Logo herunterladen

Laden Sie dann ein Logo hoch.

Konfiguration des Divi-Logos

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ülayout

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
Divi Menü Konfiguration

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
Konfiguration des Divi-Dropdown-Menüs

Symbole

Ändern Sie als Nächstes die Farbe des Hamburger-Menüsymbols.

  • Hamburger Menü Symbol Farbe: # 000000
Konfiguration des Divi-Menüsymbols

Sizing

Fügen Sie den Größenparametern auch eine maximale Logo-Breite hinzu.

  • Maximale Logobreite: 9 Vw (Schreibtisch), 12 Vw (Tablet), 15 Vw (Telefon)
Konfigurationsdimensionsmenü divi

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;

Code hinzufügen CSS-Menü divi

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>

Benutzerdefinierte CSS-Code-Divi-Spalte

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.

Kopieren Sie das Divi-Button-Modul

Ajouter un lien

Fügen Sie dann einen Link zum Schaltflächenmodul hinzu.

Konfiguration der Tastenkombination

Ausrichtung

Wechseln Sie zur Registerkarte Moduldesign und ändern Sie die Tastenausrichtung.

  • Tastenausrichtung: Richtig
Konfiguration der Ausrichtung des Tastenmoduls

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
Einstellungen der Divi-Stilschaltflächen
  • Schaltflächenrandradius: 0px
  • Tastenbuchstabenabstand: 2px
  • Tastenschrift: Montserrat
  • Schriftgröße der Schaltfläche: Halb fett
  • Schaltflächenstil: Großbuchstaben
Passen Sie die Schriftart der Divi-Schaltfläche an

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)
Platzeinstellungen für Divi-Tasten

Klontastenmodul

Wenn Sie das erste Schaltflächenmodul abgeschlossen haben, klonen Sie es.

Divi Modul Steckplatz

Link bearbeiten

Öffnen Sie das Modul für doppelte Schaltflächen und ändern Sie die URL.

Divi Button Link Konfiguration

Ausrichtung ändern

Ändern Sie auch die Ausrichtung des Moduls.

  • Tastenausrichtung: links
Divi-Tastenausrichtung

Ändern Sie die Tasteneinstellungen

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

  • Knopftextfarbe: #ffffff
  • Hintergrundfarbe der Schaltfläche: # ef6f49 (Standard), # e06945 (Hover)
Anpassung der Tastenfarbe

Hover-Transformationsskala

Vervollständigen Sie die Schaltflächeneinstellungen, indem Sie einen Hover-Effekt für die Transformationsskala hinzufügen.

  • Rechts: 110%
  • Niedrig: 110%
Divi Button Transformation

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!

Änderungen speichern
Kopfkonfiguration divi

Übersicht

Nachdem wir alle Schritte durchlaufen haben, werfen wir einen letzten Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussieht.

Endgültiges Demo-Ergebnis

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.