Hoe stel je een pagina grid blok in binnen een kolommenblok in Datamotive?

Met het pagina grid blok geef je pagina's automatisch weer als cards in een grid. De inhoud van elke card wordt opgebouwd op basis van de fragmentgegevens van de geselecteerde pagina's, zoals de titel, omschrijving, afbeelding en de tekst voor de meer-link. Het pagina grid is daarmee geschikt voor dynamische overzichten die automatisch meegroeien met de onderliggende pagina's, zoals een nieuws- of actieoverzicht.

Voorwaarde: het pagina grid blok wordt toegevoegd binnen een kolom van een kolommenblok. Heb je nog geen kolommenblok aangemaakt? Raadpleeg dan eerst de handleiding [Hoe stel je een kolommenblok in binnen Datamotive?]

Let op: als Fragmenten & Taxonomieën niet is ingevuld op een geselecteerde pagina, wordt die pagina als lege card zonder content getoond in het grid. Zorg er daarom altijd voor dat de fragmentgegevens van de onderliggende pagina's correct zijn ingevuld. Raadpleeg hiervoor de handleiding [Hoe stel je het tabblad Fragment & Taxonomieën in voor een pagina in Datamotive?]

Titel:
Hoe stel je een pagina grid blok in binnen een kolommenblok in Datamotive?

Ondertitel:
Leer hoe je met het pagina grid blok pagina's automatisch als cards in een grid weergeeft, zoals een nieuws- of actieoverzicht.

Metabeschrijving:
Leer hoe je in Datamotive een pagina grid blok toevoegt aan een kolommenblok, cards instelt en pagina's automatisch inlaadt op basis van bron, categorie en label.

Artikelinhoud:

Met het pagina grid blok geef je pagina's automatisch weer als cards in een grid. De inhoud van elke card wordt opgebouwd op basis van de fragmentgegevens van de geselecteerde pagina's, zoals de titel, omschrijving, afbeelding en de tekst voor de meer-link. Het pagina grid is daarmee geschikt voor dynamische overzichten die automatisch meegroeien met de onderliggende pagina's, zoals een nieuws- of actieoverzicht.

Voorwaarde: het pagina grid blok wordt toegevoegd binnen een kolom van een kolommenblok. Heb je nog geen kolommenblok aangemaakt? Raadpleeg dan eerst de handleiding [Hoe stel je een kolommenblok in binnen Datamotive?]

Let op: als Fragmenten & Taxonomieën niet is ingevuld op een geselecteerde pagina, wordt die pagina als lege card zonder content getoond in het grid. Zorg er daarom altijd voor dat de fragmentgegevens van de onderliggende pagina's correct zijn ingevuld. Raadpleeg hiervoor de handleiding [Hoe stel je het tabblad Fragment & Taxonomieën in voor een pagina in Datamotive?]

Een pagina grid blok toevoegen

Stap 1 – Voeg een blok toe
Klik binnen de kolom op + Blok toevoegen en selecteer het bloktype Pagina grid.

Stap 2 – Vul een korte beschrijving in (optioneel)
Vul een korte beschrijving in voor intern gebruik in het CMS. Deze tekst is niet zichtbaar op de website.

Algemene instellingen configureren

Stap 3 – Kies het aantal kolommen
Selecteer bij Aantal kolommen hoeveel cards naast elkaar worden weergegeven. Beschikbare opties zijn: 1, 2, 3, 4, 6 of 12.

Stap 4 – Stel het aantal cards per pagina in
Vul bij Aantal card's per pagina in hoeveel cards per pagina worden getoond. Deze instelling wordt gebruikt voor paginering binnen het grid.

Card-instellingen configureren

Stap 5 – Kies het card thema
Selecteer bij Card > Thema de gewenste weergavestijl:

• Regular (standaard) – een standaard card met witte achtergrond
• Floating – een card met een zwevend effect
• Filled – een card met een gekleurde achtergrond

Stap 6 – Bepaal of de publicatiedatum wordt getoond (optioneel)
Schakel onder de themaselectie de optie Publicatiedatum tonen in als je de datum in de card wilt weergeven. Wanneer deze optie is ingeschakeld, wordt het veld Datum van schrijven van de onderliggende pagina getoond in de pagina card.

Let op: de datum die wordt getoond, beheer je per pagina via het tabblad Instellingen. Raadpleeg hiervoor de handleiding [Hoe stel je het tabblad Instellingen in voor een pagina in Datamotive?]

Stap 7 – Stel de knop in
Onder Knop stel je de knop binnen de card in:

• Verbergen: schakel deze optie in als je geen knop wilt tonen binnen de card
• Titel overschrijven: voer een eigen knoptekst in om de standaardtekst te vervangen
• Thema: kies het thema van de knop, bijvoorbeeld Primair
• Formaat: kies de grootte van de knop: Small, Medium (standaard) of Large

Pagina's configureren

Stap 8 – Open de pagina configuratie
Klik op het veld Pagina's om het venster Pagina's configureren te openen. Hier stel je in welke pagina's automatisch worden ingeladen in het grid.

Stap 9 – Kies een bron
Klik op Kies bron en selecteer de bovenliggende pagina waarvan de onderliggende pagina's in het grid moeten worden getoond. Kies je bijvoorbeeld de pagina Nieuws, dan worden alle onderliggende nieuwspagina's automatisch als cards ingeladen. Schakel Reken subelementen mee in als ook pagina's dieper in de structuur moeten worden meegenomen.

Stap 10 – Stel in welke pagina's worden ingeladen op basis van categorieën (optioneel)
Klik op Kies categorieën om te bepalen welke pagina's op basis van categorie worden ingeladen. Stel daarnaast in hoe pagina's met meerdere categorieën worden verwerkt.

Stap 11 – Stel in welke pagina's worden ingeladen op basis van labels (optioneel)
Gebruik het zoekveld onder Filteren op labels om te bepalen welke pagina's op basis van label worden ingeladen. Stel ook hier in hoe pagina's met meerdere labels worden verwerkt.

Stap 12 – Stel in welke paginatypes worden ingeladen (optioneel)
Beperk het grid tot specifieke paginatypes via Filteren op types. Standaard zijn alle paginatypes geselecteerd.

Stap 13 – Stel de sortering in
Kies bij Sorteren op het sorteerveld (bijvoorbeeld Standaard) en de sorteerrichting (bijvoorbeeld Oplopend).

Stap 14 – Beperk het aantal resultaten (optioneel)
Vul bij Beperk resultaat tot het maximale aantal pagina's in dat wordt weergegeven in het grid.

Stap 15 – Bevestig de configuratie
Klik op Bevestigen om de instellingen op te slaan. Klik op Reset om alle instellingen te wissen en opnieuw te beginnen.

Opslaan en publiceren

Stap 16 – Sla op en publiceer
Klik linksboven op Opslaan. Publiceer de pagina om de wijzigingen zichtbaar te maken op de live website.

Overzicht instellingen