Bei der Arbeit an einer eigenständigen Außenhandelswebsite müssen wir oft weitere Menüfunktionen hinzufügen, die eine engere Verknüpfung der verschiedenen Seiten der Website ermöglichen. In der Regel denken wir dabei an das Hauptnavigationsmenü am oberen Rand, aber manche Leute verwenden seiteninterne Ankertexte für Seitensprünge. Dieser Ansatz ist jedoch visuell und funktionell nicht so reichhaltig wie ein Navigationsmenü.

Um flexiblere Gestaltungsmöglichkeiten zu bieten, führt der Elementor-Editor eine sehr nützliche Funktion ein - "Nav Menu". Dieses Tool ermöglicht es uns, das Subnavigationsmenü entsprechend unseren Designanforderungen anzupassen.

Fügen Sie das Funktionselement "Nav Menu" im Elementor-Editor in den Bereich der Inhaltsbearbeitung ein.

Um die Funktion "Nav Menu" zum Elementor-Editor hinzuzufügen, können Sie diese einfachen Schritte ausführen:

1. Suchen Sie das Element "Nav Menu" in der Elementor-Elementbibliothek.
2. Klicken Sie mit der linken Maustaste auf das Element und halten Sie sie gedrückt.
3. Ziehen Sie die Maus in den Bearbeitungsbereich für den Inhalt der Seite. Lassen Sie die linke Maustaste los, wenn sich die Begrenzungslinie im Bearbeitungsbereich von einer grauen gepunkteten Linie zu einer blauen gepunkteten Linie ändert.
4. Damit wurde das Element "Nav Menu" erfolgreich zum Inhaltsbearbeitungsbereich hinzugefügt.

2. im Elementor-Editor die Hauptfunktion des Funktionselements "Nav Menu" einstellen.

Beim Einrichten von Untermenüs im Elementor-Editor gibt es einige wichtige Konfigurationsoptionen zu beachten:

1. Menü::
   • Hier wählen Sie die Quelle des Inhalts für Ihr Untermenü. Erstellen und benennen Sie zunächst Ihre Untermenüs in WordPress unter Erscheinungsbild > Menüs. Sobald Sie fertig sind, erscheinen diese Menüs in den Dropdown-Menüoptionen von Elementor.
2. Layout::
   • Sie können wählen, wie das Untermenü dargestellt werden soll: Horizontal, Vertikal oder Dropdown.
3. Ausrichten::
   • Legt die Ausrichtung des Untermenüs fest, einschließlich links, mittig, rechts oder beides.
4. Zeiger::
   • Dies bezieht sich auf die Effekte, die auftreten, wenn die Maus über Menüpunkte wie Unterstreichung, Überstreichung, Doppellinie, Rahmen, Hintergrund und Text bewegt wird. Wählen Sie einen Effekt, der zu Ihrem Stil passt.
5. Animation::
   • Dynamische Effekte bei Mausverschiebung. Diese dynamischen Effekte können nicht in Screenshots gezeigt werden, Sie müssen sie selbst ausprobieren und erleben.
6. Untermenü Indikator::
   • Diese Einstellung wird verwendet, um das Vorhandensein eines Untermenüs anzuzeigen, aber die genaue Änderung kann weniger offensichtlich sein.
7. Haltepunkt::
   • Legt den Anzeigeunterbrechungspunkt auf verschiedenen Geräten wie Tablets oder Mobiltelefonen fest. Wenn die Bildschirmbreite geringer als dieser Wert ist, wird ein horizontales einzeiliges Untermenü zu einer mehrzeiligen Anzeige.
8. Volle Breite::
   • Bestimmt, ob Untermenüs nach einem Haltepunkt in voller Zeilenbreite angezeigt werden. Normalerweise wird die volle Zeilenbreite nicht empfohlen.
9. Ausrichten::
   • Stellen Sie die Ausrichtung erneut ein, entweder links (Aside) oder mittig (Center).
10. Umschalttaste::
    • Legen Sie fest, wie das Untermenü angezeigt werden soll, z. B. kein (None) oder Hamburger-Menü (Hamburger). Wenn das Hamburger-Menü ausgewählt ist, wird ein Symbol angezeigt und das Untermenü öffnet sich, wenn Sie darauf klicken.
11. Ausrichten umschalten::
    • Legen Sie die Position des Symbols für die Umschalttaste fest, entweder links, mittig oder rechts.

3. das Funktionselement "Nav Menu" im Elementor-Editor gestalten.

1. Projektkonfiguration "Dropdown"

Wenn Sie ein Dropdown-Menü (Dropdown) im Elementor-Editor gestalten, haben Sie es mit mehreren verschiedenen Zuständen und einigen spezifischen Stileinstellungen zu tun. Lassen Sie uns diese Konfigurationen vereinfachen und in Laiensprache erklären:

Drei Statuseinstellungen für das Hauptmenü:

1. Normal (NORMAL)Standardanzeigezustand des Menüs, wenn keine Interaktion erfolgt.
2. Schwebezustand (HOVER)Der Anzeigezustand, wenn die Maus über den Menüpunkt bewegt wird.
3. Status der Aktivität (ACTIVE)Der Anzeigestatus des Menüpunkts, wenn er angeklickt wird.

In diesen drei Zuständen können Sie die folgenden Einstellungen vornehmen:

• Text FarbeFarbe: Ändert die Textfarbe aller Menüpunkte im Dropdown-Menü, einschließlich des Symbols für das eingeklappte Menü.
• Hintergrundfarbe (Background)Hintergrundfarbe: Legt die Hintergrundfarbe der Menüpunkte fest. Im Zustand "Aktiv" können Sie auch die Hintergrundfarbe des Menüs festlegen, wenn es angeklickt wird.
• TypografieSchriftart, Größe und andere typografische Eigenschaften des Menütextes anpassen.

Der Stil des Dropdown-Menüs:

• Horizontale PolsterungLegt den Abstand des Menüpunkts von der linken Seite fest.
• Vertikale PolsterungLegt den Abstand zwischen der oberen und unteren Begrenzung des Menüpunkts in der Zeile fest, in der er sich befindet.
• Raum zwischenLegt den Abstand zwischen den Menüpunkten in jeder Zeile fest.
• Radius der GrenzeLegt die Abrundung der Ecken des Menüpunkts fest. Je größer der Wert, desto runder sind die Ecken.

Zusätzliche Konfigurationen für Dropdown-Menüs:

• Umrandung TypLegt den äußeren Rahmenstil für das gesamte Dropdown-Menü fest.
• Box Schatten: Fügen Sie dem Dropdown-Menü einen dreidimensionalen Schatteneffekt hinzu, um es hervorzuheben.
• TeilerTrennzeichen zwischen einzelnen Menüpunkten hinzufügen.
• EntfernungLegt den Abstand zwischen den Menüpunkten fest.

2. "Projektkonfiguration "Umschalttaste

Die Konfiguration der Umschalt-Schaltfläche (Toggle Button) für ein Dropdown-Menü im Elementor-Editor umfasst ein paar einfache visuelle Einstellungen. Diese Schaltfläche ist in der Regel ein Hamburger-Menü-Symbol (drei horizontale Linien), und Sie können ihr Aussehen so anpassen, dass es besser in das Design Ihrer Website passt. Hier sind die spezifischen Konfigurationsoptionen:

1. Farbe::
   • Mit dieser Einstellung wird die Farbe des Hamburger-Menü-Symbols (drei horizontale Linien) geändert.
2. Hintergrundfarbe::
   • Dies ist die Hintergrundfarbe des Hamburger-Menü-Symbols. Durch die Wahl einer Farbe kann das Symbol stärker hervorstechen oder mit dem Gesamtstil der Website harmonieren.
3. Größe::
   • Passen Sie die Größe des Hamburger-Menü-Symbols so an, dass es mit Ihrem Webdesign und anderen Elementen der Benutzeroberfläche harmoniert.
4. Breite des Randes::
   • Legt die Dicke des äußeren Rahmens des Symbols fest. Dies kann dazu beitragen, dass das Symbol besser sichtbar ist oder sich unauffälliger in den Hintergrund einfügt.
5. Radius der Grenze::
   • Stellt ein, wie stark die Ecken der Symbolränder abgerundet werden. Je höher der Wert, desto stärker werden die Ecken abgerundet. Bei einer Einstellung von 50 wird das Symbol beispielsweise vollständig abgerundet, was den Eindruck einer runden Schaltfläche erweckt.

Schlussfolgerung:

Verbessern und optimieren Sie die Navigationsmenüs Ihrer eigenständigen Außenhandelsseite mit dem Elementor-Editor. Wir erklären, wie man die Funktion "Nav Menu" hinzufügt und konfiguriert, einschließlich der Einstellung der Quelle, des Layouts und der Ausrichtung der Untermenüs sowie der Anpassung der Stile bei Hover und Aktiv. Außerdem besprechen wir, wie man die verschiedenen visuellen Effekte des Dropdown-Menüs konfiguriert, wie z. B. Hintergrundfarbe, Rahmen und Animationseffekte, und wie man die Größe, Farbe und Form der Schaltflächen anpasst, um sicherzustellen, dass das Navigationsmenü nicht nur voll funktionsfähig ist, sondern auch visuell mit dem Gesamtdesign und dem Stil der Website übereinstimmt.