SuperNav — Dokumentation

1. Schnellstart

Menü-Editor öffnen

WordPress Admin → Darstellung → Menüs → Gewünschtes Menü auswählen

Menüpunkt aufklappen

Pfeil beim Top-Level-Eintrag klicken
→ Ganz unten erscheint: ⚡ SuperNav Panel

Grundeinstellungen

Speichern

Ganz unten rechts "Menü speichern" klicken — erst danach sind alle Änderungen aktiv.

Visueller Builder: Spalten, Links, Icons und Badges lassen sich formularbasiert pflegen — JSON-Kenntnisse sind nicht nötig. Der JSON-Editor bleibt als optionaler Experten-Modus verfügbar (Buttons «JSON prüfen», «Formatieren», «Vorlage laden»).

Pro Menüpunkt stehen 6 Panel-Typen zur Wahl: Spalten mit Icons & Beschreibungen, Karten mit Bildern, Featured Image + Support-Links, Content (Widgets/Shortcodes), Auto (aus WP-Untermenü) und Shortcode/HTML.

2. Funktionsüberblick (Free)

• Mega-Menü-Panels — jeder Top-Level-Menüpunkt kann ein mehrspaltiges Dropdown bekommen.
• Visueller Builder + optionaler JSON-Expertenmodus inkl. Prüfen / Formatieren / Vorlage laden.
• 6 Panel-Typen — Spalten, Karten, Featured, Content, Auto, Shortcode/HTML.
• Bild-Swap — rechtes Bild wechselt beim Hovern der Items (Fade).
• Icons & Badges — Dashicons, Highlight-Badges (Text/Farbe/optionaler Link), globaler Badge-Stil (gefüllt/umrandet), pro Badge überschreibbar mit "badge_outline": true.
• Tag-Zeile — eigene Filter-/Kategorie-Pillen oben im Panel (Tab «Tag-Zeile»).
• CTA-/Footer-Leiste — Label, Links, optional ohne Pfeil (plain_links), rechtsbündiger Text/HTML (right_html).
• Sidebar-Gruppen — Extra-Links oder Bild-Modus (lmm_extra_mode: Text-Links / Bild).
• Bottom-Links und konfigurierbarer «Alle ansehen»-Link.
• Responsive / Mobile — Hamburger, Drawer oder Vollbild, konfigurierbarer Breakpoint.
• Theme-unabhängig — jedes Theme mit nativem wp_nav_menu().

3. JSON-Aufbau: Spalten & Links

Der JSON-Inhalt kommt in den Tab "Spalten & Links" im Menü-Editor.

Minimales Beispiel (1 Spalte, 2 Items)

[
  {
    "heading": "Buchhaltung",
    "items": [
      {
        "label": "Rechnungen",
        "desc": "Rechtskonform und mühelos schreiben",
        "url": "/rechnungen",
        "icon": "dashicons-media-document"
      },
      {
        "label": "Aufträge",
        "desc": "Überzeugende Angebote erstellen",
        "url": "/auftraege",
        "icon": "dashicons-email-alt"
      }
    ]
  }
]

Vollständiges Beispiel (2 Spalten + Badge)

[
  {
    "heading": "Buchhaltung",
    "items": [
      {
        "label": "Rechnungen",
        "desc": "Rechtskonform und mühelos schreiben",
        "url": "/rechnungen",
        "icon": "dashicons-media-document",
        "badge": "E-Rechnungen · Mit lireno ideal vorbereitet",
        "badge_url": "/e-rechnungen"
      },
      {
        "label": "Aufträge",
        "desc": "Überzeugende Angebote erstellen",
        "url": "/auftraege",
        "icon": "dashicons-email-alt"
      },
      {
        "label": "Belegerfassung",
        "desc": "Alle Belege an einem Ort sammeln",
        "url": "/belege",
        "icon": "dashicons-format-image"
      },
      {
        "label": "Banking",
        "desc": "Zahlungseingänge automatisch verbuchen",
        "url": "/banking",
        "icon": "dashicons-bank"
      },
      {
        "label": "Kontaktverwaltung",
        "desc": "Alle Infos zu Kunden und Lieferanten",
        "url": "/kontakte",
        "icon": "dashicons-groups"
      },
      {
        "label": "Produkte und Dienstleistungen",
        "desc": "Stundensätze und Bestände pflegen",
        "url": "/produkte",
        "icon": "dashicons-products"
      }
    ]
  },
  {
    "heading": "Steuern und Auswertung",
    "items": [
      {
        "label": "Übersicht",
        "desc": "Finanzen und Steuerlast überblicken",
        "url": "/uebersicht",
        "icon": "dashicons-dashboard"
      },
      {
        "label": "Umsatzsteuervoranmeldung",
        "desc": "Vorausgefüllt und direkt ans Finanzamt",
        "url": "/mwst",
        "icon": "dashicons-chart-bar"
      },
      {
        "label": "EÜR & GuV",
        "desc": "Mühelose Gewinnermittlung ganz nebenbei",
        "url": "/eur-guv",
        "icon": "dashicons-grid-view"
      },
      {
        "label": "Betriebswirtschaftliche Auswertung",
        "desc": "Deinen Unternehmenserfolg bewerten",
        "url": "/bwa",
        "icon": "dashicons-chart-area"
      },
      {
        "label": "Summen- und Saldenliste",
        "desc": "Buchungssätze detailgenau nachvollziehen",
        "url": "/susu",
        "icon": "dashicons-list-view"
      },
      {
        "label": "Exporte",
        "desc": "DATEV- und ADDISON-konform",
        "url": "/exporte",
        "icon": "dashicons-download"
      },
      {
        "label": "Zusammenarbeit",
        "desc": "Mit deinem Buchhalter oder Steuerberater",
        "url": "/zusammenarbeit",
        "icon": "dashicons-share"
      }
    ]
  }
]

4. Farben konfigurieren

