Mega-Menü - Vorbereitungen

---

---

Das WordPress Menü löschen und
das Mega-Menü Widget in den rechten Innencontainer ziehen.

Jetzt können Sie Ihr Menü ganz individuell zusammenstellen.

---

---

Menü zusammenstellen

Menü bearbeiten / Inhalt / Layout

zur Erinnerung, diese Menüeinträge waren im WordPress Menü enthalten, die wir nun hierhin übertragen

Menüeintrag Startseite

Bei Link geben Sie den Namen einer vorhandenen Seite an und der Link wird automatisch gebildet oder Sie geben den vollständigen Link ein.

---

---

Alle Menüeinträge wurden erstellt

---

---

Menü konfigurieren

Ausrichtung

Menü bearbeiten / Inhalt / Layout / Item Position

---

 

---

Mega-Menü für Shop erstellen

Menüeintrag Shop anklicken / Dropdown-Content einschalten

Der Menüeintrag Shop erhält ein kleines Dreieck

Wenn Sie darauf klicken, öffnet sich ein Container, nur für den Eintrag SHOP für das Mega-Menü.
In diesen Container können Sie nun jedes beliebige Widget einfügen und gestalten.

---

---

Mega-Menü Container konfigurieren

Menü bearbeiten / Inhalt / Layout

Item Position : rechts (Artikelposition)
Inhaltsbreite. Fit to content (An Inhalt anpassen)
Content Horizontal Position: End

 

 

 

 

 

Mega-Menü - Erstes Menü einfügen

Einen inneren Container einfügen

Einen weiteren Container per Duplizieren erstellen

Beide Container werden untereinander angezeigt

---

 

---

Beide innere Container nebeneinander

Äußeren Mega-Container bearbeiten / Layout / Elemente / Richtung horizontal

---

---

Linker Container erhält Inhalt

Icon, Überschrift

Icon + Überschrift nebeneinander

(Linker) Container bearbeiten / Layout / Elemente / Richtung

---

---

Icon und Schrift zu nahe beieinander

Lücken und Zentriert einstellen

---

---

Icon = Auto

Icon bearbeiten / Inhalt / Icon / Car-Icon aus Icon-Bibliothek auswählen

---

---

Überschrift als Text

---

---

Hintergrund beim Hovern hellgrau

linken Innencontainer bearbeiten / Stil / Hintergrund / Hover / 
Farbe + Second Color

---

 

---

Container erhält abgerundeten Rahmen

linken Innencontainer bearbeiten / Stil / Rahmen / Normal / 

Bei Hover die gleichen Einstellungen

---

---

Linken Container duplizieren

Den überflüssigen rechten leeren Container löschen

 

---

 

---

Icon und Text austauschen

---

---

Container zu den Angeboten verlinken

Inneren Container bearbeiten / Layout / Zusätzliche Optionen
HTML-Tag

---

---

 Mega-Menü konfigurieren

Mega-Menü erhält eine bestimmte Breite

Äußerer Container bearbeiten / Layout / Container /
Inhaltsbreite: Volle Breite / Breite: 60%

Falls die Abstände Icon zum Text zu klein sind, müssen Sie die Lücken vergrößern

---

---

Mega-Menü - wie öffnen?

Menü-Container bearbeiten / Inhalt / Drop down Effekt 
Open On: HOVER oder CLICK

---

 

Aufbau Split-Menü

Aufbau eines Programms mit WordPress und Elementor Pro: Fokus auf das Menü

Um das gewünschte Menü mit WordPress und Elementor Pro zu erstellen, das eine zweistufige Navigation bietet und Beiträge in der Sidebar anzeigt, folgen Sie diesen Schritten:

1. Hauptmenü (Erste Ebene) erstellen

