Elementor Mega Menü dynamisch machen

Wenn Sie in Elementor ein Mega Menü angelegt haben und möchten, dass der Menüeintrag „Tiervermittlung“ als Mega Menü fungiert, in dem die Untermenü-Einträge Einzelkatzen, Katzenpaare, Katzenkinder, und Handicap Katzen angezeigt werden, können Sie dies dynamisch einrichten. Hier ist eine sehr ausführliche Schritt-für-Schritt-Anleitung, wie Sie dies mit dynamischen Inhalten umsetzen, sodass nur die Titel der Beiträge angezeigt werden und beim Anklicken der gesamte Beitrag geöffnet wird.

1. Voraussetzungen

Bevor Sie starten, stellen Sie sicher, dass:

• Elementor Pro installiert ist (für dynamische Inhalte und Mega Menü erforderlich).
• Die Kategorien Einzelkatzen, Katzenpaare, Katzenkinder, und Handicap Katzen in WordPress erstellt wurden.
• Beiträge den entsprechenden Kategorien zugeordnet sind.
• Das Mega Menü korrekt eingerichtet ist (z. B. mit einem Menüpunkt „Tiervermittlung“, der als Mega Menü aktiviert wurde).

2. Mega Menü für „Tiervermittlung“ konfigurieren

Schritt 1: Menüeintrag als Mega Menü aktivieren

1. Gehen Sie zu Design > Menüs in Ihrem WordPress-Dashboard.
2. Wählen Sie das Menü aus, in dem „Tiervermittlung“ enthalten ist.
3. Aktivieren Sie für den Menüpunkt „Tiervermittlung“ die Option Mega Menü aktivieren (je nach Mega Menü-Plugin, z. B. „Elementor Mega Menu“ oder „JetMenu“).
4. Speichern Sie die Änderungen.

Schritt 2: Mega Menü-Inhalt bearbeiten

1. Öffnen Sie den Elementor-Editor und bearbeiten Sie den Mega Menü-Inhalt für „Tiervermittlung“.
   • Je nach Plugin klicken Sie entweder auf den Menüpunkt „Tiervermittlung“ oder wählen die Option Bearbeiten mit Elementor für das Mega Menü.
2. Sie gelangen in den Bereich, in dem Sie den Inhalt des Mega Menüs für „Tiervermittlung“ gestalten können.

3. Dynamische Inhalte für die Kategorien erstellen

Schritt 1: Posts Widget hinzufügen

1. Ziehen Sie das Posts Widget (Beitrags-Widget) aus der Elementor-Widget-Liste in den Mega Menü-Bereich.
2. Platzieren Sie es an der gewünschten Stelle im Mega Menü.

Schritt 2: Beiträge dynamisch filtern

1. Gehen Sie in den Inhalts-Tab des Posts Widgets.
2. Unter Query (Abfrage):
   • Include By (Einschließen nach): Wählen Sie Term.
   • Term: Fügen Sie hier die gewünschte Kategorie ein, z. B. „Einzelkatzen“.
   • Mehrere Kategorien: Wenn Sie alle Kategorien (Einzelkatzen, Katzenpaare, Katzenkinder, Handicap Katzen) anzeigen möchten, erstellen Sie separate Widgets für jede Kategorie oder kombinieren Sie die Kategorien in der Abfrage.
3. Anzahl der Beiträge: Begrenzen Sie die Anzahl der Beiträge (z. B. auf 5 oder 10, je nach gewünschtem Layout).

Schritt 3: Nur Titel anzeigen

1. Gehen Sie in den Layout-Tab des Posts Widgets.
2. Stellen Sie den Skin (Design) auf „Classic“ oder „Minimal“ ein, je nach gewünschter Darstellung.
3. Deaktivieren Sie alle unnötigen Elemente wie Beitragsbild, Meta-Informationen (Autor, Datum), Auszug oder Pagination (falls nicht gewünscht).
4. Lassen Sie nur den Titel der Beiträge aktiv.

Schritt 4: Dynamische Verlinkung

1. Stellen Sie sicher, dass die Option Link aktiviert ist. Dies verknüpft den Beitragstitel automatisch mit dem vollständigen Beitrag.
   • Dadurch gelangen die Benutzer beim Anklicken des Titels direkt zur Einzelansicht des Beitrags.

4. Layout und Design des Mega Menüs anpassen

Schritt 1: Überschrift hinzufügen

