Elke pagina op je website bestaat uit containers. Met deze containers wordt de indeling van je website bepaald. Ze zijn dus voor een groot gedeelte verantwoordelijk voor hoe de website er uit ziet op je laptop of telefoon. In dit artikel gaan we in op de basis van containers, en hoe ze kunnen worden aangepast.

Er zijn twee manieren om in het aanpassingsmenu voor containers te komen. Dit kan via het Snel aanpassen icoontje, of via het Website menu.

In een container zitten meerdere objecten. In de objecten staat de daadwerkelijke content, bijvoorbeeld tekst, foto's of video's. Door te slepen kan de volgorde van de objecten worden aangepast. Meer over objecten is in het volgende artikel te lezen.

We gaan nu verder met eigenschappen van de container. Klik hiervoor rechtsboven op 'container eigenschappen'.

In het volgende overzicht ziet u een aantal opties.

Met de optie verborgen op mobiel kan de hele container verborgen worden op alle mobiele apparaten.
Met de optie verborgen op tablet kan de hele container verborgen worden op alle tablets.
Met de optie verborgen op laptop kan de hele container verborgen worden op alle laptops.
Met de optie verborgen op desktop kan de hele container verborgen worden op alle computers met een groot scherm, bijvoorbeeld een externe monitor.

Vervolgens zijn er 3 opties met aantallen kolommen. Elke pagina is in het CMS systeem verdeeld in 12 gelijke kolommen. Met deze kan dus bepaald worden hoe breed de container dient te zijn. Door twee containers met 6 kolommen te maken kunnen ze dus bijvoorbeeld naast elkaar gezet worden. 

Met kolommen links bepaalt u hoeveel lege kolommen er links van de container komen te staan.
Met kolommen midden bepaalt u hoe breed de container is. 6 kolommen staat bijvoorbeeld voor een halve pagina.
Met kolommen rechts bepaalt u hoeveel lege kolommen er rechts van de container komen te staan.

In onderstaand voorbeeld ziet u een instelling waar 1 kolom links, 10 kolommen midden en 1 kolom rechts gebruikt is.

Met de optie adaptief moment kan bepaald worden hoe de container zich moet gedragen wanneer een kleiner scherm gebruikt wordt. Deze optie veranderd de breedte van de container automatisch in 12 kolommen (dus de volledige breedte) wanneer een kleiner scherm gebruikt wordt.

Hiervoor kunnen de volgende vuistregels worden aangehouden:
Met de keuze xs blijft de container altijd de gegeven breedte houden.
Met de keuze sm wordt de container op een mobiel scherm over de volledige breedte getoond.
Met de keuze md wordt de container op een mobiel scherm, of tablet over de volledige breedte getoond.
Met de keuze lg wordt de container op een mobiel scherm, tablet, of laptop over de volledige breedte getoond.

Meestal is sm de instelling met de beste resultaten. Weet je niet zeker wat er ingesteld moet worden, kies dan sm.

Tot slot zijn er de opties om elk object binnen de container (bijvoorbeeld een aantal foto's) de zelfde hoogte te maken. Dit doet u met de optie alle objecten dezelfde hoogte. Wanneer er meerdere objecten in een container staan, waarvan de breedte uiteindelijk de breedte van de container overschrijd (lees hier meer over in objecten) worden de objecten standaard onder elkaar gezet. Het kan echter zo zijn dat je wil dat gebruikers van de website door deze objecten kunnen 'swipen'.

Dit kan worden ingesteld met de optie horizontale slider.