# Pagina's vullen Pagina’s worden opgebouwd door ze te vullen met de verschillende beschikbare [*widgets*](https://docs.openstad.org/openstad/manual/modules). Maar eerst moet de layout van een pagina bepaald worden met *sections* en *columns*, zodat de widgets een bepaalde positie op de pagina krijgen. ## Sections en columns Als je op een lege pagina begint moet je altijd eerst een *section* toevoegen. Een section beslaat altijd de volledige breedte van een pagina. Binnen een section kun je het aantal en de verdeling van de *kolommen* aangeven. Binnen deze kolommen plaats je vervolgens de verschillende *widgets*. Een pagina heeft minimaal één section, maar er kunnen ook meerdere onder elkaar geplaatst worden. ### Section toevoegen Als de pagina nog helemaal leeg is, dan verschijnt er vanzelf een ‘+’-icoontje in het midden van de pagina. Als er al een of meerdere andere sections op de pagina aanwezig zijn, dan kun je er nieuwe aan toevoegen door je muisaanwijzer boven, tussen, of onder de sections te bewegen, daar waar je een nieuwe wil toevoegen. Er verschijnt dan ook een ‘+’-icoontje. Klik op het ‘+’-icoontje en kies voor *Add a section*. Er verschijnt nu een pop-up scherm getiteld *Column Section*. Er zijn hier verschillende dingen in te stellen, maar de belangrijkste is het onderdeel *Columns*. Hieronder kies je het aantal en de procentuele verdeling van de breedte van de kolommen die in de section geplaatst worden. Daarnaast kun je hier ook eventueel een achtergrondkleur of een achtergrondafbeelding kiezen. {% embed url="" %} ## Widgets De *widgets* bevatten dus uiteindelijk de inhoud van een pagina, en zijn altijd in een *column* geplaatst. Voorbeelden van veelgebruikte widgets zijn *Title* (titel), *Rich Text* (broodtekst), *Image* (afbeelding), *Link or button* (verschillende vormen van linkjes en knoppen) en *List* (lijst/opsomming). Maar daarnaast zijn er nog veel meer, vaak meer specifieke widgets. Kijk voor de complete lijst met widgets onder [modules](https://docs.openstad.org/openstad/manual/modules "mention"). Als je een account met beperkte rechten hebt (editor) zullen niet alle widgets beschikbaar zijn om toe te voegen. ### Widget toevoegen Als een kolom nog leeg is verschijnt er vanzelf een ‘+’-icoontje, als er wel al één of meerdere widgets in een kolom geplaatst zijn dan moet je de muisaanwijzer bewegen over de positie waar je een nieuwe widget wil toevoegen om het ‘+’-icoontje zichtbaar te maken. Als je op het ‘+’-icoontje klikt, verschijnt er een menuutje met alle beschikbare widgets. Als je een widget kiest, zal er eerst een pop-up verschijnen waar je de instellingen van de gekozen widget kunt bepalen. Vervolgens klik je rechtsboven op *Save \[...]* om de widget met de gekozen instellingen toe te voegen. Een uitzondering hierop is de *Rich Text*-widget (broodtekst), deze wordt direct aan de pagina toegevoegd en bewerk je op de pagina zelf in plaats van in een pop-up (*in-context editing*). {% embed url="" %} ## Aanpassen en verwijderen Widgets op de pagina zijn aan te passen via het mouseover-menu. Beweeg de muisaanwijzer over een widget om dit menu te laten verschijnen. De verschillende opties van het mouseover-menu zijn, van links naar rechts: * Slepen (Drag) * Omhoog schuiven (Move Up) * Omlaag schuiven (Move Down) * Dupliceren (Clone Widget) * Instellingen aanpassen (Edit \[...]) * Verwijderen (Trash) De eerste drie opties kunnen gebruikt worden om de positie van de widget te veranderen. Door op de tweede en derde knop te klikken verplaats je de widget respectievelijk naar boven en naar beneden, maar dit werkt alleen binnen een kolom, je kunt op deze manier niet een widget van de ene naar de andere kolom verplaatsen. {% embed url="" %} Als je de eerste knop met de muis ingedrukt houdt, dan kun je de widget door te slepen op een andere locatie plaatsen. Terwijl je aan het slepen bent dan zie je op de pagina omlijnde gebieden verschijnen, welke aangeven dat je de widget op die plek los kunt laten. Op deze manier kun je widgets ook van de ene kolom naar de andere kolom verplaatsen. {% embed url="" %} Door de widget te dupliceren wordt een kopie van de widget, met dezelfde instellingen, er direct onder geplaatst. Door op *Edit \[...]* te klikken opent de pop-up met instellingen. Met de laatste optie verwijder je de widget. {% embed url="" %} Als je een account met beperkte rechten hebt (editor) zullen niet alle widgets bewerkbaar zijn. ## Herstellen Er zijn twee manieren om gemaakte wijzigingen terug te draaien. Je kunt terug naar de laatste gecomitte versie van een pagina (die dus onder *Live* zichtbaar is), en je kunt elke losse gemaakte wijziging op een pagina ongedaan maken. Dit gaat op twee verschillende manieren, die worden hieronder verder uitgelegd. ### Terug naar Live Om terug te keren naar de laatste gecomitte versie van een pagina, open je eerst het hoofdmenu door linksboven op *OPENSTAD* te klikken (je moet hiervoor in *Draft* modus zijn). Kies vervolgens *Workflow* → *Manage*. In het *Manage Workflow* overzicht zie je een lijst met onder andere de verschillende pagina’s van de website. Zoek de pagina welke je naar de Live versie wil herstellen, en klik in de rechterkolom onder *Actions* op de knop *Revert*. (In *Draft* modus) *Hoofdmenu* → *Workflow* → *Manage* → *Revert* {% embed url="" %} ### Losse wijzigingen ongedaan maken Dit kunnen dus ook wijzigingen zijn waarvan je niet tussendoor een momentopname (*commit*) gemaakt hebt. Op de pagina waar je de wijzigingen wilt terugdraaien, klik je linksonder op *Page Menu* (je moet hiervoor in *Draft* modus zijn). Kies vervolgens *Page Versions* om een lijst te zien met alle wijzigingen die er aan de pagina gemaakt zijn. Klik op *Revert to* om gemaakte wijzigingen terug te draaien. (In *Draft* modus) *Page Menu* → *Page Versions* → *Revert to*