Wix Editor: Een pop-upmenu op volledig scherm maken
Leestijd 4 minuten
Gebruik het lightbox-element om een pop-upmenu op volledig scherm te maken. Wanneer bezoekers op de 'Menu'-knop klikken, wordt deze boven op de inhoud van je website geopend, net als in het onderstaande voorbeeld:
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:
- Klik links in de Editor op Elementen toevoegen
. - Selecteer 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 in de Editor op de lightbox.
- 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 aanpassen 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 menuknopontwerp en klik op Toevoegen aan pagina.
Tip: Plaats de menuknop op een prominente plaats op je website, zoals de koptekst. - Selecteer de menuknop in je Editor.
- (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.
Tips:
- Plaats de menuknop op een prominente locatie op je site. Dit kan in de kop staan, of misschien wil je de vastmaken aan scherm functie gebruiken om het bovenaan je site vast te pinnen. Als je menuknop niet in de kop staat, zorg er dan voor dat je instelt dat deze op alle pagina's wordt weergegeven.
- Je kunt ook je eigen menuknop ontwerpen. Het kan een tekstknop, pictogramknop of een andere vorm zijn; het is aan jou! 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 de mobiele Editor.
- Klik op de menuknop die aan je lightbox is gekoppeld.
- Klik op het Verbergen-pictogram
.
Vond je dit artikel nuttig?
|