Beispiel-Katalog — SuperNav

So verwendest du dieses Dokument

Menüpunkt in Design → Menüs aufklappen.
Panel-Typ wählen (siehe jeweilige Überschrift unten).
Im passenden Tab auf ⚙ JSON direkt bearbeiten klicken.
Das JSON aus dem entsprechenden Abschnitt einfügen, zurückschalten, speichern.

Alle URLs, Bilder und Shortcodes sind Platzhalter — ersetze sie durch deine echten Inhalte.

Ausführliche Erklärungen zu Feldern, Farben und Panel-Typen: Konfigurationsanleitung.

Panel-Typ: Spalten (`columns`)

Das klassische Mega-Menü: 1–4 Spalten mit Überschrift und Links. Feld: Spalten (lmm_panel_columns).

Verfügbare Felder pro Eintrag: label, desc, url, icon, badge, badge_url, hover_image

[
  {
    "heading": "Buchhaltung",
    "items": [
      {
        "label": "Rechnungen",
        "desc": "Rechtskonform und mühelos schreiben",
        "url": "/rechnungen",
        "icon": "dashicons-media-document",
        "badge": "Beliebt",
        "badge_url": "/rechnungen"
      },
      {
        "label": "Aufträge",
        "desc": "Überzeugende Angebote erstellen",
        "url": "/auftraege",
        "icon": "dashicons-portfolio"
      },
      {
        "label": "Belegerfassung",
        "desc": "Alle Belege an einem Ort sammeln",
        "url": "/belege",
        "icon": "dashicons-images-alt2"
      }
    ]
  },
  {
    "heading": "Steuern & Auswertung",
    "items": [
      {
        "label": "Übersicht",
        "desc": "Finanzen und Steuerlast überblicken",
        "url": "/uebersicht",
        "icon": "dashicons-chart-area"
      },
      {
        "label": "Umsatzsteuervoranmeldung",
        "desc": "Vorausgefüllt und direkt ans Finanzamt",
        "url": "/mwst",
        "icon": "dashicons-bank",
        "badge": "DACH · CH / DE / AT",
        "badge_url": "/mwst"
      },
      {
        "label": "EÜR & GuV",
        "desc": "Mühelose Gewinnermittlung",
        "url": "/eur-guv",
        "icon": "dashicons-calculator"
      }
    ]
  }
]

Tipp: Für Image-Swap füge einzelnen Einträgen zusätzlich hover_image hinzu.

Panel-Typ: Content (`content`)

Nicht-swappende, anklickbare Panels aus 1–4 Blöcken. Feld: Content-Blöcke (lmm_content_blocks). Ideal für Kalender, Formulare, Karten.

Beispiel: drei Blöcke nebeneinander (Shortcode + HTML + Karte)

[
  {
    "type": "shortcode",
    "heading": "Beratung buchen",
    "shortcode": "[meetpress id=\"1\"]"
  },
  {
    "type": "html",
    "heading": "Kontakt",
    "html": "<p><strong>KITech AG</strong><br>Bahnhofstrasse 1<br>4001 Basel</p><p>Mo–Fr: 9–17 Uhr</p>"
  },
  {
    "type": "map",
    "heading": "Standort",
    "address": "Bahnhofstrasse 1, 4001 Basel",
    "zoom": 15
  }
]

Block: Überschrift (`heading`)

Reine Spaltenüberschrift ohne weiteren Inhalt.

[
  { "type": "heading", "heading": "Unsere Lösungen" }
]

Block: HTML (`html`)

Beliebiges Markup — Adressblock, Öffnungszeiten, Promo-Text.

[
  {
    "type": "html",
    "heading": "Öffnungszeiten",
    "html": "<ul><li>Mo–Fr: <strong>9–18 Uhr</strong></li><li>Sa: 10–14 Uhr</li><li>So: geschlossen</li></ul>"
  }
]

Block: Shortcode (`shortcode`)

Formular, Kalender, Buchungs-Widget — jeder gültige Shortcode.

[
  {
    "type": "shortcode",
    "heading": "Newsletter",
    "shortcode": "[contact-form-7 id=\"42\" title=\"Newsletter\"]"
  }
]

Block: Karte (`map`) Pro

Statische Google-Karte mit Adresse und «Route planen»-Link. Benötigt Google-Maps-API-Key in den Einstellungen und eine Pro-Lizenz.

[
  {
    "type": "map",
    "heading": "So finden Sie uns",
    "address": "Bundesplatz 3, 3005 Bern",
    "zoom": 16
  }
]

Panel-Typ: Cards (`cards`)

Bild-Karten im Raster (wie «Lösungen»-Menüs). Nutzt das Spalten-Feld (lmm_panel_columns), aber mit image pro Eintrag.

Verfügbare Felder pro Karte: label, desc, url, icon, image

