Tijdlijn blok
Met het Tijdlijn block toon je een reeks gebeurtenissen of stappen in chronologische volgorde. De tijdlijn bestaat uit groepen, waarbij elke groep een moment of periode vertegenwoordigt. Binnen een groep kun je meerdere items plaatsen, elk met vrije inhoud.
Het block toevoegen
Zoek in de blokken-editor op “Timeline” en voeg het block toe aan de pagina.
Structuur
Het Tijdlijn block werkt in drie lagen:
| Laag | Bloktype | Omschrijving |
|---|---|---|
| Tijdlijn | ms/timeline | De buitenste container; bepaalt de animatie en marge |
| Tijdlijngroep | ms/timeline-group | Eén punt op de tijdlijn met datum en markering |
| Tijdlijnitem | ms/timeline-item | Een vrij contentvak binnen een groep |
Een Tijdlijn bevat één of meerdere Tijdlijngroepen. Elke groep bevat één of meerdere Tijdlijnitems.
Tijdlijngroepen beheren
In de zijbalk zie je een overzicht van alle groepen, genummerd en weergegeven met hun datum. Klik op een groep in de lijst om die te selecteren in de editor.
- Groep verwijderen — klik op het prullenbak-icoon naast de groep
- Groep toevoegen — klik op “Add Timeline Group” in de zijbalk of op de knop onderaan de tijdlijn in de editor
Instellingen van een tijdlijngroep
Selecteer een groep om de instellingen te openen.
Datum
Vul een tekst in die als datummarkering bij de groep wordt getoond, bijvoorbeeld 2024, Maart 2023 of Fase 1. Het veld accepteert elke tekst.
Icoon
Schakel Toon icoon in om een icoon in de markering van deze groep te tonen. Kies daarna een icoon uit de Iconify-bibliotheek.
Markeerkleur (styling-tabblad)
Pas de kleur van de ronde markering op de tijdlijn aan:
- Achtergrondkleur — de vulkleur van de cirkel
- Kleur — de kleur van het icoon of de inhoud in de markering
Tijdlijnitems beheren
Binnen een groep zie je in de zijbalk een overzicht van de items. Klik op “Add Timeline Item” om een nieuw item toe te voegen, of op de knop onderaan de groep in de editor. Items kun je verwijderen via het prullenbak-icoon in de lijst.
Inhoud van een tijdlijnitem
Klik in een Tijdlijnitem om inhoud toe te voegen. Je kunt er alle gewone WordPress-blokken in plaatsen: tekst, titels, afbeeldingen, knoppen of andere SOIL-blokken.
Animatie
Het Tijdlijn block heeft ingebouwde scroll-animaties:
- Markering — de ronde markering verschijnt zodra de groep in beeld schuift
- Items — de items in een groep verschijnen na de markering, met een korte vertraging van 100 ms per item
- Tijdlijnlijn — de verticale lijn vult mee op basis van de scrollpositie
Schakel Animatie inschakelen in of uit via de instelling in de zijbalk (standaard ingeschakeld).
De animaties worden automatisch uitgeschakeld voor bezoekers die in hun besturingssysteem de voorkeur Verminder beweging hebben ingesteld.
Marge
Stel de ruimte boven, onder, links en rechts van de tijdlijn in (in rem). Gebruik de schaalfactoren om marges automatisch te verkleinen op tablet en mobiel. Standaard wordt de marge op mobiel gehalveerd (factor 50%).