Flex page items¶
Alle pagina's op de site zijn opgebouwd uit een soort lego blokjes die samen een pagina vormen, deze blokken heten steamfields.
Concept¶
De pagina's zijn opgebouwd in meerdere lagen. De eerste laag zijn zo geheten secties. Een sectie is een verzameling van lossen steamfields die samen een pagina vromen.
Secties¶
In de core zijn alle pagina's opgebouwd uit secties, een sectie is een verzameling van steamfields die samen een geheel worden. De secties zijn ook heel belangrijk voor het vormgeven van de site. Door een sectie een foto of opvallende kleur te geven kun je deze eruit laten springen.
Basic section¶
Opties¶
BG color¶
Dit bepaalt de kleur van de achtergrond van de sectie. Voor de details over het invullen van kleuren zie: {}
Text color¶
De kleur die de tekst van alle sub elementen van deze sectie krijgen.
Content¶
Hier kun je de inhoud van deze sectie samenstellen met de andere steamfields. Voorbeeld:
Img section¶
Tip
Denk heel goed na over de foto die je gebruikt, probeer de foto van tevoren te blurren en/of een color overlay
Opties¶
Bg img¶
Dit is de foto die wordt gebruikt voor de achtergond. De foto moet minimaal 1200 pixel breed zijn (dit kan je checken bij de eigenschappen van de foto). De site laadt de afbeelding automatisch op de juiste resolutie. Het uploaden van een te grote foto neemt echter wel veel opslag in, dus zorg ervoor dat een te grote foto gecomprimeerd wordt.
Img paralax section¶
Deze is bijna hetzelfde als de gewone image section, alleen voegt het een paralax effect toe. Voorbeeld:
Steamfields¶
Steamfields, de legoblokjes waar een pagina dus uit bestaat is een flexibele tool. Dit wil zeggen dat het meerdere vormen aan kan nemen, zoals uit tekst, afbeeldingen, video’s of een combinatie van twee. Een steamfield maak je door een flex page (bijv. Commissies) te selecteren (of te maken), hierin een sectie (section) aan te maken door op het plusje te klikken. Je bevind je nu op de locatie om te beginnen met het maken van steamfields.
Text + title block¶
Dit steamfield is een blok met alleen tekst en een titel. Bij het tekstvak staan opties om de tekst visueel aan te passen, zoals dikgedruk, schuingedrukt, het structureren van je tekst, een link toevoegen of een afbeelding bijvoegen.
Text and image¶
Met dit steamfield kan je een titel, een tekst én een afbeelding toevoegen. Je kan kiezen of de afbeelding links of rechts wordt geplaatst. Wil je de afbeelding boven of beneden? Kies dan voor het steamfield Image en daarna een steamfield Text + Title achter elkaar binnen één sectie.
Title¶
Bij het steamfield title kan je een titel maken voor je sectie en hierin aangeven hoe belangrijk deze titel is door het gebruik van de verschillende soorten koppen. Hoe hoger getal je kiest, hoe kleiner de titel wordt. De verschillende titel kun je zien als kopjes, subkopjes en subsubkopjes als bij een onderverdeling.
Icon¶
Met dit steamfield kan je een icoon boven je content plaatsen.
Options¶
Icon color¶
De icon color werk aan de hand van een hexwaarde (zie beneden).
Icon size¶
Dit moet een geldige CSS maat zijn, zie hier voor meer info daar over.
Icon icon¶
Dit is het icon dat je graag wilt gebruiken, hier kun je een lijst met alle iconen vinden.
Button¶
Image¶
Hier kan je een steamfield maken voor een afbeelding alleen.
Youtube Video¶
Opties¶
Video ID¶
Dit de het id van de video. Deze kun je uit de URL van de video halen. Het zijn alle tekens achter ?v= en tot een eventuweel volgend &
Voorbeeld: https://www.youtube.com/watch?v=dQw4w9WgXcQ --> dQw4w9WgXcQ
Kleur¶
Dij alle hierboven genoemde velden wordt gevraagd om een kleur te kiezen. Hiervoor heb je meerdere keuzes.
De hex waarde¶
De hex waarde is een combinatie van letters en cijfers die een kleur representeren. Deze waarden worden in de meeste programma's gebruiken. Je kunt een site als htmlcolorcodes gebruiken om de juiste kleur te krijgen.
Meest gebruikte kleuren zijn:
- #fffffF - Wit
- #000000 - Zwart
- #2A3E81 - Blauwe Schuit blauw
- #F3F3F3 - lichtgrijs