[
  {
    "heading": "Für Branchen",
    "items": [
      {
        "label": "Handwerk",
        "desc": "Angebote, Rechnungen, Zeiterfassung",
        "url": "/handwerk",
        "image": "https://example.com/wp-content/uploads/card-handwerk.jpg"
      },
      {
        "label": "Handel",
        "desc": "Shop-Anbindung und Lager",
        "url": "/handel",
        "image": "https://example.com/wp-content/uploads/card-handel.jpg"
      },
      {
        "label": "Dienstleistung",
        "desc": "Projekte und Stundensätze",
        "url": "/dienstleistung",
        "image": "https://example.com/wp-content/uploads/card-dienst.jpg"
      }
    ]
  }
]

Panel-Typ: Featured Image (`featured-image`)

Ein Panel mit hervorgehobenem Bild plus Support-Links daneben.

Featured-Bild (lmm_featured_image_url): einfach die Bild-URL, z. B.

https://example.com/wp-content/uploads/featured-panel.jpg

Support-Links daneben (lmm_support_links):

[
  { "label": "Dokumentation", "url": "/docs", "icon": "dashicons-book" },
  { "label": "Video-Tutorials", "url": "/videos", "icon": "dashicons-video-alt3" },
  { "label": "Support kontaktieren", "url": "/support", "icon": "dashicons-sos" }
]

Panel-Typ: Shortcode (ganzes Panel) (`shortcode`)

Das komplette Panel ist die Ausgabe eines Shortcodes.

Shortcode (_ksn_panel_shortcode) — hier kein JSON, sondern direkt der Shortcode:

[your_fullwidth_widget theme="mega"]

Unterschied zum Content-Panel: Hier gibt es keine Spalten/Blöcke, sondern nur diese eine Ausgabe über die volle Panel-Breite.

Panel-Typ: Auto Pro

Generiert das Panel automatisch aus den Unterseiten der verlinkten Seite — kein manuelles JSON nötig. Einfach Panel-Typ «Auto» wählen; das Plugin liest die Child-Pages der Zielseite aus.

Ideal für große, sich häufig ändernde Seitenstrukturen. Benötigt eine Pro-Lizenz.

Zusatzfelder

Diese Felder ergänzen ein Panel unabhängig vom Haupt-Typ (meist bei «Spalten» oder «Content»).

Sidebar-Links (`lmm_sidebar_links`)

Gruppierte Links in der rechten Spalte.

[
  {
    "heading": "Erweiterungen",
    "items": [
      { "label": "Integrationen", "url": "/integrationen", "icon": "dashicons-randomize" },
      { "label": "Addons", "url": "/addons", "icon": "dashicons-admin-plugins" },
      { "label": "Mobile App", "url": "/app", "icon": "dashicons-smartphone" }
    ]
  }
]

Extra-Links / «Erweiterungen» (`lmm_extra_links`)

Gleiche Struktur wie Sidebar-Links; wird als zusätzliche Sidebar-Gruppe ausgegeben.

[
  {
    "heading": "Ressourcen",
    "items": [
      { "label": "Blog", "url": "/blog", "icon": "dashicons-welcome-write-blog" },
      { "label": "Webinare", "url": "/webinare", "icon": "dashicons-video-alt2" }
    ]
  }
]

Bottom-Links (`lmm_bottom_links`)

Flache Liste am unteren Panel-Rand (z. B. «Rechnungsprogramm →»).

[
  { "label": "Rechnungsprogramm →", "url": "/rechnungsprogramm" },
  { "label": "Buchhaltungssoftware →", "url": "/buchhaltungssoftware" },
  { "label": "E-Rechnung Software →", "url": "/e-rechnung-software" }
]

Support-Links (`lmm_support_links`)

Flache Liste mit Icon (auch im Featured-Panel genutzt).

[
  { "label": "Hilfe-Center", "url": "/hilfe", "icon": "dashicons-editor-help" },
  { "label": "Status", "url": "/status", "icon": "dashicons-chart-line" }
]

CTA-Leiste (`lmm_cta_bar`)

Eine Aktionsleiste am Panel-Ende mit optionaler Überschrift und Links. Objekt, kein Array:

{
  "label": "Bereit loszulegen?",
  "links": [
    { "label": "Kostenlos testen", "url": "/register" },
    { "label": "Demo ansehen", "url": "/demo" }
  ]
}

«Alle ansehen»-Link

Einzelfelder (kein JSON): Text (lmm_all_link_text) und URL (lmm_all_link_url), z. B.

Text: Alle Funktionen ansehen
URL:  /funktionen

Image-Swap

Kein eigenes Feld — funktioniert über die Spalten: gib einzelnen Einträgen ein hover_image. Beim Hover erscheint es rechts (mit Fade).

