So fügen Sie einem Menüelement in Ihrem benutzerdefinierten Divi-Header eine "Neue" oder "Empfohlene" Eckbeschriftung hinzu

Wenn Sie den Header Ihrer Website erstellen, können Sie die Klickraten steigern, indem Sie dem Verhalten Ihrer Besucher besondere Aufmerksamkeit schenken. Ihr Header sollte nicht nur gut aussehen, sondern Besuchern auch dabei helfen, die wichtigsten Seiten Ihrer Website zu finden. Eine häufig verwendete Technik ist das Hinzufügen eines Call-to-Action in Ihrem globalen Header, aber das ist nicht die einzige Option. Sie können sich auch für eine Eckbeschriftung für die Menüpunkte entscheiden, die Sie ins Rampenlicht stellen möchten. In diesem Tutorial zeigen wir Ihnen, wie Sie bestimmten Menüpunkten ein Label "vorgestellt" oder "neu" hinzufügen. Diese Eckbeschriftungen helfen dabei, die Menüpunkte in der Liste hervorzuheben, was die Neugier Ihrer Besucher erhöht und sich durchklickt. Sie können auch die globale Header-Vorlage herunterladen!

Lasst uns anfangen.

Vorschau

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

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. Labels zu WordPress-Menüelementen hinzufügen

Gehen Sie zu Menüs in der Darstellung

Der erste Teil dieses Tutorials widmet sich dem Einrichten der Labels in Ihrem WordPress-Menü. Navigieren Sie dazu zu Ihrem WordPress-Dashboard > Menüs > Öffnen Sie das von Ihnen verwendete Hauptmenü oder erstellen Sie ein neues.

Label zu ausgewähltem Menüpunkt hinzufügen

Als Nächstes fügen wir einem Menüelement unserer Wahl ein vorgestelltes Label hinzu, indem wir die Label-HTML-Tags vor dem Menüelement platzieren.

• <label class="menu-label featured-label">Featured</label>

  Dienstleistungen

Label zu neuem Menüpunkt hinzufügen

Wir werden dasselbe für einen anderen Menüpunkt unserer Wahl tun und die CSS-Klasse innerhalb der Tags zusammen mit der Label-Kopie ändern.

• <label class="menu-label new-label">New</label>

  Kostenlose Kurse

2. Gehe zum Divi Theme Builder

Gehe zu Divi Theme Builder und füge globalen Header hinzu

Nachdem die Labels eingerichtet wurden, ist es an der Zeit, auf Divi umzusteigen. Navigieren Sie zum Divi Theme Builder Ihrer Website und klicken Sie auf „Globalen Header hinzufügen“.

Beginnen Sie von Grund auf mit dem Bauen

Wählen Sie dann „Build Global Header“, um zum Vorlageneditor weitergeleitet zu werden.

3. Globalen Header erstellen

Abschnittseinstellungen

Hintergrundfarbe

Sobald Sie sich im Vorlageneditor befinden, werden Sie einen Abschnitt bemerken. Öffnen Sie diesen Abschnitt und fügen Sie eine Hintergrundfarbe hinzu. Das Header-Design, das wir erstellen werden, passt gut zum Tutor Layout Pack, aber Sie können jedes gewünschte Header-Design erstellen, solange Sie das Code-Modul (später) darin einbinden.

• Hintergrundfarbe: #2a3749

Abstand

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

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

Sichtweite

Wegen der Überlappung, die wir zu unserer Zeile hinzufügen (wie Sie in der Vorschau sehen können), müssen wir die Überläufe des Abschnitts auf sichtbar setzen.

• Horizontaler Überlauf: Sichtbar
• Vertikaler Überlauf: Sichtbar

Neue Zeile hinzufügen

Spaltenstruktur

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

Hintergrundfarbe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und wenden Sie eine weiße Hintergrundfarbe an.

• Hintergrundfarbe: #FFFFFF

Größe

Wechseln Sie zur Registerkarte Design und ändern Sie die Größeneinstellungen entsprechend:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Wir werden auch einige benutzerdefinierte Abstandswerte auf die Abstandseinstellungen anwenden.

