Wie man die Menüleiste in Elementor bearbeitet

Der Aufbau einer Website, die Ihre Marke widerspiegelt, beginnt mit einer klaren, benutzerfreundlichen Navigation. Viele WordPress-Anfänger haben jedoch Schwierigkeiten mit der Bearbeitung der Menüleiste in Elementor. 

Standardmäßig verfügt Elementor nicht über fortschrittliche Menütools, was dazu führt, dass Menüs nicht angezeigt werden oder die Reaktionsfähigkeit auf Mobilgeräte schlecht ist. 

Was ist also die Lösung? Es gibt einen einfachen Weg, dies zu beheben.

Mit Element PackMit dem Mega-Menü-Widget können Sie die volle Kontrolle über Ihr Elementor-Navigationsmenü übernehmen - ganz ohne Programmierkenntnisse. 

Lassen Sie uns eintauchen und das volle Potenzial Ihres Elementor-Header-Builders ausschöpfen, indem wir eine der leistungsfähigsten Funktionen des Element Pack-Navigations-Widgets nutzen.

Warum Element Pack Pro für Elementor-Menüleisten verwenden?

Die Standard-Menüoptionen von Elementor können sich begrenzt anfühlen, wenn Sie versuchen, eine vollständig angepasste oder Mega-Stil Navigationsleiste zu erstellen. Und, das ist, wo Elementor Pack bietet dedizierte Widgets um Menüleisten in elementor schnell und einfach zu erstellen und zu bearbeiten, ohne eine Zeile Code anzufassen.

Schauen wir uns also an, wie sich Element Pack von Elementor unterscheidet:

Standard-WordPress-Menü vs. Elementor-Menüleiste

Erstellen und Anpassen einer Menüleiste in nur 6 Schritten

Um also mit der Bearbeitung der Standard-Menüleiste zu beginnen, installieren Sie einfach Element Pack von seinem offizielle Seite. Nun, da alles eingerichtet ist, lassen Sie uns den kompletten Prozess der Erstellung und Anpassung einer Menüleiste in Elementor mit Element Pack Pro durchgehen. 

Wir beginnen mit der Erstellung der Menüstruktur in WordPress und passen sie dann mit dem Mega Menu Widget von Elementor und Element Pack an.

Schritt 1: Erstellen eines einfachen Menüs in WordPress

Bevor Sie eine Menüleiste erstellen, müssen Sie die erforderlichen Menü-Widgets im Elementpaket aktivieren. So aktivieren Sie die Funktion der Menüleiste:

• Gehe zu Dashboard > Element Pack Pro > Other Settings
  
• Suche nach Mega-Menü in der Liste
  
• Schalten Sie den Schalter auf Auf

• Klicken Sie auf Einstellungen speichern

Sie haben nun das Menü-Widget in Ihrem Elementor-Editor aktiviert, was bedeutet, dass Sie bereit sind, Navigationsmenüs in Elementor mit Element Pack Pro mit vollständigen Kontrollsymbolen zu bearbeiten, Animationen, Abzeichen und so weiter!

So, und jetzt erstellen wir Ihr Basismenü im WordPress-Dashboard. 

• Gehe zu Dashboard > Appearance > Menus
  
• Klicken Sie auf Ein neues Menü erstellen
  
• Hinzufügen einer Menü Nameund klicken Sie dann auf Menü erstellen

• Hinzufügen von Menüpunkten durch Auswahl von Seiten, Beiträgen oder benutzerdefinierten Links

• Klicken Sie auf Menü speichern
  

Tipp: Verwenden Sie aussagekräftige Linknamen wie "Dienstleistungen", "Shop" oder "Kontakt", um Ihr Elementor-Navigationsmenü benutzerfreundlich und übersichtlich zu gestalten.

Schritt 2: Aktivieren Sie die Menüleiste Toggle

Sobald Ihr Menü erstellt ist, ist es an der Zeit, es in eine von Element Pack betriebene Menüleiste zu verwandeln.

• Suchen Sie nach dem Mega-Menü Kippschalter neben dem Menü Name Feld

• Aktivieren Sie den Switcher - sobald er aktiviert ist, leuchten die Menüpunkte grün und zeigen damit an, dass sie nun mit dem Element Pack Navigations-Widget
  
• Bewegen Sie den Mauszeiger über einen beliebigen Menüpunkt und klicken Sie auf das kleine schwebende Mega-Menü erscheinende Schaltfläche

Schritt 3: Konfigurieren Sie die Einstellungen der Menüleiste

Ein Klick auf das schwebende Mega-Menü öffnet ein Popup-Fenster, in dem Sie die wichtigsten Designeinstellungen für Ihre Menüleiste konfigurieren können:

