So erstellen Sie ein Mega-Menü mit Elementor und ElementsKit

So erstellen Sie ein Mega-Menü mit Elementor und Elementkit

Können Sie sich eine große Website ohne ein Mega-Menü vorstellen? 
Auf keinen Fall!

Die Menschen legen mehr Wert auf die Zeit, die sie online verbringen. Das zeigt eine aktuelle Studie  94% der Webbenutzer Sagen wir, einfache Navigation sei das nützlichste Merkmal einer Website.
Fast jeder, oder?

Um die Benutzerfreundlichkeit und die Fähigkeit, den Benutzer einzubeziehen, zu erhöhen, spielt das Mega-Menü eine entscheidende Rolle bei der Hervorhebung der Menschen. Ein einfaches, aber funktionelles Mega-Menü wird Benutzer dazu ermutigen, noch mehr Bereiche Ihrer Website zu erkunden und sofort Maßnahmen zu ergreifen.

Sogar die größten E-Commerce-Websites wie Amazon und eBay verwenden Megamenüs, damit Benutzer die gesamte Navigation einer Website in einem einzigen Menü durchsuchen können. 

Nicht nur eine E-Commerce-Website, sondern auch ein Mega-Menü ist eine großartige Option für alle Nachrichten-Websites, Zeitschriften, Content-Publisher, Unternehmen und mehr. 

Beim Erstellen einer großen Website mit mehreren Kategorien und Unterkategorien ist Megamenu ein großes, mehrspaltiges, erweiterbares Menü, in dem alles auf einmal sichtbar ist.
Ich bin mir sicher, dass mir so viele Fragen in den Sinn kommen! Rechts? 

Keine Sorge … Hier werde ich Ihnen helfen, alle Antworten auf Ihre Fragen zu erhalten, und am Ende dieses Artikels erfahren Sie, wie Sie ganz einfach Ihr eigenes Mega-Menü erstellen. 

Wir stellen vor: ElementsKit Mega Menu Builder

Verwendung der funktionsreichen ElementsKit Megamenu Builder Sie können jede Art von Megamenü mit einer Elementor-Live-Content-Schnittstelle erstellen und anpassen. 

Sie erhalten Variationen im Mega-Menü wie das Navigationsmenü und das vertikale Mega-Menü sowie viele Anpassungsoptionen. 

Insgesamt ist ElementsKit Elementor Mega Menu ein voll ausgestatteter Menü-Builder für Ihre professionelle Website. 

Wie erstelle ich ein Mega-Menü mit Elementor? 

Elementor bietet Ihnen viele Funktionen zum Entwerfen Ihres Mega-Menüs, aber um zusätzliche Funktionen zu erhalten, können Sie ein Plugin eines Drittanbieters verwenden.

Genau, du brauchst ElementsKit. Obwohl es so viele Plugins zum Erstellen eines Mega-Menüs gibt, unterstützt ElementsKit dennoch verschiedene Arten von Mega-Menüs, darunter vertikale Mega-Menüs, horizontale Mega-Menüs und viele weitere Anpassungsoptionen.

Hier zeigen wir Ihnen Schritt für Schritt im Detail, wie Sie ein voll funktionsfähiges Mega-Menü erstellen.

Was Sie zum Erstellen eines Megamenüs mit Elementor benötigen

Um diesem Tutorial-Blog zu folgen, benötigen Sie zwei Dinge–>

Oder befolgen Sie die Schritt-für-Schritt-Anleitung:

Stellen Sie sicher Megamenü Modul ist AN aus ElementsKit MODULE.

Schritt #1: Menü hinzufügen

  • Klicke auf Erstellen Sie ein neues Menü.
  • Bieten Menüname=> Überprüfen Sie die Kontrollkästchen=> Menü erstellen.
  • Klicke auf Benutzerdefinierten Link=> Bereitstellen Verknüpfung Und Menüelemente hinzufügen auf die gleiche Weise.

Schritt #2: Passen Sie den Inhalt des Megamenüs an

Aktivieren Sie das Kontrollkästchen „Dieses Menü für Megamenu-Inhalte aktivieren“ => Klicken Sie auf Mega-Menü mit Einstellungssymbol zu welchem Menüpunkt Sie das Mega-Menü hinzufügen möchten.

  • Es öffnet sich ein Popup, schalten Sie das um Mega-Menü Option und Speichern. Klicken Sie anschließend daraufe MEGAMENÜ-INHALT BEARBEITEN Taste.

Vorlage wählen

  • Drücke den Elementskit Klicken Sie auf das Symbol der Vorlagenbibliothek und navigieren Sie dann zu Überschriften.
  • Klicke auf Header=> Mega-Menüinhalt=> Beliebig einfügen Mega-Menü.