Das Plugin bietet 3 Ebenen der Farbkonfiguration — von global bis einzelnes Item.

Ebene 1 — Global: Plugin-Einstellungen

WordPress Admin → Einstellungen → SuperNav

Gilt für alle Menüpunkte. Farbpicker für alle Bereiche. Kein Code nötig.

Ebene 2 — Pro Menüpunkt: Tab 🎨 Farben

Im Menü-Editor → Menüpunkt aufklappen → Tab 🎨 Farben

Überschreibt die globalen Einstellungen nur für diesen Menüpunkt.
Leer lassen = globale Farbe wird verwendet.

Ebene 3 — Pro Spalte: JSON-Farbfelder

Direkt im JSON der Spalte (heading-Ebene):

[
  {
    "heading": "Buchhaltung",
    "bg_color": "#f0f9ff",
    "heading_color": "#0369a1",
    "icon_color": "#0369a1",
    "icon_bg": "#e0f2fe",
    "link_color": "#111827",
    "link_hover": "#0369a1",
    "desc_color": "#6b7280",
    "badge_bg": "#0284c7",
    "badge_text": "#ffffff",
    "border_radius": 10,
    "padding": 16,
    "items": [...]
  },
  {
    "heading": "Steuern und Auswertung",
    "bg_color": "#f0fdf4",
    "heading_color": "#166534",
    "icon_color": "#16a34a",
    "icon_bg": "#dcfce7",
    "items": [...]
  }
]

Alle Spalten-Farbfelder:

Ebene 4 — Pro Item: JSON-Farbfelder

Direkt im einzelnen Item (items[]-Ebene):

{
  "label": "Rechnungen",
  "desc": "Rechtskonform und mühelos schreiben",
  "url": "/rechnungen",
  "icon": "dashicons-media-document",
  "item_bg": "#fef9c3",
  "item_color": "#92400e",
  "item_icon_color": "#d97706",
  "item_badge_bg": "#f59e0b",
  "badge": "NEU",
  "badge_url": "/rechnungen-neu"
}

Alle Item-Farbfelder:

Vollständiges Beispiel mit allen Farbebenen

[
  {
    "heading": "Buchhaltung",
    "bg_color": "#f0f9ff",
    "heading_color": "#0369a1",
    "icon_color": "#0369a1",
    "icon_bg": "#e0f2fe",
    "border_radius": 10,
    "padding": 16,
    "items": [
      {
        "label": "Rechnungen",
        "desc": "Rechtskonform und mühelos schreiben",
        "url": "/rechnungen",
        "icon": "dashicons-media-document",
        "badge": "E-Rechnungen · Mit lireno ideal vorbereitet",
        "badge_url": "/e-rechnungen",
        "item_badge_bg": "#6366f1"
      },
      {
        "label": "Banking",
        "desc": "Zahlungseingänge automatisch verbuchen",
        "url": "/banking",
        "icon": "dashicons-bank",
        "item_bg": "#fffbeb",
        "item_icon_color": "#d97706"
      }
    ]
  }
]

Priorität der Farbebenen

<div class="priority-box">Item-JSON &gt; Spalten-JSON &gt; Tab 🎨 Farben (pro Menüpunkt) &gt; Plugin-Einstellungen (global)</div>

Das spezifischste gewinnt — leer lassen bedeutet immer: nächste Ebene wird verwendet.

5. Sidebar & Bottom-Links

Tab "Sidebar" — Gruppen mit Links rechts

[
  {
    "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" }
    ]
  }
]

Bottom-Links (Pfeile unten in der Sidebar)

Separate Textarea unter dem Sidebar-JSON:

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

6. CTA-Leiste

Die CTA-Leiste erscheint als Streifen am unteren Rand des Panels (wie bei sevdesk "Kostenlose Tools...").

Tab "CTA-Leiste"

{
  "label": "Kostenlose Tools für Selbstständige.",
  "links": [
    { "label": "Zum E-Rechnungsgenerator", "url": "/tools/e-rechnung" },
    { "label": "Zum Rechnungsgenerator",   "url": "/tools/rechnung" },
    { "label": "Zu allen kostenlosen Tools", "url": "/tools" }
  ]
}

Zusätzlich (ab Core 2.10+):

• "plain_links": true — Links ohne «→»-Pfeil (schlichter Footer-Stil).
• "right_html": "…" — rechtsbündiger Text/HTML (z. B. «Ein Unternehmen der <strong>XY</strong>»), sanitisiert via wp_kses_post.

7. Methode B: Direkt per HTML

Falls du maximale Kontrolle willst oder einen Page-Builder verwendest:

<div class="lmm-panel-columns">
  <div class="lmm-cols-area">

    <!-- Spalte mit Hintergrundfarbe -->
    <div class="lmm-col lmm-col--colored" style="background:#f0f9ff;--lmm-heading-color:#0369a1;border-radius:10px;padding:16px">
      <p class="lmm-col-heading">Buchhaltung</p>
      <ul class="lmm-col-items">

        <!-- Item mit Badge -->
        <li class="lmm-col-item lmm-has-badge">
          <a href="/e-rechnungen" class="lmm-badge-link">
            E-Rechnungen · Mit lireno ideal vorbereitet
          </a>
          <a href="/rechnungen" class="lmm-col-link">
            <span class="lmm-col-icon"><span class="dashicons dashicons-media-document"></span></span>
            <span class="lmm-col-text">
              <span class="lmm-col-label">Rechnungen</span>
              <span class="lmm-col-desc">Rechtskonform und mühelos schreiben</span>
            </span>
          </a>
        </li>

        <!-- Item mit eigener Hintergrundfarbe -->
        <li class="lmm-col-item lmm-item--colored" style="background:#fffbeb;border-radius:8px;--lmm-icon-color:#d97706">
          <a href="/banking" class="lmm-col-link">
            <span class="lmm-col-icon"><span class="dashicons dashicons-bank"></span></span>
            <span class="lmm-col-text">
              <span class="lmm-col-label">Banking</span>
              <span class="lmm-col-desc">Zahlungseingänge automatisch verbuchen</span>
            </span>
          </a>
        </li>

      </ul>
    </div>

  </div>

  <!-- Sidebar -->
  <div class="lmm-panel-sidebar">
    <div class="lmm-sidebar-group">
      <p class="lmm-col-heading">Erweiterungen</p>
      <ul class="lmm-sidebar-items">
        <li><a href="/integrationen" class="lmm-sidebar-link">Integrationen</a></li>
      </ul>
    </div>
    <div class="lmm-sidebar-bottom">
      <a href="/rechnungsprogramm" class="lmm-all-link">Rechnungsprogramm →</a>
    </div>
  </div>
