SOG CMS Wiki

Powered by
steido.nl

Containers

Moeilijkheidsgraad: Makkelijk
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.

Je kunt een container aanpassen via het 'snel aanpassen' icoontje.

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'.

Klik op de knop 'Containter eigenschappen' rechtsboven in het scherm.

Verbergen van de container

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.

Gebruik de checkboxes om containers te verbergen op bepaalde apparaten.

Breedte instellen

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.

Er is ingesteld dat er 1 kolom links, en 1 kolom rechts van de container kan zijn. De container zelf is 10 kolommen. Dit maakt samen 12 kolommen, en bezet dus de gehele breedte van de pagina.

Uw website responsive maken

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.

Met adaptief moment stel je in hoe breed de container is op andere devices.

Sliders en hoogte

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.

Met alle de opties "alle objecten de zelfde hoogte" en "horizontale slider" kun je de gebruikers een prettige ervaring bieden wanneer er veel foto's of teksten op de website staan.

Suggesties



logo-oranje.png

Steido.nl is een samenwerking van twee jonge, enthousiaste ondernemers met vernieuwende ideeën. Wil je sparren, of heb je vragen, neem gerust contact met ons op.

Swipe voor een voorbeeld van de slider.

Swipe voor een voorbeeld van de slider.

Swipe voor een voorbeeld van de slider.

Swipe voor een voorbeeld van de slider.

Swipe voor een voorbeeld van de slider.

Swipe voor een voorbeeld van de slider.