---
source: 26162fd19a28
---
# Pagina-editor
Met de **pagina-editor** ontwerp je eigen lay-outs voor je schermen, zonder ontwerpsoftware. Combineer tekst, afbeeldingen, video's, vormen en live data op een canvas met dezelfde afmetingen als je scherm.
## Een pagina maken
Klik in de **Content bibliotheek** op **Voeg toe > Nieuwe pagina**. Kies een template of **Lege pagina**, vul een **Naam** in en kies bij een lege pagina de **Resolutie** (een eigen formaat, of het formaat van een van de schermen in deze werkomgeving). Klik op **Pagina maken** en de editor gaat open.
## Het canvas
Het canvas staat voor je scherm. Wat je hier neerzet, is precies wat er straks te zien is. Elementen klikken tegen elkaar aan terwijl je ze versleept. Met het onderdeel **Positionering** in het rechterpaneel lijn je elementen nauwkeurig uit.
## Elementen toevoegen
Met de werkbalk boven het canvas voeg je dit toe:
| Element | Wat het toevoegt |
|---|---|
| **Tekst** | Een tekstblok (sneltoets `T`) dat je vrij kunt schalen en opmaken. Kan live data uit een databron tonen. |
| **Vorm** | Rechthoek, cirkel, driehoek, ruit, vijfhoek, zeshoek, achthoek, ster of parallellogram |
| **Content** | Klik op **Content toevoegen** om een afbeelding, video, app, afspeellijst of ander item uit je contentbibliotheek te kiezen |
| **Widget** | Een weericoon, via het tabblad **Dynamisch** onder **Content toevoegen** |
| **Dynamisch** | Via het tabblad **Dynamisch** onder **Content toevoegen**: een afbeelding of content uit een databron, of kant-en-klare waarden voor tijd, datum en weer |
| **Pagina** | Een ingesloten, geneste pagina. Die kies je net als andere content onder **Content toevoegen** |
Een **groep** maak je door meerdere lagen te selecteren en te groeperen. Groepen voeg je dus niet toe via de werkbalk. Zie [Groepen en herhalende elementen](#groepen-en-herhalende-elementen).
::: tip Klok en weer
Wil je een volledige klok of weersverwachting? Sluit dan de [app](/nl/features/apps) **Digital Clock** of **Weather** in je pagina in. Het tabblad **Dynamisch** voegt alleen losse waarden toe, zoals de tijd, de temperatuur of een weericoon.
:::
## Elementen selecteren en verplaatsen
Klik op een element om het te selecteren. Sleep om het te verplaatsen en sleep aan de grepen om het formaat te wijzigen of het te draaien. Met de rechtermuisknop kun je lagen hernoemen, groeperen, de groep opheffen of verwijderen. Kopieer en plak (`Ctrl`/`⌘` + `C`, `Ctrl`/`⌘` + `V`) om ze te dupliceren.
## Lagenpaneel
Het lagenpaneel links toont alle elementen op de pagina. Klik op een laag om die te selecteren. Sleep lagen om de volgorde te wijzigen (bovenaan de lijst = vooraan op het canvas).
### Lagen vergrendelen en verbergen
Beweeg met de muis over een laag of groep in het paneel. Rechts verschijnen dan twee iconen:
| Icoon | Wat het doet |
|---|---|
| **Laag vergrendelen** | Maakt de laag (of groep) onselecteerbaar op het canvas. Klikken gaan er dwars doorheen naar wat eronder ligt, en de laag wordt overgeslagen als je een selectiekader sleept. Een vergrendelde laag herken je aan een gekleurd slotje en accent. **De vergrendeling wordt met de pagina opgeslagen.** |
| **Verbergen in editor** (oog) | Verbergt de laag alleen in de editor. Dit is een tijdelijk hulpmiddel tijdens het werken: het heeft **geen** invloed op wat er echt wordt afgespeeld, en het wordt teruggezet zodra je de pagina opnieuw opent. |
Vergrendel je een **groep**, dan geldt dat voor de hele groep, inclusief alles wat erin zit. Wil je een vergrendelde laag weer selecteren of bewerken, klik dan op het slotje (**Laag ontgrendelen**).
::: tip Bewerken onder een overlay over het hele scherm
Plaats je een element dat het hele canvas bedekt, bijvoorbeeld een seizoensdecoratie die bovenop elke pagina moet komen? **Vergrendel het** dan, zodat je de content eronder nog steeds kunt aanklikken en bewerken. Is de overlay ondoorzichtig en zit hij in de weg, **verberg hem** dan terwijl je werkt en laat hem weer zien als je klaar bent.
:::
## Opmaak
Als je een element selecteert, toont het rechterpaneel alle opmaakopties voor dat element.
In het rechterpaneel pas je dit aan:
| Eigenschap | Opties |
|---|---|
| **Tekst** (alleen tekst) | Lettertype, dikte, grootte, regelafstand, letterafstand, kleur, omtrek, uitlijning en verticale uitlijning (boven / midden / onder) |
| **Grootte** (alleen tekst) | Automatische breedte: het element groeit mee met de inhoud; automatische hoogte: vaste breedte, de hoogte groeit mee; vast kader: vaste grootte. In een vast kader verkleint **Houdt tekst binnen kader** tekst die niet past, en kapt **Max. regels** de tekst af met "…" |
| **Achtergrond kleur** / **Doorzichtigheid** | Effen kleur of kleurverloop, en dekking (0–100%) |
| **Border** | Kleur, **Border size** en stijl: solid, dashed, dotted, double, groove, ridge, inset, outset |
| **Border radius** | Afronding voor alle hoeken tegelijk of per hoek (px) |
| **Schaduw** | Onder **Effecten**: X-verschuiving, Y-verschuiving, vervaging en kleur |
| **Padding** | Binnenruimte per zijde (px) |
| **Rotatie** | 0–360°, onder **Positionering** |
| **Positie en grootte** | Exacte pixelwaarden voor X, Y, breedte en hoogte, onder **Positionering** |
| **Schaalmethode** (content) | Scale down, Cover, Contain of Fill: bepaalt hoe media in het element passen. Bij Cover bepaalt een **Focuspunt** welk deel van een afbeelding in beeld blijft |
## Live data koppelen
Tekstelementen kunnen live data uit een [databron](/nl/features/datasources) tonen, en daarnaast tijd, datum, weer en contextwaarden zoals de naam van het scherm.
Zo voeg je een live waarde toe aan een tekstlaag:
1. Klik in de tekstlaag, zodat de cursor staat waar je de waarde wilt hebben.
2. **Typ `/`** om het slash-menu te openen, of klik op **Dynamische data toevoegen** in het onderdeel **Dynamische data** van het rechterpaneel.
3. Klik je door (Databronveld, Tijd, Weer, Context…) en kies de waarde die je wilt.
De kiezer zet een **chip** op de plek van de cursor. Klik op een chip om het bijbehorende menu te openen. Daar wijzig je het formaat of de eenheid, pas je het veldpad aan of kies je een andere databron.
Voor een volledige uitleg (vaste tekst combineren met chips, groepen koppelen aan lijsten en cyclusvariabelen gebruiken) zie je [Live data koppelen aan pagina's](/nl/features/binding-data).
### Transformaties
Met **transformaties** maak je de tekst van een laag (inclusief de chips erin) op voordat die wordt getoond. Je vindt ze onder **Teksttransformaties**, onderaan het onderdeel **Tekst** in het rechterpaneel. Klik op **+ Voeg toe** om er een toe te voegen. Een transformatie geldt voor de geselecteerde tekst, of voor alle tekst in de laag als je niets hebt geselecteerd:
| Transformatie | Effect |
|---|---|
| **Hoofdletters** | Zet tekst om naar HOOFDLETTERS |
| **Kleine letters** | Zet tekst om naar kleine letters |
| **Kapitaliseren** | Maakt de eerste letter van de tekst een hoofdletter |
| **Max. lengte** | Kort tekst in tot een maximaal aantal tekens en zet er `...` achter |
| **Vervangen** | Vervangt elke treffer van een zoekwaarde (gewone tekst of een reguliere expressie) door een andere waarde |
| **Datum formatteren** | Maakt een datum- of tijdwaarde op met [Day.js-formaattekenreeksen](https://day.js.org/docs/en/display/format) (bijvoorbeeld `HH:mm` voor een 24-uursklok, `DD MMM` voor dag en maand) |
| **Getallen afronden** | Rondt een getal af op het aantal decimalen dat je kiest (bijvoorbeeld `3.14159` → `3.14`) |
Je kunt meerdere transformaties achter elkaar zetten. Ze worden van boven naar beneden uitgevoerd. Chips voor datum en temperatuur hebben hun eigen opties voor formaat en eenheid in het chipmenu, dus transformaties heb je meestal alleen nodig voor de tekst eromheen.
## Ticker (lopende tekst)
Tekstelementen kun je over het scherm laten lopen. Handig voor nieuwskoppen of mededelingen. Zet in het onderdeel **Tekst** van het rechterpaneel **Tickerregel** aan, kies de **Oriëntatie** (horizontaal of verticaal), **Richting** en **Snelheid**, en kies bij **Gedrag** hoe de tekst beweegt:
- **Continu doorlopen**: de tekst loopt steeds in dezelfde richting door
- **Heen en terug scrollen**: de tekst loopt tot het einde en keert dan om
- **Scrollen en terugspringen**: de tekst loopt tot het einde en springt dan terug naar het begin
Bij de laatste twee stel je met **Pauze aan uiteinden (s)** in hoe lang de tekst aan elk uiteinde blijft staan. Combineer de ticker met een databron om automatisch live, lopende content te tonen.
## Groepen en herhalende elementen
Een **groep** is een set lagen die je hebt gebundeld. Selecteer meerdere lagen op het canvas of in het lagenpaneel en groepeer ze (`Ctrl`/`⌘` + `G`). De groep verschijnt dan als bovenliggend item in het lagenpaneel.
Koppel je een groep met **Databron verbinden** aan een lijst uit een databron, dan herhaalt de groep zich voor elk item in die lijst: alle lagen in de groep worden per item getoond. Zo laat je een wisselend aantal rijen of kolommen uit live data zien, bijvoorbeeld een lijst met vertrektijden van treinen of agenda-afspraken.
Wil je stap voor stap zien hoe je een rij ontwerpt, de lagen groepeert, de groep aan een lijst koppelt en per rij waarden ophaalt met **Groepveld** in het slash-menu? Zie [Live data koppelen aan pagina's](/nl/features/binding-data#een-groep-aan-een-lijst-koppelen).
Instellingen voor herhalen in een groep:
| Instelling | Wat het doet |
|---|---|
| **Richting** | Zet herhaalde items naast elkaar of onder elkaar |
| **Tussenruimte (px)** | Ruimte tussen de herhaalde items |
| **Items** | Beperkt hoeveel items er tegelijk te zien zijn |
| **Overslaan** | Slaat de eerste N items uit de databron over |
| **Stap** | Hoeveel items de groep bij elke wissel opschuift (standaard: het aantal getoonde items) |
| **Cyclusinterval (s)** | Wisselt automatisch door de items heen; met **Rondom herhalen** blijft de laatste pagina vol doordat hij verdergaat bij het begin |
Is de groep aan een lijst gekoppeld, dan kan elke laag in de groep verwijzen naar de eigenschappen van het huidige item. Heb je een cyclusinterval ingesteld, dan biedt de editor voor de groep ook **Cycluspuntjes** en **Cyclusvoortgang** aan.
## Opslaan
Klik op **Opslaan** om je wijzigingen op te slaan. Wil je de editor verlaten terwijl er nog wijzigingen openstaan, dan vraagt de editor of je ze wilt opslaan. Zodra de pagina is opgeslagen, kun je hem gebruiken in afspeellijsten.