So sparen Sie Platz in Ihrer Kopfzeile mit Toggle-Symbolen mit Divi

Die Art und Weise, wie Sie Ihren Header gestalten, gibt den Ton für den Rest Ihrer Website an. Aus diesem Grund ist es wichtig, darüber nachzudenken, wie Sie Elemente und Interaktionen hinzufügen. Natürlich sollten Sie die Grundlagen wie ein Logo und Menüpunkte einbeziehen, aber die Chancen stehen gut, dass Sie auch einige andere Handlungsaufforderungen einfügen möchten. Je mehr Elemente Sie jedoch zu Ihrer Kopfzeile hinzufügen, desto überwältigender kann die Kopfzeile werden. Wenn Sie nach einer sauberen und interaktiven Möglichkeit suchen, verschiedene Calls-to-Action in Ihrem Header zu präsentieren, werden Sie dieses Tutorial lieben. Heute zeigen wir Ihnen, wie Sie mit Umschaltsymbolen Platz in Ihrer Kopfzeile sparen können. Sie können die JSON-Datei auch 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. Header-Struktur erstellen

Neue globale Header-Vorlage erstellen

Gehen Sie zunächst zum Divi Theme Builder und erstellen Sie einen neuen globalen oder benutzerdefinierten Header.

Abschnitt 1 hinzufügen

Hintergrund mit Farbverlauf

Sobald Sie sich im Vorlageneditor befinden, werden Sie einen Abschnitt bemerken. Öffnen Sie die Einstellungen dieses Abschnitts und wenden Sie einen Hintergrund mit Farbverlauf an.

• Farbe 1: #ffffff
• Farbe 2: #eaeaea
• Verlaufstyp: Linear
• Verlaufsrichtung: 90deg
• Startposition: 50%
• Endposition: 50%

Abstand

Wechseln Sie zur Registerkarte Design des Abschnitts und entfernen Sie alle standardmäßigen oberen und unteren Abstände.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Box Schatten

Fügen Sie auch einen Boxschatten hinzu.

• Schattenfarbe: rgba(0,0,0,0.06)

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen, gehen Sie zur Registerkarte Design und ändern Sie die Größeneinstellungen wie folgt:

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

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Hauptelement-CSS

Gehen Sie dann zur Registerkarte "Erweitert" und wenden Sie einige benutzerdefinierte CSS-Codezeilen für das Hauptelement auf verschiedene Bildschirmgrößen an. Dieser Code hilft uns dabei, die Elemente auf dem Desktop vertikal zu zentrieren.

Desktop:

display: flex;
place-items: center;

Tablet & Telefon:

display: block;

Spalte 1 Einstellungen

Abstand

Öffnen Sie dann die Einstellungen von Spalte 1 und wenden Sie links und rechts auf.

• Linke Polsterung: 5%
• Rechte Polsterung: 5%

Hauptelement

Wir ändern die Größe unserer Spalte auf dem Desktop und bringen sie auf Tablet und Telefon wieder auf "100 %", indem wir benutzerdefiniertes CSS auf das Hauptelement der Spalte anwenden.

Desktop:

width: 88% !important

Tablet & Telefon:

width: 100% !important;

Spalte 2 Einstellungen

Hintergrundfarbe

Als nächstes öffnen wir die Einstellungen von Spalte 2 und ändern die Hintergrundfarbe in Weiß.

• Hintergrundfarbe: #FFFFFF

Abstand

Wir werden auch einige responsive Padding-Werte zu den Abstandseinstellungen dieser Spalte hinzufügen.

• Obere Polsterung:
  • Desktop: 50px
  • Tablet & Telefon: 20px
• Bodenpolsterung
  • Desktop: 50px
  • Tablet & Telefon: 20px
• Linke Polsterung: 1%
• Rechte Polsterung: 1%

Hauptelement-CSS

Wir werden die Größe der zweiten Spalte auch auf dem Desktop ändern. Wir bringen dies bei kleineren Bildschirmgrößen auf „100 %“.

Desktop:

display: flex;
place-items: center;
width: 12% !important;

Tablet & Telefon:

width: 100% !important;

Menümodul zu Spalte 1 hinzufügen

Menü auswählen

Zeit zum Hinzufügen von Modulen, beginnend mit einem Menümodul in Spalte 1. Wählen Sie ein Menü Ihrer Wahl.

Logo hochladen

Laden Sie als nächstes ein Logo hoch.

Hintergrundfarbe entfernen

Entfernen Sie dann die Standardhintergrundfarbe.

Menütexteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Menütexteinstellungen entsprechend:

• Menüschrift: Playfair Display
• Menütextschrift: Playfair Display
• Menütextfarbe: #000000
• Menütextgröße: 19px
• Höhe der Menüzeile: 1,4 em
• Textausrichtung: Rechts

Dropdown-Menüeinstellungen

Ändern Sie dann die Farbe der Dropdown-Menüzeile.

• Farbe der Dropdown-Menüzeile: #ffffff

Symboleinstellungen

Ändern Sie auch die Symbolfarben in den Symboleinstellungen.