• Aktivieren Sie die Mega-Menü einschalten Wechsler
  
• Einstellen individuelle Breite für die Menüleiste (Standardwert ist 750px - Sie können ihn bei Bedarf erhöhen)
  
• Wählen Sie die Orientierung - horizontal ist üblich, aber vertikal eignet sich hervorragend für eCommerce-Layouts
  
• Hinzufügen einer Symbol oder Ausweis zur optischen Hervorhebung des Menüpunkts

• Klicken Sie auf Mega-Menü speichern
  

Diese Design-Optimierungen sind ein großer Teil dessen, was die Elementor-Menüanpassung so leistungsstark macht. Sie erhalten volle visuelle Kontrolle, ohne den Code zu berühren.

Schritt 4: Anpassen des Inhalts der Menüleiste in Elementor

Sobald Sie die Einstellungen gespeichert haben, wird eine neue Option angezeigt: Mega-Menü-Inhalt bearbeiten

• Klicken Sie auf Mega-Menü-Inhalt bearbeiten

• Dies startet eine Vollbildansicht Elementor-Editor Popup
  
• Jetzt können Sie den Inhalt des Menüs gestalten genau wie jeder Elementor-Abschnitt:
  
  • Widgets hinzufügen wie Spalten, Bilder, Tasten, oder Untermenüs
    
  • Layout mit Drag & Drop flexibel gestalten
    

Auf diese Weise können Sie die gesamte Leistungsfähigkeit der visuellen Schnittstelle von Elementor für Ihr Menüleisten-Design nutzen.

Sie müssen sich nicht mehr mit langweiligen Dropdowns begnügen - betrachten Sie Ihre Menüleiste als eine vollständige Gestaltungsfläche.

Wenn Sie mit der Erstellung des Layouts fertig sind, klicken Sie auf die Schaltfläche X in der oberen linken Ecke dieser Seite. 

Schritt 6: Einfügen des Menüleisten-Widgets in eine Seite

Nun, da Ihr Menü entworfen und fertig ist, ist es an der Zeit, es auf Ihrer Website zu platzieren:

• Öffnen Sie die Zielseite mit Elementor
  
• Suche nach Mega-Menü im Widget-Panel
  
• Ziehen Sie per Drag & Drop die Mega-Menü-Widget auf Ihr Layout

• Wählen Sie in den Widget-Einstellungen das Menü, das Sie zuvor erstellt haben
  

Und das war's! 

Ihre responsive Menüleiste in Elementor ist jetzt live und interaktiv. 

Über die Registerkarten "Inhalt" und "Stil" des Widgets können Sie weitere Anzeigeeinstellungen wie vertikales Layout, Umschaltmenü, Animationen und Gerätesichtbarkeit vornehmen.

Feinabstimmung der Menüleiste mit Anpassungsoptionen 

Nun, da Ihre Elementor-Menüleiste mit Element Pack Pro eingerichtet ist, ist es an der Zeit, ihr Layout, Verhalten und Design zu verfeinern. 

Dank der visuellen Schnittstelle von Elementor und der zusätzlichen Leistung des Element Pack Prokönnen Sie vollständig kontrollieren, wie Ihre Menüleiste auf verschiedenen Geräten aussieht und reagiert - alles ohne Code.

Layout-Einstellungen

Gehen Sie zu: Inhalt > Layout

Hier legen Sie das grundlegende Layout Ihrer Menüleiste fest.

• Menüauswahl: Wählen Sie aus der Dropdown-Liste das vorgefertigte WordPress-Menü, das Sie zuvor erstellt haben. 

• Solange Sie es nicht auswählen, wird in der Menüleiste eine Meldung angezeigt, die Sie auffordert, ein Menü auszuwählen.

• Orientierung: Wählen Sie zwischen Horizontal und Vertikal.

• Horizontale Menüs sind der Standard für Kopfbereiche.
  
• Vertikale Menüs eignen sich gut für Sidebars oder E-Commerce-Layouts.
  
• Menüoption umschalten: Aktivieren Sie die Umschalten auf Switcher, um Ihre Menüleiste in ein zusammenklappbares Menü zu verwandeln, das ideal für die Ansicht auf Mobilgeräten und Tablets ist. 

• In diesem Abschnitt können Sie auch die Überschrift des Umschalters, die Pfeilsymbole, die Platzierung der Symbole, den Versatz und die Animationseinstellungen anpassen.
  

Mit dieser Einrichtung können Sie Erstellen einer responsiven Menüleiste in Elementor die sich gut an verschiedene Geräte anpassen lässt.