{
  "label": "Rechnungen",
  "desc": "Rechtskonform schreiben",
  "url": "/rechnungen",
  "icon": "dashicons-media-document",
  "hover_image": "https://example.com/wp-content/uploads/swap-rechnungen.png"
}

Rechte Spalte als Bild (`extra_mode`)

Steuert, ob die rechte Spalte Text-Links (text, Standard) oder ein spaltenfüllendes Swap-Bild (image) zeigt. Einzelfeld, Wert:

text

oder

image

🍳 Praxis-Rezepte (nach Anwendungsfall)

Konkrete, benannte Beispiele für typische Aufgaben — inklusive MeetPress, Kontaktformularen, Karten und gängigen Plugins. Jedes Rezept sagt dir: welchen Panel-Typ wählen, in welches Feld das JSON kommt, und liefert den fertigen Inhalt.

Wichtig zu Shortcodes: Jedes Plugin hat seinen eigenen Shortcode. Die unten gezeigten Shortcodes sind Platzhalter — ersetze sie durch den echten Shortcode deines Plugins. Wo du den findest: meist in der Plugin-Dokumentation, oder das Plugin zeigt ihn beim jeweiligen Element (z. B. Contact Form 7 listet [contact-form-7 id="…"] in der Formular-Übersicht).

Rezept 1: «Beratung buchen» mit MeetPress

Panel-Typ: Content · Feld: Content-Blöcke (lmm_content_blocks)

Ein Menüpunkt, der direkt das MeetPress-Buchungs-Widget zeigt. Das Panel bleibt offen und anklickbar, sodass Besucher direkt einen Termin wählen können.

[
  {
    "type": "shortcode",
    "heading": "Beratungstermin buchen",
    "shortcode": "[meetpress]"
  }
]

MeetPress-Shortcode: Setze hier deinen echten MeetPress-Shortcode ein. Falls MeetPress eine Auswahl von Berater/Termintyp per Attribut erlaubt, z. B. [meetpress calendar="beratung"] oder [meetpress id="2"], verwende diese Schreibweise. Das genaue Format steht in deiner MeetPress-Konfiguration.

Rezept 2: Kontakt-Panel (Formular + Adresse + Karte)

Panel-Typ: Content · Feld: Content-Blöcke (lmm_content_blocks)

Das klassische «Contact»-Mega-Menü: Kontaktformular links, Adresse in der Mitte, Karte rechts (Karte = Pro).

[
  {
    "type": "shortcode",
    "heading": "Schreiben Sie uns",
    "shortcode": "[contact-form-7 id=\"123\" title=\"Kontaktformular\"]"
  },
  {
    "type": "html",
    "heading": "Kontakt",
    "html": "<p><strong>KITech AG</strong><br>Bahnhofstrasse 1<br>4001 Basel</p><p>Tel: <a href=\"tel:+41611234567\">+41 61 123 45 67</a><br>E-Mail: <a href=\"mailto:hello@kitech.ai\">hello@kitech.ai</a></p>"
  },
  {
    "type": "map",
    "heading": "Standort",
    "address": "Bahnhofstrasse 1, 4001 Basel",
    "zoom": 15
  }
]

Für das Formular: Der gezeigte Shortcode ist für Contact Form 7. Nutzt du ein anderes Formular-Plugin, ersetze ihn — z. B. WPForms [wpforms id="123"], Gravity Forms [gravityform id="1"], Fluent Forms [fluentform id="1"], Ninja Forms [ninja_form id="1"].

Rezept 3: Nur Standort-Karte mit Route

Panel-Typ: Content · Feld: Content-Blöcke (lmm_content_blocks) · Pro

Ein schlankes Panel mit nur der Karte und einem «Route planen»-Link. Adresse eintragen — den Rest (Kartenbild + Link) erzeugt das Plugin über den Google-Maps-API-Key aus den Einstellungen.

[
  {
    "type": "map",
    "heading": "So finden Sie uns",
    "address": "Bundesplatz 3, 3005 Bern",
    "zoom": 16
  }
]

Voraussetzung: Google-Maps-API-Key unter Design → SuperNav hinterlegt + aktive Pro-Lizenz. Ohne Key erscheint ein Platzhalter mit «Route planen»-Link (die Adresse funktioniert also trotzdem als Google-Maps-Link).

Panel-Typ: Content · Feld: Content-Blöcke (lmm_content_blocks)

[
  {
    "type": "html",
    "heading": "Newsletter",
    "html": "<p>Bleiben Sie auf dem Laufenden — monatliche Tipps rund um Buchhaltung und Steuern.</p>"
  },
  {
    "type": "shortcode",
    "heading": "Jetzt anmelden",
    "shortcode": "[mc4wp_form id=\"456\"]"
  }
]

Shortcode für Mailchimp for WordPress. Alternativen: Newsletter-Plugin [newsletter], MailPoet [mailpoet_form id="1"], Brevo/Sendinblue [sibwp_form id=1].

