Containerelement

Het containerelement kan worden uitgelijnd om veel dingen te bereiken.

• Elementen horizontaal rangschikken
• Extra achtergrond of schaduw toevoegen
• Volledig scherm achtergrondkleur of afbeelding

Elementen horizontaal rangschikken

Kolommen toevoegen en breedteverhouding instellen

Nadat je een container aan het canvas hebt toegevoegd, zie je dat er slechts 1 kolom is in het Gegevens tabblad.

Klik op Kolom om meer kolommen toe te voegen. En pas hun Breedteverhouding aan om je gewenste lay-out te maken. In de screenshot heb ik een verhouding van 2:1 ingesteld, waarbij de linkerkolom 2 keer zo breed is als de rechterkolom.

Altijd horizontaal

Let op dat hoewel de kolommen horizontaal zijn gerangschikt. Op mobiele schermen worden de kolommen verticaal gerangschikt om zich aan te passen aan smallere schermen.

In de meeste gevallen is dit prima. Maar als je wilt dat je kolommen altijd horizontaal worden gerangschikt, klik dan op het Inhoud tabblad en bekijk het Type veld. Selecteer Altijd horizontaal. En je inhoud zal horizontaal worden gerangschikt, ongeacht de schermgrootte.

Automatische kolombreedte

Een korte opmerking over Breedteverhouding is dat het kan worden ingesteld op Breedteverhouding, waarbij de kolombreedte zal krimpen om de elementen binnen de kolom te passen. Dit is nuttig, bijvoorbeeld wanneer je een avatar en een motto wilt instellen.

Enkele kolom

Wanneer er slechts één kolom in een container is, is het nog steeds nuttig. Bijvoorbeeld, je kunt extra Achtergrond en extra Schaduw van de doos eraan toevoegen.

Volledig scherm achtergrond

Volledig scherm achtergronden kunnen worden bereikt met behulp van een container. Stel gewoon Vorm -> Breedte in op Volledige schermbreedte. De container zal zich van links naar rechts uitstrekken tot aan de randen van het scherm.

Maar de inhoud binnen de container zal nog steeds beperkt zijn tot de breedte van het pagina-element. Je kunt de inhoud laten uitstrekken tot de rand van de container door Inhoud -> Binnenbreedte in te stellen op 100%.

Volledig scherm afbeelding

Zoals de bovenstaande screenshot laat zien, als je Vorm -> Breedte van het afbeeldings-element instelt op Bedekken. Het afbeeldings-element zal zich uitstrekken tot de rand van de container, waarbij de container en kolomopvulling en -afstand worden genegeerd.