Hamburger Menüeinstellungen

Gehen Sie zu: Inhalt > Hamburger Menü

Dieser Bereich ist für die mobile Nutzung konzipiert. Er sorgt dafür, dass Ihr Menü auch auf kleineren Geräten zugänglich bleibt.

• Sie können die Sichtbarkeit auf bestimmten Geräten (Tablet, Handy usw.) aktivieren oder deaktivieren.
  
• Legen Sie die Ausrichtung des Hamburger-Symbols fest (links, mittig, rechts)
  
• Anpassen von Abständen und Layoutverhalten

Dies ist besonders wichtig bei der Arbeit an einem mobiles Menü in Elementor oder die Lösung von Problemen wie dem Elementor-Menüleiste wird nicht angezeigt auf kleineren Bildschirmen korrekt angezeigt.

Dropdown-Einstellungen

Gehen Sie zu: Inhalt > Dropdown-Einstellungen

Steuern Sie, wie sich Dropdown-Inhalte verhalten, wenn ein Benutzer mit Ihren Basismenüelementen interagiert.

• Stellen Sie die Offset-Wert um den Abstand zwischen dem Grundelement und dem Dropdown-Inhalt festzulegen
  
• Wählen Sie die Animation Typ (z. B. Überblendung, Dia, usw.)
  
• Satz Animation Dauer zur Steuerung der Geschwindigkeit der Animation
  
• Definieren Sie die Auslöser Typ entweder als Schweben oder Klicken Sie auf - je nachdem, wie die Benutzer auf die Dropdowns zugreifen sollen

Dropdowns sind für ein mehrstufiges Elementor-Navigationsmenü unverzichtbar, und diese Einstellungen bieten eine präzise Kontrolle über ihr Aussehen und ihre Interaktion.

Gestaltung des Menüs (Übersicht der Registerkarte Stil)

Alle Designanpassungen erfolgen unter dem Registerkarte Stil des Mega-Menü-Widgets. Hier erfahren Sie, wie Sie die einzelnen Komponenten steuern:

Menüpunkte

Gehen Sie zu: Stil > Menüpunkte

• Anpassen Textfarbe, Hintergrundfarbe, Polsterung, Marge, Grenzenund Kastenschatten
  
• Einzigartige Stile festlegen für schweben Zustände, um die Interaktionen dynamischer zu gestalten
  
• Diese Steuerelemente gelten für die sichtbaren Basiselemente der Elementor-Menüleiste
  

Dropdown-Container

Gehen Sie zu: Stil > Dropdown

• Einstellen der Hintergrundfarbe des Dropdown-Bereichs
  
• Verwenden Sie Polsterung, Marge, Grenzeund Kastenschatten Struktur und Abstände zu definieren
  
• In Fällen, in denen der innere Inhalt bereits einen weißen Hintergrund hat, wird durch das Hinzufügen von Füllmaterial der Dropdown-Hintergrund deutlicher sichtbar
  

Hamburger-Symbol

Gehen Sie zu: Stil > Hamburger Menü

• Ändern Sie die Symbolfarbe, Hintergrund, Polsterung, Margeund andere visuelle Eigenschaften
  
• So können Sie die Konsistenz zwischen den Desktop- und den mobilen Versionen Ihrer Website sicherstellen. responsives Kopfmenü
  

Abzeichen

Zum Anpassen von Menü-Badges:

• From WordPress Dashboard > Appearance > Menusklicken. Mega-Menü bearbeiten neben dem Basismenüpunkt, den Sie beschriften möchten

• In dem Popup-Fenster können Sie die Ausweistext, Textfarbeund Hintergrundfarbe

• Kehren Sie dann zu Elementor zurück und öffnen Sie das Mega-Menü-Widget
  
• Go to: Style > BadgeHier können Sie die Position, die Auffüllung, den Rand, die Umrandung und den Radius des Abzeichens feineinstellen.

Abzeichen sind nützlich bei der Arbeit an Elementor Kopfzeile bearbeiten Aufgaben, bei denen Sie spezielle Menüpunkte wie "Neu", "Verkauf" oder "Beta" hervorheben müssen.

Mit diesen Optionen entwerfen Sie ein interaktives, markengerechtes Navigationssystem, das auf jedem Gerät funktioniert. 

Die Kombination aus dem Elementor Header Builder und dem Element Pack Pro Navigations-Widget bietet Ihnen ein Höchstmaß an Kontrolle und Designflexibilität.

Tipps für ein besseres Design der Menüleiste und eine bessere Benutzerfreundlichkeit

