Smart Cards block
Het Slimme kaarten block toont een reeks kaarten op een pagina. Een kaart bestaat uit een afbeelding, titel, korte tekst en een link. Je kunt de kaarten vullen vanuit bestaande pagina’s of berichten in WordPress, of de inhoud volledig zelf invullen. Het block biedt ook een slider-modus en diverse weergaveopties.
Het block toevoegen
Zoek in de blokken-editor op “Slimme kaarten” en voeg het block toe aan de pagina.
Stap 1: kies het contenttype
Het eerste wat je instelt is waar de kaarten hun inhoud vandaan halen. Er zijn vijf opties:
Pagina’s
Je selecteert zelf welke pagina’s of berichten als kaart worden getoond. Gebruik de zoekfunctie om pagina’s op te zoeken en toe te voegen. De volgorde bepaal je door de items te slepen.
Taxonomieën
De kaarten worden automatisch gevuld met categorieën of tags. Je kiest welke taxonomie wordt gebruikt. Optioneel schakel je Kies enkele categorieën in om zelf te bepalen welke categorieën worden getoond in plaats van alle hoofdcategorieën.
Onderliggende pagina’s
Het block toont automatisch de subpagina’s van de huidige pagina, gesorteerd op menuvolgorde. Je hoeft zelf niets te selecteren.
Eigen content
Je vult elke kaart volledig zelf in. Zie het volgende kopje voor de beschikbare velden.
Recente artikelen
Het block haalt automatisch de meest recente berichten op. Je hebt aanvullende opties zoals filteren op categorie of berichttype en het instellen van het aantal te tonen berichten.
Eigen content invullen
Als je Eigen content kiest, voeg je kaarten toe via de knop “Kaart toevoegen”. Per kaart zijn de volgende velden beschikbaar:
| Veld | Omschrijving |
|---|---|
| Titel | De koptekst van de kaart |
| Categorieën | Vrije tekst die als categorie-label wordt getoond |
| Samenvatting | De tekst onder de titel (WYSIWYG) |
| Extra content | Herhaalveld: voeg items toe met een icoon en tekst |
| Link | De URL waar de kaart naartoe linkt |
| Afbeelding | De kaartafbeelding |
| “Lees meer”-tekst | Tekst op de knop, verschijnt alleen als er een link is |
| Eigen “lees meer”-icoon | Schakel in om een eigen icoon te kiezen voor de knop |
Instellingen voor recente artikelen
Als je Recente artikelen kiest, verschijnen extra opties:
Berichttypes
Kies welke berichttypen worden meegenomen, standaard is dit Berichten.
Categorie
Filter op één of meer categorieën. Kies of berichten in die categorieën worden meegenomen of uitgesloten.
Aantal
Het maximale aantal te tonen berichten (standaard 6). Gebruik -1 om alle berichten te tonen.
Offset
Sla een aantal berichten over aan het begin. Handig als je op dezelfde pagina meerdere Cards blocks gebruikt.
Sluit huidige pagina uit
Zorgt ervoor dat de pagina waarop het block staat niet in de resultaten verschijnt.
Toon paginering
Voegt paginanavigatie toe als er meer berichten zijn dan het ingestelde aantal.
Dynamisch meer berichten laden
Voegt een “Meer laden”-knop toe. Bezoekers kunnen extra berichten laden zonder dat de pagina opnieuw geladen wordt. Je stelt in hoeveel berichten per keer worden geladen en welke tekst op de knop staat.
Inhoud-instellingen
Deze instellingen gelden voor alle contenttypes (behalve deels bij Eigen content).
Heading
Kies het HTML-element van de kaarttitel: h1 t/m h6 of p. Dit heeft invloed op de SEO-structuur van de pagina. Standaard is p.
Heading grootte
De visuele grootte van de titel, onafhankelijk van het gekozen heading-element. Standaard is h4.
Toon categorieën of tags
Kies of de categorie dan wel de tags van een bericht worden getoond op de kaart.
Categorie plaatsing
Bepaal of het categorielabel boven op de afbeelding staat of in het tekstgedeelte van de kaart.
Plaatsvervangende afbeelding
Als een pagina of bericht geen uitgelichte afbeelding heeft, wordt automatisch een plaatsvervangende afbeelding getoond. Zet dit uit als je liever geen afbeelding toont in dat geval.
“Lees meer”-tekst
Voeg een knoptekst toe die op alle kaarten verschijnt (alleen als de kaart een link heeft).
Weergave-instellingen
Weergave
Kies hoe de kaart er structureel uitziet:
- Normaal — afbeelding bovenaan, tekst eronder
- Overlay — tekst over de afbeelding heen. Met Toon inhoud bij hover zorg je dat de tekst alleen zichtbaar is als de bezoeker over de kaart beweegt.
- Horizontaal — afbeelding links, tekst rechts naast elkaar
- Horizontaal omgewisseld — tekst links, afbeelding rechts
Toon als lijst
Schakel dit in om de kaarten als een compacte lijst weer te geven in plaats van als losse kaarten. Je hebt dan extra opties:
- Oriëntatie — verticaal (items onder elkaar) of horizontaal (items naast elkaar)
- Toon lijst als accordion op mobiel — op kleine schermen klap je de lijst in of uit
- Toon items in kaart — geeft de lijst een kaartstijl met achtergrond en rand
- Titel — een optionele koptekst boven de lijst, met een optionele link en een icoon
- Scheidingsteken — een teken of symbool tussen de items bij horizontale oriëntatie
- Genummerd — voegt nummers toe voor de items (verticaal)
- Item icoon — toont een icoon voor elk item (verticaal), kies ook de positie (links of rechts)
Aantal items naast elkaar
Stel per apparaat in hoeveel kaarten naast elkaar staan:
| Scherm | Standaard | Minimum | Maximum |
|---|---|---|---|
| Desktop | 3 | 1 | 6 |
| Tablet | 3 | 1 | 6 |
| Mobiel | 1 | 1 | 6 |
Afbeelding
- Afbeeldingsgrootte — kies de grootte van de afbeelding: Standaard (automatisch bepaald op basis van het aantal kaarten), Klein, Medium of Groot
- Verberg thumbnail — verbergt de afbeelding op alle kaarten (geen effect bij weergave Overlay)
- Beeldverhouding — forceer een vaste verhouding op alle afbeeldingen: 16:9, 4:3 of 1:1
Grootte
- Klein — kaarten nemen de breedte van het raster in, vergelijkbaar met een standaard kolomindeling
- Groot (breedte container) — kaarten vullen de volledige breedte van de container. Bij twee kaarten kun je ook de Breedte-verdeling aanpassen: gelijk, klein-groot of groot-klein
Gelijke hoogte — zorgt dat twee kaarten naast elkaar altijd even hoog zijn, ook als de inhoud verschilt.
Overige weergave-opties
- Icoon — schakel in als de kaarten een icoonveld moeten tonen (voor weergave Normaal en Horizontaal)
- Masonry — plaatst kaarten in een metselaarspatroon waarbij ze automatisch worden gevuld zonder witte ruimte bij ongelijke hoogtes
Slider-instellingen
Schakel Toon kaarten in een slider in om de kaarten als een carrousel weer te geven. Gebruik Toon kaarten in een slider (alleen mobiel) als je de slider alleen op kleine schermen wilt, en op desktop een normaal raster.
Gedrag
| Instelling | Omschrijving | Standaard |
|---|---|---|
| Loop | De slider herhaalt zichzelf eindeloos | Aan |
| Dynamische hoogte | Past de hoogte aan op de actieve slide | Uit |
| Gecentreerde slides | De actieve slide staat in het midden | Aan |
| Aantal items per swipe | Hoeveel slides er tegelijk verschuiven | 1 |
| Autoplay | De slider beweegt automatisch | Aan |
| Autoplay snelheid | Tijd in milliseconden tussen slides (1000 ms = 1 seconde) | 3000 ms |
| Beperk interactie | Bezoekers kunnen de slider niet handmatig bedienen | Uit |
Navigatie en paginering
- Navigatie — toont pijlen om handmatig te bladeren. Kies of de pijlen binnen of buiten de slider staan.
- Paginering — toont een indicator onder de slider. Kies het type: bullets (stipjes), fracties (bijv. 2/5) of een voortgangsbalk.
- Scrollbar — toont een sleepbalk (alleen beschikbaar als Loop uitstaat)
- Verticaal centreren — centreert de slides verticaal in de slider
- Zigzag — de slides wisselen af in hoogte voor een zigzageffect. Kies Ja, met pijlen voor een extra pijlstijl.
Responsive instellingen
Stel per schermformaat het aantal zichtbare slides, de ruimte ertussen en optioneel een vaste breedte per slide in.
| Scherm | Slides zichtbaar (standaard) | Ruimte (standaard) |
|---|---|---|
| Desktop | 5 | 30 px |
| Tablet | 3 | 20 px |
| Mobiel | 1 | 10 px |
> Tip: Stel het aantal slides in op auto om de breedte van elke slide handmatig in te stellen via het veld Breedte slide (bijv. 320px of 80%).