Wix Editor: Een pop-upmenu op volledig scherm maken
4 min
In dit artikel
- Stap 1 | Voeg een lightbox toe aan je website
- Stap 2 | Stel je lightbox-menu in
- Stap 3 | Voeg een knop toe om het menu te openen
- Stap 4 | Verberg de knop op je mobiele website
Gebruik het lightbox-element om een pop-upmenu op volledig scherm te maken. Wanneer bezoekers op de 'Menu'-knop klikken, wordt deze bovenaan de inhoud van je website geopend.
Stap 1 | Voeg een lightbox toe aan je website
Begin met het toevoegen van een lightbox aan je website vanuit het Elementen toevoegen-paneel. Je zult dit later verder ontwerpen.
Om een lightbox toe te voegen:
- Ga naar je editor.
- Klik links in de Editor op Elementen toevoegen .
- Klik op Interactief.
- Selecteer een lightbox om deze aan je website toe te voegen.
.
Stap 2 | Stel je lightbox-menu in
Nadat je een lightbox hebt toegevoegd, stel je deze zo in dat deze niet automatisch wordt weergegeven telkens wanneer bezoekers je website bezoeken. Ontwerp vervolgens de lightbox naar wens en voeg een verticaal menu toe.
Om de lightbox in te stellen:
- Klik op de lightbox in je editor.
- Klik op het Instellingen-pictogram .
- Hernoem je lightbox naar iets herkenbaars, zoals 'Menu'.
- Selecteer Nee onder Lightbox automatisch weergeven op pagina's.
.
- Verwijder alle elementen in de lightbox. Verwijder het 'X'-pictogram niet.
- Voeg een verticaal menu toe aan de lightbox.
- Ontwerp je menu We raden aan dat je menulettertypen groot en gecentreerd zijn.
- Wanneer je klaar bent, klik je bovenaan op Modus afsluiten.
Tip:
Je kunt ook de achtergrond van de lightbox en de achtergrond-overlay aanpassen om bij je website te passen. Maak de achtergronden licht transparant voor een cool effect.
Stap 3 | Voeg een knop toe om het menu te openen
Nu je lightbox en menu klaar zijn, voeg je de knop toe waarop bezoekers klikken om het menu te openen. Koppel vervolgens de knop aan de lightbox.
Om een knop toe te voegen:
- Klik links in de Editor op Elementen toevoegen .
- Selecteer Decoratief.
- Selecteer Basisvormen.
- Klik op Meer basisvormen.
- Typ 'menu' in de zoekbalk en druk op Enter.
- Selecteer een ontwerp van de menuknop en klik op Toevoegen aan pagina.
- Klik in je editor op de menuknop.
- (Optioneel) Klik op het Ontwerp -pictogram om je menuknop te ontwerpen.
- Klik op het Link-pictogram .
- Selecteer links Lightbox.
- Kies je lightbox in het dropdownmenu.
- Klik op Klaar.
om je menuknop te ontwerpen.
.Tips:
- Plaats de menuknop op een prominente locatie op je site. Dit kan in de koptekst staan, of je kunt de Op scherm vastzetten-functie gebruiken om deze bovenaan je website vast te zetten. Als je menuknop niet in de koptekst wordt geplaatst, zorg er dan voor dat je instelt dat deze op alle pagina's wordt weergegeven.
- Je kunt ook je eigen menuknop ontwerpen. Dit kan een tekstknop, pictogramknop of een andere vorm zijn; dat is jouw keuze. Zie hieronder enkele voorbeelden:
Stap 4 | Verberg de knop op je mobiele website
Verberg de knop die je zojuist hebt gemaakt op je mobiele website, die al een vooraf ingesteld menu op volledig scherm heeft.
Om de knop te verbergen:
- Ga naar je mobiele editor.
- Klik op de menuknop die aan je lightbox is gekoppeld.
- Klik op het Verbergen-pictogram .
. 