Widgets Blokken

Met een blok bedoelen we een groep elementen die op een responsive grid in een bepaalde structuur geplaatst worden.

Blokken vind je op verschillende plaatsen terug:

• Pagina's hebben een blok per region.
• Iedere widget heeft één blok.
• Bij de data, in het veldtype "blok" (nog niet geïmplementeerd).

Elementen op een blok plaatsen

Bij elk blok kun je rechtsboven op Add element klikken om nieuwe elementen op het blok te plaatsen. Er zal een nieuw panel openen met elementen. Sleep een element naar het blok om het erop te plaatsen. Van zodra je begint te slepen, zal het panel sluiten en kun je het element op het blok plaatsen.

Wanneer het blok leeg is, is er maar één mogelijkheid om het element te plaatsen. Sleep het element tot binnen de stippelijnen van het blok en laat het los.

Wanneer er op het blok al één of meerdere elementen aanwezig zijn, bepaal je de positie van het nieuwe element m.b.v. de zogenaamde "tastlijn". De tastlijn is een blauwe lijn die aangeeft waar het element zal komen wanneer je het loslaat. Om de tastlijn te zien, beweeg je over en rond de bestaande elementen, terwijl je het element vasthebt. Als er een blauwe tastlijn verschijnt, betekent dit dat je het element daar kunt plaatsen.

De tastlijn geeft aan waar het element terecht zal komen. Aan de lengte van de lijn kun je zien naast, onder of boven welk ander element het zal terechtkomen. De lijn kan zowel verticaal als horizontaal zijn.

Het hoeft niet over nieuwe elementen te gaan. Ook bestaande elementen in het blok kun je op dezelfde manier slepen op een andere plaats in het blok of zelfs naar andere blokken.

In 2 gevallen zal het element terug naar zijn originele plaats terugkeren (of bij een nieuw element weggegooid worden):

• Als er geen tastlijn zichtbaar is.
• Wanneer de tastlijn rood is, wat betekent dat dit element niet op die plaats gezet kan worden.

Tussen elementen die naast elkaar staan, verschijnt er altijd een grijze verticale lijn. Sleep deze lijn naar links en rechts om de grootte van de elementen aan te passen. De verdeling gebeurt op een responsive grid van 1 tot 12 kolommen. Elementen worden altijd over de volledige horizontale ruimte van het blok verspreid.

Meerdere elementen slepen

Je kunt meerdere elementen tegelijk slepen. Selecteer hiervoor eerst de elementen die je wil slepen. Dit kun je doen door Ctrl (Windows) of Cmd (Mac) te gebruiken om lossen elementen te selecteren of Shift om een reeks van elementen te selecteren. Sleep vervolgens de elementen naar de nieuwe gewenste positie. In de blauwe cirkel kun je tijdens het slepen zien over hoeveel elementen het gaat.

Je kunt ook meerdere nieuwe elementen slepen. Klik op Add element, selecteer daar meerdere elementen en sleep ze in één keer naar het blok.

Elementen kopiëren

Sleep één of meerdere elementen en houd Ctrl (Windows) of Alt (Mac) ingedrukt om de elementen te kopiëren. Er zal een groene bol met een plus-icoontje verschijnen tijdens het slepen. Houd de toets ingedrukt tot nadat je de muisknop hebt losgelaten.

Elementen naar andere panels slepen

Wanneer je elementen aan het slepen bent, kun je deze ook verplaatsen of kopiëren naar een andere plaats in het systeem, ook al is die nieuwe plaats op dit moment nog niet zichtbaar.

Een veel voorkomend voorbeeld is element slepen in een widget. Selecteer de elementen, begin ze te slepen en ga met de muis op de widget staan. Blijf op de widget stilstaan terwijl je de elementen vasthebt. Na enkele seconden zal de widget geopend worden en kun je de elementen op de gewenste plaats loslaten.

Blok-instellingen

Bovenaan ieder blok zie je een rij van kleine blokjes staan. Deze blokjes duiden aan in hoeveel kolommen dit blok onderverdeeld is. Standaard zijn dit 12 kolommen maar dit kan aanpast worden. Klik op de rij blokjes om de blok-instellingen te openen.

In de blok-instellingen kun je volgende zaken instellen:

• Number of columns: het aantal kolommen van de responsive grid van het blok, van 1 t.e.m. 12.
• Space between columns: de ruimte tussen alle kolommen in het blok. Dit werkt niet met absolute waarden, maar met grootte-ordes (6 mogelijkheden).
• Space between rows: idem maar tussen alle rijen in het blok.
• Vertical align: elementen die naast elkaar staan, worden standaard bovenaan tegenover elkaar uitgelijnd. Dit kun je wijzigen naar midden of onder.
• Responsive: standaard is ieder blok responsive, wat betekent dat bij kleinere schermgroottes elementen die naast elkaar stonden nu onder elkaar springen. Vink je deze instelling uit, dan zullen de elementen nooit onder elkaar springen. In sommige gevallen is dit gewenst, vooral met kleine stukken content naast elkaar.
• Border between columns: vink dit aan als je tussen iedere kolom een lijn wenst.
• Border between rows: idem maar tussen alle rijen.
• Border color: de kleur van de lijnen. Kies een kleur uit de lijst van kleuren, zie Layout » Kleuren.
• Border width: de dikte van de lijn.
• Style: hier kun je een stijl kiezen die op het volledige blok toegepast zal worden.