Menü

1. Menü-Verwaltung öffnen
   Navigiert im WordPress-Backend in der linken Menüleiste zu Menüs.
2. Menü auswählen oder neu erstellen
   Wählt oben im Reiter „Menüs bearbeiten“ das gewünschte Menü aus der Dropdown-Liste aus oder klickt auf „Erstelle ein neues Menü“.
   
3. Inhalte hinzufügen
   In der linken Spalte findet ihr verschiedene Abschnitte (Seiten, Beiträge, individuelle Links etc.). Wählt die gewünschten Elemente aus und klickt auf „Zum Menü hinzufügen“.
   
4. Struktur & Hierarchie anordnen
   Im rechten Bereich wird nun eure Menüstruktur angezeigt. Per Drag-and-Drop könnt ihr die Reihenfolge festlegen. Zieht Elemente leicht nach rechts eingerückt unter einen Hauptpunkt, um Untermenüs zu erstellen.
5. Namen & Icons anpassen
   Klickt auf den kleinen Pfeil rechts neben einem Menüpunkt, um die Details zu öffnen. Hier könnt ihr den Angezeigten Namen ändern und optional ein Icon zuweisen.
   
6. Menü-Position festlegen
   Scrollt nach unten zu den Menü-Einstellungen. Bestimmt hier den Positionstyp (z. B. Header-Menü, Footer-Menü oder Utility-Menü).
7. Menü-Typ einstellen
   Wählt im darauffolgenden Einstellungsbereich den gewünschten Menü-Typ aus:
   • Standard-Menü: Haupteinträge horizontal, Unterpunkte klappen vertikal aus.
   • Mega-Menü: Haupteinträge öffnen ein mehrspaltiges Fenster mit individuell gestaltbaren Tabs.
   • Slide-Menü: Seitliches Menü mit verschiedenen Unterebenen.
8. Scroll-Verhalten konfigurieren
   Legt fest, wie sich das Menü beim Scrollen der Seite verhält:
   • Animiert (Standard): Die Kopfzeile blendet beim Herunterscrollen aus und beim Hochscrollen wieder ein.
   • Festgesetzt (Sticky): Das Hauptmenü bleibt dauerhaft am oberen Bildschirmrand fixiert.
9. Burger-Menü aktivieren
   Entscheidet über die entsprechende Option, ob das Menü auf Mobilgeräten oder generell als Burger-Menü (Drei-Striche-Icon) dargestellt werden soll.
10. Speichern
    Klickt oben oder unten rechts auf den Button „Menü speichern“, um eure Änderungen zu übernehmen.

🌟 Bonus-Tipp: Highlights im Mega-Menü setzen

Ihr könnt einzelne Menüpunkte als optisches Highlight mit einer Bildkachel hervorheben:

• Klappt den jeweiligen Menüpunkt über den kleinen Pfeil auf.
• Setzt die Option Highlight auf „Ja“.
• Fügt unter „Weiterlesen“ einen individuellen Button-Text ein.
• Ladet ein passendes Bild hoch (empfohlenes Format: 293 × 300 px).

Der Button im Kopf eurer Website (Call-to-Action) führt meist zu einer Seite, öffnet eine Modalbox oder startet einen Anruf. Er kann stattdessen auch ein eigenes kleines Menü aufklappen, ein Fly-out. Das passt, wenn hinter einem Button mehrere Ziele stehen, zum Beispiel „Planen & Buchen“ mit Unterkunft, Tickets und Anreise.

Am Rechner klappt das Fly-out unter dem Button auf. Auf kleineren Bildschirmen öffnet es sich über den ganzen Bildschirm. Oben stehen Icon und Text des Buttons, darunter die Einträge. Mit dem X schließen Besucher es wieder.

Menü für das Fly-out anlegen

1. Öffnet die Menü-Verwaltung wie oben in Schritt 1 und klickt auf „Erstelle ein neues Menü“. Gebt dem Menü einen Namen, an dem ihr es wiedererkennt, zum Beispiel „Kopf-Button Planen & Buchen“. Eine Menü-Position braucht dieses Menü nicht.
2. Fügt die Einträge hinzu wie bei jedem anderen Menü. Ein Hauptpunkt mit Unterpunkten erscheint im Fly-out als Zwischenüberschrift, seine Unterpunkte stehen immer sichtbar darunter. Ein Hauptpunkt ohne Unterpunkte erscheint als Zeile mit Pfeil. Bleibt bei zwei Ebenen, dann bleibt das Fly-out übersichtlich.
3. Icons setzt ihr wie oben beschrieben über den kleinen Pfeil rechts neben dem Menüpunkt. Sie stehen im Fly-out vor dem Text.
4. Klickt auf „Menü speichern“.

Fly-out mit dem Button verbinden

1. Öffnet in der linken Seitenleiste „CANVAYO“ → „CANVAYO“, den Reiter „Header“ und dort den Bereich „Call-to-Action“.
2. Tragt unter „Call-to-Action-Button“ bei „Text“ die Beschriftung ein. Sie steht auf dem Button und als Überschrift im Fly-out. Unter „Icon“ steht das Symbol davor.
3. Wählt bei „Link-Typ“ den Eintrag „Menü“ und darunter bei „Link (Menü)“ euer neues Menü.
4. Legt unter „Position“ fest, ob der Button im Hauptmenü oder in der Werkzeugleiste (Utility-Menü) steht.
5. Klickt auf „Aktualisieren“.

Einen zweiten Button richtet ihr darunter mit „Zusätzliches CTA-Element aktivieren“ ein. Er kann ebenfalls ein Fly-out öffnen. Ist „Zeige Button im Header auf mobilen Geräten“ eingeschaltet, bleibt der Button auf dem Handy im Kopf sichtbar. Sonst steht er im aufgeklappten Menü.

Die Einstellungen unter „CANVAYO“ → „CANVAYO“ speichert die Rolle Canvayo Admin. Das Menü selbst pflegen auch Personen mit der Rolle Canvayo User, Änderungen daran erscheinen sofort im Fly-out.

Checkliste: Das Fly-out erscheint nicht

• Button führt noch zum alten Ziel? Prüft, ob bei „Link-Typ“ „Menü“ gewählt und gespeichert ist.
• Fly-out ist leer? Im gewählten Menü stehen noch keine Einträge, oder es ist nicht gespeichert.
• Falsches Menü? Unter „Link (Menü)“ stehen alle Menüs eurer Website. Ein eindeutiger Name hilft beim Wählen.
• Noch der alte Stand zu sehen? Ladet die Seite in einem privaten Fenster, siehe Cache löschen.

Kommt ihr nicht weiter, schreibt uns, welcher Button das Fly-out öffnen soll und wie das Menü heißt.