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.
Klok en weer
Wil je een volledige klok of weersverwachting? Sluit dan de app 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).
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 tonen, en daarnaast tijd, datum, weer en contextwaarden zoals de naam van het scherm.
Zo voeg je een live waarde toe aan een tekstlaag:
- Klik in de tekstlaag, zodat de cursor staat waar je de waarde wilt hebben.
- Typ
/om het slash-menu te openen, of klik op Dynamische data toevoegen in het onderdeel Dynamische data van het rechterpaneel. - 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.
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 (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.
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.