1. Fügen Sie für jede Kategorie eine Überschrift hinzu, um die Abschnitte zu strukturieren.
   • Beispiel: „Einzelkatzen“, „Katzenpaare“, „Katzenkinder“, „Handicap Katzen“.
2. Verwenden Sie das Überschriften-Widget und geben Sie den jeweiligen Kategorienamen ein.
3. Optional: Verwenden Sie dynamische Inhalte, um den Kategorienamen automatisch zu laden:
   • Wählen Sie als dynamischen Inhalt Archive Title aus.

Schritt 2: Beiträge in Spalten anordnen

1. Teilen Sie den Mega Menü-Bereich in Spalten auf:
   • Eine Spalte für jede Kategorie (z. B. Einzelkatzen, Katzenpaare usw.).
2. Ziehen Sie ein Posts Widget in jede Spalte und konfigurieren Sie die Abfrage, um nur Beiträge aus der jeweiligen Kategorie anzuzeigen.

Schritt 3: Stil anpassen

1. Gehen Sie in den Stil-Tab jedes Widgets und passen Sie folgende Optionen an:
   • Abstände: Stellen Sie den Abstand zwischen den Beiträgen ein.
   • Schriftart: Wählen Sie eine passende Schriftart und -größe für die Titel.
   • Farben: Passen Sie die Schriftfarbe und Hover-Farbe an, um visuelle Rückmeldungen zu geben.
   • Hintergrund: Optional können Sie jede Kategorie mit einem farbigen Hintergrund versehen.

5. Testen des Mega Menüs

Schritt 1: Mega Menü testen

1. Speichern Sie Ihre Änderungen und testen Sie das Mega Menü im Frontend.
2. Überprüfen Sie, ob:
   • Die Kategorien (Einzelkatzen, Katzenpaare, Katzenkinder, Handicap Katzen) korrekt angezeigt werden.
   • Nur die Titel der Beiträge sichtbar sind.
   • Die Titel korrekt mit den vollständigen Beiträgen verlinkt sind.

Schritt 2: Responsivität testen

1. Überprüfen Sie das Mega Menü auf verschiedenen Geräten (Desktop, Tablet, Mobil).
2. Passen Sie ggf. die Spaltenbreite oder Schriftgröße an, um die Lesbarkeit auf kleineren Bildschirmen zu verbessern.

6. Zusätzliche Optimierungen

A) Hover-Effekte hinzufügen

• Fügen Sie Animationen oder Hover-Effekte hinzu, um das Menü interaktiver zu gestalten:
  • Beispiel: Der Titel ändert die Farbe oder unterstreicht sich, wenn der Benutzer mit der Maus darüber fährt.
  • Einstellung: Gehen Sie in den Stil-Tab > Typografie und aktivieren Sie die Hover-Farbe.

B) Sticky Mega Menü

• Aktivieren Sie den Sticky-Effekt, damit das Mega Menü beim Scrollen sichtbar bleibt:
  • Einstellung: Erweitert > Bewegungseffekte > Sticky.

C) Pagination (Seitenumbruch)

• Wenn Sie viele Beiträge in einer Kategorie haben, können Sie die Pagination aktivieren, damit Benutzer durch mehrere Seiten blättern können.

D) Benutzerdefinierte CSS

• Wenn Sie zusätzliche Designanpassungen benötigen, können Sie benutzerdefiniertes CSS verwenden.
  • Beispiel:

css

    .elementor-widget-posts .elementor-post__title:hover {

      color: #ff6600;

      text-decoration: underline;

    }

    ```

Zusammenfassung 

1. Mega Menü aktivieren: Aktivieren Sie das Mega Menü für den Menüpunkt „Tiervermittlung“.
2. Posts Widget dynamisch machen: Fügen Sie dynamische Inhalte hinzu, indem Sie die Abfrage auf die Kategorien „Einzelkatzen“, „Katzenpaare“, „Katzenkinder“ und „Handicap Katzen“ beschränken.
3. Nur Titel anzeigen: Zeigen Sie ausschließlich die Titel der Beiträge an, und verlinken Sie diese automatisch mit dem vollständigen Beitrag.
4. Layout und Design anpassen: Ordnen Sie die Kategorien in Spalten an und passen Sie das Design für eine klare Struktur an.
5. Testen: Überprüfen Sie das Mega Menü auf Funktionalität und Responsivität.

Mit diesen Schritten haben Sie ein dynamisches Mega Menü erstellt, das die gewünschten Kategorien und Beiträge übersichtlich darstellt.