Kontrolle Layout

  • Bearbeiten Sie den inneren Abschnitt indem Sie auf den gepunkteten Abschnitt klicken.
  • Inhaltsbreitenfeld: Passen Sie die Breite Ihres Inhalts an, indem Sie nach rechts oder links ziehen.
  • Inhalt in voller Breite: Wählen Gesamtbreite.

Wählen Spaltenlücke

  • Spaltenlücke=> Wählen Sie Ihren Spaltenabstand aus runterfallen.

Wählen Sie Position

  • Höhe: Wählen Sie Ihre Größe aus, indem Sie von links nach rechts ziehen.
  • Vertikal ausrichten: Wählen Sie „Vertikal ausrichten“ aus dem Dropdown-Menü aus.
  • Überlauf: Wählen Sie „Überlauf Standard“ oder „Ausgeblendet“.

Wählen HTML-Tag

  • Wähle Deine HTML-Tag aus Runterfallen.

Passen Sie das Mega-Menü an Überschriftentext

  • Wählen Sie den Symboltyp aus.
  • Aktivieren Sie diese Option, um ein Symbol hinzuzufügen.
  • Kopfzeilensymbol hochladen.
  • Titel hinzufügen oder bearbeiten.
  • Beschreibung bearbeiten hinzufügen.

Text anpassen

  • Text hinzufügen oder bearbeiten.
  • Untertitel hinzufügen oder bearbeiten.
  • Aktivieren Sie diese Option, um die Beschriftung anzuzeigen.
  • Etikett hinzufügen oder bearbeiten.
  • Passen Sie Hintergrundfarbe, Typografie, Polsterung, Ausrichtung und Radius an.

Schritt #3: Anpassen Symbol

  1. Klicken 'Aktualisieren' um das Menü zu speichern => Editor schließen.
  2. Gehen Sie nun zur Registerkarte „Symbol“ => Wählen Sie eine beliebige Farbe aus der Farbpalette.
  3. Wählen Sie ein Symbol aus der Symbolbibliothek aus.
  4. Gehen Sie nun zur Site => Ausgewähltes Symbol und Farbe werden angezeigt.

Schritt #4: Anpassen Abzeichen

  • Text hinzufügen oder bearbeiten.
  • Wählen Abzeichenfarbe.
  • Wählen Abzeichen-Hintergrundfarbe.
  • Klicken Speichern.

Schritt #5: Einstellungen

Standardbreite

  • Wählen Sie die Breite des Mega-Menüs: Standard.
  • Wählen Sie die Position des Mega-Menüs: Standard.
  • Speichern Sie das Fenster.
  • Site-Ansicht: Standardbreite mit Standardposition anzeigen.

Standardrelativ 

  • Wählen Sie die Breite des Mega-Menüs: Standard.
  • Wählen Sie die Position des Mega-Menüs: Relativ.
  • Klicken Speichern.
  • Site-Ansicht: Standardbreite mit relativer Position anzeigen.

Standardmäßige volle Breite

  • Wählen Sie die Breite des Mega-Menüs: Gesamtbreite.
  • Wählen Sie die Position des Mega-Menüs: Standard.
  • Klicken Speichern.
  • Site-Ansicht: Anzeige in voller Breite mit Standardposition.

Relative Position in voller Breite

  • Wählen Sie die Breite des Mega-Menüs: Gesamtbreite.
  • Wählen Sie die Position des Mega-Menüs: Relativ.
  • Klicken Speichern.
  • Site-Ansicht: Wird angezeigt Volle Breite mit relativer Position.

Benutzerdefinierte Standardbreite

  • Wählen Sie die Breite des Mega-Menüs: Benutzerdefinierte Breite.
  • Geben Sie eine beliebige benutzerdefinierte Breite an, standardmäßig ist dies jedoch der Fall 750px.
  • Wählen Sie die Position des Mega-Menüs: Standard.
  • Klicken Speichern.
  • Site-Ansicht: Wird angezeigt Benutzerdefinierte Breite mit Standardposition.

Benutzerdefinierte Standardbreite Relativ

  • Wählen Sie die Breite des Mega-Menüs: Benutzerdefinierte Breite.
  • Geben Sie eine beliebige benutzerdefinierte Breite an, standardmäßig ist dies jedoch der Fall 750px.
  • Wählen Sie die Position des Mega-Menüs: Relativ.
  • Klicken Speichern.
  • Site-Ansicht: Wird angezeigt Benutzerdefinierte Breite mit relativer Position.

Schritt #6: Erstellen Sie eine Header-Vorlage

