Waar dienen secties en kolommen voor?

Wanneer je een website maken wilt moet je eigenlijk in hokjes denken, soms ook wel containers genoemd. Secties en kolommen zijn dan ook een onmisbaar onderdeel van iedere website. Dit zijn namelijk de hokjes waar een website uit opgemaakt is.

In onderstaande template voorbeeld heb ik de secties aangegeven met een rood gestreepte lijn en de kolommen met een blauw gestippelde lijn

Voorbeeld van kolommen en secties

Zoals je ziet zijn secties de hokjes waar alle kolommen in geplaatst worden. Binnen deze kolommen wordt vervolgens de inhoud zoals tekst en afbeeldingen geplaatst.

Op het moment dat je in WebMakkie begint met het maken van een website en hiervoor een nieuwe sectie plaatst zul je zien dat er al 1 kolom in staat. Als je nu bijvoorbeeld een afbeelding op je website wilt zetten zul je zien dat je deze alleen in de kolom kunt plaatsen. Dit komt omdat je alleen inhoud in een kolom kunt plaatsen en niet rechtstreeks in een sectie.

Meerdere kolommen naast elkaar plaatsen

Wil je meerdere kolommen naast elkaar plaatsen dan kun je de breedte van de kolom aanpassen. ga op de kolom staan en klik op het zwarte vierkante icoontje met het witte boekje rechts bovenin de kolom. Je ziet nu een pop-up menu, klik op "Bewerken".

WebMakkie pop-up menu

Aan de linkerkant van het scherm zie je nu de instellingen van de kolom. Klik hier op de regel dimensies. Een kolom heeft een standaard breedte van 12. Stel dit in op 6. Maak nu nog een kolom en stel deze ook in op breedte 6. De 2 kolommen worden nu automatisch naast elkaar gezet. Op deze manier kun je ook meerdere kolommen naast elkaar plaatsen. Zolang je er maar voor zorgt dat de totale breedte van de kolommen gezamenlijk 12 is.

Breedte van kolom instellen

Je kunt ook 1 kolom instellen op 6 en deze kolom klonen. Klik hiervoor weer op het boek icoontje en dan op "Klonen". Er wordt nu een exacte kopie van de kolom gemaakt.

Wat is een Kolom binnen?

In WebMakkie vind je ook een knop "Kolom binnen". Dit is een kolom die je in een andere kolom kunt plaatsen. Dit kan handig zijn wanneer je bij het maken van je website een kolom in meerdere vakjes wilt opdelen. Zo heb ik de kolom hieronder opgedeeld in 3 hokjes door "Kolom binnen" te gebruiken.

Kolom met kolom binnen

Live voorbeeld van Kolom, Sectie en Kolom binnen

Om te laten zien hoe je secties, kolommen en kolom binnen kunt gebruiken heb ik in dit live voorbeeld een rand om de betreffende elementen geplaatst.
De kleuren op een rijtje:

  • Rood - Sectie
  • Blauw - Kolom
  • Groen - Kolom binnen
  • Zwart - Tekst
  • Grijs - Titel

Iedere keer dat je op deze pagina een titel en dus een nieuw onderwerp ziet kijk je naar een nieuwe Sectie.

In deze Sectie is een Kolom geplaatst.

Binnen deze Kolom is de Titel en Kolom binnen geplaatst.

In de Kolom binnen staat de tekst.

Nou zul je je wellicht afvragen waarom de tekst hier in een Kolom binnen geplaatst is.
Dit is gedaan om het tekstvak smaller te maken. Zou ik dit niet gedaan hebben dan zou de tekst net zo breed zijn geweest als de Kolom en dus bijna net zo breed als de pagina zijn geweest. Omdat dit het artikel slecht leesbaar zou maken heb ik de tekst in een Kolom binnen geplaatst en de Kolom binnen een horizontale ruimte (padding) aan beide kanten gegeven waardoor het tekstvak naar binnen gedrukt wordt (dit is alleen goed te zien op brede schermen).

Bij de Kolom binnen waar de bullet-list met kleuren in staat heb ik een grotere horizontale padding gebruikt om het tekstvak toch in het midden van de pagina te krijgen. Dit omdat deze tekst links uitgelijnt is en anders aan de linkerkant van de pagina zou staan.

Deze website is gemaakt met WebMakkie

KvK nr: 65316495 | BTW-id: NL856062947B01
© WNED.NL 2009 - 2023 © Geregistreerd Intellectuele Eigendom (IE BOIP 1323079)

WebMakkie is de gratis website maker van WITXL.NL