SiteManager

Wat is SiteManager?

SiteManager is een no-code platform voor het maken van simpele statische websites.

De nummer 1 regel

Het is nogal gemakkelijk om onintentioneel schade te berokkenen in een SiteManager-project. Daarom onze #1 regel: maak altijd, vooraleer enige SiteManager-werkzaamheden, een kloon van het project. Verwijder deze na succesvolle publicatie en verificatie van de wijzigigen.

Een nieuw project opstarten

Vanaf het Dashboard klikken we op "Create Project". Eerst wordt er gekozen voor oftewel een leeg project, of een starters template. Hoogstwaarschijnlijk zal het lege project een beter startpunt zijn.

We kiezen een passende naam voor ons nieuwe project en creëren het project.

Project setup

Na het creëren komen we op de settings-pagina van het project. Hier kunnen allerlei zaken aangepast worden, zoals description en domeinnaam, maar ook SiteManager-modules die geïntegreerd kunnen worden. We keren terug naar het dashboard en klikken door op het nieuwe project.

Design setup

Na de project setup kunnen we de algemene stijl van het project aanpassen. We navigeren naar Design > Create Layout.

In dit paneel voegen we het font toe, en stellen we de gewenste breakpoints in, vooraleer we beginnen aan het designen.

We navigeren naar Design > Color Palette. Hier bevinden zich al de basis kleuren van de website. Pas deze aan naargelang de designs. In Design > Color Scheme kunnen deze kleuren dan gebruikt worden om de elementen van onze website een kleur toe te kennen.

We navigeren naar Design > Global Stylesheet. Hier kunnen de volledige stijl van ons project toepassen. We stellen als voorbeeld een Header 1 in. Klik op de gekozen header. Links springt het Style Settings paneel open. De namen van de Style Settings tabs wijzen zichzelf wel uit. Laten we een aanpassing doen aan de tekst grootte. Ga naar Text Properties en klik Font Size open. Hier zien we de waarde die toegepast wordt bij elk soort scherm (vanaf welke resolutie deze schermen gebruikt worden zou moeten afhangen van de breakpoints die zonet ingesteld werden). Neem voor elke schermgrootte de gepaste font size. Wanneer we nu de grootte van ons scherm aanpassen zal de grootte van de Header 1 in de stylesheet ook aangepast worden.

Op deze manier kan voor elk element (Buttons, Links, Menu items etc.) de basis styling aangepast worden, zodat wanneer deze toegevoegd worden op een pagina, ze direct de juiste vorm hebben.

Wanneer de waarde van de laptop aangepast wordt zullen alle waardes van de andere schermen met gelijke waardes ook mee aangepast worden. Dit geldt normaal gezien alleen voor de laptop

Enkel open geklikte properties zullen wel degelijk toegepast worden. Probeer dus niet het paneel net te houden door alle correct toegepaste properties terug te sluiten!

DNS instellen

Om DNS in te stellen volstaat het om vanuit de Settings een subscription aan te kopen via de tab Subscriptions (dit gaat heel vlot, de factuur komt toe in de no-reply@codifly.be mailbox) en vervolgens te gaan naar de tab Domains. Het is nu nodig een domeinnaam te kopen, bijvoorbeeld op Easyhost, waarna de in Sitemanager weergegeven 2 records moeten worden ingesteld: een A-record naar een IP-adres van sitemanager en een CNAME-records voor "www". Na het publiceren van de website zal de site te bezoeken zijn op de ingestelde domeinnaam.

Een nieuwe pagina aanmaken

We navigeren naar Project > Pages. Hier zien we dat de Home-pagina standaard toegevoegd is bij elk project. Klik op "Add Page". Geef nu een gepaste naam aan en url aan de pagina. Zoals je kan zien kan hier ook alle informatie in verband met SEO en Open Graph aangepast worden.

De pagina designen

Nu onze pagina correct is ingesteld kunnen we beginnen designen. Open de pagina door nogmaals naar Project > Pages te navigeren, en op het penseel icoontje te klikken. Centraal bovenaan kunnen we switchen tussen verschillende pagina's en schermgroottes, maar ook tussen Content of Design View. De Content View kan gebruikt worden voor teksten en images aan te passen, maar aangezien dit ook in het Design View kan gedaan worden, zal de Content View niet veel gebruikt worden.

Klik op Design View. Hier kunnen we elementen toevoegen aan onze pagina Links bovenaan klikken we het Layout Panel open. Hier kunnen we nieuwe secties van onze pagina toevoegen. Er is normaal gezien al een verdeling tussen Header, Content en Footer.

Klik op het plus-icoontje rechts van het Header-gedeelte. Hier kunnen we kiezen tussen zelf een sectie maken, of een template sectie implementeren en aanpassen.

De template secties kunnen moeilijk personaliseerbaar zijn, dus denk goed na over of je deze wel wil gebruiken

Wanneer we een sectie toegevoegd hebben worden we naar het edit-scherm van deze sectie doorgestuurd. Hier zien we aan de linkerkant de layers van dit gedeelte, en aan de rechterkant enkele properties van het geselecteerde stuk. In de Properties kunnen we kiezen voor een grid of flex display. Hier kan ook de max-width en een gutter ingesteld worden. Indien er gekozen is voor een grid kunnen het aantal rows/columns en bij flex de aligns ingesteld worden.

Enkele zaken waar frustraties uit kunnen voortvloeien

Er is op dit moment nog geen functionaliteit om terug te keren. Dit wil zeggen, als er iets verwijderd is kan er niet gewoon Ctrl+Z gedaan worden, en is het wel degelijk voor goed weg. Pas dus op met het verwijderen van zaken die 'niet nodig zijn'. Het is beter om deze elementen dan even te verbergen en later eventueel nog te verwijderen.
Het design scherm van een pagina kan er helemaal anders uitzien dan het edit scherm van een element op van die pagina. Denk je bij een element "Dit zou er zo niet moeten uitzien", dan kan het soms helpen om rechtsboven op de refresh-knop te drukken... maar soms ook niet. Als dit het geval is, probeer dan zoveel mogelijk het design scherm op orde te krijgen, aangezien dit het dichtst bij het publishen zal aanleunen.
Wanneer er veranderingen gedaan worden aan een element door styling voor het laptop scherm aan te passen, zullen soms (ongeacht of de andere schermen dezelfde waarde hebben voor dat veld) toch alle schermgroottes mee aangepast worden. Ook hier kan een refresh helpen. Indien dit niet het geval is, moet in dat bepaalde veld de waarde van de andere schermgroottes eens verwijderd en teruggezet worden.
In bepaalde gevallen (nog onduidelijk wanneer juist), kan het zijn dat de gap (ingesteld in de Properties aan de rechterkant van een component) geen echte gap is, maar eerder een margin rond elk element in die block. Dit zou dus kunnen veroorzaken dat deze gap ook aan kanten wordt toegepast waar het niet nodig is.
Nog een zeer frustrerend iets is dat er niet deftig gekopieerd of geplakt kan worden. Een gevolg hiervan is dat de structuur van een element van in het begin goed moet zijn. Men kan namelijk niet een extra block aanmaken en de rest van het element erin verslepen. Denk dus voor het maken van het gedeelte goed na over de opbouw van dit stuk.
Een verschil tussen het design scherm en hetgeen dat gepubliceerd wordt, is dat er in het design scherm nog een extra div rond elk element gezet wordt, maar dit is niet het geval op de online versie. D.w.z. bijvoorbeeld dat blocks die op het eerste niveau van dat element op absolute gezet worden, absolute zullen zijn tegenover de hele pagina, niet tegenover het element.