1. WordPress-Menü erstellen:
   • Gehen Sie in Ihrem WordPress-Dashboard zu Design > Menüs.
   • Erstellen Sie ein neues Menü, z. B. "Hauptmenü".
   • Fügen Sie die Einträge der ersten Ebene hinzu: Bog, Tiervermittlung, Nachrichten, Medien, Katzen-Infos, Tier-Infos, Tierschutz, Gesundheit, Bücher.
   • Speichern Sie das Menü.
2. Nicht anklickbare Elternmenüs (optional):
   • Wenn die Einträge der ersten Ebene nicht anklickbar sein sollen, können Sie benutzerdefinierte Links verwenden:
     • Geben Sie # als URL ein und den Namen des Menüeintrags als Linktext.
3. Menü in Elementor einfügen:
   • Öffnen Sie den Elementor-Editor und bearbeiten Sie den Header Ihrer Website.
   • Fügen Sie ein "Nav Menu"-Widget hinzu und wählen Sie das erstellte Menü aus 1.
   • Passen Sie das Design (z. B. Schriftart, Farben) nach Ihren Wünschen an.

---

 

---

2. Untermenüs (Zweite Ebene) hinzufügen

1. Untermenüeinträge erstellen:
   • Gehen Sie zurück zu Design > Menüs.
   • Fügen Sie die Untermenüeinträge für jeden Hauptmenüpunkt hinzu. Beispiel für "Tiervermittlung":
     • Einzelkatzen, Katzenpaare, Katzenkinder, Handicap-Katzen, Patenschaft, Pflegestellen, Notfälle, Hunde.
   • Ziehen Sie die Untermenüeinträge unter den entsprechenden Hauptmenüpunkt und rücken Sie sie ein, um sie als Untermenü zu definieren.
2. Dropdown-Menü aktivieren:
   • In Elementor können Sie Dropdown-Menüs aktivieren und gestalten:
     • Wählen Sie das "Nav Menu"-Widget aus.
     • Aktivieren Sie die Dropdown-Optionen und passen Sie die Animationen und das Design an.

---

 

---

3. Sidebar mit Beiträgen der Kategorien

1. Kategorien erstellen:
   • Gehen Sie zu Beiträge > Kategorien und erstellen Sie Kategorien für die Untermenüeinträge (z. B. "Einzelkatzen", "Katzenpaare" usw.).
2. Beiträge zu Kategorien zuweisen:
   • Erstellen oder bearbeiten Sie Beiträge und weisen Sie sie den entsprechenden Kategorien zu.
3. Sidebar mit Beiträgen anzeigen:
   • Gehen Sie zu Design > Widgets.
   • Fügen Sie ein "Beiträge"-Widget oder ein "Kategorien"-Widget zur Sidebar hinzu.
   • Konfigurieren Sie das Widget so, dass es Beiträge aus der aktuell ausgewählten Kategorie anzeigt.
4. Sidebar in Elementor einfügen:
   • Öffnen Sie den Elementor-Editor und bearbeiten Sie die Seitenvorlage.
   • Fügen Sie ein "Sidebar"-Widget hinzu, um die WordPress-Sidebar anzuzeigen.

---

 

---

4. Verknüpfung der Menüs mit der Sidebar

1. Dynamische Sidebar-Inhalte:
   • Verwenden Sie Elementor Pro, um dynamische Inhalte basierend auf der Kategorie anzuzeigen:
     • Fügen Sie ein "Beiträge"-Widget hinzu und wählen Sie die Option "Beiträge aus aktueller Kategorie anzeigen".
   • Dies sorgt dafür, dass die Sidebar automatisch die Beiträge der Kategorie anzeigt, die mit dem Untermenüpunkt verknüpft ist.
2. Testen der Navigation:
   • Testen Sie die Navigation, um sicherzustellen, dass:
     • Das Hauptmenü die Untermenüs korrekt anzeigt.
     • Die Sidebar die richtigen Beiträge basierend auf der Kategorie lädt.

Zusätzliche Tipps