</div>

8. JSON-Feldreferenz und Tester

Spalten-Ebene ([] Array-Objekte)

Item-Ebene (items[] Array-Objekte)

Hinweis: Hex-Farben immer mit # schreiben, z.B. "#ef4444". Leer lassen ("") oder Feld weglassen = übergeordnete Farbe wird verwendet.

✓ JSON-Tester

Panel-JSON direkt hier prüfen und formatieren — der Editor färbt sich grün bei gültigem und rot bei fehlerhaftem JSON. Es werden keine Daten übertragen.

9. CSS-Variablen Referenz

Alle Farben können auch direkt als CSS-Variablen überschrieben werden.
In Darstellung → Theme-Editor → style.css oder Zusätzliches CSS:

:root {
  /* Navbar */
  --lmm-navbar-bg:      #ffffff;
  --lmm-navbar-height:  64px;
  --lmm-navbar-border:  #e5e7eb;

  /* Panel */
  --lmm-panel-bg:       #ffffff;
  --lmm-panel-border:   #e5e7eb;
  --lmm-panel-radius:   12px;
  --lmm-panel-padding:  32px;

  /* Farben */
  --lmm-heading-color:  #ef4444;
  --lmm-link-color:     #111827;
  --lmm-link-hover:     #ef4444;
  --lmm-desc-color:     #6b7280;
  --lmm-icon-color:     #ef4444;
  --lmm-icon-bg:        #fef2f2;
  --lmm-icon-size:      20px;
  --lmm-badge-bg:       #6366f1;
  --lmm-badge-text:     #ffffff;
  --lmm-all-link-color: #6366f1;
  --lmm-cta-bar-bg:     #f9fafb;
  --lmm-cta-bar-link:   #6366f1;
  --lmm-overlay-blur:   2px;
}

10. Plugin-Einstellungen

WordPress Admin → Einstellungen → SuperNav

Die 7 Tabs im Mega-Panel-Editor pro Menüpunkt: Spalten & Links, Sidebar, CTA-Leiste, Tag-Zeile, Featured, Content-Blöcke, Farben (🎨). Bei schmalen Menüpunkt-Boxen bricht die Tab-Leiste um (kein Überlauf mehr).

11. Theme-Kompatibilität

Lireno Theme (lireno-latest)

Das Lireno-Theme verwendet eine eigene Nav-Funktion. Folgende Anpassung ist in inc/landing-i18n.php nötig:

// In der Funktion taxbot_landing_wp_main_top_nav_parts()
// wp_nav_menu() Aufruf anpassen:
wp_nav_menu(
    array(
        'theme_location' => 'main-top',
        'container'      => false,
        'menu_class'     => 'tb-main-top-menu lmm-nav-container',
        'fallback_cb'    => false,
        'depth'          => 3,
        'walker'         => class_exists('LMM_Walker') ? new LMM_Walker() : null,
    )
);

Und in style.css am Ende:

/* SuperNav Theme Fix */
ul.tb-main-top-menu.lmm-nav-container {
    display: flex !important;
    align-items: center;
    list-style: none;
    margin: 0; padding: 0; gap: 4px;
}
ul.tb-main-top-menu.lmm-nav-container > li.lmm-has-mega,
ul.tb-main-top-menu.lmm-nav-container > li.lmm-has-dropdown {
    position: relative !important;
    list-style: none;
}
ul.tb-main-top-menu.lmm-nav-container > li.lmm-has-mega .lmm-mega-panel {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    margin-top: 4px;
    z-index: 9999 !important;
}
ul.tb-main-top-menu.lmm-nav-container > li.lmm-has-mega.lmm-align-right .lmm-mega-panel {
    left: auto !important;
    right: 0 !important;
}

Andere Themes

Falls das Plugin nicht reagiert (Panel öffnet nicht), in functions.php des Themes prüfen ob wp_nav_menu() einen eigenen Walker setzt. Falls ja, diesen Cursor-Prompt verwenden:

Das WordPress-Plugin "SuperNav" wird in meinem Theme nicht erkannt.
Das Theme ruft wp_nav_menu() in [DATEI] auf mit theme_location '[LOCATION]'.
Bitte den Walker-Parameter ergänzen:
'walker' => class_exists('LMM_Walker') ? new LMM_Walker() : null
und menu_class um 'lmm-nav-container' erweitern.

12. Häufige Probleme

Panel öffnet nicht
- Panel-Typ auf "Kein Mega-Panel" gesetzt? → Auf "Spalten mit Icons & Beschreibungen" ändern
- Menü nach Änderung gespeichert?
- Browser-Konsole: document.querySelectorAll('.lmm-has-mega').length — muss > 0 sein
- Plugin-Einstellungen: Aktivierungsmodus auf "Alle Menüs" stellen

Panel flickert
- Schliess-Verzögerung erhöhen: Einstellungen → SuperNav → Schliess-Verzögerung → 300
- Theme-CSS überprüfen ob position: static !important auf <li> gesetzt wird
- Theme-Fix CSS in style.css einfügen (siehe Theme-Kompatibilität)

Icons nicht sichtbar
Auf der Landing rendert das Theme SuperNav-Assets ohne wp_head() — Dashicons müssen über den Theme-Filter taxbot_landing_lmm_head_html eingebunden werden (direkt nach taxbot_landing_collect_head_assets_html() in functions.php):

add_filter('taxbot_landing_lmm_head_html', function (string $html): string {
    // Dashicons für SuperNav Icons
    $dashicons_url = includes_url('css/dashicons.min.css');
    $ver           = get_bloginfo('version');
    $html .= '<link rel="stylesheet" id="dashicons-css" href="'
           . esc_url($dashicons_url) . '?ver=' . esc_attr($ver)
           . '" media="all" />' . "\n";
    return $html;
}, 5);

Warum dieser Weg: nutzt den vorhandenen Theme-Filter, kein @import, WordPress-Standard (includes_url()), versioniert mit der Core-Version — und landet exakt bei den anderen SuperNav-Head-Assets.

Test in der Browser-Konsole:

document.querySelector('link[href*="dashicons"]') ? 'Dashicons geladen' : 'fehlt'

JSON-Fehler (rote Markierung)
- Nur doppelte Anführungszeichen " verwenden, keine einfachen '
- Kein Komma nach dem letzten Item im Array
- Button { } Formatieren nutzen — zeigt Syntaxfehler an

Badge erscheint nicht
Mindestens "badge" (Text) setzen. "badge_url" ist optional und macht das Badge klickbar.

Verdunklung erscheint nicht, obwohl aktiviert
Häufigste Ursache: ein Theme mit eigener, hartkodierter .lmm-overlay-CSS-Regel (oft mit !important, manchmal über mehrere Theme-Dateien oder statische HTML-Snapshots). Prüfen im Browser-DevTools: bekommt .lmm-overlay die Klasse lmm-visible? Welcher berechnete background-Wert gilt, und welche Regel überschreibt var(--lmm-overlay-color)?

Mega-Panel-Editor-Tabs laufen über den rechten Rand
Betrifft ältere Versionen vor dem Breite-Fix — Update auf Core 2.10.35+ behebt es (Tab-Leiste bricht um).

Farben werden nicht übernommen
Priorität prüfen: Item-JSON > Spalten-JSON > Tab 🎨 > Plugin-Einstellungen
Hex-Farbe korrekt mit # schreiben: "#ef4444" nicht "ef4444"

Panel zu weit rechts / links
Das Plugin erkennt Randüberschreitungen automatisch. Manuell erzwingen:

/* Immer linksbündig */
.lmm-has-mega .lmm-mega-panel { left: 0 !important; right: auto !important; }
/* Immer rechtsbündig */
.lmm-has-mega .lmm-mega-panel { left: auto !important; right: 0 !important; }

13. Dashicons Referenz

Buchhaltung & Finanzen:
dashicons-media-document    → Dokument/Rechnung
dashicons-bank              → Banking
dashicons-money-alt         → Geld
dashicons-chart-bar         → Balkendiagramm
dashicons-chart-area        → Flächendiagramm
dashicons-chart-line        → Liniendiagramm
dashicons-list-view         → Liste
dashicons-grid-view         → Raster
dashicons-download          → Export/Download

Kontakte & Personen:
dashicons-groups            → Kundengruppen
dashicons-businessman       → Einzelperson
dashicons-store             → Geschäft
dashicons-email-alt         → E-Mail/Aufträge

Navigation & System:
dashicons-dashboard         → Übersicht
dashicons-admin-tools       → Werkzeuge
dashicons-admin-plugins     → Plugins/Addons
dashicons-randomize         → Integrationen
dashicons-smartphone        → Mobile App
dashicons-share             → Zusammenarbeit
dashicons-format-image      → Belegerfassung
dashicons-products          → Produkte
dashicons-sos               → Hilfe/Support
dashicons-format-chat       → FAQ/Chat

Vollständige Liste: https://developer.wordpress.org/resource/dashicons/

14. Panel-Typ: Karten mit Bildern

Dieser Panel-Typ zeigt Karten mit echten Fotos, Titel und Beschreibung — ideal für Zielgruppen, Lösungen oder Branchen.

Beispiel aus der Praxis (sevdesk "Lösungen"-Menü):

┌──────────────────────────────────────────────────────┬───────────────────────┐
│ GRÜNDUNGS- UND UNTERNEHMENSPHASEN                    │ Für Selbstständige    │
│                                                      │                       │
│ ┌────────────┐  ┌────────────┐  ┌────────────┐       │ 🖥 Für Freiberufler   │
│ │ [Foto:     │  │ [Foto:     │  │ [Foto:     │       │ 🏪 Für Kleinunternehm.│
│ │  Frau am   │  │  Mann auf  │  │  Team im   │       │                       │
│ │  Schreibt.]│  │  Sofa]     │  │  Büro]     │       │ Unternehmensgründung  │
│ └────────────┘  └────────────┘  └────────────┘       │                       │
│ Für Neugründer  Für Einzelunt.  Für Unternehmen      │ 🚀 GmbH & UG gründen  │
│ Starte direkt   Nutze deine     Behalte deine         │                       │
│ mit digitaler   Zeit sinnvoll   Finanzen im Blick     │ Nach Branchen         │
│ Buchhaltung...  und setze...    und steuere...        │                       │
│                                                      │ ⚙ Handwerk            │
│                                                      │ 🚗 KFZ Werkstatt      │
│                                                      │ 🍽 Gastronomie        │
│                                                      │                       │
│                                                      │ Alle Branchen →       │
└──────────────────────────────────────────────────────┴───────────────────────┘

Aktivierung

Im Menü-Editor → Menüpunkt aufklappen → Panel-Typ: Karten mit Bildern

JSON-Aufbau: Tab "Spalten & Links"

