Auf WordPress veröffentlichen

A Mega Menu (Desktop) ist ein Abschnittsmenü — es verankert sich nicht an der Ansicht, sondern wird an der genauen Stelle auf der Seite gerendert, an der Sie es einfügen (typischerweise im Kopfbereich der Seite). Auf WordPress bettet das Navi+ AI Menu Builder-Plugin es über Shortcode oder Gutenberg-Block ein — Sie bearbeiten niemals die Theme-Dateien.

Andere Plattformen (Wix, Squarespace, Webflow, benutzerdefinierte Seiten): siehe Publish on Wix / Squarespace / Others.

Schritte

1. Installieren Sie das Plugin — siehe Install the Navi+ AI Menu Builder plugin.
2. Erstellen Sie Ihr Mega Menu in Aussehen → Naviplus Menu Builder. Siehe Mega Menu (Desktop) — How to use für Designanleitungen.
3. Kopieren Sie die Embed-ID des Menüs (angezeigt im Veröffentlichungsbereich — sieht aus wie SF-123456789).
4. Fügen Sie das Menü dort ein, wo Sie es auf der Seite haben möchten (nächster Abschnitt).

Fügen Sie das Menü ein — drei Optionen

Option 1 — Shortcode (funktioniert überall)

Fügen Sie dies in jeden Beitrag, jede Seite oder shortcode-fähigen Widget ein:

[naviwp embed_id="SF-123456789"]

Für ein Mega Menu, das im Kopfbereich der Seite auf jeder Seite erscheinen soll, ist der sauberste Platz ein Header-Widget-Bereich (wenn Ihr Theme einen bereitstellt). Wenn nicht, verwenden Sie einen globalen Header-Block / Template-Teil (Full Site Editing-Themes) oder greifen Sie auf Option 3 unten zurück.

Option 2 — Gutenberg-Block

1. Klicken Sie im Block-Editor auf + → Naviplus Menu Builder.
2. Fügen Sie die Embed-ID in die Block-Seitenleiste ein.

Sie können auch einen generischen Shortcode-Block mit [naviwp embed_id="SF-..."] einfügen.

Option 3 — Page Builder (Elementor, Divi, Bricks, Oxygen)

Verwenden Sie das Shortcode-Widget des Builders und fügen Sie [naviwp embed_id="SF-..."] ein. Wenn Sie lieber rohes HTML verwenden möchten, fügen Sie das Embed-Div direkt ein:

<div class="naviman_app section_naviman_app" id="SF-123456789-container"></div>

Das Plugin lädt bereits die Navi+ Laufzeit, sodass das Menü in diesem Container gerendert wird.

Option 4 — CSS-Selektor (automatische Platzierung durch die Navi+ App)

Anstatt einen Shortcode manuell zu platzieren, können Sie Navi+ automatisch ein Element mithilfe eines CSS-Selektors einfügen oder ersetzen lassen — vollständig über die Navi+ App konfiguriert.

Verständnis des CSS-Selektors

Ein CSS-Selektor zielt auf ein bestimmtes HTML-Element auf Ihrer Seite ab. Navi+ verwendet ihn, um genau zu wissen, wo Ihr Menü platziert werden soll — vor einfügen, nach einfügen oder ein vorhandenes Element ersetzen.

Um den richtigen CSS-Selektor zu finden, verwenden Sie:

• Debug Mode — fahren Sie mit der Maus über ein beliebiges Element und kopieren Sie sofort seinen Selektor
• Browser DevTools — manuelle Methode über den Browser-Inspektor

Drei Veröffentlichungsoptionen

In der Navi+ App: klicken Sie auf Publish to website → aktivieren Sie “Publish menu by Insert/Replace method” → geben Sie Ihren CSS-Selektor ein und wählen Sie eine Option:

Gerätespezifisches Targeting

Fügen Sie ein Suffix hinzu, um den Selektor nur auf einem bestimmten Gerät anzuwenden:

Beispiel: header(D) — wird nur auf dem Desktop eingefügt.

Mobile Überlegungen

Ein Desktop-Mega-Menü ist definitionsgemäß ein Desktop-first Layout. Auf kleinen Bildschirmen sollte es normalerweise überhaupt nicht gerendert werden — kombinieren Sie es mit einem Mega Menu (Mobile) oder Slide Menu und verwenden Sie Anzeige-Regeln, um jedes auf dem anderen Breakpoint auszublenden.

Öffnen Sie im Editor Display rules → Device und beschränken Sie das Mega Menu (Desktop) auf nur Desktop.

Aktualisierung des Menüs später

Bearbeiten Sie das Menü im WordPress-Admin (oder in der Navi+ Web-App). Änderungen werden beim nächsten Frontend-Seitenaufruf angewendet — kein WordPress-Cache-Flush erforderlich, da Menüs zur Laufzeit vom Browser abgerufen werden.

Verwandt

• WordPress / WooCommerce — Übersicht
• Publish your menus on WordPress
• Mega Menu (Desktop) — FAQ