• Design-Optimierung: Nutzen Sie die Design-Optionen von Elementor Pro, um das Menü und die Sidebar optisch ansprechend zu gestalten.
• Responsives Design: Stellen Sie sicher, dass das Menü auf mobilen Geräten gut funktioniert. Elementor bietet Optionen für ein responsives Menü-Design.

Mit diesen Schritten können Sie ein zweistufiges Menü mit dynamischen Sidebar-Inhalten erstellen, das perfekt auf Ihre Anforderungen zugeschnitten ist!

---

---

Menüleiste 2. Ebene

Jeder Menüeintrag der 2. Ebene ruft in der linken Sidebar Beiträge der entsprechenden Kategorie auf. Erkläre Schritt für Schritt den Aufbau, welche Container und welche Widgets.

Zweites Menü in einer horizontalen Leiste für jeden Hauptmenüpunkt

Um das gewünschte Verhalten umzusetzen, bei dem das zweite Menü (z. B. "Einzelkatzen, Katzenpaare" für "Tiervermittlung" oder "Mediatheken, YouTube" für "Medien") nur sichtbar ist, wenn ein spezifischer Hauptmenüpunkt (erste Ebene) ausgewählt wird, gehen Sie wie folgt vor:

1. Vorbereitung: Erstellen der zweiten Menüs

1. Erstellen von separaten Menüs für die zweite Ebene:
   • Gehen Sie zu Design > Menüs.
   • Erstellen Sie jeweils ein eigenes Menü für jeden Hauptmenüpunkt der ersten Ebene. Beispiele:
     • Menü für Tiervermittlung: Einzelkatzen, Katzenpaare, Katzenkinder, Handicap-Katzen, Patenschaft, Pflegestellen, Notfälle, Hunde.
     • Menü für Medien: Mediatheken, YouTube.
   • Speichern Sie jedes Menü.
2. Kategoriezuweisungen (optional):
   • Um die Beiträge in der Sidebar dynamisch anzuzeigen, stellen Sie sicher, dass die Menüpunkte (z. B. "Einzelkatzen" oder "Mediatheken") zu Kategorien oder entsprechenden Seiten/Beiträgen verlinken.

---

 

---

2. Elementor: Zweite Menüleiste als horizontalen Container hinzufügen

1. Header- oder Template-Bearbeitung:
   • Gehen Sie zu Templates > Theme Builder in Elementor.
   • Bearbeiten Sie den Header oder erstellen Sie eine neue Vorlage, die für die zweite Menüleiste verwendet wird.
2. Horizontaler Container für das zweite Menü:
   • Fügen Sie einen neuen Container (Flexbox) oder eine Abschnittsreihe oberhalb oder unterhalb des Hauptmenüs hinzu.
   • In diesen Container fügen Sie ein Nav Menu-Widget ein.
   • Wählen Sie das entsprechende Menü für die zweite Ebene aus (z. B. "Menü für Tiervermittlung").
3. Design-Anpassungen:
   • Stellen Sie sicher, dass das zweite Menü als horizontale Leiste dargestellt wird:
     • Ausrichtung: Horizontal.
     • Abstand und Farben: Passen Sie die Abstände, Farben und Schriftarten an, um das Design der Hauptnavigation zu ergänzen.

---

 

---

3. Bedingte Sichtbarkeit für die zweite Menüleiste

Damit das zweite Menü nur bei Auswahl eines bestimmten Hauptmenüpunktes (z. B. "Medien" oder "Tiervermittlung") angezeigt wird, nutzen Sie Elementor Pro's Bedingungen und dynamische Anzeigeoptionen.

1. Dynamische Sichtbarkeit aktivieren:
   • Wählen Sie den Container oder Abschnitt mit dem zweiten Menü aus.
   • Gehen Sie in den Erweitert-Tab und scrollen Sie zu Bedingungen > Dynamische Sichtbarkeit.
   • Aktivieren Sie die Option "Dynamische Sichtbarkeit".
