Wix Helpcentrum
    Home
  1. Studio, Wix Specialisten en Enterprise
  2. Wix Studio
  3. De Studio Editor gebruiken
  4. Elementen toevoegen in de Studio Editor
    5. Studio Editor: Een megamenu toevoegen en aanpassen

Studio Editor: Een megamenu toevoegen en aanpassen

Leestijd 4 minuten
Megamenu's zijn containers die je kunt toevoegen aan een horizontaal menu. Wanneer bezoekers het relevante menu-item aanwijzen, wordt de container geopend. Ontwerp de container en beslis waar je het voor wilt gebruiken: navigatie op meerdere niveaus, het presenteren van uitgelichte producten, of welk ander doel dan ook.
Voorbeeld van een megamenu in e-commercestijl, waarbij de container veel navigatielinks naar verschillende productcategorieën toont
Wat je moet weten:
Het is alleen mogelijk om een megamenucontainer toe te voegen aan een horizontaal menu. Megamenu-containers worden niet ondersteund op verticale menu's, ankermenu's en hamburger-menu's.
In dit artikel lees je hoe je:

Een megamenucontainer toevoegen en instellen

Voeg de megamenucontainer als een item toe aan een bestaand menu en geef het de gewenste naam. We raden aan een titel te gebruiken die overeenkomt met je beoogde inhoud, zoals 'Diensten' of 'Ons verhaal'.
Nadat je je container hebt toegevoegd en een naam hebt gegeven, voeg je elementen zoals knoppen, vormen en tekst toe om de gewenste inhoud samen te stellen. 

Om een megamenu toe te voegen:

  1. Selecteer het relevante horizontale menu in je Editor.
  2. Klik op Menu beheren.
  3. Klik onderaan het paneel op + Item toevoegen.
  4. Selecteer Megamenu.
  5. Voer een titel in voor het megamenu.
    Tip: Dit is de titel die bezoekers aanwijzen om het megamenu te zien.
  6. Klik op Klaar.
  7. Voeg inhoud toe aan het megamenu:
    1. (In het Menu beheren-paneel) Klik naast Container op Bewerken.
    2. Voeg alle elementen die je nodig hebt toe aan de container.
Het Menu beheren-paneel, klik op Bewerken om elementen toe te voegen aan een nieuwe megamenucontainer

Een dropdownmenu maken

Gebruik een megamenu om specifieke items op een website te ordenen door een dropdownmenu te maken. Wanneer bezoekers op het megamenu klikken, verschijnen het dropdownmenu en de items in de container. 
Er is een dropdownmenu geopend op een live website van Wix.
Wat je moet weten:
Je voegt dropdown-items toe en beheert ze vanuit hetzelfde paneel als het hoofdmenu, zodat het nog eenvoudiger is om websitenavigatie in te stellen.

Om een dropdownmenu te maken:

  1. Selecteer het relevante horizontale menu in je Editor.
  2. Klik op Menu beheren.
  3. (Als het item niet aan het horizontale menu is toegevoegd) Klik op Item toevoegen en stel het gewenste menu-item in.
  4. Nest de relevante menu-items onder het megamenu: 
    1. Selecteer het item in het Menu beheren-paneel.
    2. Sleep het item onder het megamenu.
Een GIF met items die worden gesleept en neergezet onder een megamenu vanuit het Menu beheren-paneel — waardoor een dropdownmenu ontstaat.
Wil je dropdownmenu-items beheren?
Gebruik het Menu beheren-paneel om items opnieuw te ordenen, een andere naam te geven, of te verwijderen in een dropdownmenu.

De indeling van de megamenucontainer aanpassen

Nadat je de gewenste elementen aan het megamenu hebt toegevoegd, verander je de indeling zodat deze overeenkomt met je paginastructuur. Je kunt de afstand aanpassen en beslissen hoe ver de container uitrekt. 

Om de indeling te wijzigen:

  1. Selecteer het relevante menu in je Editor.
  2. Klik op het Indeling-pictogram.
  3. Klik op Megamenu.
  4. Gebruik de opties om de indeling aan te passen:
    • Container uitrekken: Bepaal of de container al dan niet wordt uitgerekt tot de volledige breedte van het scherm van de bezoeker. Indien uitgeschakeld, kun je de gewenste breedte instellen op het canvas of in het Inspector-paneel.
    • Marges: Voeg ruimte toe (in px of %) tussen de megamenucontainer en de randen van het scherm.
    • Ruimte tussen items en container: Maak de ruimte tussen het menu en de megamenucontainer groter of kleiner door de schuifregelaar te verslepen.
Het megamenu-tabblad in het menu-indelingenpaneel in de Studio Editor.

Het megamenu ontwerpen

Nadat je de indeling van de container hebt aangepast, ontwerp je de randen, achtergrond en meer. Om een consistent uiterlijk te behouden, zijn wijzigingen die je aanbrengt in het megamenu ook van toepassing op alle submenu's die je hebt toegevoegd.

Om het ontwerp van de container aan te passen:

  1. Selecteer het relevante menu in je Editor.
  2. Klik rechtsboven in de Editor op het Inspector openen-pictogram.
Een screenshot van het openen van het Inspector-paneel in de Studio Editor.
  1. Selecteer Submenu container in de Wat wil je ontwerpen?-dropdown.
  2. Gebruik de beschikbare opties om de container te ontwerpen:
    • Achtergrond: Stel een kleur, kleurovergang of afbeeldingsachtergrond in voor de container. Je kunt meerdere achtergrondlagen met verschillende dekkingsniveaus toevoegen. 
    • Randen: Voeg randen toe en ontwerp ze voor de container.
    • Hoeken: Maak de hoeken van de container meer rond of rechthoekig. 
    • Schaduwen: Voeg een schaduw toe achter de container voor een 3D-effect.
Selecteren om de submenucontainer in het Inspector-paneel te ontwerpen, met de beschikbare opties voor megamenu's

Vond je dit artikel nuttig?

|
In dit artikel
  • Een megamenucontainer toevoegen en instellen
  • Een dropdownmenu maken
  • De indeling van de megamenucontainer aanpassen
  • Het megamenu ontwerpen