Met de Masonry galerij widget plaats je een responsive fotogalerij op je pagina via de PageBuilder. De afbeeldingen worden in kolommen geplaatst waarbij elke afbeelding zijn eigen hoogte behoudt (een "masonry"-indeling, zoals een metselverband). Optioneel openen de afbeeldingen bij een klik vergroot in een lightbox, en kun je een titel, subkop en knoppen onder de galerij tonen.


Beschikbare opties

Afbeeldingen

  • Afbeeldingen: Voeg afbeeldingen toe, pas de volgorde aan met de pijltjes en geef per afbeelding een alt-tekst (voor toegankelijkheid en SEO) en een optioneel bijschrift.


Indeling

  • Aantal kolommen (desktop / tablet / mobiel): Bepaal per apparaat in hoeveel kolommen de afbeeldingen worden verdeeld. Op desktop kies je uit 1 t/m 6 kolommen (standaard 3), op tablet 1 t/m 4 (standaard 2) en op mobiel 1 t/m 3 (standaard 1).
  • Ruimte tussen afbeeldingen (desktop / tablet / mobiel): Bepaal per apparaat de tussenruimte (gutter) tussen de afbeeldingen. Kies een van de presets (van Geen tot 2x extra large) of kies Zelf instellen om de ruimte zelf in pixels op te geven.
  • Custom ruimte tussen afbeeldingen (desktop / tablet / mobiel, px): Alleen zichtbaar wanneer je bij de bijbehorende tussenruimte voor Zelf instellen kiest. Vul hier de gewenste ruimte in pixels in.


Weergave van de afbeeldingen

  • Afbeeldingen vergroten in lightbox bij klik: Bij klikken op een afbeelding wordt deze groot getoond in een lightbox waarin je door de afbeeldingen kunt bladeren.
  • Dynamische border radius op afbeelding: Hierbij wordt de border-radius gebruikt die is ingesteld bij de Buttons in "Website uiterlijk > Algemeen". Als de button geen border-radius heeft, dan krijgt de afbeelding ook geen border-radius, zelfs met deze optie aan.
  • Bijschrift op de afbeelding tonen: Toont het bijschrift als overlay onderaan de afbeelding (lichte tekst op een donkere, semitransparante achtergrond) in plaats van eronder.
  • Achtergrond bijschrift:Alleen zichtbaar wanneer het bijschrift niet als overlay wordt getoond. Bij een lichte of donkere achtergrond krijgt het bijschrift wat ruimte (padding) en sluit het aan op de afbeelding. Keuzes:
    • Transparant
    • Licht met donkere tekst
    • Donker met lichte tekst
  • Bijschrift schuingedrukt weergeven: Toont het bijschrift cursief.


Titel en subkop

  • Titel (optioneel): Voeg hier een titel toe die boven de galerij wordt getoond, zoals "Onze projecten" of "Sfeerimpressie".
  • Semantische tag: Kies de titel-tag (h1 t/m h4). Dit bepaalt de betekenis van de kop voor toegankelijkheid en SEO, los van hoe de tekst eruitziet.
  • Stijl (class): Bepaal de visuele opmaak van de titel, los van de semantische tag. Je kunt kiezen uit de standaardstijl (op basis van de tag) of verschillende heading- en display heading-stijlen.
  • Subheading (optioneel): Voeg een korte tekst toe die onder de titel wordt getoond.
  • Tekst uitlijning: Bepaal de uitlijning van zowel de titel als de subkop: links (standaard) of gecentreerd.


Knoppen

  • Button type: Kies een buttonstijl uit de beschikbare button presets (zoals primary, secondary, tertiary, light, dark, transparent of een tekstlink). Kies Geen button als je geen knop wilt tonen.
  • Button tekst: Vul hier de tekst in die op de knop moet staan.
  • Button URL: Voer hier de link in waarnaar de knop moet verwijzen.
  • Button 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? Kies of het icoon links of rechts van de tekst staat, of zet het uit met Geen icon.
  • Soort icon: Kies het icoon: Arrow right, Arrow left, Envelope of Phone.
  • Tweede button toevoegen: Wil je nog een extra knop toevoegen? Dat kan. Voor de tweede button stel je dezelfde opties in (soort, tekst, URL, nieuw tabblad en icon) als voor de eerste.
  • Button breedte (desktop / mobiel): Bepaal per apparaat de breedte van de knop(pen): Normaal, Ruimte opvullen of Gehele breedte innemen (de buttons komen dan onder elkaar).
  • Uitlijning van button(s) (desktop / mobiel): Bepaal per apparaat de positie van de knop(pen): Links, Midden, Rechts of Links en rechts (met ruimte tussen de buttons). Alleen beschikbaar bij buttonbreedte Normaal.


Overig

  • CSS classes: Met deze optie kun je specifieke CSS classes aan de widget toevoegen voor maatwerk styling. Scheid meerdere classes met een spatie.


Let op

  • Zonder afbeeldingen toont de widget niets.
  • De widget is beschikbaar in template 4000 (of hoger) met de nieuwe PageBuilder.