2. Anzeigebedingungen festlegen:
   • Legen Sie die Bedingungen fest, z. B.:
     • Zeige Menü für Tiervermittlung nur, wenn die Seite "Tiervermittlung" aktiv ist.
       • Bedingung: Aktuelle Seite == "Tiervermittlung"
     • Zeige Menü für Medien nur, wenn die Seite "Medien" aktiv ist.
       • Bedingung: Aktuelle Seite == "Medien"
3. Für andere Menüs wiederholen:
   • Fügen Sie für jeden Hauptmenüpunkt (erste Ebene) einen eigenen Container mit einem entsprechenden zweiten Menü hinzu.
   • Definieren Sie jeweils individuelle Sichtbarkeitsbedingungen basierend auf der spezifischen Seite oder Kategorie.

---

 

---

4. Sidebar für dynamische Inhalte

1. Dynamische Sidebar für Untermenü-Kategorien:
   • Gehen Sie in Elementor zur Bearbeitung des Seiten-Layouts.
   • Fügen Sie ein Beiträge-Widget oder Archiv-Widget in die Sidebar ein.
   • Konfigurieren Sie es so, dass es nur Beiträge der aktuell aktiven Kategorie anzeigt:
     • Abfrage (Query): Kategorie == Aktuelle Kategorie.
2. Testen der dynamischen Sidebar:
   • Navigieren Sie zu einem Untermenüpunkt (z. B. "Einzelkatzen").
   • Überprüfen Sie, ob die Sidebar automatisch Beiträge aus der Kategorie "Einzelkatzen" anzeigt.

---

 

---

5. Testen und Feinschliff

1. Prüfen der Navigation:
   • Testen Sie, ob die zweite Menüleiste korrekt angezeigt wird, wenn Sie einen Hauptmenüpunkt der ersten Ebene auswählen.
   • Stellen Sie sicher, dass die zweite Leiste verschwindet, wenn Sie auf eine andere Seite wechseln.
2. Optimierung für mobile Geräte:
   • Nutzen Sie Elementor's Responsive-Ansicht, um sicherzustellen, dass die zweite Menüleiste auch auf Mobilgeräten gut funktioniert:
     • Bei Bedarf können Sie die zweite Menüleiste als Dropdown-Menü für mobile Geräte gestalten.

Zusammenfassung

• Hauptmenü: Zeigt die Einträge der ersten Ebene (z. B. "Tiervermittlung", "Medien").
• Zweites Menü: Zeigt die Einträge der zweiten Ebene (z. B. "Einzelkatzen", "Mediatheken") in einer horizontalen Leiste, die nur bei Auswahl des entsprechenden Hauptmenüpunktes angezeigt wird.
• Dynamische Sidebar: Zeigt automatisch Beiträge basierend auf der aktiven Kategorie an.

Mit diesen Schritten haben Sie ein zweistufiges Menü mit dynamischen Inhalten perfekt aufgebaut.

Mega-Menü mit dynamische Sidebar

Um das gewünschte Menü mit WordPress und Elementor Pro zu erstellen, bei dem ein Mega-Menü verwendet wird und Beiträge in der Sidebar dynamisch angezeigt werden, folgen Sie dieser Schritt-für-Schritt-Anleitung. Hierbei wird auch das Mega-Menü-Widget genutzt.

---

---

1. Hauptmenü (Erste Ebene) erstellen

Schritt 1: Menüeinträge für die erste Ebene erstellen

1. Gehen Sie in WordPress zu Design > Menüs.
2. Erstellen Sie ein neues Menü, z. B. "Hauptmenü".
3. Fügen Sie die Einträge der ersten Ebene hinzu:
   Bog, Tiervermittlung, Nachrichten, Medien, Katzen-Infos, Tier-Infos, Tierschutz, Gesundheit, Bücher.
4. Speichern Sie das Menü.

---

 

---

2. Mega-Menü für die zweite Ebene