Hier können Sie die verwenden Elementor-Header-Vorlage oder Sie können das verwenden ElementsKit-Header-Vorlage.

  • Jetzt suchen Navigationsmenü=> Ziehen Sie die Ekit Nav-Menü Und Fallen auf dem ausgewählten Bereich. Stellen Sie sicher, dass Sie das ElementsKit Nav-Menü ziehen, da sonst Ihr erstelltes Meg-Menü nicht angezeigt wird.
  • Gehe zu Menüeinstellungen=> Wählen Sie Ihr erstelltes aus Kopfzeilenmenü aus dem Dropdown-Menü.
  • Sie können von hier aus jede Art von Widget hinzufügen, um Ihre Header-Vorlage anzupassen.

Erstellen Sie ein Mega-Menü mit Gutenberg

Wenn Sie Ihre Website im WordPress-Blockeditor erstellt haben, können Sie auch einfach und problemlos Mega-Menüs erstellen. Das GutenKit-Blockeditor-Plugin bietet die einfachste Möglichkeit, Erstellen eines WordPress-Megamenüs in Gutenberg.

Mit GutenKit können Sie das gesamte Menü im Editor erstellen und Megamenüs sowohl in vertikaler als auch horizontaler Ausrichtung gestalten.

Sie müssen lediglich das Plugin GutenKit Pro installieren und mit dem Erstellen Ihrer schönen Site in Gutenberg beginnen.

Endgültige Ausgabe

  • Wenn Sie fertig sind, klicken Sie auf Aktualisieren Taste, um das Menü zu speichern.
  • Gehen Sie nun zu Ihrer Website und Sie können sehen, dass Ihr ausgewähltes Megamenü entsprechend angezeigt wird.

Zusammenfassung

Endlich haben wir es erfolgreich bis zum Ende geschafft. Ich hoffe, wir konnten Ihnen mit diesem Tutorial helfen! Und jetzt können Sie mithilfe von ein benutzerdefiniertes Elementor-Megamenü erstellen ElementsKit!

Hier können Sie alle Schritte in einem einzigen Video sehen.

Wenn Sie weitere Bedenken haben oder auf andere Probleme gestoßen sind, teilen Sie uns dies bitte im Kommentarbereich mit!


