Handleiding Statamic CMS

Voor het bouwen van een website zijn de pagina’s cruciaal. Een pagina maakt u aan door op de knop ‘entry aanmaken’ te drukken, deze knop is aangeduid met '1':

Wanneer u dit gedaan heeft, krijgt u het volgende scherm te zien:

Dit scherm telt een aantal verschillende functies. Deze staan hieronder uitgelegd.

1) Titel veld

Elke pagina heeft een titelveld, dit is het veld dat de naam van de pagina bepaalt. Voor een contactpagina zou u dus ‘contact’ of ‘contactpagina’ in kunnen vullen. Wij raden aan de naam kort en duidelijk te houden zodat de site overzichtelijk blijft.

2) Paginabouwer

Hier kunt u de pagina opbouwen met verschillende blokken. Zodra u op de cirkel met de ‘+’ erin klikt, krijgt u alle beschikbare blokken te zien:

Wanneer u een blok geselecteerd heeft, krijgt u de invoervelden van dit blok te zien. Deze zijn voor alle blokken verschillend. In dit voorbeeld gebruiken wij het ‘Tweekoloms blok’.



Dit blok heeft 2 kolommen, 1 links en 1 rechts. Wanneer u binnen de content velden op het '+' icoon klikt zijn er ook nog meer blokken beschikbaar,

Dit is een voorbeeld van hoe een blok gevuld kan zijn:



Dit is een resultaat van het bovenstaande blok:



Een uitleg van hoe de verschillende blokken werken is hier te vinden.

Layout aanpassingen

Binnen de layout aanpassingen zijn een aantal instellingen te vinden. Bij ons tweekoloms-blok ziet de ‘layout aanpassingen’ sectie er zo uit:

Een pagina is opgebouwd uit 12 kolommen, dit zorgt ervoor dat de website gemakkelijk te veranderen is in layout. Hieronder staan een aantal opties uitgelegd. Op de ‘...’ staat de nummering (eerste/tweede/derde etc.) van de kolom:

Het blok kan maximaal 12 kolommen breed zijn. Als u de breedte op 12 kolommen instelt en het blok 1 kolom laat inspringen, past het niet meer in dezelfde regel. Hierdoor wordt het blok automatisch naar de volgende regel verplaatst, omdat er onvoldoende ruimte is na de inspringing. Zorg er dus altijd voor dat u de limiet van 12 kolommen niet overschrijdt.

Blok aanpassingen

Binnen de blok aanpassingen kunt u wijzigingen doen in instellingen zoals de achtergrondkleur of de witruimte boven & onder een blok.

De aangepaste padding opties bepalen de witruimte voor en na een blok. Dit kan verschillend zijn op mobiel en desktop, de standaard instellingen verschillen per website.

3) Slug

Een slug (alias) is de paginanaam die in de paginalink getoond wordt. Dit komt er zo uit te zien:
https://www.uwdomeinnaam.nl/[slug]

De slug mag alleen letters, nummers, streepjes en lage streepjes bevatten. Gebruik geen hoofdletters in de slug.

4) Parent

Met de parent-instelling geeft u aan onder welke bestaande pagina de nieuwe pagina komt, zodat deze op de juiste plek in de website-structuur verschijnt. Dit veld hoeft u bijna nooit te veranderen.

5) Template

Hier kunt u een template kiezen voor de pagina, de templates worden door ons gemaakt. De page template wordt standaard gebruikt bij elke pagina.

6) Opslaan & publiceren

Zodra u op deze knop drukt wordt de pagina gepubliceerd en is deze dus zichtbaar voor iedereen. De pagina staat niet standaard in de navigatie, dit is te doen via deze handleiding.

Een pagina is ook op te slaan als concept, dan wordt de pagina wel opgeslagen, maar is deze niet zichtbaar. Dit doet u door de ‘Gepubliceerd’ knop uit te zetten.

7) Live preview

Deze knop opent een real-time beeld van uw website, hier kunt u al uw wijzigingen zien zonder dat u deze hoeft op te slaan. Op deze pagina zijn ook een aantal opties te vinden.

1) Popout
Deze knop opent de live preview op een andere pagina, zodat u de wijzigingen in een ander browser-tabje kunt bekijken.

2) Responsive
Deze knop opent de live preview op een andere pagina, zodat u de wijzigingen in een ander browser-tabje kunt bekijken.

SM: Schermbreedtes van 0 tot 375 pixels, denk aan een oude/kleine mobiele telefoon
MD: Schermbreedtes van 375 tot 760 pixels, denk aan een nieuwe/grote mobiele telefoon
LG: Schermbreedtes van 760 tot 1024 pixels, denk aan een tablet
XL: Schermbreedtes van 1024 tot 1280 pixels, denk aan een laptop van ongeveer 13"
2XL: Schermbreedtes vanaf 1280 pixels, denk aan een computerscherm of TV