Mega-Menü - Website mit KI

In diesem Leitfaden erstellen wir eine WordPress-Website mit Elementor Pro, einem kostenlosen Template und Plugins, die KI nutzen können. 
Der Fokus liegt auf einem Mega-Menü, das auf der ersten Menüebene horizontale Einträge hat und beim Anklicken der Haupteinträge eine zweite Menüleiste zeigt.Beiträge aus den Untermenüs werden in einer dynamischen Sidebar angezeigt. Wir verwenden dabei kostenlose Ressourcen, wo möglich.

1. Installation der Grundkomponenten

1. WordPress installieren: Richten Sie eine WordPress-Installation ein.
2. Kostenloses Astra-Theme aktivieren: Gehen Sie zu „Design > Themes“ und wählen Sie Astra als Basislayout.
3. Plugins installieren:
   • Elementor und Elementor Pro für die Gestaltung.
   • Max Mega Menu für das Mega-Menü.
   • Kostenloses KI-Plugin wie „AI Content Generator“ für die automatische Inhaltsverwaltung.

2. Erstellung des Mega-Menüs (Erste und Zweite Ebene)

Menü der 1. Ebene (Hauptmenüpunkte)

1. Zu Design > Menüs navigieren:
   • Erstellen Sie ein Hauptmenü mit den Einträgen: Blog, Tiervermittlung, Nachrichten, Medien, Katzen-Infos, Tier-Infos, Tierschutz, Gesundheit, Bücher.
2. Max Mega Menu aktivieren:
   • Aktivieren Sie das Mega-Menü unter den Menüeinstellungen für dieses Menü.

Menü der 2. Ebene (Untermenüpunkte für „Tiervermittlung“)

1. Untermenüpunkte hinzufügen:
   • Fügen Sie die Untermenüpunkte hinzu: Einzelkatzen, Katzenpaare, Katzenkinder, Handicap-Katzen, Patenschaft, Pflegestellen, Notfälle, Hunde.
2. Mega-Menü anpassen (Widget-basiert):
   • Gehen Sie zu „Mega Menu > Menü-Themes“ und gestalten Sie die Untermenüpunkte horizontal, sodass sie sichtbar werden, wenn Tiervermittlung angeklickt wird. 

3. Sidebar für die Beiträge der Kategorien

1. Benutzerdefinierte Sidebars erstellen:
   • Installieren Sie das Plugin „Custom Sidebars“.
   • Erstellen Sie für jede Kategorie (z. B. „Einzelkatzen“, „Katzenpaare“) eine eigene Sidebar.
2. Widgets zur Sidebar hinzufügen:
   • Ziehen Sie Widgets wie „Beiträge“ oder „Beitragskategorien“ in die Sidebar, um die Beiträge der jeweiligen Kategorie anzuzeigen.
3. Sidebar zuweisen:
   • Weisen Sie die Sidebars den entsprechenden Kategorien zu.

4. Medienbereich mit eigenem Menü

1. Medien-Menü erstellen:
   • Erstellen Sie ein separates Menü für den Punkt Medien mit Unterpunkten: Mediatheken, YouTube.
2. Mediatheken-Seite gestalten:
   • Fügen Sie eine Galerie mit Elementor hinzu, die Bilder und Videos anzeigt.
   • Nutzen Sie das Elementor-Widget „Video“ für YouTube-Inhalte. 

5. Aufbau der Seiten mit Elementor (Container & Widgets)

Erste Ebene: Hauptmenü (Horizontal)

• Container: Ein horizontaler Header-Container.
• Widget: Max Mega Menu Widget für das Hauptmenü.

Zweite Ebene: Untermenü (Horizontal für jeden Hauptpunkt)

• Container: Ein zweiter horizontaler Container unterhalb des Hauptmenüs.
• Widget: Mega-Menü-Widget mit dynamischen Untermenüpunkten (z. B. „Einzelkatzen“, „Katzenkinder“).

Sidebar (Links)

• Container: Vertikaler Container links auf der Seite.
• Widget: „Beiträge“-Widget von Elementor, das Beiträge der jeweiligen Kategorie dynamisch anzeigt.

Hauptinhalt-Bereich

• Container: Haupt-Container für den dynamischen Inhalt.
• Widget: Elementor-Widgets wie „Beiträge“, „Bild“, „Texteditor“ für Informationen.

6. Fertigstellung und Fein-Tuning

1. Responsivität testen:
   • Überprüfen Sie die Website auf Desktop, Tablet und Mobilgeräten mit dem Elementor-Customizer.
2. KI-Inhalte hinzufügen:
   • Nutzen Sie das „AI Content Generator“-Plugin, um automatisch Texte für Kategorien oder Beiträge wie „Katzenkinder“ oder „Gesundheit“ zu generieren.
3. SEO optimieren:
   • Installieren Sie ein SEO-Plugin wie RankMath, um die Website für Suchmaschinen zu optimieren.