Schritt 1: Mega-Menü aktivieren

1. Installieren Sie ein Mega-Menü-Plugin, falls nötig (z. B. "ElementsKit" oder "Premium Addons for Elementor", die Mega-Menü-Unterstützung bieten).
2. Gehen Sie zu Design > Menüs und aktivieren Sie die Mega-Menü-Option für das Hauptmenü (oft durch Aktivieren eines Kontrollkästchens beim Menüpunkt).

Schritt 2: Menüstruktur für die zweite Ebene

1. Erstellen Sie Untermenüs für jeden Hauptmenüpunkt. Beispiel für "Tiervermittlung":
   • Einzelkatzen, Katzenpaare, Katzenkinder, Handicap-Katzen, Patenschaft, Pflegestellen, Notfälle, Hunde.
   • Ziehen Sie diese Untermenüeinträge unter den Hauptmenüpunkt "Tiervermittlung" und rücken Sie sie ein.
2. Wiederholen Sie dies für andere Hauptmenüpunkte, z. B. "Medien":
   • Mediatheken, YouTube.

---

 

---

3. Mega-Menü mit Elementor erstellen

Schritt 1: Einen Mega-Menü-Bereich gestalten

1. Öffnen Sie den Elementor-Editor und bearbeiten Sie den Header Ihrer Website.
2. Fügen Sie ein Nav Menu-Widget ein (Elementor Pro erforderlich).
3. Aktivieren Sie anhand des Mega-Menü-Plugins die Mega-Menü-Funktion für die Untermenüs.

Schritt 2: Mega-Menü-Inhalt bearbeiten

• Container für das Mega-Menü:
  • Für jeden Hauptmenüpunkt (z. B. "Tiervermittlung") können Sie ein Mega-Menü erstellen, indem Sie einen breiten Dropdown-Container hinzufügen.
  • In diesem Container fügen Sie die Untermenüeinträge horizontal hinzu, z. B.:
    • Einzelkatzen, Katzenpaare, Katzenkinder, Handicap-Katzen, Patenschaft, Pflegestellen, Notfälle, Hunde.
• Widgets innerhalb des Mega-Menüs:
  • Nutzen Sie Text-Widgets oder Icon-Boxen, um die Untermenüeinträge optisch ansprechend zu gestalten.
  • Sie können auch Bilder oder dynamische Inhalte hinzufügen, falls nötig.

Schritt 3: Sichtbarkeit steuern

• Stellen Sie sicher, dass die Mega-Menü-Inhalte nur sichtbar sind, wenn der Hauptmenüpunkt aktiviert wird:
  • Dies geschieht automatisch, wenn das Mega-Menü-Widget korrekt konfiguriert ist.

---

 

---

4. Sidebar mit dynamischen Beiträgen

Schritt 1: Kategorien erstellen

1. Gehen Sie zu Beiträge > Kategorien und erstellen Sie Kategorien für die Untermenüeinträge, z. B.:
   • Einzelkatzen, Katzenpaare, Katzenkinder, Handicap-Katzen, usw..
2. Weisen Sie Beiträge den entsprechenden Kategorien zu.

Schritt 2: Sidebar-Widget hinzufügen

1. Öffnen Sie den Elementor-Editor und bearbeiten Sie die Seitenvorlage.
2. Fügen Sie ein Beiträge-Widget oder Archiv-Widget in die Sidebar ein.
3. Dynamische Abfrage einrichten:
   • Konfigurieren Sie das Widget so, dass es Beiträge aus der aktuellen Kategorie anzeigt:
     • Abfrage (Query): Kategorie == Aktuelle Kategorie.

Schritt 3: Sidebar dynamisch gestalten

• Passen Sie das Design der Sidebar an, um die Beiträge übersichtlich anzuzeigen.
• Optional: Fügen Sie ein Such-Widget oder ein Kategorien-Widget hinzu, um die Navigation zu erleichtern.

---

 

---

