Studio Editor: Ein Megamenü hinzufügen und anpassen

4 Min. Lesezeit
Megamenüs sind Container, die du zu einem horizontalen Menü hinzufügen kannst. Wenn Besucher mit der Maus über das entsprechende Menüelement fahren, öffnet sich der Container. Gestalte den Container von Grund auf neu und entscheide, wofür du ihn verwenden möchtest — mehrstufige Navigation, die Präsentation von empfohlenen Produkten oder einen anderen Zweck.
Beispiel für ein Megamenü im E-Commerce-Stil, bei dem der Container viele Navigationslinks zu verschiedenen Produktkategorien zeigt
Was du wissen solltest:
Du kannst einen Megamenü-Container nur zu einem horizontalen Menü hinzufügen. Megamenü-Container werden in vertikalen Menüs, Ankermenüs und Hamburger-Menüs nicht unterstützt.
In diesem Artikel erfährst du mehr über folgende Themen:

Einen Megamenü-Container hinzufügen und einrichten

Füge den Megamenü-Container als Element zu einem vorhandenen Menü hinzu und benenne ihn. Wir empfehlen die Verwendung eines Titels, der den beabsichtigten Inhalt widerspiegelt, zum Beispiel „Services“ oder „Unsere Geschichte“.
Nachdem du deinen Container hinzugefügt und benannt hast, füge Elemente wie Buttons, Formen und Text hinzu, um den gewünschten Inhalt zu erstellen.

Um ein Megamenü hinzuzufügen:

  1. Wähle das entsprechende horizontale Menü in deinem Editor aus.
  2. Klicke auf Menü verwalten.
  3. Klicke unten im Panel auf + Element hinzufügen.
  4. Wähle Megamenü.
  5. Gib einen Titel für das Megamenü ein.
    Tipp: Dies ist der Titel, über den Besucher mit der Maus fahren, um das Megamenü zu sehen.
  6. Klicke auf Fertig.
  7. Füge Inhalte zum Megamenü hinzu:
    1. (Im „Menü verwalten“-Panel) Klicke neben Container auf Bearbeiten.
    2. Füge bei Bedarf Elemente zum Container hinzu.
Klicke im „Menü verwalten“-Panel auf Bearbeiten, um mit dem Hinzufügen von Elementen zu einem neuen Megamenü-Container zu beginnen

Ein Dropdown-Menü erstellen

Verwendest du Megamenüs, um bestimmte Elemente auf einer Website zu organisieren? Erstelle ein Dropdown-Menü. Wenn Besucher auf das Megamenü klicken, werden das Dropdown-Menü und seine Elemente im Container angezeigt.
Was du wissen solltest:
Du fügst und verwaltest Dropdown-Elemente im selben Panel wie das Hauptmenü. So ist es noch einfacher, die Website-Navigation einzurichten.

Um ein Dropdown-Menü zu erstellen:

  1. Wähle das entsprechende horizontale Menü in deinem Editor aus.
  2. Klicke auf Menü verwalten.
  3. (Wenn das Element nicht zum horizontalen Menü hinzugefügt wurde) Klicke auf Element hinzufügen und richte das gewünschte Menüelement ein.
  4. Wähle das Element im „Menü verwalten“-Panel aus.
  5. Ziehe das Element unter das Megamenü.
GIF, das zeigt, wie Elemente aus dem Panel „Menü verwalten“ unter ein Megamenü gezogen werden, wodurch ein Dropdown-Menü erstellt wird
Möchtest du Dropdown-Menüelemente verwalten?

Das Layout des Megamenü-Containers anpassen

Nachdem du die gewünschten Elemente zum Megamenü hinzugefügt hast, ändere das Layout, um es an deine Seitenstruktur anzupassen. Du kannst den Abstand anpassen und entscheiden, wie weit sich der Container dehnt.

Um das Layout zu ändern:

  1. Wähle das entsprechende Menü in deinem Editor aus.
  2. Klicke auf das Symbol für Layout .
  3. Klicke auf Megamenü.
  4. Verwende die verfügbaren Optionen, um das Layout anzupassen:
    • Container strecken: Entscheide, ob sich der Container über die gesamte Bildschirmbreite erstreckt oder nicht. Wenn diese Option deaktiviert ist, kannst du die gewünschte Breite auf der Arbeitsfläche oder im Inspektor-Panel festlegen.
    • Rand: Füge zwischen dem Megamenü-Container und den Rändern des Bildschirms einen Abstand (in px oder %) hinzu.
    • Abstand zwischen Elementen & Container: Vergrößere oder verkleinere den Abstand zwischen dem Menü und dem Megamenü-Container, indem du den Schieberegler ziehst.
Der Megamenü-Tab im Menü-Layout-Panel im Studio Editor

Das Megamenü gestalten

Nachdem du das Layout des Containers angepasst hast, gestalte die Ränder, den Hintergrund und vieles mehr. Um ein einheitliches Aussehen zu erhalten, gelten Änderungen, die du am Megamenü vornimmst, auch für alle Untermenüs, die du hinzugefügt hast.

Um das Design des Containers anzupassen:

  1. Wähle das entsprechende Menü in deinem Editor aus.
  2. Klicke oben rechts im Editor auf das Symbol für Inspektor öffnen .
Screenshot vom Öffnen des Inspektor-Panels im Studio Editor
  1. Wähle im Aufklappmenü Was möchtest du gestalten? die Option Untermenücontainer.
  2. Verwende die verfügbaren Optionen, um deinen Container zu gestalten:
    • Hintergrundfüllung: Lege eine Farbe, einen Farbverlauf oder einen Bildhintergrund für den Container fest. Du kannst mehrere Hintergrundebenen mit unterschiedlicher Deckkraft hinzufügen.
    • Ränder: Füge Ränder für den Container hinzu und gestalte sie.
    • Ecken: Gestalte die Ecken des Containers runder oder eckiger.
    • Schatten: Füge einen Schatten hinter dem Container hinzu, um einen 3D-Effekt zu erzielen.
Auswählen, wie du den Untermenü-Container im Inspektor-Panel gestalten möchtest, der die verfügbaren Optionen für Megamenüs anzeigt

War das hilfreich?

|