Springe zum Hauptinhalt

So fügen Sie Ihrem globalen Divi-Header zwei Schaltflächen nebeneinander hinzu

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

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 Divis Theme Builder zwei Schaltflächen nebeneinander zu Ihrem gesamten Header hinzufügen können. 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 der gesamte Header-Inhalt oben auf der gesamten Seite angezeigt wird und der Inhalt veröffentlicht wird.

  • 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

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 Tablet und Handy.

display: block;

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

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.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

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

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

  • 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 vollständig ist, speichern Sie alle Änderungen am Themengenerator und veröffentlichen Sie das Ergebnis auf Ihrer 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 von uns hinzugefügten Schaltflächen ist primär, die andere sekundär. Durch Hinzufügen von Schaltflächen zu Ihrem gesamten Header können Sie einige der wichtigsten CTAs Ihrer Website hervorheben. Sie können die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen haben, können Sie im Kommentarbereich unten einen Kommentar hinterlassen.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
1 Aktien
Aktie1
tweet
Registrieren