Rezept 5: Kalender / Events im Menü

Panel-Typ: Content · Feld: Content-Blöcke (lmm_content_blocks)

[
  {
    "type": "shortcode",
    "heading": "Kommende Termine",
    "shortcode": "[tribe_events view=\"list\" tribe-bar=\"false\"]"
  }
]

Shortcode für The Events Calendar. Alternativen: Simple Calendar [calendar id="1"], Amelia [ameliabooking], Bookly [bookly-form].

Rezept 6: Suche + Support (HTML + Shortcode gemischt)

Panel-Typ: Content · Feld: Content-Blöcke (lmm_content_blocks)

[
  {
    "type": "shortcode",
    "heading": "Wissensdatenbank durchsuchen",
    "shortcode": "[wpforms_selector]"
  },
  {
    "type": "html",
    "heading": "Direkter Draht",
    "html": "<ul><li><a href=\"/hilfe\">Hilfe-Center</a></li><li><a href=\"/tickets\">Ticket eröffnen</a></li><li><a href=\"tel:+41611234567\">+41 61 123 45 67</a></li></ul>"
  }
]

Rezept 7: Gutenberg-Block / wiederverwendbares Muster einbinden

Panel-Typ: Content · Feld: Content-Blöcke (lmm_content_blocks)

Hast du ein wiederverwendbares Block-Muster (Synced Pattern) gespeichert, kannst du es per Shortcode einbinden:

[
  {
    "type": "shortcode",
    "heading": "Aktion",
    "shortcode": "[block id=\"789\"]"
  }
]

[block id="…"] bindet ein wiederverwendbares Gutenberg-Muster ein (die ID findest du in der Muster-Verwaltung). So kannst du praktisch jeden Block-Editor-Inhalt ins Menü holen.

Dashicons-Referenz

Die icon-Felder nutzen WordPress Dashicons. Häufige:

Icon-Klasse	Zweck
`dashicons-media-document`	Dokumente / Rechnungen
`dashicons-portfolio`	Aufträge / Projekte
`dashicons-bank`	Steuern / Finanzen
`dashicons-chart-area`	Auswertungen
`dashicons-calculator`	Berechnungen
`dashicons-randomize`	Integrationen
`dashicons-admin-plugins`	Addons
`dashicons-smartphone`	Mobile App
`dashicons-book`	Dokumentation
`dashicons-sos`	Support

Ganze Liste unter developer.wordpress.org/resource/dashicons — Klassenname jeweils mit dashicons- Präfix eintragen.

So verwendest du dieses Dokument

Panel-Typ: Spalten (columns)

Panel-Typ: Content (content)

Beispiel: drei Blöcke nebeneinander (Shortcode + HTML + Karte)

Block: Überschrift (heading)

Block: HTML (html)

Block: Shortcode (shortcode)

Block: Karte (map) Pro

Panel-Typ: Cards (cards)

Panel-Typ: Featured Image (featured-image)

Panel-Typ: Shortcode (ganzes Panel) (shortcode)

Panel-Typ: Auto Pro

Zusatzfelder

Sidebar-Links (lmm_sidebar_links)

Extra-Links / «Erweiterungen» (lmm_extra_links)

Bottom-Links (lmm_bottom_links)

Support-Links (lmm_support_links)

CTA-Leiste (lmm_cta_bar)

«Alle ansehen»-Link

Image-Swap

Rechte Spalte als Bild (extra_mode)

🍳 Praxis-Rezepte (nach Anwendungsfall)

Rezept 1: «Beratung buchen» mit MeetPress

Rezept 2: Kontakt-Panel (Formular + Adresse + Karte)

Rezept 3: Nur Standort-Karte mit Route

Rezept 4: Newsletter-Anmeldung im Menü

Rezept 5: Kalender / Events im Menü

Rezept 6: Suche + Support (HTML + Shortcode gemischt)

Rezept 7: Gutenberg-Block / wiederverwendbares Muster einbinden

Dashicons-Referenz

Panel-Typ: Spalten (`columns`)

Panel-Typ: Content (`content`)

Block: Überschrift (`heading`)

Block: HTML (`html`)

Block: Shortcode (`shortcode`)

Block: Karte (`map`) Pro

Panel-Typ: Cards (`cards`)

Panel-Typ: Featured Image (`featured-image`)

Panel-Typ: Shortcode (ganzes Panel) (`shortcode`)

Sidebar-Links (`lmm_sidebar_links`)

Extra-Links / «Erweiterungen» (`lmm_extra_links`)

Bottom-Links (`lmm_bottom_links`)

Support-Links (`lmm_support_links`)

CTA-Leiste (`lmm_cta_bar`)

Rechte Spalte als Bild (`extra_mode`)