• Obere Polsterung: 25px
• Untere Polsterung: 25px
• Linke Polsterung: 50px
• Rechte Polsterung: 50px

Grenze

Zusammen mit einigen abgerundeten Ecken.

• Alle Ecken: 6px

Box Schatten

Und ein subtiler Kastenschatten.

• Vertikale Position des Kastenschattens: 16px
• Schattenfarbe: rgba(0,0,0,0.07)

Transformieren Übersetzen

Als Nächstes positionieren wir die Zeile mit den Transformationsübersetzungseinstellungen auf der Registerkarte Design neu.

• Transformieren Übersetzen nach rechts: 50px

Überläufe

Um sicherzustellen, dass unsere Dropdowns auf kleineren Bildschirmgrößen angezeigt werden, vervollständigen wir die Zeileneinstellungen, indem wir die Überläufe auf sichtbar setzen.

• Horizontaler Überlauf: Sichtbar
• Vertikaler Überlauf: Sichtbar

Menümodul zur Spalte hinzufügen

Menü auswählen

Zeit, das Menümodul hinzuzufügen. Wählen Sie das Menü aus, das Sie im ersten Teil dieses Tutorials bearbeitet haben.

Logo hochladen

Laden Sie als nächstes ein Logo hoch.

Menütexteinstellungen

Wechseln Sie dann zur Registerkarte Design und ändern Sie die Menütexteinstellungen wie folgt:

• Menüschrift: PT Sans
• Menütextfarbe: #000000
• Menütextgröße: 16px
• Textausrichtung: Rechts

Dropdown-Menüeinstellungen

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

• Farbe der Dropdown-Menüzeile: #007aff

Symbole

Fahren Sie fort, indem Sie die Farbe des Hamburger-Menüsymbols in den Symboleinstellungen ändern.

• Hamburger Menüsymbol Farbe: #007aff

Größe

Und vervollständigen Sie die Moduleinstellungen, indem Sie den Größeneinstellungen eine maximale Logobreite zuweisen.

• Max. Breite des Logos: 40%

Codemodul zur Spalte hinzufügen

Nachdem Sie das allgemeine Erscheinungsbild Ihres Menümoduls fertiggestellt haben, fahren Sie fort, indem Sie direkt darunter ein Codemodul hinzufügen.

CSS-Code hinzufügen

Der folgende CSS-Code hilft uns, die Menübeschriftungen individuell zu gestalten und ein responsives Design zu erstellen:

<style>
 
.menu-label {
text-transform: uppercase;
color: #fff;
letter-spacing: 1px;   
border-radius: 5px;    
font-size: 10px;  
padding: 5px 10px;  
}  
  
.featured-label {
background-color: #F9654D;
}
.new-label {
background-color: #007AFF;
}
 
.et_pb_menu .et_pb_menu__menu, 
.et_pb_menu .et_pb_menu__menu>nav, 
.et_pb_menu--style-left_aligned.et_pb_text_align_right .et_pb_menu__menu>nav>ul {
width: 100% !important;
}

.et_pb_menu .et_pb_menu__menu>nav>ul>li
{
padding-left: 15px !important;
padding-right: 15px !important;
}

@media all and (min-width: 980px) {
.menu-label {  
position: absolute;
top: -10px;  
padding: 8px 15px;
}

}
@media all and (max-width: 980px) {  
.menu-label {
position: relative;
float: right;
font-size: 12px;  
padding: 5px 20px;   
}
}
  
</style>

4. Speichern Sie alle Theme Builder-Änderungen und Vorschau des Ergebnisses

Nachdem Sie das Header-Design abgeschlossen haben, stellen Sie sicher, dass Sie alle Änderungen im Divi Theme Builder speichern, bevor Sie das Ergebnis auf Ihrer Website anzeigen!

Vorschau

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

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie bestimmte Menüelemente in Ihrem von Divi erstellten globalen Header hervorheben. Genauer gesagt haben wir Eckbeschriftungen in unser WordPress-Menü aufgenommen, die in einem Menümodul angezeigt werden. Dies ist eine großartige Möglichkeit, verschiedene Menüpunkte in Ihrem Menü hervorzuheben, ohne eine überwältigende Navigationsreise zu erstellen. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen 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.