Bedankt om voor Spintoppr te kiezen voor de inrichting van de nieuwe website voor je tafeltennisclub! Dit is een beknopte handleiding om met Prismic te leren werken. Prismic is de tool die aan de achterzijde van Spintoppr gebruikt wordt om teksten en afbeeldingen te beheren die op je website getoond worden.
Je Spintoppr website is opgebouwd uit verschillende pagina’s. Elke pagina heeft haar eigen opbouw: de homepage is anders opgebouwd dan de overige pagina’s. Dit noemen we de structuur van de pagina.
Voorbeelden van structuurelementen zijn banners, kolommen op een pagina, de uitlijning van afbeeldingen ten opzichte van tekst, het gebruik van kleuren en lettergroottes, …
De structuur van een website opstellen is een complex gegeven. De website moet een rustige indruk geven, het kleurgebruik moet consistent zijn en de website moet er goed uitzien op alle soorten resoluties (desktops, laptops, tablets, smartphones).
De structuur van de website is vastgelegd in Spintoppr en is, mits enkele uitzonderingen, statisch. Dit wil zeggen dat die structuur niet zomaar door jou kan worden aangepast. Dit lijkt misschien beperkend, maar behoedt je ervoor om aanpassingen te maken die de consistentie van je Spintoppr website zouden kunnen aantasten of die ervoor zouden zorgen dat je website ineens niet meer mooi op een smartphone uitziet.
Wat natuurlijk wél door jou kan worden aangepast is de inhoud van de pagina’s. Met inhoud worden alle teksten en afbeeldingen bedoeld die in je Spintoppr website gebruikt worden: sponsors, nieuws, clubinfo, privacyverklaring, samenstelling van het bestuur, …
Het aanpassen van de inhoud van je Spintoppr website is precies waar deze handleiding over gaat. In het volgende hoofdstuk laten we zien hoe eenvoudig het is om inhoudselementen op de website te wijzigen.
Teksten en afbeeldingen niet in Spintoppr zelf beheerd maar in een apart systeem dat Prismic heet. Om inhoud te wijzigen moet je dus eerst naar Prismic navigeren.
Ga hiervoor naar het Controlepaneel van Spintoppr en klik op de knop "Inhoud van de website". Je ziet dan een loginscherm verschijnen:
Klik op de paarse "Log in with my email" knop en vul het juiste e-mailadres en wachtwoord in dat je via mail ontvangen hebt.
Let op! Dit zijn niet dezelfde logingegevens als voor Spintoppr zelf!
Na succesvolle login kom je terecht op het dashboard van Prismic en ben je klaar om content aan te passen. Maar voordat we daaraan beginnen, eerst een woordje over de content types.
Een content type in Prismic is een verzamelnaam voor content items die dezelfde eigenschappen delen. Voorbeelden van content types zijn Nieuwsbericht, Activiteit, Sponsor, Clubidentiteit, …
Er zijn 2 soorten content types die in Spintoppr gebruikt worden: enkelvoudige en meervoudige content types.
Enkelvoudige content types hebben maar één content item. Er kunnen, naast dit bestaande content item, geen nieuwe content items van dit type gemaakt worden. Meestal mappen deze content types één op één op een pagina in Spintoppr. De enkelvoudige content types in Spintoppr zijn:
Voor meervoudige content types kunnen er meerdere content items gemaakt worden. Deze content items worden in Spintoppr vervolgens dynamisch opgelijst (en vaak ook gesorteerd). De meervoudige content types in Spintoppr zijn:
Nu gaan we kijken hoe we content ook effectief kunnen aanpassen en toevoegen. Meteen na inloggen in Prismic kom je terecht op het dashboard. Dat ziet er zo uit:
Het dashboard toont een lijst van content items. Elk nieuwsbericht, event, sponsor, … wordt voorgesteld door 1 content item.
Voor elk content item wordt getoond: de status, de titel, het content type (zie hierboven) en de datum dat deze het laatst werd aangepast.
Vanuit het dashboard kan je eenvoudig:
Dit is een eenvoudige: gebruik de zoekbalk rechts bovenaan het scherm om een content item te zoeken. Je zoekterm moet voorkomen in de titel óf in de inhoud van een content item om deze als resultaat terug te geven.
Als je enkel content items van een bepaald type wil zien, kan je de filter "Type" links bovenaan het scherm gebruiken. Kies hier bijvoorbeeld "Nieuwsbericht" om enkel nieuwsberichten te tonen. Dit maakt het zoeken vaak gemakkelijker.
Klik vanuit het dashboard (of vanuit de resultaten van een filter- of zoekopdracht) op een content item om deze te openen en meteen ook aan te passen. Dit brengt je naar de detailpagina van het content item:
Vanuit deze detailpagina kan je nu het content item aanpassen.
Een content item heeft, afhankelijk van het type, een aantal velden die aangepast kunnen worden. Zo heeft een activiteit (zie voorbeeld hierboven) de velden SEO URL, naam, datum, tijdstip en inhoud.
Wijzig het content item door aanpassingen aan de velden aan te brengen. Vanaf het moment dat je aanpassingen aanbrengt, wordt de groene lijn bovenaan het scherm oranje:
Dit betekent dat er wijzigingen in het item zijn gemaakt die nog niet zijn opgeslagen. Om deze op te slaan klik je op de Save knop rechts bovenaan het scherm.
BELANGRIJK! Je wijzigingen zijn nu in Prismic opgeslagen maar nog niet gepubliceerd op de website. Je kan tussentijds opslaan als je aan een content item aan het werken bent maar deze nog niet finaal wil doorsturen naar de website.
Om een content item daadwerkelijk te publiceren duw je, na het opslaan, op de paarse Publish knop rechts bovenaan het scherm.
Om nu een nieuw content item (van een meervoudig content type) te maken in Prismic, klik je vanaf het dashboard op het groene potlood icoon. Op dat moment klapt een menu open waarin je de keuze hebt uit de content types waarvoor je een item wil aanmaken.
Selecteer het gewenste content type. Vanaf dat moment is de procedure hetzelfde als het aanpassen van een content item (zie hierboven).
Het aanpassen van de meeste velden in Prismic ligt voor de hand. In dit hoofdstuk bespreken we een paar velden die een extra woordje uitleg benodigen.
Rich text velden zijn velden waarin je niet enkel "platte tekst" kan typen maar deze tekst ook kan opmaken. Bijvoorbeeld:
In bovenstaand voorbeeld is "Inhoud" een rich text veld. Merk op hoe je, als je in dit veld aanpassen aan het maken bent, je bovenaan het scherm verschillende opmaakopties te zien krijgt die je ook wel zal herkennen van je favoriete tekstverwerker.
De opmaakopties zijn:
Om een afbeelding aan te passen ga je met je muis over de afbeelding in kwestie. Er komen 3 knoppen tevoorschijn die je volgende functies geven (van links naar rechts):
Als je op de eerste knop klikt, kom je terecht in de Media library van Prismic. Hierin kan je documenten en afbeeldingen vanaf je computer of laptop opladen om te gebruiken in content items.
Om een bestand toe te voegen klik je op de "Upload media" knop en navigeer je vervolgens naar de foto’s of documenten die je wil opladen. Je kan er meerdere tegelijkertijd selecteren.
Nadat de bestanden opgeladen zijn, kies je het bestand dat je wil gebruiken en klik je op de paarse "Add to page" knop.
Sommige pagina’s op je Spintoppr website zijn opgebouwd uit blokken die een variabel aantal keer herhaald worden. In Prismic herken je zulke blokken aan hun lichtgrijze achtergrond en aan de icoontjes om zo’n blok van positie te veranderen of te verwijderen.
In het voorbeeld hierboven (van het content type "Openingsuren") bestaat elk herhaalbaar element uit een weekdag en openingstijden.
Rechts van elk herhaalbaar blokje zie je pijltjes om de elementen te herordenen en een vuilbakjes om een element uit de lijst te verwijderen.
Onderaan de lijst van herhaalbare blokjes vind je de knop Add item in group waarmee je een nieuw element onderaan de lijst kan toevoegen.
In de meeste gevallen zien we dat klanten snel op weg zijn met Prismic. Moest je toch op een probleem stoten of extra hulp nodig hebben, stuur dan zeker een berichtje!