Veröffentlichen auf Wix / Squarespace / Andere
Auf WordPress? Verwenden Sie das dedizierte Naviplus Menu Builder plugin anstelle des manuellen Einbettens unten — keine Theme-Bearbeitungen, platzieren Sie das Grid über Shortcode oder Gutenberg-Block.
Auf Shopify? Installieren Sie die dedizierte Shopify app — es ist optimiert für die Plattform mit integrierten Veröffentlichungsoptionen.
Diese Seite behandelt die manuelle Skripteinbettung-Methode, die der richtige Weg für Wix, Squarespace, Webflow, Magento und benutzerdefinierte Websites ist, die mit PHP, Node.js oder reinem HTML erstellt wurden. Sie haben die folgenden Implementierungsmethoden:
1. Navi+ auf Ihrer Website einbetten
Diese Implementierungsmethode eignet sich für alle Menütpyen, die Navi+ derzeit unterstützt, einschließlich: Tabbar, Mega menu, Slide menu, FAB und Grid menu. Dieser Code muss nur einmal für alle Menüs verwendet werden.
<!-- Fügen Sie diesen Code in den <head> der Website ein. (c) naviplus.io -->
<script>(window._navi_setting ||= []).push({
token: "NAVI123456"
});</script>
<script src="https://live.naviplus.app/start.js" async></script>
<!-- Fügen Sie diesen Code in den <head> der Website ein -->
FAQ (Häufig gestellte Fragen)
Was ist ein Token?
Jedes Navi+-Konto erhält ein einzigartiges Token. Sie können dieses Token direkt aus dem Anwendungsheader anzeigen und kopieren. Das Token wird verwendet, um Ihr Menü sicher zu veröffentlichen.
Was ist https://live.naviplus.app/start.js?
Dies ist die feste URL von Navi+, die die Initialisierungslogik der Anwendung enthält. Das Skript ist leicht (ca. 4KB), sodass es schnell auf den meisten Geräten und Netzwerkbedingungen geladen werden kann. Es wird über Cloudflare und BunnyCDN bereitgestellt, um eine stabile globale Leistung und zuverlässige Kompatibilität mit modernen Browsern zu gewährleisten.
Die Verwendung der asynchronen Lade-Methode bedeutet auch, dass sie den Ladeprozess der Website nicht beeinflusst.
Verlangsamt dieser Einbettungscode meine Website?
Der folgende Code ist extrem leicht und kann in Ihre Website eingefügt werden, ohne die Geschwindigkeit zu beeinträchtigen (er benötigt nur etwa 100-200ms für den ersten Ladevorgang und 0ms für nachfolgende Ladevorgänge), die Benutzererfahrung oder die SEO-Werte.
Was ist der beste Ort, um diesen Code-Schnipsel einzufügen?
Im Kopfbereich (oder so früh wie möglich). Warum? Die Website lädt Ressourcen sequenziell, um die Benutzeroberfläche darzustellen. Wenn Sie Navi+ so früh wie möglich im HTML-Code platzieren, wird Ihr Menü bereit sein, so schnell wie möglich angezeigt zu werden, indem es wartet, bis die Bedingungen erfüllt sind, dann wird das Menü sofort erscheinen. Dies verbessert die Benutzererfahrung.
Wie kann ich feststellen, ob dieser Code erfolgreich in meine Website eingebettet wurde?
Es gibt zwei Möglichkeiten:
Methode 1 (für alle):
Öffnen Sie Ihre Website mit dem Suffix #navidebug-on, zum Beispiel: https://domain.com#navidebug-on. Wenn die Website in den Debug-Modus wechselt, funktioniert die Einbettung korrekt. Der Debug-Modus hilft Ihnen, CSS-Selektoren leicht zu identifizieren. Verwenden Sie #navidebug-off, um ihn auszuschalten.
Methode 2 (für Entwickler):
Öffnen Sie die Inspektor-Tools Ihres Browsers, gehen Sie zum Tab Konsole und suchen Sie nach einer grünen Nachricht: „Using Navi+..“. Diese Nachricht zeigt an, dass der Code erfolgreich eingebettet wurde.
2. Menü mit CSS-Selektor veröffentlichen (empfohlen)
Nachdem Sie das obige Skript eingebettet haben, gehen Sie zur Navi+-App, um zu konfigurieren, wo und wie Ihr Menü auf der Seite erscheint.
I.1. Verständnis des CSS-Selectors
Ein CSS-Selector ist eine Möglichkeit, ein bestimmtes HTML-Element auf Ihrer Webseite anzusprechen. Navi+ verwendet ihn, um genau zu wissen, wo Ihr Menü platziert werden soll — ob es vor oder nach einem Element eingefügt oder ein vorhandenes vollständig ersetzt werden soll.
Sie müssen kein Entwickler sein, um dies zu verwenden. Navi+ bietet ein einfaches Eingabefeld, in das Sie den Selektor eingeben, und es kümmert sich um den Rest.
Um den richtigen CSS-Selector für Ihre Website zu finden, können Sie verwenden:
- Debug Mode — Navi+’s integriertes Tool: fahren Sie mit der Maus über ein beliebiges Element auf Ihrer Seite und kopieren Sie sofort seinen Selektor
- Browser DevTools — Eine manuelle Methode, die den integrierten Inspektor Ihres Browsers verwendet
I.2. Drei Veröffentlichungsoptionen
Schritt 1: Klicken Sie auf die Schaltfläche Auf Website veröffentlichen in der Navi+-App.
Schritt 2: Aktivieren Sie den Schalter “Menü durch Einfügen/Ersetzen veröffentlichen”.
Schritt 3: Geben Sie Ihren CSS-Selector ein und wählen Sie eine der drei Veröffentlichungsoptionen unten aus.
Option 1: Vorher einfügen
Fügt das Navi+-Menü sofort vor dem ausgewählten Element ein.
Beispiel: CSS-Selector main → das Grid Menu erscheint über dem Hauptinhalt der Seite, dargestellt als voller Abschnitt.
Dies ist die häufigste Einrichtung für ein Grid Menu auf Nicht-Shopify-Plattformen.
Häufige CSS-Selektoren für diese Option:
main— funktioniert auf den meisten Plattformen (Webflow, Magento, benutzerdefinierte Seiten)#main— einige Plattformen und benutzerdefinierte Themen.main-content— verschiedene Plattformen
Nicht in dieser Liste? Sie können mit einem Navi+-Supporter chatten, um sofortige Hilfe zu erhalten, oder Debug Mode oder Browser DevTools verwenden, um es selbst zu finden.
Option 2: Nachher einfügen
Fügt das Navi+-Menü sofort nach dem ausgewählten Element ein.
Beispiel: CSS-Selector header → das Grid Menu erscheint direkt unter dem Header.
Häufige CSS-Selektoren für diese Option:
header— funktioniert auf den meisten Plattformen.header-wrapper— einige Plattformen.site-header— verschiedene Plattformen
Nicht in dieser Liste? Sie können mit einem Navi+-Supporter chatten, um sofortige Hilfe zu erhalten, oder Debug Mode oder Browser DevTools verwenden, um es selbst zu finden.
Option 3: Ersetzen
Ersetzt das ausgewählte Element vollständig durch das Navi+-Menü. Das ursprüngliche Element wird ausgeblendet und Navi+ nimmt seinen Platz ein.
Die meisten Plattformen haben kein integriertes Grid Menu, daher ist der Ersetzen-Modus selten für diesen Menütyp anwendbar. Vorher einfügen main ist der empfohlene Ansatz.
Wenn Ihre Plattform jedoch ein grid-artiges Navigationselement hat, das Sie ersetzen möchten, verwenden Sie Debug Mode oder Browser DevTools, um seinen CSS-Selector zu finden.
I.3. Gerätespezifisches Targeting
Sie können steuern, ob der CSS-Selector auf Mobilgeräten, Desktop oder beiden angewendet wird, indem Sie ein Suffix zu Ihrem Selektor hinzufügen:
| Suffix | Gilt für |
|---|---|
(M) |
Nur Mobilgeräte |
(D) |
Nur Desktop |
| (keins) | Sowohl Mobilgeräte als auch Desktop |
Beispiele:
main(D)— wird nur auf Desktop eingefügtmain(M)— wird nur auf Mobilgeräten eingefügtmain— wird auf beiden Plattformen eingefügt
Dies ist nützlich, wenn Sie möchten, dass das Grid Menu nur auf bestimmten Geräten angezeigt wird oder wenn Sie eine andere Platzierung auf Mobilgeräten im Vergleich zu Desktop benötigen.
3. Fügen Sie ein Navi+-Menü an beliebiger Stelle auf Ihrer Website ein
Der folgende Code kann mehrfach auf einer Website mit unterschiedlichen Einfügeinformationen (insbesondere der Embeded ID, wie SF-123456789) verwendet werden. Wenn die Website gerendert wird, wird das Menü an der Stelle bereitgestellt und angezeigt, an der der Code eingefügt wurde, wenn die Bedingungen erfüllt sind. Dieser Menütyp eignet sich für: Mega menu, Grid usw.
<!-- Fügen Sie den Code dort ein, wo das Menü SF-123456789 erscheint. (c) naviplus.io -->
<div class="naviman_app section_naviman_app" id="SF-123456789-container"></div>
<script>(window._navi_setting ||= []).push({
token: "NAVI123456",
embed_id: "SF-123456789"
});</script>
<script src="https://live.naviplus.app/start.js" async></script>
<!-- Fügen Sie den Code dort ein, wo das Menü SF-123456789 erscheint -->
Wichtig: Der obige Code verwendet den Beispiel-Einbettungscode SF-123456789. Stellen Sie sicher, dass Sie ihn durch Ihren tatsächlichen Menü-Einbettungscode ersetzen.