Last Updated on 11/10/2021 by MTE Leben
Benutzerdefinierte Menüs sind ein Muss für jede Art von Website. Sie vereinfachen die Navigation und ermöglichen es den Nutzern, mit wenigen Klicks die gewünschte Seite zu finden. Viele Websitebesitzer platzieren Menüs in der Kopfzeile der Seite, die auf jeder Seite Ihrer Website angezeigt werden. Das Hinzufügen eines Menüs in Elementor ist ein einfacher Vorgang. Vor allem, wenn Sie unsere Tipps verwenden.
In diesem Tutorial erfahren Sie, wie Sie mit JetMenu Menüs in Elementor bearbeiten. Es sind nur 10 einfache Schritte zu einem einzigartigen Menü!
Schritt #1: Neues Menü in Elementor hinzufügen
Zuerst müssen Sie die Seite zum Bearbeiten mit Elementor öffnen. Navigieren Sie links im Dashboard zu Seiten > Registerkarte Neu hinzufügen.
Klicken Sie auf die Schaltfläche Bearbeiten mit Elementor.
Klicken Sie auf Neuen Abschnitt hinzufügen und definieren Sie seine Struktur, um dort ein Menü zu platzieren.
Wählen Sie die erforderliche Abschnittsstruktur.
Suchen Sie das Inhaltsmodul für das benutzerdefinierte Menü.
Ziehen Sie es per Drag & Drop in den Bereich, in dem Sie es hinzufügen möchten. Auf der linken Seite sehen Sie den Block Benutzerdefiniertes Menü bearbeiten.
Im Inhaltsblock müssen Sie das Menü angeben, das Sie mit dem Modul “Benutzerdefiniertes Menü” anzeigen möchten. Wählen Sie das Menü, das Sie hinzufügen möchten, aus der Dropdown-Liste Ihrer vorhandenen Menüs aus.
Wechseln Sie zur Registerkarte Stil, um den Modulstil zu ändern. Die detaillierte Beschreibung der Stileinstellungen des benutzerdefinierten Menümoduls finden Sie im Dokumentationsblock des JetMenu-Moduls für benutzerdefiniertes Menü.Lesen Sie dieses Tutorial weiter, wenn Sie erfahren möchten, wie Sie ein Menü ähnlich dem unten gezeigten erstellen.
Schritt #2: Anpassen des Menüs in Elementor
Add a neuer Abschnitt, in dem Sie ein Menü platzieren möchten. Wählen Sie die Abschnittsstruktur aus (in unserem Fall sind es 4 Spalten).
Suchen Sie das Modul “Benutzerdefiniertes Menü” und legen Sie es in der Spalte ab, in der Sie es platzieren möchten.
Wählen Sie im Inhaltsblock das Menü aus, das Sie für diese Spalte verwenden möchten.
Lass uns dieses Menü aufpeppen! Wechseln Sie zum Stilblock, um alle verfügbaren Stileinstellungen anzuzeigen. Im Block unten finden Sie ein Beispiel für die Gestaltung eines Menüs.
Geben Sie die gewünschte Hauptmenübreite in den Block Hauptmenübreite ein (in px) . Wir haben 300 px eingestellt.
Wählen Sie den klassischen Hintergrundtyp.
Legen Sie die Hintergrundfarbe mit der Farbauswahl . fest Werkzeug (wir haben den HEX-Wert #221872 eingestellt).
Geben Sie den Randradius-Wert in den Randradius-Block ein, um die Menüwinkel abgerundeter zu machen (in unserem Beispiel sind es 6 px).
Wählen Sie als Rahmentyp Solid (Sie können jeden anderen Rahmen auswählen, wenn Sie ihn für geeigneter halten).
Geben Sie den Wert für die Rahmenbreite in das Feld Breite ein (wir setzen 1 px Rahmenbreite).
Stellen Sie die bevorzugte Rahmenfarbe ein (wir verwenden #221872 HEX-Farbe).
Option Box Shadow aktivieren.
Geben Sie die Schattenfarbe an (wir haben rgba(0,0,0,0.3) Farb- und Transparenzeinstellungen verwendet).
Setzen Sie 10 Weichzeichnungswerte mit den entsprechenden Steuerelementen für die Schattenoptionen.
Schritt #3: Entdecken Sie weitere Untermenü-Stileinstellungen
Öffnen Sie die Untermenüeinstellungen. Hier können Sie den Untermenühintergrund, die Breite usw. verwalten.
Geben Sie die Untermenübreite im entsprechenden Feld an (in unserem Fall sind es 250 px).
Wählen Sie den klassischen Hintergrundtyp und stellen Sie die erforderliche Hintergrundfarbe ein (zB #221872 HEX-Wert).
Definieren Sie den bevorzugten Randradius (wir haben 6 px verwendet).
Stellen Sie den erforderlichen Rahmentyp ein (wir haben den Rahmentyp “Vollton” verwendet).
In das Feld Breite müssen Sie den Wert für die Rahmenbreite eingeben (in unserem Fall ist es 1 px).
Geben Sie die Rahmenfarbe an (wir haben den HEX-Farbwert #221872 verwendet).
Aktivieren Sie die Option Box Shadow, um anzuwenden den Schatten zu den Untermenüblöcken.
Geben Sie im Farbblock die Schattenfarbe und die Deckkraft an (wir haben rgba(0,0,0,0.5) verwendet).
Setzen Sie Unschärfe auf 10.
Schritt 4: Einstellen des Stils der Hauptmenüelemente
Gehen wir zu den Stileinstellungen der Hauptmenüelemente. Zuerst müssen wir sie im normalen Modus anpassen.
Geben Sie die erforderliche Hintergrundfarbe an (in unserem Fall ist es rgba(60,137,178,0.29)).
Verwenden Sie die benötigte Textfarbe (in unserem Beispiel ist es #89c8ff).
Aktivieren Sie die Typografieeinstellungen, um die Schriftarteinstellungen für die Menüelemente anzuwenden.
Wir haben die Playfair Display-Schriftfamilie verwendet.
Geben Sie den Randradiuswert an im Randradius-Block (wir haben 6 px verwendet).
Aktivieren Sie die Option Box Shadow. Stellen Sie die Schattenfarbe ein (wir haben rgba(0,0,0,0.5) verwendet).
Reduzieren Sie den Unschärfewert auf 3.
Wechseln wir nun zu Hover Modus.
Hier legen wir den Wert für die Textfarbe fest (wir haben #4cff64 verwendet). Alle anderen Optionen bleiben gleich.
Schritt #5: Stil der Untermenüelemente anpassen
Öffnen Sie die Stileinstellungen des Untermenüs (scrollen Sie nach unten, um darauf zuzugreifen). Zuerst passen wir den Normal-Modus an.
Wählen Sie die Hintergrundfarbe, um sie als Untermenüelementhintergrund zu verwenden (wir haben den Farbwert rgba (18,43,104,0.98) ausgewählt).
Geben Sie die Textfarbe an (in unserem Fall ist es #89c8ff).
Lassen Sie uns den Rahmen auf die Untermenüpunkte anwenden. Wir haben den Typ “Vollständiger Rahmen” mit einem Breitenwert von 1 px verwendet.
Wählen Sie die Rahmenfarbe (in unserem Fall ist es #221872).
Aktivieren Sie die Option Box Shadow.
Wir haben rgba(0,0,0,0.5) Schattenfarbe und Deckkraft ausgewählt, aber Sie können diejenige verwenden, die zu Ihrem Website-Erscheinungsbild passt am meisten.
Reduzieren Sie den Unschärfewert auf 3.
Erstes Element aktivieren Option für benutzerdefinierte Stile und geben Sie den Wert für den Randradius an (in unserem Beispiel sind es 6 px). Wenden Sie die gleichen Einstellungen auf die benutzerdefinierten Stile des letzten Elements an.
Wechseln wir nun in den Hover-Modus und legen Sie die Textfarbe fest, die beim Hover angezeigt werden soll (z. B. # 77ff89). Wir haben keine Abzeichen und Symbole für die Menüelemente verwendet, aber Sie können sie mit denselben Farben festlegen und anpassen, um Ihren einzigartigen Menüstil zu erstellen.
Schritt #6: Dropdown-Symbole bearbeiten
Navigieren wir zu den Einstellungen für den Dropdown-Symbolstil, die sich unten im Menü „Benutzerdefiniertes Menü bearbeiten“ befinden Stilblock.
Geben Sie die Größe der Symbolposition im Offset-Block an (wir haben 15 px verwendet).
Stellen Sie die erforderliche Symbolfarbe ein (in unserem Fall ist es #221872).
Stellen Sie die gewünschte Symbolhintergrundfarbe ein (wir haben #89c8ff verwendet).
Unsere Icon-Schriftgröße beträgt 11 px.
Die Icon-Box-Größe ist 18px. Sie können jedoch diejenige einstellen, die für Ihre Website am besten geeignet ist.
In der Grenzart müssen Sie die Art der Grenze auswählen, die für die Anwendung beantragt werden soll Symbol (wir haben den Solid-Rahmentyp verwendet).
Geben Sie den Wert für die Rahmenbreite in das entsprechende Feld ein (wir haben 1 px verwendet).
Im Feld Farbe müssen Sie die Rahmenfarbe einstellen (in unserem Beispiel ist es #221872).
Wir haben auch die Option Box Shadow aktiviert und wendete die Schattenfarbe rgba(0,0,0,0.5) im Schattenfarbblock an.
Die Schattenunschärfe beträgt 3, aber Sie können diejenige anwenden, die für Ihren Menüstil geeignet ist, damit sie zu Ihrem Website-Look passt.
Nachdem wir nun einen Menüblock gestaltet haben, können Sie diesen Stil auf jedes andere Menü anwenden, das Sie dem Abschnitt hinzufügen möchten.
Schritt #7: Anwenden des gleichen Stils auf mehrere Menüspalten
In unserem Beispiel haben wir uns entschieden, den Abschnitt zu erstellen, der besteht aus 4 Spalten, die jeweils das separate Menü enthalten. Also bewegten wir uns über das Symbol “Spalte bearbeiten” (es befindet sich in der oberen linken Ecke der Spalte) und klickte auf die Option Spalte duplizieren. Wir haben dieses Menü dreimal dupliziert und haben jetzt 4 ähnliche Spalten.
Lass uns die Menüs spezifizieren, die wir in jedem von ihnen anzeigen müssen. Setzen Sie den Mauszeiger in die obere rechte Ecke der Spalte, in der Sie ein weiteres Menü platzieren möchten, und klicken Sie auf das Symbol Bearbeiten.
Sie sehen den Block Benutzerdefiniertes Menü bearbeiten. Suchen Sie hier nach Inhalt und wählen Sie im Auswahlmenü den Inhalt aus, den Sie der Spalte hinzufügen möchten.
Schritt #8: Den Abschnitt gestalten
Jetzt bearbeiten wir den gesamten Abschnitt, um unsere Mega-Speisekarte sieht stylischer aus. Bewegen Sie den Mauszeiger über den Block Abschnitt bearbeiten und klicken Sie auf das Symbol Abschnitt bearbeiten, um zu den Einstellungen für Abschnittslayout und -stil zu navigieren.
Deaktivieren Sie im Layoutblock die Option Abschnitt strecken.
Wählen Sie in der Inhaltsbreite Boxed type.
Apply No Gap in der Spaltenlückenblock.
Wählen Sie die Position des mittleren Inhalts.
Navigieren Sie jetzt zu Stileinstellungen und wählen Sie Klassischer Hintergrundtyp. Hier müssen Sie die erforderliche Hintergrundfarbe für den Abschnitt angeben (wir haben #000044 verwendet).
Schritt 9: Abschnitt als Vorlage speichern
Klicken Sie auf das Vorlagensymbol und navigieren Sie dann zu Option Vorlage speichern.
Geben Sie den Vorlagentitel ein und klicken Sie auf Speichern, um ihn zu speichern.
Schritt #10: Abschnitt zum Hauptmenüpunkt hinzufügen
Sobald die Vorlage gespeichert ist, Sie können diesen Menüabschnitt zu einem der Menüpunkte hinzufügen (zB Hauptmenüpunkt). Navigieren Sie dazu links im Dashboard zur Registerkarte Darstellung > Menüs.
Wählen Sie Hauptmenü zum Bearbeiten. Klicken Sie auf die Schaltfläche Auswählen.
Fahren Sie mit der Maus über einen der Hauptmenüpunkte und klicken Sie auf die JetMenu-Option, um den Menüpunkt mit JetMenu zu bearbeiten.
Mega-Untermenü aktivieren Aktivierte Option und klicken Sie auf die Schaltfläche Inhalt des Mega-Menüelements bearbeiten.
Klicken Sie hier auf Vorlagen > Vorlagenbibliothek.
Wechseln Sie zum Block Meine Vorlagen. Wählen Sie die zuvor gespeicherte Vorlage aus. Es wird auf der Seite angezeigt.
Klicken Sie dann auf die Schaltfläche Speichern und dann auf Zurück, um zum Inhaltsblock zurückzukehren.
Klicken Sie auf die Schaltfläche Speichern, um die Änderungen zu speichern.
Überprüfen Sie endlich Ihre Speisekarte! Vergessen Sie nicht, den Hauptmenüstil zu ändern, damit er Ihrem benutzerdefinierten Menüstil entspricht! Wie das geht, erfahren Sie im Tutorial How to Change JetMenu Style.