Die Karten kommen ins erste Array-Element unter items[]. Jede Karte braucht ein image-Feld mit der vollständigen Bild-URL aus der WordPress-Mediathek.

Exaktes JSON für das Layout im Bild oben:

[
  {
    "heading": "Gründungs- und Unternehmensphasen",
    "items": [
      {
        "label": "Für Neugründer",
        "desc": "Starte direkt mit digitaler Buchhaltung in deine Selbstständigkeit.",
        "url": "/neugründer",
        "image": "https://dev.lireno.ch/wp-content/uploads/neugründer.jpg"
      },
      {
        "label": "Für Einzelunternehmer",
        "desc": "Nutze deine Zeit sinnvoll und setze auf einfache und verständliche Buchhaltung.",
        "url": "/einzelunternehmer",
        "image": "https://dev.lireno.ch/wp-content/uploads/einzelunternehmer.jpg"
      },
      {
        "label": "Für Unternehmen",
        "desc": "Behalte deine Finanzen im Blick und steuere dein Unternehmen mit Effizienz zum Erfolg.",
        "url": "/unternehmen",
        "image": "https://dev.lireno.ch/wp-content/uploads/unternehmen.jpg"
      }
    ]
  }
]

Ohne Bild: Falls kein image gesetzt ist, wird stattdessen das icon-Feld als Dashicon-Symbol angezeigt. So kann man das Panel auch ohne Bilder verwenden.

{
  "label": "Für Neugründer",
  "desc": "Starte direkt digital.",
  "url": "/neugründer",
  "icon": "dashicons-businessman"
}

Bilder hochladen

Bilder kommen aus der WordPress-Mediathek:

1. WordPress Admin → Medien → Neu hinzufügen → Bild hochladen
2. Auf das Bild klicken → rechts bei "Datei-URL" die URL kopieren
3. Diese URL ins JSON als "image": "..." einfügen

Empfohlene Bildgrösse: 400 × 260 px (16:10 Format), JPG oder WebP

Tab "Sidebar" — Rechte Spalte mit Gruppen

Exaktes JSON für die rechte Spalte wie im Bild (3 Gruppen: Selbstständige, Gründung, Branchen):

[
  {
    "heading": "Für Selbstständige",
    "items": [
      { "label": "Für Freiberufler",    "url": "/freiberufler",    "icon": "dashicons-desktop" },
      { "label": "Für Kleinunternehmer","url": "/kleinunternehmer","icon": "dashicons-store" }
    ]
  },
  {
    "heading": "Unternehmensgründung",
    "items": [
      { "label": "GmbH & UG online gründen", "url": "/gruenden", "icon": "dashicons-flag" }
    ]
  },
  {
    "heading": "Nach Branchen",
    "items": [
      { "label": "Handwerk",    "url": "/handwerk",    "icon": "dashicons-admin-tools" },
      { "label": "KFZ Werkstatt","url": "/kfz",        "icon": "dashicons-car" },
      { "label": "Gastronomie", "url": "/gastronomie", "icon": "dashicons-food" }
    ]
  }
]

Bottom-Links (Pfeil-Link unten in der Sidebar)

Separate Textarea unter dem Sidebar-JSON:

[
  { "label": "Alle Branchen entdecken", "url": "/branchen" }
]

Vollständiges Beispiel (Karten + Sidebar + Bottom-Link)

Tab "Spalten & Links":

[
  {
    "heading": "Gründungs- und Unternehmensphasen",
    "items": [
      {
        "label": "Für Neugründer",
        "desc": "Starte direkt mit digitaler Buchhaltung.",
        "url": "/neugründer",
        "image": "https://dev.lireno.ch/wp-content/uploads/neugründer.jpg"
      },
      {
        "label": "Für Einzelunternehmer",
        "desc": "Einfache und verständliche Buchhaltung.",
        "url": "/einzelunternehmer",
        "image": "https://dev.lireno.ch/wp-content/uploads/einzelunternehmer.jpg"
      },
      {
        "label": "Für Unternehmen",
        "desc": "Finanzen im Blick mit maximaler Effizienz.",
        "url": "/unternehmen",
        "image": "https://dev.lireno.ch/wp-content/uploads/unternehmen.jpg"
      }
    ]
  }
]

"Alle ansehen" Text: Alle Lösungen ansehen
"Alle ansehen" URL: /loesungen

Tab "Sidebar":

[
  {
    "heading": "Für Selbstständige",
    "items": [
      { "label": "Für Freiberufler",    "url": "/freiberufler",    "icon": "dashicons-businessman" },
      { "label": "Für Kleinunternehmer","url": "/kleinunternehmer","icon": "dashicons-store" }
    ]
  },
  {
    "heading": "Nach Branchen",
    "items": [
      { "label": "Handwerk",    "url": "/handwerk",    "icon": "dashicons-admin-tools" },
      { "label": "KFZ Werkstatt","url": "/kfz",        "icon": "dashicons-car" },
      { "label": "Gastronomie", "url": "/gastronomie", "icon": "dashicons-food" }
    ]
  }
]

Bottom-Links:

[
  { "label": "Alle Branchen entdecken", "url": "/branchen" }
]

Unterschied zu "Spalten mit Icons"

15. Panel-Typ: Featured Image + Support-Links

Dieser Panel-Typ zeigt links ein Team-Foto oder Illustration und rechts Ressourcen-Links — ideal für Service, Support oder Kontakt-Menüs (wie sevdesk "Service"-Menü).

Aktivierung

Im Menü-Editor → Menüpunkt aufklappen → Panel-Typ: Featured Image + Support-Links

So sieht es aus

┌────────────────────┬──────────────────────────────────────────┐
│                    │ Ressourcen                               │
│  [Team-Foto oder   │                                          │
│   Illustration]    │ 📖 Ratgeber      🌱 Gründerwelt          │
│                    │ Wertvolles Wissen Von der Idee bis...    │
│  ⓘ Hilfecenter    │                                          │
│  ? Häufige Fragen  │ ✏️ Blog           📄 Kostenlose Vorlage  │
│                    │ Interessante...  Und weitere...          │
└────────────────────┴──────────────────────────────────────────┘

Tab "Spalten & Links" — Rechte Ressourcen-Spalten

[
  {
    "heading": "Ressourcen",
    "items": [
      {
        "label": "Ratgeber",
        "desc": "Wertvolles Wissen rund um Buchhaltung und Finanzen.",
        "url": "/ratgeber",
        "icon": "dashicons-book"
      },
      {
        "label": "Gründerwelt",
        "desc": "Von der Idee bis zum Erfolg in der Selbstständigkeit.",
        "url": "/gruenderwelt",
        "icon": "dashicons-flag"
      },
      {
        "label": "Blog",
        "desc": "Interessante Beiträge rund um Selbstständigkeit.",
        "url": "/blog",
        "icon": "dashicons-edit"
      },
      {
        "label": "Kostenlose Rechnungsvorlage",
        "desc": "Vorlagen für Angebote, Rechnungen, Mahnungen.",
        "url": "/vorlagen",
        "icon": "dashicons-media-document"
      }
    ]
  }
]

Tab "Featured" — Bild + Support-Links links

Bild-URL (Pflichtfeld für das Feature-Bild):

https://dev.lireno.ch/wp-content/uploads/team.jpg

Support-Links (erscheinen unter dem Bild):

[
  { "label": "Hilfecenter",           "url": "/hilfe",  "icon": "dashicons-sos" },
  { "label": "Häufig gestellte Fragen","url": "/faq",   "icon": "dashicons-format-chat" }
]

Empfohlene Bildgrösse

• Format: Quadratisch oder 4:3
• Grösse: 280 × 280 px bis 400 × 300 px
• Typ: JPG oder WebP, Teamfoto oder Illustration

16. Mehrsprachigkeit (i18n)

SuperNav Mehrsprachigkeit läuft über zwei Systeme. Das Übersetzungs-Modul ist ab Plan Grow enthalten (auch Scale; nicht in Free/Launch) und liefert KI-Übersetzung, Excel/CSV-Import/Export sowie frei konfigurierbare Zielsprachen (ISO-639-1 — typisch DE/EN/FR/IT für die Schweiz, aber nicht darauf beschränkt).

Eigener API-Key nötig für KI: Die KI-Übersetzung läuft über OpenRouter. Ohne Key bleiben manuelle Pflege und Excel/CSV möglich — die KI-Buttons nicht. KITech stellt keinen Key bereit.

OpenRouter API Key einrichten

1. Konto bei openrouter.ai anlegen (oder anmelden).
2. Unter Keys einen API Key erzeugen — Format typisch sk-or-…. Guthaben/Credits im OpenRouter-Konto sicherstellen (Abrechnung erfolgt dort).
3. In WordPress öffnen: Werkzeuge → LIRENO Menü-Übersetzungen (Grow/Scale). Alternativ: SuperNav-Einstellungen → Tab Mehrsprachig, sofern das Modul dort eingebettet ist.
4. Im Abschnitt Sprachkonfiguration das Feld OpenRouter API Key ausfüllen.
5. Ausgangssprache und Zielsprachen (kommagetrennte ISO-Codes, z. B. en,fr,it) setzen und speichern (Button Tabelle generieren / Speichern der Sprachkonfiguration).
6. Erfolg: Hinweis «OpenRouter API-Key ist gespeichert ✓». Danach funktionieren die KI-Buttons pro Zeile bzw. Batch. Ohne Key erscheint die Warnung «Kein OpenRouter API Key konfiguriert».

Der Key wird als WordPress-Option ksn_openrouter_api_key gespeichert (nicht im Klartext im Frontend). API-Aufrufe gehen nur bei aktivem Übersetzen an https://openrouter.ai/api/v1/chat/completions.

System 1 — Menütitel übersetzen (🌐 Feld im Menü-Editor)

Für die Top-Level Menüpunkte (z. B. «Leistungsmerkmale», «Lösungen»):

1. Darstellung → Menüs → Menüpunkt aufklappen
2. Ganz unten: 🌐 Übersetzungen (optional)
3. Übersetzungen direkt eintragen (z. B. EN/FR/IT):

🇬🇧 English:  Features
🇫🇷 Français: Fonctionnalités
🇮🇹 Italiano: Funzionalità

Menü speichern. Leer lassen = WP-Navigationsbeschriftung (Deutsch) wird verwendet.

System 2 — Panel-Inhalte übersetzen (Grow+: Übersetzungs-Modul)

Für alle Texte innerhalb des Panels (Spaltenüberschriften, Labels, Beschreibungen, Badges, CTA …) — ab Plan Grow (auch Scale; nicht in Free/Launch):

1. WordPress Admin → Werkzeuge → LIRENO Menü-Übersetzungen
2. Sprachkonfiguration: Ausgangssprache wählen, Zielsprachen als ISO-Codes eintragen (z. B. en,fr,it oder weitere wie pl,es)
3. Menü auswählen → Laden — das Modul scannt alle JSON-Texte aus den SuperNav-Panels
4. Texte manuell pflegen oder per KI übersetzen (eigener OpenRouter API Key in der Sprachkonfiguration; nur beim aktiven Übersetzen)
5. Optional: Excel/CSV exportieren → bearbeiten → wieder importieren
6. Speichern

Das Plugin erstellt automatisch Keys für alle Texte:

Import/Export-Workflow (empfohlen für viele Texte)

Der schnellste Weg, um alle Panel-Texte zu übersetzen:

Export

1. Werkzeuge → LIRENO Menü-Übersetzungen
2. Menü auswählen → Laden
3. Excel (.xlsx) oder Google Sheets (CSV) klicken
4. Datei wird mit allen DE-Texten als Referenz heruntergeladen