5. Dynamische Sichtbarkeit für die Mega-Menüleiste

1. Mega-Menü nur bei Auswahl eines Hauptmenüeintrags anzeigen:
   • Nutzen Sie Elementor Pro's Bedingte Sichtbarkeit.
   • Wählen Sie den Mega-Menü-Container aus und aktivieren Sie Dynamische Sichtbarkeit:
     • Bedingung: Aktuelle Seite == "Tiervermittlung" (bzw. der Hauptmenüpunkt, den Sie bearbeiten).
   • Wiederholen Sie dies für andere Hauptmenüpunkte, z. B. "Medien".
2. Mega-Menü testen:
   • Navigieren Sie durch die Seite und überprüfen Sie, ob die Mega-Menüleiste nur erscheint, wenn ein spezifischer Hauptmenüpunkt angeklickt wird.

---

 

---

6. Mobile Optimierung

1. Responsive Mega-Menü:
   • In Elementor können Sie das Mega-Menü für mobile Geräte optimieren:
     • Aktivieren Sie ein Dropdown-Menü oder ein Hamburger-Menü für Mobilgeräte.
2. Testen Sie die Menüstruktur auf verschiedenen Bildschirmgrößen.

Zusammenfassung der Widgets und Container

• Hauptmenü (erste Ebene):
  • Verwenden Sie das Nav Menu-Widget und richten Sie es als Mega-Menü ein.
• Mega-Menü (zweite Ebene):
  • Nutzen Sie Container innerhalb des Mega-Menüs für die Untermenüeinträge.
  • Widgets: Text-Widget, Icon-Boxen oder dynamische Inhalte.
• Sidebar:
  • Fügen Sie ein Beiträge-Widget hinzu, das dynamische Inhalte basierend auf der Kategorie anzeigt.

Mit diesen Schritten erstellen Sie ein professionelles Mega-Menü mit dynamischen Inhalten und einer Sidebar, die perfekt auf Ihre Anforderungen zugeschnitten ist.

---

 

---

Erklärung: Widget "Seitenleiste" und Widget "Off Canvas Content"

Im Folgenden erkläre ich die beiden Widgets ausführlich, beschreibe ihre Einstellungen und gebe fünf Beispiele, wie sie eingesetzt werden können.

1. Widget "Seitenleiste" (Sidebar Widget)

Das Seitenleisten-Widget in Elementor oder WordPress ermöglicht es, eine bestehende WordPress-Seitenleiste in Ihre Seite oder Vorlage zu integrieren. Seitenleisten sind flexible Bereiche, in denen dynamische Inhalte wie Widgets (z. B. Kategorien, Suche, Beiträge) angezeigt werden können.

Einstellungen für das Seitenleisten-Widget

1. Seitenleiste auswählen:
   • Wählen Sie eine der in WordPress erstellten Seitenleisten aus.
   • Standardmäßig gibt es oft eine Haupt-Seitenleiste ("Main Sidebar"), aber Sie können zusätzliche Seitenleisten erstellen, z. B. für spezifische Kategorien.
2. Widget-Bereich anpassen:
   • Die Inhalte der Seitenleiste werden über Design > Widgets in WordPress konfiguriert. Hier können Sie Widgets wie Suchfelder, Kategorien, Beiträge oder benutzerdefinierte HTML-Inhalte hinzufügen.
3. Design-Einstellungen in Elementor:
   • Abstände: Sie können Abstände (Padding/Margin) um das Widget herum definieren.
   • Hintergrund: Legen Sie Farben oder Bilder als Hintergrund für die Seitenleiste fest.
   • Rahmen: Fügen Sie Rahmen und Schattierungen hinzu, um die Seitenleiste hervorzuheben.
   • Responsivität: Steuern Sie, ob die Seitenleiste auf bestimmten Geräten (Desktop/Mobil/Tablet) angezeigt wird.

Beispiele für das Seitenleisten-Widget

