Met de Video banner widget kun je een video als banner op je pagina tonen. Dit is een krachtige manier om sfeer, merkbeleving of promoties over te brengen. De video wordt fullscreen in de banner weergegeven en kan optioneel worden voorzien van bedieningsknoppen.


Beschikbare opties en toelichting:

  • Maximale hoogte van de video banner:
    Bepaal hoe hoog de video banner getoond wordt, afzonderlijk instelbaar voor desktop en mobiel. Dit geeft je controle over hoe prominent de video in beeld komt.
    Beschikbare opties:
    • Small (300px): Compacte hoogte, geschikt voor subtiele video's of wanneer de banner weinig ruimte mag innemen.
    • Normaal (500px): Standaardhoogte, geschikt voor de meeste situaties.
    • Large (700px): Grotere hoogte voor een meer opvallende presentatie.
    • Gehele scherm hoogte: De video neemt de volledige hoogte van het scherm in. Ideaal voor fullscreen visuals.
    • Automatische hoogte: De hoogte wordt automatisch bepaald op basis van de verhoudingen van de gebruikte video. Deze optie is standaard geselecteerd.
    • Zelf instellen: Vul zelf een pixelwaarde in om de hoogte precies naar wens aan te passen.
  • Video content:
    Upload hier je video. Let wel op, de video mag maximaal 14Mb groot zijn.
  • Kies unieke video voor mobiel:
    Bepaal of je een andere video voor mobiel wilt instellen.
  • Video control buttons (play/pause):Bepaal of de video bedieningsknoppen zichtbaar moeten zijn. Hiermee kan de bezoeker de video pauzeren of afspelen.

    • Aan: De knoppen worden getoond.

      • Video control kleur: Kies of de knoppen in Licht of Donker weergegeven worden, afhankelijk van de achtergrond en de leesbaarheid.

    • Uit: De video speelt automatisch af zonder zichtbare bediening.

  • Video control schaduw:
         Voeg een subtiele schaduw toe aan de bedieningsknoppen. Dit verbetert de zichtbaarheid wanneer de video zelf lichte of drukke beelden bevat.
  • Titel:
    Voeg een titel toe die boven de tekst en knoppen op de kaart verschijnt. Dit kan een korte wervende kop zijn, zoals “Populaire producten” of “Nieuwe collectie”.
  • Titel settings:
    Onder deze optie pas je de stijl en structuur van de titel aan:
    • Semantische tag instellen: Kies of de tekst een gewone paragraaf is (p) of een titel (h1 t/m h6). Dit is belangrijk voor de structuur en vindbaarheid van je pagina.
    • Stijl (class): Bepaal de visuele opmaak van de tekst. Je kunt kiezen uit verschillende stijlen zoals:
      • Body text (van XS tot XL) — voor gewone tekstgrootten
      • Heading (1 t/m 6) — standaard kopteksten
      • Display heading (1 t/m 6) — grotere, opvallendere koppen

  • Alinea (optioneel):

    Hier kun je een korte toelichtende tekst onder de titel plaatsen. Bijvoorbeeld een uitleg of call-to-action. Dit veld is optioneel.
  • Achtergrond van tekstkaart:
    Kies hoe de achtergrond van de tekstkaart op de dia eruitziet:

    • Normaal (transparant)

    • Licht

    • Donker

  • Tekstkleur:
    Kies uit vooraf ingestelde kleuren (afgeleid van de instellingen onder "Website uiterlijk > Algemeen > Stijl") of stel handmatig een kleur in.
  • Kleuren op mobiel aanpassen:
    Activeer dit om een afwijkende tekstkleur en achtergrond voor de tekstkaart op mobiel te kiezen.
  • Knop toevoegen:
    Je kunt ervoor kiezen om één of twee knoppen aan de video banner toe te voegen. Als je een knop activeert, krijg je toegang tot de volgende instellingen:
  • Button type
    Kies een buttonstijl uit de beschikbare button presets (zoals primair, secundair, info, enz.). Deze zijn afgestemd op je website-ontwerp.
  • Button breedte
    • Desktop: Kies uit:
      • Normaal
      • Ruimte opvullen (neemt beschikbare ruimte tussen knoppen in)
      • Gehele breedte innemen (knoppen worden onder elkaar geplaatst)
    • Mobiel: Zelfde opties, geoptimaliseerd voor kleinere schermen.
  • Uitlijning van de button(s)
    • Desktop & mobiel: Kies hoe de knoppen worden gepositioneerd binnen de kaart:
      • Links
      • Midden
      • Rechts
      • Links en rechts (verdeeld over de volledige breedte)
  • Button tekst
    Vul hier de tekst in die op de knop moet staan, bijvoorbeeld “Bekijk nu” of “Meer info”.
  • Button URL
    Voer hier de link in waarnaar de knop moet verwijzen.
  • Link openen in nieuw tabblad
    Met deze switch geef je aan of de link in een nieuw browservenster moet openen.
  • Button met icon
    Wil je een icoon naast je knoptekst tonen? Zet deze optie aan en kies vervolgens het gewenste icoon:
    • Arrow right
    • Arrow left
    • Envelop
    • Phone
  • Tweede button toevoegen
    Wil je nog een extra knop toevoegen? Dat kan. Deze tweede knop krijgt dezelfde instelmogelijkheden als hierboven beschreven.
  • Link zonder button:
    Wanneer je Geen button hebt gekozen, kun je één algemene Link URL instellen. De gehele dia verwijst dan naar deze link (tenzij je Link per dia instellen hebt ingeschakeld).
  • Gehele banner clickable maken:
    Wanneer je een button hebt toegevoegd, kun je ervoor kiezen de hele banner klikbaar te maken. Dit is niet beschikbaar wanneer je twee knoppen gebruikt.
  • Uitlijning van tekstkaart op dia:

    • Tekst in kaart uitlijnen: links, midden of rechts

    • Horizontale uitlijning van kaart: links, midden of rechts

    • Verticale uitlijning van kaart: boven, midden of onder

  • Maximale breedte van kaart op banner (in pixels):
    Stel in hoe breed de tekstkaart maximaal mag zijn, afzonderlijk voor desktop en mobiel.
  • Kaart gedeeltelijk van de banner af tonen:
    Maak de tekstkaart visueel speelser door deze gedeeltelijk buiten de banner te laten vallen, instelbaar voor zowel desktop als mobiel.
  • CSS classes:
    Met deze optie kun je specifieke CSS classes aan de afbeelding toevoegen voor maatwerk styling. Dit geeft je de mogelijkheid om aangepaste stijlen toe te passen via "Website uiterlijk > CSS aanpassen" in de backoffice, waardoor je de afbeelding verder kunt aanpassen aan je ontwerpbehoeften.