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.
De indeling van dropdowns aanpassen
Afhankelijk van je menutype (navigatiebalk, hamburger, enzovoort) worden verschillende instellingen weergegeven in het Indelingen-paneel. 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 de Menubalk of het Hamburger-menupictogram.
- (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:
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 item en aantal kolommen
- Weergave van items: Selecteer of items in het dropdownmenu worden samengevouwen of altijd worden weergegeven.
- Aantal kolommen: Kies hoeveel kolommen worden weergegeven in het dropdownmenu.
- Ruimte boven container: Maak de opening tussen de dropdown en het hoofdmenu groter of kleiner.
- 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, richting en uitlijning
- 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.
- Richting: Kies of items van links naar rechts of van rechts naar links worden gelezen.
- Uitlijning: Lijn de dropdownitems en subitems links, rechts of in het midden van de container uit.
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. Kies de achtergrondvulling en tekst om de huisstijl van je klanten te versterken en voeg randen toe om dropdowns op te laten vallen op de pagina.
Je kunt ook het ontwerp van items en subitems aanpassen voor afzonderlijke statussen (bijvoorbeeld: aanwijzen, huidige pagina).
Om het ontwerp van dropdowns aan te passen:
- Ga naar je Editor.
- Klik op de Menubalk of het Hamburger-menupictogram.
- (Hamburger-menu's) Klik op Menu bewerken om de hamburger-bewerkingsmodus te openen en selecteer het menu.
- Klik rechtsboven in de editor op het Inspector openen-pictogram
.
- 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.
De wijzigingen die je aanbrengt in een dropdown, worden toegepast op alle dropdowns in dat menu. Wil je iets unieks creëren? Je kunt dropdowns die je hebt toegevoegd aan horizontale navigatiemenu's, 'loskoppelen' voor volledige ontwerpcontrole.
Om individuele dropdowns in horizontale menu's 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
Pas de breedte aan van de container die de items en elementen weergeeft die je aan de dropdown hebt toegevoegd. Je kunt ook de ruimte tussen de container en het hoofdmenu instellen.
- Selecteer de dropdowncontainer.
- Klik op het Indeling-pictogram.
- Klik op de Alleen deze dropdown bewerken-schakelaar om deze in te schakelen.
- Breng de gewenste wijzigingen aan.
- Containerbreedte: Selecteer een optie uit de lijst en pas het aan naar wens:
- Uitrekken: De dropdowncontainer is de volledige breedte van het scherm. Je kunt de breedte verkleinen door de marges in te stellen (in px).
- Passend voor menu: De dropdowncontainer heeft dezelfde breedte als het bovenliggende menu.
- 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.
- Aangepast: Stel de breedte van de container in door de sleepgrepen aan elke kant te verplaatsen. Je kunt kiezen of je het links, in het midden of rechts van het hoofdmenu wilt uitlijnen.
- Ruimte boven de container: Maak de ruimte tussen de dropdowncontainer en het hoofdmenu groter of kleiner.
De indeling van het dropdownmenu aanpassen
Dit is het menu dat items weergeeft die je aan de dropdown hebt toegevoegd. Je kunt instellen hoeveel kolommen worden weergegeven, de afstand tussen en rond het menu aanpassen en de richting en uitlijning kiezen.
- Selecteer het dropdownmenu in de container.
- Klik op het Indeling-pictogram.
- Klik op de Alleen deze dropdown bewerken-schakelaar om deze in te schakelen.
- Breng de gewenste wijzigingen aan.
- 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.
- Richting: Wijzig de richting van de itemtekst (links naar rechts of rechts naar links).
- Uitlijning: Lijn de dropdownitems en subitems links, rechts of in het midden van de container uit.
Het ontwerp van de container aanpassen
Pas de achtergrondvulling en straal aan van de container die de items en elementen weergeeft die je aan de dropdown hebt toegevoegd. Je kunt ook randen en schaduwen toevoegen en aanpassen om het te laten opvallen tegen de pagina.
- Selecteer de dropdowncontainer.
- Klik rechtsboven in de editor op Inspector openen of het pictogram .
- Scrol omlaag naar Ontwerp.
- Klik op de Alleen deze dropdown bewerken-schakelaar om deze in te schakelen.
- Breng de gewenste wijzigingen aan.
- Achtergrond: Wijzig de kleur van de dropdowncontainer 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 dropdowncontainer meer rond of rechthoekig door de straal aan te passen.
- Schaduw: Voeg schaduwen toe aan de dropdowncontainer en pas de hoek, kleur, afstand en meer aan.
Pas het ontwerp van het menu aan:
Pas het menu aan dat je dropdown-items weergeeft. Je kunt het ontwerp van de container aanpassen en de items en subitems voor elke status aanpassen om een echt aangepaste look te creëren.
- Selecteer het dropdownmenu in de container.
- Klik rechtsboven in de editor op het Inspector openen-pictogram .
- Scrol omlaag naar Ontwerp.
- Klik op de Alleen deze dropdown bewerken-schakelaar om deze in te schakelen.
- Selecteer het element dat je wilt ontwerpen.
- Items dropdown
- Dropdown-menucontainer
- Subitems dropdown
- (Items / subitems dropdown) Selecteer de relevante status: Standaard, Aanwijzen of Huidige pagina.
- Breng de gewenste wijzigingen aan.
- Achtergrond: Wijzig de achtergrondkleur of voeg een opvallend kleurverloop toe. Je kunt de dekking aanpassen en meerdere lagen toevoegen om aan je ontwerpbehoeften te voldoen.
- Tekst: Pas de stijl en opmaak van de dropdown-items en subitems aan.
- Rand: Voeg randen toe rond de menucontainer en pas deze aan.
- Hoeken: Maak de hoeken van de menucontainer meer rond of rechthoekig door de straal aan te passen.
- Schaduw: Voeg schaduwen toe aan de menucontainer en pas de hoek, kleur, afstand en meer aan.
