Elementen

Aan de linkerzijde van de editor heb je verschillende onderdelen, waaronder Elementen. Hier vind je onderdelen die je nodig hebt om een bericht op te stellen, zoals tekst en afbeeldingen. Een element plaats je altijd in een rij.

educatieve-opbouw-bericht-schematisch.png

Klik je op Elementen, dan zie je het volgende:

Elementen.png

Elementen

Deze elementen zijn beschikbaar:

Begrippen

Er zijn een aantal begrippen die bij de verschillende elementen terug komen. Het verschilt per toepassing wat het effect is:

Padding

Elementen worden geplaatst in rijen en kolommen. Afzonderlijk van een element kan hier ook padding toegepast worden. Maar in dit artikel hebben we het over padding als ruimte rondom elementen.

Het is mogelijk om padding per kant toe te passen, dus: boven, onder, links en rechts. Stel je hebt een header toegevoegd met een padding: 0, dan ziet dit er als volgt uit:

Header_padding_0.png

Je ziet dat de tekst tegen de linkerkant aanstaat. Boven en onder is een kleine ruimte i.v.m. de hoogte van de tekst. Pas je de padding aan naar bijvoorbeeld: 20, dan ziet dit er als volgt uit:

Header_padding_20.png

Je ziet dat er nu meer ruimte rondom het element Header is ontstaan.

Achtergrondkleur

Een achtergrondkleur is toe te passen op een rij, kolom en sectie, maar ook op een element. Stel je hebt een video toegevoegd en rondom die video padding, dan wordt de achtergrondkleur zichtbaar. Ook wordt de kleur getoond wanneer het element niet is ingeladen bij de ontvanger.

Wanneer je kijkt naar onderstaand voorbeeld dan is:

  1. De achtergrondkleur van de sectie (donkerblauw)
  2. De achtergrondkleur van de rij (lichtblauw)
  3. De achtergrondkleur van het element (geel)

Achtergrondkleur_uitleg.png

Radius hoeken

Met een radius geef je aan of de hoek afgerond wordt of niet. Een radius hoek van 0 is dus vierkant. Maar hoe hoger het getal hoe ronder de hoek. Radius hoeken pas je toe bij de elementen: Afbeelding, Button, Video en Timer. Een voorbeeld:

Voorbeeld afbeelding zonder radius hoeken
Afbeelding_zonderradius.png
Voorbeeld afbeelding met radius hoeken 30
Afbeelding_radius.png

Uitlijning

De mogelijkheden om een element uit te lijnen zijn: links, gecentreerd en rechts. Een voorbeeld:

Voorbeeld_Uitlijning.png

De header en tekst zijn links uitgelijnd, de button en afbeelding zijn gecentreerd uitgelijnd in de kolom. Het gaat dus om de positie van elementen in een rij of een kolom. Zet je de uitlijning van de button op links, dan ziet dit er zo uit:
Uitlijning_Button_links.png

Randstijl

Het is mogelijk om een rand rondom een element te plaatsen. Een voorbeeld wanneer je een rand rondom element Afbeelding plaatst:
Afbeelding_vaste_rand.png

Er zijn verschillende opties voor een randstijl, namelijk: geen, vast, gestippeld en gestreept.

Automatische breedte

Elementen staan standaard op een automatische breedte ingesteld. 

Schuif_Automatische_breedtee.png

Wanneer je het schuifje naar links verplaatst dan kan je de breedte naar wens instellen op basis van percentage of pixels. Standaard is de instelling 100%. Dit percentage geldt voor het element op basis van de breedte van de rij of kolom waarin het element is geplaatst. 

Een voorbeeld: de button is in een twee kolomstructuur geplaatst en de automatische breedte staat aan. De breedte van de button past zich aan wanneer je een grotere tekst plaatst.

Button_automatischebreedte.png

Wanneer ik de automatische breedte uitzet, dan is standaard de breedte van de button 100%. Zoals je ziet vult hij de button uit op basis van de kolombreedte (inclusief de padding).

Automatischebreedte_button_100.png

De breedte is aanpasbaar in percentage en pixels. Het is dus mogelijk deze te verkleinen. Een voorbeeld wanneer het percentage 80% is:

Button_automatischebreedte_80.png

Veelgestelde vragen

Hoe verwijder ik een element?

Selecteer het element en je ziet extra opties verschijnen naast het element:
Element_opties_canvas.png
Klik op het prullenbak-icoon.

Hoe dupliceer ik een element?
Selecteer het element en je ziet extra opties verschijnen naast het element:
Element_opties_canvas.png
Klik op het eerste icoon om te dupliceren.