1. Blog-Seitenleiste:
   • Zeigen Sie eine Liste der neuesten Blogbeiträge an, die automatisch aktualisiert wird, wenn neue Beiträge veröffentlicht werden.
2. Kategorie-Filter:
   • Fügen Sie ein Kategorien-Widget hinzu, um Benutzern die Navigation durch Beitragskategorien zu erleichtern.
3. Benutzerdefinierte HTML-Widgets:
   • Nutzen Sie die Seitenleiste, um Werbebanner oder benutzerdefinierten HTML-Code (z. B. ein Newsletter-Formular) anzuzeigen.
4. Suchfeld:
   • Ermöglichen Sie Benutzern, Inhalte Ihrer Website schnell zu durchsuchen.
5. Social-Media-Links:
   • Zeigen Sie Verknüpfungen zu Ihren Social-Media-Profilen in der Seitenleiste an.

---

 

---

8. Widget "Off Canvas Content"

Das Off Canvas Content Widget (häufig in Elementor Pro oder durch Add-ons wie "Elements Kit" verfügbar) ermöglicht es, Inhalte in einem ausklappbaren Bereich anzuzeigen, der außerhalb des sichtbaren Bereichs der Seite liegt. Dieser Bereich wird oft durch einen Button oder ein Icon geöffnet und eignet sich ideal für Menüs, Filter oder zusätzliche Inhalte.

Einstellungen für das Off Canvas Widget

1. Trigger (Auslöser):
   • Wählen Sie aus, wie der Off-Canvas-Inhalt geöffnet werden soll:
     • Button: Ein Button öffnet den Off-Canvas-Bereich.
     • Icon: Ein Icon (z. B. Hamburger-Menü) dient als Auslöser.
     • Benutzerdefinierter Trigger: Sie können benutzerdefinierte Links oder Elemente als Auslöser verwenden.
2. Position des Off-Canvas-Bereichs:
   • Links, Rechts, Oben oder Unten: Bestimmen Sie, von welcher Seite der Off-Canvas-Bereich hereinschieben soll.
   • Breite oder Höhe: Legen Sie fest, wie groß der Off-Canvas-Bereich sein soll.
3. Inhalte:
   • Fügen Sie beliebige Inhalte in den Off-Canvas-Bereich ein, z. B. Widgets, Texte, Bilder oder Menüs.
4. Design-Einstellungen:
   • Hintergrund: Definieren Sie die Hintergrundfarbe oder ein Bild für den Off-Canvas-Bereich.
   • Schließen-Button: Aktivieren Sie einen Button, um den Off-Canvas-Bereich zu schließen.
   • Animationen: Legen Sie Animationen für das Herein- und Herausgleiten des Off-Canvas-Bereichs fest.
5. Responsivität:
   • Stellen Sie sicher, dass der Off-Canvas-Bereich auf mobilen Geräten genauso gut funktioniert wie auf Desktops.

---

 

---

9. Beispiele für das Off Canvas Widget

1. Mobile Navigation:
   • Verwenden Sie das Off-Canvas-Widget, um ein Hamburger-Menü für mobile Geräte zu erstellen.
2. Produktfilter in einem Shop:
   • Zeigen Sie Filteroptionen (z. B. nach Kategorie, Preis) für einen WooCommerce-Shop in einem Off-Canvas-Bereich an.
3. Newsletter-Formular:
   • Platzieren Sie ein Newsletter-Formular in einem Off-Canvas-Bereich, das per Button geöffnet wird.
4. Kontaktinformationen:
   • Erstellen Sie eine ausklappbare Kontaktleiste mit Telefonnummern, E-Mail-Adresse und einem Kontaktformular.
5. Zusätzliche Inhalte für Blog oder Produkte:
   • Zeigen Sie weiterführende Informationen zu Blogbeiträgen oder Produkten in einem Off-Canvas-Bereich an, ohne die Hauptseite zu überladen.

---