• Farbe des Einkaufswagensymbols: #000000
• Farbe des Suchsymbols: #000000
• Hamburger Menüsymbol Farbe: #000000

Größe

Und vervollständigen Sie die Moduleinstellungen, indem Sie die Größeneinstellungen wie folgt ändern:

• Max. Breite des Logos: 200px
• Breite: 100%
• Modulausrichtung: Mitte

Fügen Sie Blurb-Modul Nr. 1 zu Spalte 2 hinzu

Inhaltsbox leer lassen

Weiter zur zweiten Spalte. Um die Umschaltsymbole zu erstellen, verwenden wir Blurb-Module ohne Titel und Inhalt. Wir beginnen mit dem Erstellen des ersten Umschaltsymbols und verwenden dann das Modul erneut, um die anderen beiden Umschaltsymbole hinzuzufügen. Stellen Sie nach dem Hinzufügen des Blurb-Moduls sicher, dass das Titel- und Inhaltsfeld leer ist.

Symbol auswählen

Wählen Sie als Nächstes ein Symbol Ihrer Wahl aus.

Symboleinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Symboleinstellungen wie folgt:

• Symbolfarbe
  • Standard: #dbdbdb
  • Schweben: #000000
• Symbolplatzierung: Oben
• Symbolausrichtung: Mitte
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 200%

Größe

Ändern Sie auch die Größeneinstellungen.

• Inhaltsbreite: 100%
• Breite: 32%

CSS für Hauptelement und Blurb-Bild

Vervollständigen Sie die Moduleinstellungen, indem Sie den benutzerdefinierten CSS-Optionen auf der Registerkarte "Erweitert" des Blurb-Moduls zwei CSS-Codezeilen hinzufügen.

Hauptelement:

display: inline-block;

Blurb-Bild:

margin-bottom: 0px !important

Blurb-Modul zweimal klonen

Sobald Sie das erste Umschaltsymbol des Blurb-Moduls abgeschlossen haben, können Sie es zweimal klonen.

Icon ändern

Stellen Sie sicher, dass Sie das Symbol in jedem Duplikat ändern.

2. Toggle-Elemente hinzufügen

Abschnitt 2 hinzufügen

Größe

Nachdem wir nun die Grundlage für unseren Header festgelegt haben, müssen wir noch die Umschaltelemente einschließen. Dazu fügen wir einen neuen Abschnitt direkt unter dem vorherigen hinzu. Öffnen Sie die Abschnittseinstellungen und stellen Sie sicher, dass die Höhe dieses Abschnitts „0px“ beträgt. Dies hilft uns zu verhindern, dass der Abschnitt in unserem Header-Design Platz einnimmt. Der einzige Grund, warum wir diesen Abschnitt benötigen, ist, unsere Umschaltelemente anzuzeigen.

• Höhe: 0px

Abstand

Wechseln Sie zur Registerkarte Design des Abschnitts und entfernen Sie alle standardmäßigen oberen und unteren Abstände.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen wie folgt:

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

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Position

Und positionieren Sie die gesamte Reihe neu. Wenn Sie diese Zeile absolut drehen, können wir verhindern, dass die Zeile Platz im Design einnimmt.

• Position: Absolut
• Ort: obere rechte Ecke

Textmodul Nr. 1 zu Spalte 2 hinzufügen

Telefonnummer zum Inhaltsfeld hinzufügen

Zeit, die Umschaltelemente hinzuzufügen! Zuerst fügen wir die Telefonnummer hinzu. Fügen Sie in Spalte 2 einen neuen Textbaustein hinzu und fügen Sie die Telefonnummer in das Inhaltsfeld ein.

Hintergrundfarbe

Fügen Sie als nächstes eine schwarze Hintergrundfarbe hinzu.

• Hintergrundfarbe: #000000

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen entsprechend:

• Textschrift: Playfair Display
• Textfarbe: #ffffff
• Textgröße: 27px
• Textausrichtung: Mitte

Größe

Stellen Sie sicher, dass die Breite auch 100% beträgt.

• Breite: 100%

Abstand

Fügen Sie dann den Abstandseinstellungen einige benutzerdefinierte Abstandswerte hinzu.

• Obere Polsterung: 10%
• Untere Polsterung: 10%
• Linke Polsterung: 2%
• Rechte Polsterung: 2%

Textmodul klonen

Sobald Sie das erste Umschaltelement Textmodul fertiggestellt haben, klonen Sie es einmal.

Inhalt in E-Mail-Adresse ändern

Ändern Sie den Inhalt im Inhaltsfeld.

Fügen Sie das Social Media Follow-Modul zu Spalte 2 hinzu

Fügen Sie soziale Netzwerke Ihrer Wahl hinzu

Fügen Sie dann in Spalte 2 ein Social Media Follow-Modul hinzu. Fügen Sie so viele soziale Netzwerke hinzu, wie Sie möchten.

Ändern Sie die Hintergrundfarbe jedes sozialen Netzwerks in Weiß

Ändern Sie dann die Hintergrundfarbe für jedes soziale Netzwerk einzeln in Weiß.

• Hintergrundfarbe: #FFFFFF

Hintergrundfarbe

