In deze uitleg: Mega menu openen | Mega menu instellen | Kolommen instellen | Menu toevoegen | Blokken toevoegen | Afbeelding toevoegen | Weergave per apparaat
Mega menu openen
In de Header-editor kun je een mega menu opbouwen en aanpassen. Selecteer in de navigatie het betreffende Mega menu item. Aan de linkerkant worden vervolgens de instellingen van dat Mega Menu Item geopend.
Bij Instellingen MegaMenuItem vind je onder andere de optie Mega menu tonen. Hiermee kun je het mega menu tijdens het bewerken openen en weer verbergen.
Mega menu instellen
Het mega menu wordt opgebouwd uit verschillende blokken en kolommen. Door een onderdeel in het mega menu te selecteren, verschijnen links de instellingen voor dat specifieke onderdeel.
Afhankelijk van het geselecteerde onderdeel kun je bovenaan wisselen tussen:
- Content
- Style
- Advanced
Kolommen instellen
Een mega menu kan uit meerdere kolommen bestaan. Selecteer een kolom om de Instellingen Col te openen.
Onder Content kun je verschillende onderdelen aan een kolom toevoegen:
- Tekst toevoegen
- Afbeelding toevoegen
- Icoon toevoegen
- Button toevoegen
- Add columns
Via het tabblad Style kun je de achtergrondkleur per kolom aanpassen.
Via het tabblad advanced kun je onder andere de kolombreedte en de marge binnen de kolom (padding) aanpassen. Ook is hier een instelling voor overlap beschikbaar. Hiermee kun je een afbeelding overlap meegeven over een ander element heen.
Selecteer je de volledige groep met kolommen, dan opent Instellingen Columns. Hier kun je bij Kolom layout de gewenste verdeling van de kolommen selecteren.
Menu items toevoegen
Voor de links in het mega menu wordt gebruikgemaakt van een Menu (lijst). Selecteer een bestaande lijst om de Instellingen List te openen.
Bij de bewerkopties kun je vervolgens nieuwe onderdelen aan de lijst toevoegen:
- Menu item toevoegen
- Opsommingsitem toevoegen
In de video is te zien dat meerdere menulijsten naast elkaar én onder elkaar in het mega menu kunnen worden geplaatst. Zo kun je verschillende menu’s met menu-items over meerdere kolommen verdelen.
Blokken toevoegen
Klik in een lege ruimte op Blokken toevoegen om een nieuw onderdeel in het mega menu te plaatsen.
Je veranderd de kolom layout van bijvoorbeeld 3 naar 4.
In het Content zijn verschillende vooraf ingestelde elementen beschikbaar.
waaronder:
- Tekst
- Afbeelding
- Icoon
- Button
- Add columns
Daarnaast kun je ook vaste Navigatieblokken toevoegen zoals:
- Tekst
- Icoon
- Afbeelding
- Afbeeldingslink
- Button
- Link
- Dropdown
- Slider
- Menu (lijst)
- Accordeon
- Offcanvas
- HTML
Hoe deze werken is uitgelegd in de handleiding Html en de PageBuilder: https://support.sparkles.io/kennisbank/html-en-de-pagebuilder/#elementen
Tip
Een mega menu hoeft niet alleen uit links te bestaan. Je kunt verschillende blokken combineren en bijvoorbeeld meerdere menulijsten en een afbeelding naast elkaar plaatsen.
Afbeelding toevoegen
Naast de menulijsten kun je ook een afbeelding in een aparte kolom plaatsen.
- Selecteer de kolom waarin je de afbeelding wilt plaatsen.
- Kies Afbeelding toevoegen of open Blokken toevoegen en kies Afbeelding.
- De afbeelding wordt als apart element binnen de kolom geplaatst.
In het voorbeeld uit de video bestaat het mega menu uiteindelijk uit meerdere menulijsten met daarnaast een aparte kolom voor een afbeelding.
Weergave per apparaat
Bij de instellingen van verschillende onderdelen staat ook Weergave per apparaat. Hiermee kun je bepalen op welke apparaten het geselecteerde onderdeel wordt weergegeven.
Controleer daarom bij de verschillende onderdelen van het mega menu of de juiste weergave voor desktop, tablet en mobiel juist is ingesteld.
Video uitleg
Bekijk hieronder de stappen voor het aanpassen en opbouwen van het mega menu in de Header-editor.