Übersetzen

• KI-Übersetzung direkt im Modul (pro Zeile oder als Batch) — benötigt eigenen OpenRouter API Key
• Oder: In Excel/Sheets die Zielspalten ausfüllen (gemäß konfigurierter Sprachen)
• Oder: Exportierte Datei extern (DeepL/ChatGPT) übersetzen und zurückimportieren

Import

1. Übersetzte Datei unter Datei auswählen hochladen
2. Modus wählen: Zusammenführen (bestehende Keys behalten) oder Ersetzen
3. Aus Datei importieren klicken
4. Fertig — alle Übersetzungen sind sofort aktiv

Format der Excel/CSV-Datei:

Wichtig: Nach Menü-Änderungen neu scannen

Wenn du JSON-Inhalte im Menü-Editor änderst (neue Items, geänderte Labels), im Plugin erneut Laden klicken, um die neuen Texte zu erfassen.

Sprache aktivieren

Die Sprache wird über den URL-Parameter ?lang= gesteuert:

https://dev.lireno.ch/?lang=de   → Deutsch (Standard)
https://dev.lireno.ch/?lang=en   → Englisch
https://dev.lireno.ch/?lang=fr   → Französisch
https://dev.lireno.ch/?lang=it   → Italienisch

Sprachen konfigurieren

Im Modul sind Ausgangs- und Zielsprachen frei wählbar (ISO-639-1). Empfohlene Presets:

Die Frontend-Sprache steuerst du z. B. über ?lang= bzw. deine bestehende Sprachumschaltung — passend zu den konfigurierten Codes.

Übersicht: Was wird wo übersetzt

17. Sidebar-Styling: Icons, Farben & Typografie

Die Sidebar (rechte Spalte im Panel) lässt sich auf zwei Arten anpassen:

Methode A — Per JSON (empfohlen, pro Sidebar-Gruppe)

Im Tab «Sidebar» im Menü-Editor:

[
  {
    "heading": "Erweiterungen",
    "bg_color": "#f5f3ff",
    "heading_color": "#7c3aed",
    "link_color": "#4c1d95",
    "link_hover": "#7c3aed",
    "icon_color": "#7c3aed",
    "icon_bg": "#ede9fe",
    "font_weight": "600",
    "items": [
      {
        "label": "Integrationen",
        "url": "/integrationen",
        "icon": "dashicons-randomize"
      },
      {
        "label": "Addons",
        "url": "/addons",
        "icon": "dashicons-admin-plugins"
      },
      {
        "label": "Mobile App",
        "url": "/app",
        "icon": "dashicons-smartphone"
      }
    ]
  }
]

Alle Sidebar-Gruppen-Farbfelder:

Methode B — Per CSS (global für alle Sidebars)

Das CSS kommt in Darstellung → Theme-Editor → style.css ganz am Ende:

/* ── Sidebar Styling ─────────────────────────────── */

/* Hintergrund der ganzen Sidebar */
.lmm-panel-sidebar {
    background: #f5f3ff;
    border-radius: 10px;
    padding: 16px !important;
    margin-left: 20px !important;
}

/* Sidebar Überschrift */
.lmm-panel-sidebar .lmm-col-heading {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #7c3aed;
}

/* Sidebar Links — Schrift, Farbe, Dicke */
.lmm-panel-sidebar .lmm-sidebar-link {
    font-size: 14px;
    font-weight: 600;
    font-family: 'Satoshi', sans-serif;
    color: #4c1d95;
    gap: 10px;
}

/* Sidebar Link Hover */
.lmm-panel-sidebar .lmm-sidebar-link:hover {
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.08);
}

/* Sidebar Icons */
.lmm-panel-sidebar .lmm-sidebar-link [class^="dashicons"] {
    color: #7c3aed;
    font-size: 16px;
}

/* Bottom-Links (Pfeil-Links) */
.lmm-sidebar-bottom .lmm-all-link {
    font-size: 13px;
    font-weight: 700;
    color: #7c3aed;
}

.lmm-sidebar-bottom .lmm-all-link:hover {
    background: rgba(124, 58, 237, 0.07);
}

Methode A + B kombinieren

Empfehlung: Methode A für Farben pro Sidebar-Gruppe, Methode B für globale Schrift-Einstellungen (font-size, font-family, font-weight), die überall gleich sein sollen.

Vollständiges Beispiel: Sidebar mit allen Optionen

[
  {
    "heading": "Erweiterungen",
    "bg_color": "#f0fdf4",
    "heading_color": "#166534",
    "link_color": "#14532d",
    "link_hover": "#16a34a",
    "icon_color": "#16a34a",
    "icon_bg": "#dcfce7",
    "font_weight": "600",
    "font_size": 14,
    "font_family": "'Satoshi', sans-serif",
    "font_style": "normal",
    "letter_spacing": 0.02,
    "text_transform": "none",
    "border_radius": 10,
    "padding": 14,
    "items": [
      {
        "label": "Integrationen",
        "url": "/integrationen",
        "icon": "dashicons-randomize",
        "color": "#166534"
      },
      {
        "label": "Addons",
        "url": "/addons",
        "icon": "dashicons-admin-plugins"
      },
      {
        "label": "Mobile App",
        "url": "/app",
        "icon": "dashicons-smartphone"
      }
    ]
  }
]

Tipp: Nicht alle Felder müssen gesetzt sein — leer lassen = globale Einstellung wird verwendet. Nur die Felder setzen, die sich vom Standard unterscheiden sollen.

Pro-Item Farbe (einzelner Link)

Mit "color" kann ein einzelner Link eine andere Farbe bekommen:

{
  "label": "Integrationen",
  "url": "/integrationen",
  "icon": "dashicons-randomize",
  "color": "#dc2626"
}

18. Verdunklung & Panel-Animation

