Studio Editor: Dropdownmenu's in een menu ontwerpen
Leestijd 8 minuten
Na het toevoegen en instellen van een dropdown, kun je het ontwerp aanpassen aan jouw wensen. Wijzig het uiterlijk en de uitlijning van zowel de container als het menu om een aangepaste look voor klanten te creëren en hun merk te versterken.
Voordat je begint:
Dropdownmenu's kunnen alleen worden toegevoegd vanuit nieuwe menu's in de Studio Editor. Als je de vorige menu-ervaring hebt, kun je submenu's maken en megamenu's toevoegen toevoegen.
In dit artikel lees je meer over:
De indeling van dropdowns aanpassen
Afhankelijk van je menutype (navigatiebalk, hamburger, enzovoort), kun je het Indeling-paneel gebruiken om de weergave of breedte van de dropdown in te stellen. Je kunt de afstand en uitlijning ook aanpassen aan het uiterlijk van het hoofdmenu.
Om de indeling van dropdowns aan te passen:
- Ga naar je Editor.
- Klik op het menu/de menuknop.
- (Hamburger-menu's) Klik op Menu bewerken om de hamburger-bewerkingsmodus te openen en selecteer het menu.
- Klik op het Indeling-pictogram
.
- Selecteer het Dropdown-tabblad.
- Gebruik de opties om de indeling aan te passen:
- Containerbreedte Kies de breedte van de dropdowncontainer en pas deze aan zoals jij wilt:
- Uitrekken: De dropdowncontainer is de volledige breedte van het scherm. Je kunt de breedte aanpassen door de marges in te stellen (in px).
- Aan menu aanpassen: De dropdown heeft dezelfde breedte als het bovenliggende hoofdmenu.
- Inhoud omsluiten: De container 'omsluit' de dropdown-items. Je kunt kiezen of je het links, in het midden of rechts van het hoofdmenu wilt uitlijnen.
- Weergave van items: Selecteer of items in het dropdownmenu worden samengevouwen of altijd worden weergegeven.
- Ruimte boven container: Maak de opening tussen de dropdown en het hoofdmenu groter of kleiner.
- Aantal kolommen: Kies hoeveel kolommen worden weergegeven in het dropdownmenu.
- Afstand: Pas de afstand van items in het dropdownmenu aan. Als je subitems hebt toegevoegd, kun je ook de afstand ertussen en erboven wijzigen.
- Ruimte tussen items: Voer de horizontale en verticale afstand tussen dropdown-items in.
- Ruimte tussen subitems: Maak de ruimte tussen subitems kleiner of groter.
- Ruimte boven subitems: Kies de afstand boven subitems in het menu.
- Opvulling: Pas de ruimte rond elk deel van de dropdown aan je behoeften aan:
- Opvulling item: Maak de ruimte rond dropdown-items kleiner of groter.
- Opvulling subitem: Pas de ruimte rond subitems in het dropdownmenu aan.
- Opvulling container: Maak de ruimte rond de dropdowncontainer zo klein of zo groot als je nodig hebt.
- Uitlijning: Lijn de dropdownitems en subitems links, rechts of in het midden van de container uit.
- Containerbreedte Kies de breedte van de dropdowncontainer en pas deze aan zoals jij wilt:
Let op:
Weergegeven opties zijn afhankelijk van het menutype (navigatiebalk of hamburger) en de oriëntatie (horizontaal of verticaal) die je kiest.
Het ontwerp van dropdowns aanpassen
Je kunt elk deel van een dropdown ontwerpen om bij het uiterlijk van het hoofdmenu te passen — van de containers tot de items en subitems.
Om het ontwerp van dropdowns aan te passen:
- Ga naar je Editor.
- Klik op het menu/de menuknop.
- (Hamburger-menu's) Klik op Menu bewerken om de hamburger-bewerkingsmodus te openen en selecteer het menu.
- Klik rechtsboven in de Editor op de Inspector-pijl
. - Scrol omlaag naar Ontwerp.
- Selecteer het element dat je wilt ontwerpen.
- Dropdown-container
- Dropdown-menucontainer
- Items dropdown
- Subitems dropdown
- (Items / subitems dropdown) Selecteer de relevante status: Standaard, Aanwijzen of Huidige pagina.
- Ontwerp de dropdown met behulp van de beschikbare opties:
- Achtergrond: Wijzig de achtergrondkleur van van de dropdown of voeg een opvallend kleurverloop toe. Je kunt de dekking aanpassen en meerdere lagen toevoegen om aan je ontwerpbehoeften te voldoen.
- Rand: Pas de breedte en kleur van de randen van de dropdowncontainer aan.
- Hoeken: Maak de hoeken van de dropdown meer rond of rechthoekig door de straal aan te passen.
- Tekst: Pas de stijl en opmaak van de dropdownitems en subitems aan.
- Schaduw: Voeg schaduwen toe aan de dropdown en pas de hoek, kleur, afstand en meer aan.
Wat is het verschil tussen containers?
- Dropdowncontainer: Hier worden alle elementen en menu's weergegeven die je aan het dropdown-item hebt toegevoegd.
- Dropdownmenu-container: Hiermee worden alleen dropdownmenu-items weergegeven. Het is genesteld in de dropdowncontainer.
Individuele dropdowns ontwerpen
Wijzigingen die je aanbrengt in het ontwerp en de indeling van een dropdown zijn van toepassing op alle dropdowns in een menu. Je kunt echter wel dropdowns in een horizontale navigatiebalk 'loskoppelen' om ze afzonderlijk aan te passen.
Let op:
Deze optie is niet beschikbaar op hamburger-menu's of verticale navigatiebalkmenu's.
Om individuele dropdowns los te koppelen en aan te passen:
- Klik op het horizontale menu in je Editor.
- Klik op Menu beheren.
- Wijs de relevante dropdown aan en klik op Bewerken.
- Kies hoe je de dropdown wilt ontwerpen:
De indeling van de container aanpassen
De indeling van het dropdownmenu aanpassen
Het ontwerp van de container aanpassen
Pas het ontwerp van het menu aan:
Let op:
De Alleen deze dropdown bewerken-schakelaars in het Inspector-paneel en het Indeling-paneel zijn gekoppeld, wat betekent dat het uitschakelen / inschakelen van de ene schakelaar de andere automatisch in- of uitschakelt.