SuperNav — Dokumentation

Inhaltsverzeichnis

1. Schnellstart
2. JSON-Aufbau: Spalten & Links
3. Farben konfigurieren
4. Sidebar & Bottom-Links
5. CTA-Leiste
6. Methode B: Direkt per HTML
7. Vollständige JSON-Feldreferenz
8. CSS-Variablen Referenz
9. Plugin-Einstellungen
10. Theme-Kompatibilität
11. Häufige Probleme
12. Dashicons Referenz
13. Panel-Typ: Karten mit Bildern
14. Panel-Typ: Featured Image + Support-Links
15. Mehrsprachigkeit (i18n)
16. Sidebar-Styling: Icons, Farben & Typografie
17. Versionshistorie
18. Beispiel-Katalog (separate Seite)

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.

2. 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"
      }
    ]
  }
]

3. 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.

4. 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" }
]

5. 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" }
  ]
}

6. 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>

7. 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.

8. 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;
}

9. Plugin-Einstellungen

WordPress Admin → Einstellungen → SuperNav

10. Theme-Kompatibilität

Lireno Theme (lireno-v1-3-160)

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.

11. 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
Beide Felder müssen gesetzt sein: "badge" UND "badge_url"

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; }

12. 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/

13. 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"

14. 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

15. Mehrsprachigkeit (i18n)

Das SuperNav unterstützt vollständige Mehrsprachigkeit für DE/EN/FR/IT. Es gibt zwei Systeme, die zusammenarbeiten:

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:

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

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

System 2 — Panel-Inhalte übersetzen (Plugin «LIRENO Menü-Übersetzungen»)

Für alle Texte innerhalb des Panels (Spaltenüberschriften, Labels, Beschreibungen, Badges):

1. WordPress Admin → Werkzeuge → LIRENO Menü-Übersetzungen
2. Menü auswählen → Laden klicken
3. Das Plugin scannt automatisch alle JSON-Texte aus den SuperNav-Panels
4. EN/FR/IT-Übersetzungen eintragen
5. 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

• In Excel die EN/FR/IT-Spalten ausfüllen
• Oder: CSV in Google Sheets importieren → übersetzen → exportieren
• Oder: Excel-Datei in DeepL oder ChatGPT übersetzen lassen

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

Verfügbare Sprachen

Übersicht: Was wird wo übersetzt

16. 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"
}

Versionshistorie

SuperNav v3.10.6 — ein Produkt von KITech