Kommentare

  1. Avatar von Peter

    Hallo,
    tolles Tutorial!
    Ich habe noch eine Frage zum Mega-Menü:
    Kann ich das Mega-Menü per Klick und nicht per Hover öffnen?
    Über eine Antwort würde ich mich sehr freuen.
    Grüße,
    Peter

    1. Avatar von Tanjana Sabrin
      Tanjana Sabrin

      Hallo Peter,

      Vielen Dank für Ihre Wertschätzung. Das bedeutet uns sehr viel. Derzeit ist die Funktion nicht verfügbar. Sie können jedoch auf jeden Fall eine entsprechende Funktion anfordern. Wir fügen entsprechend den Anforderungen unserer Kunden kontinuierlich neue Funktionen hinzu.

      Hier ist der Link - https://wpmet.com/plugin/elementskit/roadmaps/#ideas. Teilen Sie einfach Ihre tolle Idee mit und klicken Sie auf die Schaltfläche „Senden“. 😍

      Bleiben Sie gesund 😃

  2. Avatar von Andrew
    Andreas

    Hallo,
    Ich liebe Ihren Mega-Menü-Builder, aber ich habe ein kleines Problem.
    Eines meiner Mega-Menüs befindet sich ganz rechts in meiner Kopfzeile und ein Teil des Mega-Menüs verschwindet auf der rechten Seite.
    Gibt es eine Option, das Mega-Menü rechts, links oder in der Mitte auszurichten?

    Danke

    1. Avatar von Ayub Ali

      Hallo Andrew,

      Ohne Ihre Website zu überprüfen, können wir Ihnen nicht sagen, was genau dieses Problem verursacht. Geben Sie uns daher bitte den Link zu Ihrer Live-Website oder einen entsprechenden Screenshot, damit wir das Problem klar verstehen. Sie können jedoch versuchen, die Position des Megamenüs auf die Standardposition zu ändern, indem Sie diesem Screenshot folgen (https://d.pr/i/ccf6RC). Teilen Sie uns das Update hier mit oder besser, wenn Sie ein Support-Ticket eröffnen können: https://help.wpmet.com/

  3. Avatar von Farzan

    Hallo, vielen Dank für das tolle Tutorial! Ich könnte alles anwenden, nur ein kleines Problem. Im Header habe ich 4 Seiten, eine davon hat ein Mega-Menü, wenn man mit der Maus darüber fährt. Allerdings kann ich im Header nicht auf die übergeordnete Seite (mit dem Namen: persoonlijk) klicken, sondern nur auf die Elemente im Mega-Header. Können Sie sehen, was mir fehlt? (Die Seite befindet sich noch in der Entwicklung, aber Sie können die Kopfzeile in der sehen https://insight.nl/home URL. Ich hätte gerne die Möglichkeit, auch auf die Schaltfläche PERSOONLIJK klicken zu können. Könnten Sie mir helfen herauszufinden, was ich da falsch gemacht habe?
    Vielen Dank im Voraus.

    1. Avatar von Ayub Ali

      Hallo Farzan, da es sich um ein technisches Problem handelt und Sie möglicherweise persönliche Hilfe benötigen, würde ich Ihnen empfehlen, ein Support-Ticket zu eröffnen https://help.wpmet.com/

      Da unser Supportteam sehr hilfsbereit ist, kann ich sagen, dass es sein Bestes geben wird, um Ihr Problem so schnell wie möglich zu lösen.

      Beste Wünsche.

  4. Avatar von Mani

    Vielen Dank für diesen tollen Artikel. Er ist sehr hilfreich. Jeder kann es leicht verstehen, anstatt sich viele Videos auf YouTube anzusehen.

  5. Avatar von Mellisa
    Mellisa

    Hey,
    Tolles Tutorial; Du hast es klar und einfach erklärt. Die Erstellung eines guten Mega-Menüs ist unerlässlich, da es Ihnen hilft, die Beziehung zwischen den Elementen visuell hervorzuheben, die Benutzer über die Auswahlmöglichkeiten zu informieren und Ihnen die einfache Verwendung von Symbolen und Bildern zu erleichtern.

  6. Avatar von David

    Ich habe dieses Tutorial genau befolgt und mein Menü wird NICHT angezeigt.
    Wenn Sie die Seite aufrufen, die ich oben verlinkt habe, sehen Sie ein Menü – das ist das Standardmenü von WordPress. Direkt darunter habe ich Ihr Navigationsmenü-Widget verwendet und das Menü wird nicht angezeigt.

    Irgendwelche Gedanken?

  7. Avatar von Collin
    Collin

    Mega-Menü ist großartig! Nur eine Sache: Ich möchte, dass sich die entsprechende Seite öffnet, wenn ich auf den Menünamen klicke, und dass das Mega-Menü erscheint, wenn ich darüber fahre. Wie mache ich das? Wenn ich jetzt klicke, erscheint nur noch das Mega-Menü. Danke für die Hilfe.

  8. Avatar von Margaret
    Margarete

    Vielen Dank für dieses tolle Tutorial! Ist es möglich, den Titel und die Beschreibung im Mega-Menü unter „Bearbeiten“ zu verlinken? Ich habe eine Liste von Bundesstaaten und Städten in meinem Mega-Menü, habe aber das Problem, dass ich den Bundesstaat zweimal auflisten muss, damit ich einen Hyperlink im Abschnitt „Absatz“ erstellen kann. Gibt es eine Möglichkeit, diese Redundanz zu beseitigen?

  9. Avatar von Margaret
    Margarete

    Ich habe vergessen hinzuzufügen, ob es auch möglich wäre, mit der Maus über den Titel zu fahren, sodass die Städte angezeigt und darunter ausgewählt werden könnten. Danke schön.

  10. Avatar von Sami Azam
    Sami Azam

    Wie können wir Mega-Menüs auf Hamburger-Symbolen anstelle eines Menüpunkts anzeigen?

    1. Avatar von Dipa Shaha
      Dipa Shaha

      Lieber Sami
      Leider ist die gewünschte Funktion nicht verfügbar. Sie können diese Funktion jedoch anfordern. Das ElementsKit-Team freut sich immer über Funktionsvorschläge.
      Sie können die Funktion über diesen Link anfordern https://wpmet.com/plugin/elementskit/roadmaps/#ideas
      Danke

  11. Avatar von ajay

    Ich habe dieses Tutorial genau befolgt und mein Menü wird NICHT angezeigt.
    Wenn Sie zu der Seite gehen, die ich oben verlinkt habe, sehen Sie ein Menü – das ist das Standard-WordPress-Menü. Direkt darunter habe ich Ihr Navigationsmenü-Widget verwendet und das Menü wird nicht ausgefüllt.

    Ich glaube, es gibt einen Fehler im Mega-Menü, das jetzt nicht mehr funktioniert

    1. Avatar von Hasib

      Hallo Ajay, stellen Sie sicher, dass Sie im Backend ein Menü erstellt haben, bevor Sie ein Mega-Menü erstellen. Und nachdem Sie das Navigationsmenü ausgewählt haben, müssen Sie auswählen, welches Menü Sie im Mega-Menü teilen möchten.

  12. Avatar von Jy

    Hallo,

    Das Megamenü funktioniert sehr gut, bis ich alle Plugins aktualisiert habe. Es ist seltsam, dass einige der Megamenüs funktionieren, andere jedoch nicht und „Kein Inhalt gefunden“ anzeigen. Ich habe die Pluginversion zurückgesetzt, konnte die Probleme aber nicht lösen. Irgendeine Idee, was dieses Problem verursacht?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert