--- title: "Elementor Mega Menü erstellen Tutorial" description: "In diesem Blog-Beitrags Tutorial zeige ich dir, wie du in wenigen Schritten ein professionelles Mega Menü mit Elementor erstellen kannst." url: "https://gress-marketing.de/blog/elementor-mega-menue-erstellen-tutorial/" canonical: "https://gress-marketing.de/blog/elementor-mega-menue-erstellen-tutorial/" post_type: "post" author: "Thomas Gress" date_published: "2024-07-24T22:35:00+00:00" date_modified: "2026-10-29T14:46:35+00:00" featured_image: "https://gress-marketing.de/wp-content/uploads/2024/07/Elementor-tutorial-mega-menue.jpg" categories: "Blog, Elementor" extractor: "classic" --- **Das Wichtigste in Kürze** - Mit Elementor Pro baust du ein Mega-Menü direkt im Theme Builder, ohne Zusatz-Plugin. - Du aktivierst das Feature in den Elementor-Einstellungen, legst eine neue Kopfzeile an und nutzt im Menü-Widget die Option „Dropdown Content“. - In die Dropdowns kannst du beliebige Inhalte setzen: Spalten mit Links, Bilder oder Buttons. - Prüfe das Menü unbedingt in der Tablet- und Mobilansicht. Inhaltsverzeichnis 1. [Mega-Menü Tutorial: Einfache Anleitung für das Erstellen eines Mega Menüs mit WordPress & Elementor](#mega-menue-tutorial-einfache-anleitung-fuer-das-erstellen-ei) 2. [Was erwartet dich in diesem Tutorial?](#was-erwartet-dich-in-diesem-tutorial) 3. [Elementor installieren und Mega-Menü aktivieren](#elementor-installieren-und-mega-menue-aktivieren) 4. [Einstellungen vornehmen](#einstellungen-vornehmen) 5. [Flexbox-Struktur auswählen](#flexbox-struktur-auswaehlen) 6. [Hinzufügen des Site-Logos und Anpassungen](#hinzufuegen-des-site-logos-und-anpassungen) 7. [Menü-Elemente hinzufügen und bearbeiten](#menue-elemente-hinzufuegen-und-bearbeiten) 8. [Schriftarten und Farben anpassen](#schriftarten-und-farben-anpassen) 9. [Dropdowns und Mega-Menü aktivieren](#dropdowns-und-mega-menue-aktivieren) 10. [Zuweisung von Verlinkungen und Inhalten](#zuweisung-von-verlinkungen-und-inhalten) 11. [Einstellungen für Hintergründe und Abstände](#einstellungen-fuer-hintergruende-und-abstaende) 12. [Menü-Design für Tablets und Smartphones optimieren](#menue-design-fuer-tablets-und-smartphones-optimieren) 13. [Überblick über das Erlernte](#ueberblick-ueber-das-erlernte) 14. [Bonus-Tipps für fortgeschrittene Anpassungen](#bonus-tipps-fuer-fortgeschrittene-anpassungen) 15. [Abschließende Worte und Kontaktmöglichkeiten](#abschlieende-worte-und-kontaktmglichkeiten) 16. [Häufige Fragen](#haeufige-fragen) ## Mega-Menü Tutorial: Einfache Anleitung für das Erstellen eines Mega Menüs mit WordPress & Elementor #### Einleitung ## **Was erwartet dich in diesem Tutorial?** In diesem Blog-Beitrag zeige ich dir, wie du in wenigen Schritten ein professionelles Mega-Menü mit Elementor erstellen kannst. Ganz egal, ob du ein Anfänger oder fortgeschritten bist, diese Anleitung wird dir helfen, ein ansprechendes und funktionales Menü zu gestalten. ## **Elementor installieren und Mega-Menü aktivieren** Bevor wir anfangen, stelle sicher, dass du Elementor auf deiner WordPress-Seite installiert hast. Gehe dann in die Elementor-Einstellungen und aktiviere das Mega-Menü. Speichere die Änderungen, bevor du weitermachst. ## **Einstellungen vornehmen** Nach der Aktivierung gehe in den Theme Builder und klicke auf „Add New“ für eine neue Kopfzeile. Die Standard-Titel kannst du schließen, da wir von Grund auf neu beginnen. #### Erstellen des Grundlayouts ## **Flexbox-Struktur auswählen** Zu Beginn fügen wir eine neue Struktur hinzu. Klicke dafür auf das Plus-Zeichen und wähle die Flexbox-Struktur aus, die wir für das Mega-Menü benötigen. ## **Hinzufügen des Site-Logos und Anpassungen** Klicke erneut auf das Plus-Zeichen, um dein Site-Logo hinzuzufügen. Wähle das gewünschte Logo aus deiner Mediathek und passe dessen Größe und Position an. ## **Menü-Elemente hinzufügen und bearbeiten** Nun fügen wir die einzelnen Menü-Elemente hinzu. Klicke auf „Element hinzufügen“ und wähle das WordPress-Menü aus. Um ein Mega-Menü zu erstellen, aktiviere das entsprechende Symbol und füge deine Menü-Punkte wie „Home“, „Produkte“, „Über uns“ und „Kontakt“ hinzu. > „Ein Mega-Menü lohnt sich ab etwa sechs bis acht Unterseiten pro Bereich. Darunter ist ein schlichtes Dropdown meist übersichtlicher.“ > Thomas Gress, WordPress- und Elementor-Experte ## **Schriftarten und Farben anpassen** Unter „Stil“ kannst du die Typografie und die Farben des Menüs anpassen. Wähle eine passende Schriftart, z.B. Poppins, und setze die Schriftgröße auf 18 Pixel. Die Farben kannst du ebenfalls nach deinem Geschmack oder deinem Branding anpassen. ## **Dropdowns und Mega-Menü aktivieren** Um ein Dropdown zu erstellen, klicke auf das gewünschte Menü-Element und aktiviere die Option „Dropdown Content“. Jetzt kannst du verschiedene Überschriften, Texte und Bilder hinzufügen. ## **Zuweisung von Verlinkungen und Inhalten** Füge die Links für deine Menü-Punkte hinzu. Diese können zu anderen Seiten deiner Website oder zu externen Seiten führen. **Hinzufügen von Containern und Überschriften**Um das Mega-Menü weiter zu gestalten, fügen wir mehrere Container hinzu. Passe die Breiten und Höhen der Container an, um das gewünschte Layout zu erreichen. Platzieren Sie Überschriften und listen Sie Elemente in den Containern auf. ## **Einstellungen für Hintergründe und Abstände** Setze Hintergrundbilder und -farben, um dein Mega-Menü visuell ansprechender zu gestalten. Passe die Abstände innerhalb der Container an, um ein geordnetes und professionelles Aussehen zu erzielen. ## **Menü-Design für Tablets und Smartphones optimieren** Elementor bietet eine Vorschaufunktion für verschiedene Geräte an. Stelle sicher, dass dein Mega-Menü auch auf Tablets und Smartphones gut aussieht. Passe die Breiten und Abstände nach Bedarf an, um eine optimale Benutzererfahrung auf allen Geräten zu gewährleisten. #### Zusammenfassung und Tipps ## **Überblick über das Erlernte** In diesem Tutorial haben wir die Grundlagen zur Erstellung eines Mega-Menüs mit Elementor durchlaufen. Du hast gelernt, wie du Flexbox-Strukturen erstellst, Menü-Elemente hinzufügst und anpasst, sowie erweiterte Funktionen wie Dropdowns und Verlinkungen einrichtest. ## **Bonus-Tipps für fortgeschrittene Anpassungen** Benutze den Box-Shadow-Effekt und Eckenradien, um deinem Menü einen besonderen Look zu verleihen. Auch Animationen wie Fade-In können hinzugefügt werden, um das Menü interaktiver zu gestalten. ## Abschließende Worte und Kontaktmöglichkeiten Falls du Themenvorschläge für weitere Videos hast, lass es mich wissen. Abonniere meinen Kanal und gib dem Video einen Daumen hoch, wenn es dir gefallen hat. Bis zum nächsten Mal, ciao, ciao! Das wäre der vollständige Blogartikel. Gibt es noch etwas, das du hinzufügen oder anpassen möchtest? ## Häufige Fragen ### Brauche ich Elementor Pro für ein Mega-Menü? Ja. Das Mega-Menü wird im Theme Builder als Kopfzeile gebaut, und der Theme Builder ist Teil von Elementor Pro. ### Funktioniert das Mega-Menü auch auf dem Smartphone? Ja, auf Mobilgeräten wird es als aufklappbares Menü dargestellt. Abstände und Schriftgrößen solltest du in der Mobilansicht von Elementor eigens anpassen. ### Was kann ich in ein Mega-Menü einbauen? Neben Links auch Bilder, Icons, Texte, Buttons oder ganze Container mit mehreren Spalten. So kannst du zum Beispiel Leistungen mit kurzer Beschreibung zeigen.