Studio Editor: Dropdowns in einem Menü gestalten
7 Min. Lesezeit
Nachdem du ein Dropdown hinzugefügt und eingerichtet hast, kannst du das Design nach deinen Wünschen anpassen. Ändere das Aussehen und die Ausrichtung des Containers und des Menüs, um ein individuelles Design für Kunden zu schaffen und ihre Marke zu stärken.
Bevor du loslegst:
Dropdowns können im Studio Editor nur aus neuen Menüs hinzugefügt werden. Wenn du alte Menüs verwendest, kannst du Untermenüs erstellen und Megamenüs hinzufügen.
Das Layout von Dropdowns anpassen
Je nach Menütyp (Navigationsleiste, Hamburger usw.) kannst du das Layout-Panel verwenden, um die Anzeige oder Breite des Dropdowns festzulegen. Du kannst auch den Abstand und die Ausrichtung an das Design des Hauptmenüs anpassen.
Um das Layout von Dropdowns anzupassen:
- Öffne deinen Editor.
- Klicke auf das Menü/den Menü-Button.
- (Hamburger-Menüs) Klicke auf Menü bearbeiten, um den Bearbeitungsmodus des Hamburger-Menüs zu öffnen und das Menü auszuwählen.
- Klicke auf das Symbol für Layouts
.
- Wähle den Tab Dropdown aus.
- Verwende die verfügbaren Optionen, um das Layout anzupassen:
- Containerbreite Wähle die Breite des Dropdown-Containers und passe ihn nach deinen Wünschen an:
- Strecken: Der Dropdown-Container erstreckt sich über die gesamte Bildschirmbreite. Du kannst die Breite anpassen, indem du die Ränder (in px) festlegst.
- An Menü anpassen: Der Dropdown hat die gleiche Breite wie das übergeordnete Hauptmenü.
- Inhalt umschließen: Der Container „umschließt“ die Elemente des Dropdown-Elements. Du kannst wählen, ob er links, mittig oder rechts vom Hauptmenü ausgerichtet werden soll.
- Elementanzeige: Wähle aus, ob die Dropdown-Elemente eingeklappt sind oder immer angezeigt werden.
- Abstand über Container: Vergrößere oder verkleinere den Abstand zwischen dem Dropdown und dem Hauptmenü.
- Anzahl der Spalten: Wähle aus, wie viele Spalten im Dropdown-Menü angezeigt werden.
- Abstand: Passe den Abstand der Elemente im Dropdown an. Wenn du Unterelemente hinzugefügt hast, kannst du auch den Abstand zwischen und über ihnen ändern.
- Abstand zwischen Elementen: Gib den horizontalen und vertikalen Abstand zwischen den Elementen des Dropdowns ein.
- Abstand zwischen Unterelementen: Verkleinere oder vergrößere den Abstand zwischen den Unterelementen.
- Abstand über Unterelementen: Wähle den Abstand über den Unterelementen im Menü aus.
- Abstand: Passe den Abstand um die einzelnen Teile des Dropdowns an deine Bedürfnisse an:
- Element - Abstand : Verkleinere oder vergrößere den Abstand um die Elemente des Dropdowns.
- Unterelemente - Abstand: Passe den Abstand um die Unterelemente im Dropdown an.
- Container-Abstand: Gestalte den Abstand um den Container des Dropdowns so klein oder groß, wie du möchtest.
- Ausrichtung: Richte die Elemente des Dropdowns und der Unterelemente links, rechts oder mittig vom Container aus.
- Containerbreite Wähle die Breite des Dropdown-Containers und passe ihn nach deinen Wünschen an:
Hinweis:
Die angezeigten Optionen hängen vom Menütyp (Navigationsleiste oder Hamburger) und der von dir gewählten Ausrichtung (horizontal oder vertikal) ab.
Das Dropdown-Design anpassen
Du kannst jeden Teil eines Dropdowns gestalten, damit es zum Design des Hauptmenüs passt, von den Containern bis hin zu Elementen und Unterelementen.
Um das Dropdown-Design anzupassen:
- Öffne deinen Editor.
- Klicke auf das Menü/den Menü-Button.
- (Hamburger-Menüs) Klicke auf Menü bearbeiten, um den Bearbeitungsmodus des Hamburger-Menüs zu öffnen und das Menü auszuwählen.
- Klicke oben rechts im Editor auf den Pfeil Inspektor öffnen
. - Scrolle nach unten zu Design.
- Wähle das Element aus, das du gestalten möchtest:
- Dropdown-Container
- Dropdown-Menü-Container
- Dropdown-Elemente
- Dropdown-Unterelemente
- (Dropdown-Elemente/Dropdown-Unterelemente) Wähle den entsprechenden Status aus: Standard, Mouseover, oder Aktuelle Seite.
- Gestalte das Dropdown mit den verfügbaren Optionen:
- Hintergrundfüllungen: Ändere die Hintergrundfarbe des Dropdowns oder füge einen auffälligen Farbverlauf hinzu. Du kannst die Deckkraft anpassen und mehrere Ebenen hinzufügen, um sie an deine Design anzupassen.
- Ränder: Passe die Breite und Farbe der Ränder des Dropdowns an.
- Ecken: Gestalte die Ecken des Dropdowns runder oder eckiger, indem du den Radius anpasst.
- Text: Passe den Stil und die Formatierung des Dropdowns und der Unterelemente an.
- Schatten: Füge dem Dropdown einen Schatten hinzu und passe Winkel, Farbe, Abstand und vieles mehr an.
Was ist der Unterschied zwischen den verschiedenen Containern?
- Dropdown-Container: Dieser zeigt alle Elemente und Menüs an, die du zum Dropdown hinzugefügt hast.
- Dropdown-Menü-Container: Dieser zeigt nur Dropdown-Menüelemente an. Er ist innerhalb des Dropdown-Containers verschachtelt.
Dropdowns individuell gestalten
Änderungen, die du am Design und Layout eines Dropdowns vornimmst, gelten für alle Dropdowns eines Menüs. Du kannst jedoch Dropdowns in den Menüs einer horizontalen Navigationsleiste „abtrennen“, um sie separat anzupassen.
Hinweis:
Diese Option ist für Hamburger-Menüs oder Menüs der vertikalen Navigationsleiste nicht verfügbar.
Um einzelne Dropdowns abzutrennen und anzupassen:
- Klicke in deinem Editor auf das horizontale Menü.
- Klicke auf Menü verwalten.
- Fahre mit der Maus über das entsprechende Dropdown und klicke auf Bearbeiten.
- Wähle, wie du das Dropdown gestalten möchtest:
Das Container-Layout anpassen
Das Dropdown-Menü-Layout anpassen
Das Container-Design anpassen
Das Menü-Design anpassen
Hinweis:
Die Schalter Nur dieses Dropdown bearbeiten im Inspektor und dem Layout-Panel sind verbunden, das heißt wenn du den einen Schalter deaktivierst/aktivierst, wird der andere automatisch deaktiviert/aktiviert.