Studio Editor: Lightboxen gebruiken

Leestijd 6 minuten
Een lightbox is een pop-up die je naar wens kunt aanpassen. Ontwerp het pop-upvenster en voeg de elementen toe die je wilt. Kies vervolgens wanneer het verschijnt voor bezoekers van de website.
Je kunt ook elementen, zoals tekst, knoppen of afbeeldingen, koppelen. Als je erop klikt, wordt de lightbox geopend. Dit is een goede manier om de blootstelling aan tijdgevoelige informatie, uitverkopen of promoties te vergroten.
Een voorbeeld van een lightbox die wordt gebruikt om meer abonnees te krijgen voor de nieuwsbrief van een klant
In dit artikel lees je hoe je:

Een lightbox toevoegen

Voeg een pop-up toe aan je website, zodat je spannende aankondigingen kunt instellen voor bezoekers.

Om een lightbox toe te voegen:

  1. Klik links in de Editor op Elementen toevoegen.
  2. Klik op Indeling-tools.
  3. Klik op Lightbox.
  4. Selecteer de lightbox die je wilt toevoegen. 

Een lightbox aanpassen

Pas de lightbox aan zodat deze bij de rest van de website past. Voeg alle elementen toe die je nodig hebt, verander vervolgens de achtergrondkleur en bepaal de dekking.

Om een lightbox aan te passen:

  1. Klik links in de Editor op Pagina's.
  2. Selecteer de relevante lightbox onder Lightbox.
  3. Klik in de Editor op de lightbox.
  4. Kies hoe je de lightbox wilt aanpassen:
    • Voeg elementen toe:  
      1. Klik links in de Editor op Elementen toevoegen.
      2. Sleep het relevante element. 
    • Ontwerp je achtergrond: 
      1. Klik rechtsboven in de Editor op de Inspector-pijl.
      2. Scrol omlaag naar Ontwerp.
      3. Kies een kleur en stel onder Achtergrond de dekking van de achtergrond in.
  5. Wanneer je klaar bent, klik je onderaan op Klaar om de bewerkingsmodus te verlaten. 
Een screenshot van de bewerkingsmodus van de lightbox, waarbij een achtergrondkleur wordt gekozen in het infovenster
En nu?
Bekijk een voorbeeld van de website om de lightbox in actie te zien.

Triggers instellen voor een lightbox

Kies hoe en wanneer de lightbox verschijnt. Je kunt het zo instellen dat het automatisch op specifieke pagina's verschijnt of het aan een element koppelen (bijvoorbeeld tekst of een afbeelding). Je kunt ook beslissen hoe bezoekers de lightbox sluiten nadat ze deze hebben bekeken.
Let op:
De lightbox wordt één keer per bezoeker weergegeven, op de eerste relevante pagina die ze zien (in het geval dat de lightbox op meerdere pagina's wordt weergegeven).

Om triggers in te stellen:

  1. Klik links in de Editor op Pagina's.
  2. Selecteer de relevante lightbox onder Lightbox
  3. Klik op de lightbox op het canvas.
  4. Klik op Triggers instellen.
  5. Selecteer de relevante optie onder Lightbox automatisch tonen op pagina's:
    • Ja: De lightbox verschijnt automatisch wanneer bezoekers de relevante pagina's betreden.
      1. Klik onder Op welke pagina's? om de relevante pagina('s) te selecteren.
      2. Sleep de Vertraging-schuifregelaar om in te stellen hoe lang (in seconden) het duurt voordat de lightbox verschijnt nadat de pagina is geladen.
    • Nee: De lightbox verschijnt niet wanneer bezoekers een pagina betreden. In plaats daarvan wordt het geactiveerd door een knop of een link die je kiest. 
  6. Schakel de relevante schakelaar(s) in onder Hoe sluit de lightbox?.
    Let op: Als je zowel het 'X'-pictogram als de 'Sluiten'-knop uitschakelt, kunnen bezoekers buiten de lightbox klikken om deze te sluiten.
  7. Wanneer je klaar bent, klik je op Klaar om de bewerkingsmodus te verlaten.  
Het Triggers-paneel opent naast een lightbox, ingesteld om automatisch te openen op de homepage

Een planning instellen voor een lightbox

Kies wanneer websitebezoekers de lightbox zien. Als je bijvoorbeeld een aanbieding met een beperkte geldigheidsduur promoot, zorgt dit ervoor dat de lightbox alleen in het relevante tijdsbestek verschijnt.

Om de planning van je lightbox in te plannen:

  1. Klik links in de Editor op Pagina's.
  2. Selecteer de relevante lightbox onder Lightbox
  3. Klik op de lightbox op het canvas.
  4. Klik op Triggers instellen.
  5. Scrol omlaag naar Planning lightbox en klik op + Planning instellen.
  6. Stel de begindatum en -tijd en de einddatum en -tijd in.
    Tip: Zorg ervoor dat de juiste tijdzone is ingesteld. Zo niet, dan kun je dit wijzigen. 
De planning van de lightbox instellen in de Studio Editor

Elementen aan een lightbox koppelen

Link-elementen op de website openen een lightbox, zodat bezoekers nooit een aankondiging missen. Je kunt elementen zoals tekst, afbeeldingen, video's en knoppen koppelen. 

Om een element aan een lightbox te koppelen:

  1. Klik op het relevante element in je Editor.
  2. Klik op het Link-pictogram.
  3. Selecteer links Lightbox.
  4. Klik op het Welke lightbox?-dropdown en selecteer de relevante lightbox.
  5. Klik op Klaar.
Een Tekstmasker-element koppelen om een lightbox te openen wanneer bezoekers erop klikken

Een lightbox beheren

Beheer de lightboxen van de website om ze georganiseerd te houden in de Editor. Je kunt ze hernoemen zodat ze gemakkelijk te vinden zijn, dupliceren om tijd te besparen en verouderde lightboxen verwijderen.

Om een lightbox te beheren:

  1. Klik links in de Editor op Pagina's.
  2. Klik naast de betreffende lightbox op het Meer acties-pictogram.
  3. Kies wat je vervolgens wilt doen:
Een lightbox in het Pagina's-paneel met de beschikbare beheeropties

Vond je dit artikel nuttig?

|