Kehren Sie dann zu den allgemeinen Moduleinstellungen zurück und verwenden Sie eine schwarze Hintergrundfarbe.

• Hintergrundfarbe: #000000

Ausrichtung

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Modulausrichtung.

• Modulausrichtung: Mitte

Symboleinstellungen

Ändern Sie auch die Symbolfarbe in den Symboleinstellungen.

• Symbolfarbe: #000000

Größe

Wenden Sie dann eine Breite von „100%“ auf die Größeneinstellungen an.

• Breite: 100%

Abstand

Wenden Sie auch eine benutzerdefinierte obere und untere Polsterung an.

• Obere Polsterung: 10%
• Untere Polsterung: 10%

Grenze

Und vervollständigen Sie die Moduleinstellungen, indem Sie den Rahmeneinstellungen einige abgerundete Ecken hinzufügen.

• Alle Ecken: 100px

3. Funktionalität hinzufügen

Aufeinanderfolgende CSS-IDs zu Blurb-Modulen hinzufügen Erster Abschnitt

Nachdem alle Elemente vorhanden sind, können wir mit dem Hinzufügen des Umschalteffekts beginnen. Als erstes müssen Sie jedes Blurb-Modul einzeln öffnen und eine fortlaufende CSS-ID hinzufügen.

• Klappentext 1: header-cta-1
• Klappentext 2: header-cta-2
• Klappentext 3: header-cta-3

Fügen Sie aufeinanderfolgende CSS-IDs zu Toggle-Elementen hinzu

Machen Sie dasselbe für die Toggle-Item-Module. Die Zahl am Ende der CSS-ID sollte mit der CSS-ID übereinstimmen, die Sie im vorherigen Schritt für die Symbole verwendet haben.

• Textmodul 1: header-item-1
• Textmodul 2: header-item-2
• Social Media Follow-Modul: header-item-3

Absolute Position zu allen Toggle-Elementen hinzufügen

Und drehen Sie jedes der Umschaltelemente nacheinander absolut. Wir empfehlen, dafür in den Drahtmodellmodus zu wechseln.

• Position: Absolut
• Ort: Oben rechts

Codemodul zur ersten Spalte von Abschnitt 1 hinzufügen

Nachdem nun alle CSS-IDs vorhanden sind, können wir den Code hinzufügen, damit die Klickfunktion funktioniert. Fügen Sie direkt unter dem Menümodul in Spalte 1 ein neues Codemodul hinzu.

CSS-Code einfügen

Fügen Sie die folgenden CSS-Codezeilen zwischen den style-Tags ein, wie Sie im Druckbildschirm unten sehen können :

[id*="header-cta"]{
cursor: pointer;
}
[id*="header-item"] {
visibility: hidden;
opacity: 0;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.show-item {
visibility: visible;
opacity: 1;
}
.highlight-icon{
color: #000 !important;
}

JQuery-Code einfügen

Wir fügen auch benutzerdefinierten JQuery-Code hinzu. Fügen Sie den Code zwischen den Skript-Tags ein, wie Sie im Druckbildschirm unten sehen können .

jQuery(function($){
$(document).ready(function(){
 
$('[id*="header-cta"]').click(function() {
 
var $selector = $(this).attr('id').replace('cta', 'item');
var $item = $('#' + $selector);
 
$item.toggleClass('show-item');
$('[id*="header-item"]').not($item).removeClass('show-item');

var $icon = $(this).find('.et-pb-icon');
var $allIcons = $('[id*="header-cta"]').find('.et-pb-icon');
  
$icon.toggleClass('highlight-icon');
$allIcons.not($icon).removeClass('highlight-icon');
  
});
 
});
});

4. Header + Toggle Items Sticky machen

Machen Sie Abschnitt 1 klebrig

Zu guter Letzt können Sie auch die Kopfzeile drehen und Elemente kleben. Um das gewünschte Ergebnis zu erzielen, müssen Sie sicherstellen, dass beide Abschnitte klebrig sind und die Option „Versatz von umgebenden klebrigen Elementen“ aktiviert ist. Machen Sie den ersten Abschnitt klebrig.

• Klebrige Position: Bleiben Sie oben
• Untere Klebrigkeitsgrenze: Keine
• Versatz von umgebenden klebrigen Elementen: Ja
• Übergangsstandard- und Sticky-Stile: Ja

Machen Sie Abschnitt #2 klebrig

Machen Sie dasselbe für Abschnitt 2. Das war's!

• Klebrige Position: Bleiben Sie oben
• Untere Klebrigkeitsgrenze: Keine
• Versatz von umgebenden klebrigen Elementen: Ja
• Übergangsstandard- und Sticky-Stile: Ja

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 Beitrag haben wir Ihnen gezeigt, wie Sie Umschaltsymbole in Ihrer Kopfzeile verwenden. Sobald jemand auf ein Icon klickt, erscheint ein Toggle-Item, mit dem Sie viel Platz in Ihrem Header-Design sparen können. Dieser Ansatz konzentriert sich auf das Benutzerverhalten und hilft Ihnen, ein überwältigendes Header-Design zu vermeiden. 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.