Pfad: Einstellungen → SuperNav → Mega-Menüs → Abstände & Form. Verdunklung und Panel-Animation sind zwei unabhängige Effekte mit eigenen Zeiten — beides Free (keine Pro-Lizenz nötig).

Verdunklungs-Effekt (Overlay)

Option: «Restlichen Seiteninhalt abdunkeln, solange ein Panel geöffnet ist».

• Farbe und Deckkraft (0–100 %)
• Weichzeichnung / Blur 0–40 px
• Einblenddauer (Öffnen) und Ausblenddauer (Schließen) getrennt in ms (0–2000, Standard je 280 ms) — weicher Opacity-Übergang; 0 = sofort. Empfohlen: 150–400 ms. Respektiert prefers-reduced-motion.

Wechsel zwischen Menüpunkten (ab Core 2.10.34): Wechselt ein Besucher direkt von einem geöffneten Mega-Menü zu einem anderen (z. B. schnelles Hover von «Funktionen» zu «Lösungen»), blendet die Hintergrund-Verdunklung sichtbar kurz aus und wieder ein — statt beim Wechsel durchgehend dunkel zu bleiben. Nutzt dieselben Ein-/Ausblenddauern wie oben; keine eigene Einstellung, automatisch aktiv wenn der Verdunklungs-Effekt eingeschaltet ist.

Technisch steuert das Plugin die CSS-Variable --lmm-overlay-color. Themes dürfen .lmm-overlay nicht mit festem background: … !important oder display: none auf Desktop überschreiben — sonst greifen die Backend-Einstellungen nicht (siehe Troubleshooting).

Panel-Animation (ab Core 2.10.35)

Abschnitt «Panel-Ein-/Ausblendung» direkt unter dem Verdunklungs-Effekt. Das geöffnete Mega-Panel bzw. Dropdown blendet weich ein und aus (statt hartem Sofort-Anzeigen/Verschwinden) — unabhängig von der Hintergrund-Verdunklung, mit eigener Zeitsteuerung.

• Einblenddauer (Öffnen): 0–2000 ms, Standard 180 ms
• Ausblenddauer (Schließen): 0–2000 ms, Standard 180 ms
• 0 = kein Übergang (sofort). Empfohlen: 120–300 ms.

Gilt für Mega-Panels und einfache Dropdowns gleichermaßen. Auf Mobile (Akkordeon-Ansicht) bewusst kein Fade — dort klappt weiterhin sofort auf/zu.

Klapp-Effekt / 3D-Flip (ab Core 2.10.36)

Optionale Checkbox im selben Abschnitt «Panel-Ein-/Ausblendung»:

• «Klapp-Effekt: Panel wie eine herunterklappende Tafel öffnen (3D-Flip von oben statt reinem Fade)» — Standard: aus
• Nutzt dieselbe Ein-/Ausblenddauer wie die Panel-Animation (0–2000 ms) — keine separaten Zeiten nur für den Klapp-Effekt.
• Wird automatisch deaktiviert, wenn Browser/OS «Bewegung reduzieren» (prefers-reduced-motion) aktiv hat — dann normales Ein-/Ausblenden ohne 3D-Effekt.

Klapp-Winkel (ab Core 2.10.39): Zahleneingabe 20–90°, Schritt 5°, Standard 70° (CSS-Variable --lmm-panel-flip-angle). Bei vollen 90° ist die Panel-Fläche über einen großen Teil der Drehung fast unsichtbar und «entfaltet» sich erst am Ende — das wirkt wie ein plötzlicher Sprung, unabhängig von der Ein-/Ausblenddauer. Ein kleinerer Winkel (z. B. 60–70°) verschiebt mehr der sichtbaren Bewegung in die Animation und macht sie weicher.

Weiches Aufklappen auch bei hohen Panels (ab Core 2.10.40): Die 3D-perspective wird pro Panel dynamisch aus seiner tatsächlichen Höhe berechnet (statt fix 1400 px). Dadurch bleibt der Klapp-Effekt bei kurzen und langen Menüs gleichermaßen weich.

19. Admin- & Entwickler-Werkzeuge

• Admin-Header — Logo, Versions-/Lizenzstatus, Links zu Doku/Troubleshooting, «Upgrade to Pro».
• Cache leeren — mit Zeitstempel der letzten Leerung.
• Einstellungen zurücksetzen — löscht die gespeicherte Konfiguration.
• Sicherheits-Modus (Safe Mode) — Notfall-Stylesheet mit Schwarz/Weiß-Kontrast, zeigt alle Mega-Panels gleichzeitig. Banner am Seitenende, solange aktiv. Gilt für alle Besucher — nur temporär zur Fehlersuche nutzen.
• Lizenz-Verwaltung — Freemius-Integration (Produkt-ID 33524), Stufen Free / Launch / Grow / Scale.
• Panel-Farben pro Menüpunkt (Tab «Farben») — überschreibt globale Farben optional nur für diesen Eintrag.

20. Pro-Pläne: Launch / Grow / Scale

Abrechnung (Freemius, USD)

Zwei Wege — Features pro Stufe sind identisch, nur die Abrechnung unterscheidet sich. Details & Checkout: Upgrade to Pro.

Datenschutz: Die kostenlose Version kontaktiert von sich aus keine externen Dienste. Der Pro-Karten-Block fragt Kartenbilder bei Googles Static-Maps-API an (nur mit eigenem Google-API-Key). Die Pro-KI-Übersetzung ruft OpenRouter nur beim aktiven Übersetzen auf — und nur mit dem vom Anwender hinterlegten OpenRouter API Key.

21. Versionshistorie

Aktueller Plugin-Stand: 2.10.56 (veröffentlicht 2026-08-10). Auszug der wichtigsten Änderungen — vollständiger Changelog im Plugin-readme.txt. Release-Daten = Paketdatum der jeweiligen Version (ISO YYYY-MM-DD).

SuperNav v2.10.56 — ein Produkt von KITech