Studio Two-editor: Websitemenu's ontwerpen

In de Studio Two-editor kun je het ontwerp van je menu verfijnen met behulp van het Inspector-paneel. Pas elke status afzonderlijk aan, inclusief Standaard, Aanwijzen en Geselecteerd of Huidige pagina, en pas instellingen aan zoals opvulkleur, tekststijl, schaduw en meer.

Gebruik het Inspector-paneel om horizontale en verticale menu's voor elke status te ontwerpen: Standaard, Aanwijzen en Geselecteerd. Het aanpassen van deze statussen helpt een meer interactieve navigatie-ervaring voor bezoekers te creëren.

De beschikbare ontwerpopties zijn afhankelijk van de menu-voorinstelling die je kiest. Gebruik deze opties om het menu aan te passen aan het uiterlijk van de website, inclusief aanpasbare elementen zoals knoppen of scheidingstekens.

1. Ga naar je editor.

2. Klik op het menu op het canvas.

3. Klik rechtsboven in de editor op het Inspector openen-pictogram .

4. Klik op het Ontwerp-tabblad.

5. Selecteer het element dat je wilt ontwerpen onder Kies wat je wilt ontwerpen: zoals Menubalk, Menu-items, Dropdowns, Scrollknop.

6. Selecteer de relevante status: Standaard, Aanwijzen of Geselecteerd. 

7. Ontwerp het menu met behulp van de beschikbare optie, zoals:

   • Vullen: Wijzig de kleuren van de achtergrond, het pictogram of de overlay.

   • Randen: Voeg randen toe of pas ze aan.

   • Hoeken: Maak de hoeken vierkanter of ronder.

   • Schaduw: Voeg schaduw toe om diepte te creëren.

   • Afstand: Pas de ruimte rond en tussen items aan.

   • Gedrag: Bepaal hoe het menu de richting van de website volgt en waar de items staan.

   • Positie: Stel het positietype en de marges in.

   • Uiterlijk: Pas de dekking en rotatie aan.

   • Cursor: Voeg een aangepaste cursor toe met een afbeelding of SVG.

   • Anker: Voeg een anker toe zodat bezoekers rechtstreeks naar dit gebied kunnen linken.

   • Aangepaste CSS: Voeg aangepaste CSS toe voor meer geavanceerde ontwerpcontrole.

Hamburgermenu's hebben 2 weergaven die je kunt aanpassen: Normale modus en Hamburgermenu. De normale modus regelt het Gesloten menu-pictogram op de pagina, terwijl Hamburgermenu bepaalt wat bezoekers zien nadat ze het menu hebben geopend.

1. Ga naar je editor.

2. Klik op het hamburgermenu op het canvas.

3. Klik op de modus-dropdown en selecteer de modus die je wilt aanpassen: Normale modus of Hamburgermenu.

4. Pas de modus aan met behulp van de beschikbare opties:

   • Normale modus: 

     • Kies een onderdeel om te ontwerpen: Klik op de dropdown en selecteer Hamburger-knop of Pictogram.

     • Kies een status: Selecteer de relevante status, zoals Standaard of Aanwijzen.

     • Pas het ontwerp aan: Gebruik de beschikbare opties om het uiterlijk en de indeling aan te passen:

       • Grootte: Pas de grootte van het hamburger-menu aan.

       • Vullen: Wijzig de kleuren van de achtergrond, het pictogram of de overlay.

       • Randen: Voeg randen toe of pas ze aan.

       • Hoeken: Maak de hoeken vierkanter of ronder.

       • Schaduw: Schaduweffecten toevoegen.

       • Afstand: Pas de ruimte rond en tussen items aan.

       • Gedrag: Bepaal hoe het menu de richting van de website volgt en waar de items staan.

       • Positie: Stel het positietype en de marges in.

       • Uiterlijk: Pas de dekking en rotatie aan.

       • Cursor: Voeg een aangepaste cursor toe met een afbeelding of SVG.

       • Aangepaste CSS: Voeg aangepaste CSS toe voor meer geavanceerde ontwerpcontrole.

   • Hamburgermenu:

     • Kies een onderdeel om te ontwerpen: Selecteer het relevante onderdeel onder Kies wat je wilt ontwerpen:

       • Hamburgermenu: Pas de container aan die wordt geopend wanneer bezoekers op het hamburgermenu klikken.

       • Sluiten-knop: Pas het pictogram aan dat bezoekers klikken om het menu te sluiten.

       • Pictogram: Pas het ontwerp van het pictogram aan.

     • Kies een status: Selecteer de relevante status, zoals Standaard, Aanwijzen, of Uitgeschakeld. Beschikbare statussen zijn afhankelijk van het onderdeel dat je selecteert.

     • Pas het ontwerp aan: Gebruik de beschikbare opties om het uiterlijk en de indeling aan te passen:

       • Vullen: Wijzig de kleuren van de achtergrond, het pictogram of de overlay.

       • Randen: Voeg randen toe of pas ze aan.

       • Hoeken: Maak de hoeken vierkanter of ronder.

       • Schaduw: Schaduweffecten toevoegen.

       • Afstand: Pas de ruimte rond en tussen items aan.

       • Gedrag: Bepaal hoe het menu de richting van de website volgt en waar de items staan.