Ein sauberes, reaktionsschnelles und intuitives Menü kann das Engagement erheblich steigern und die Absprungrate senken. Hier sind einige wichtige Design-Tipps, um Ihr WordPress-Menü-Design mit dem Header-Builder von Element Pack Pro und Elementor zu verbessern.

Menüpunkte kurz und bündig halten

• Behalten Sie die Beschriftungen des Hauptmenüs bei ein oder zwei Wörter
  
• Vermeiden Sie Unordnung - zielen Sie auf 5-7 Menüpunkte der obersten Ebene
  
• Verwenden Sie klare, erkennbare Begriffe wie "Über", "Dienstleistungen", "Kontakt".
  

Dies verbessert die Lesbarkeit und sorgt dafür, dass Ihr Elementor-Navigationsmenü die Besucher nicht erschlägt.

Hover-Animationen für Feedback verwenden

• Aktivieren Sie Hover-Animationen unter dem Style > Menu Items Registerkarte
  
• Animationen flüssig halten und unter 300ms die Reaktionsfähigkeit zu erhalten
  

Dies verleiht Ihrer Elementor-Menüanpassung den letzten Schliff und verbessert das Benutzerfeedback, ohne aufdringlich zu wirken.

Klare Schriftarten und Abstände einhalten

• Verwenden Sie gut lesbare Schriftarten (serifenlose Schriften eignen sich am besten für Menüs)
  
• Achten Sie auf einen ausreichenden horizontalen Abstand zwischen den Elementen, um Fehlklicks zu vermeiden.
  
• Beibehaltung einer visuellen Hierarchie mit Schriftschnitten und -größen
  

Diese Verfeinerungen sind bei der Arbeit an einer benutzerdefinierten Kopfzeile in Elementor von entscheidender Bedeutung und gewährleisten die Zugänglichkeit auf allen Geräten.

Stellen Sie sicher, dass die mobilen Menüs vollständig ansprechbar sind

• Verwenden Sie die Hamburger Menü Einstellungen unter Content > Hamburger Menu
  
• Stellen Sie sicher, dass Ihr mobiles Menü in Elementor erscheint korrekt über Haltepunkte hinweg
  
• Testen Sie die Sichtbarkeit auf Mobil-, Tablet- und Desktop-Geräten
  

Mit Tools wie Chrome DevTools oder BrowserStack können Sie die Reaktionsfähigkeit vor der Veröffentlichung überprüfen.

Testen Sie verschiedene Ausrichtungen basierend auf dem Layout

Je nach Layout Ihrer Website und der Dichte der Inhalte kann der Wechsel von einer horizontalen zu einer vertikalen Menüleiste eine bessere Benutzerfreundlichkeit bieten.

• Vertikale Menüs eignen sich gut für Seitenleisten oder E-Commerce-Kategorien
  
• Horizontale Menüs sind am besten für traditionelle Kopfzeilen-Layouts geeignet
  
• Versuchen Sie verschiedene Ausrichtungen unter Content > Layout > Orientation
  

Experimentieren Sie und holen Sie Feedback ein, um herauszufinden, was am besten zu Ihrem Benutzerfluss und Ihrer Inhaltsstruktur passt.

Wenn Sie diese Tipps befolgen, stellen Sie sicher, dass Ihre Menüleiste ansprechend ist, schnell geladen wird und den modernen Surfgewohnheiten entspricht.

Schlussfolgerung

Herzlichen Glückwunsch, Sie haben jetzt eine voll funktionsfähige, benutzerdefinierte Menüleiste in Elementor mithilfe der Element Pack Pro!

Von der Einrichtung von Plugins und der Erstellung eines Menüs in WordPress bis hin zum Einfügen und Anpassen der Mega-Menü-Widget innerhalb des visuellen Editors von Elementor. Diese leistungsstarke Kombination ermöglicht es Ihnen, dynamische, reaktionsfähige und benutzerfreundliche Navigationsmenüs zu erstellen, ohne eine einzige Zeile Code zu schreiben.

Design ist ein iterativer Prozess. Fühlen Sie sich frei, verschiedene Layouts, Schriftarten, Symbole und Menüauslöser zu erforschen, die zur Identität Ihrer Marke passen. 

Mit der Flexibilität von Elementor-MenüanpassungDie einzige Grenze ist Ihre Kreativität.

Falls Sie es noch nicht getan haben, empfehlen wir Ihnen dringend versuchen Sie Element Pack ProBesonders wenn Sie ein professionelles, vollständig anpassbares WordPress-Menü-Design erstellen möchten, das nahtlos auf allen Geräten funktioniert. Es ist ein unverzichtbares Toolkit für jeden, der Elementor.

FAQs