Het beheren van je website

Getting started

Controle krijgen over je prachtige nieuwe website begint met toegang krijgen tot het ingebouwde Content Management System (CMS). En dat proces begint vaak met een email van de website's designer.

Die mail ziet er ongeveer zo uit:

Als je op de knop klikt, kom je op de CMS pagina van je website — die er op het eerste gezicht precies hetzelfde uitziet als je nieuwe website. Het verschil is dat er nu een grijze balk onderaan staat met een simpel formulier.

Vervolgens, maak je een account aan door de benodigde velden in te vullen en log je in.

Op dit moment ziet je Content Management System er precies zo uit als je website — met uitzondering van de grijze menubalk met twee tabs gelabeld Pages en Collections, met daarnaast nog meer iconen. Dit alles ga ik hieronder uitleggen.

Voor nu, neem even de tijd om een bookmark toe te voegen voor deze pagina zodat je gemakkelijk kan terugkeren. In de meeste browsers kan je een bookmark toevoegen voor een pagina door Command/Control + B in te drukken.

Anders, kan je altijd terugkeren naar je websites Content Management System door simpelweg de URL te typen gevolgd door /?edit.

Dus als je websites URL yourwebsite.com is, kan je naar yourwebsite.com/?edit gaan om in te loggen en te beginnen met aanpassen.

Als je later terugkeert op je website, kan je rechtsonder een klein potlood icoon zien, hier kan je op klikken om het CMS te openen. Wees gerust, alleen gebruikers met toegang tot het CMS zullen dit icoon zien!

Met de basis achter de rug, laten we nu verder gaan met het CMS zelf.

Getting to know your CMS

Nu je een account hebt aangemaakt voor je websites CMS en je weet hoe je het CMS terug kan vinden is het nu tijd om het interface te leren kennen.

Laten we beginnen met de twee tabs aan de linker kant, Pages en Collections. Deze twee zijn je standaard CMS tabs. Je kan meer tabs openen, zoals je later zal zien, maar deze twee zullen er altijd voor je zijn.

Pages tab

De Pages tab, zoals de naam al zegt, bevat een lijst met de pagina's op je website. Ze zijn onderverdeeld in minstens twee secties, maar waarschijnlijk meer:

1. Static pages: dit zijn de pagina's die ik heb gebouwd buiten je Collections. Denk aan: de homepage, over ons, services/producten of contact pagina.
2. Collection pages: Deze pagina's zijn gegenereerd uit je Collections, denk aan: een blog, help center, nieuwsartikel, documentation en meer. Deze staan in een lijst met de Collection naam bijvoorbeeld: Blog pages.

Wat je kan doen in de Pages tab

De Pages tab maakt het mogelijk om de volgende dingen te doen:

1. Zoek naar een pagina op naam: Type een pagina naam in de zoekbalk om de pagina op te zoeken. Let op er wordt gezocht naar een exacte match binnen de pagina naam, dus je moet zoeken naar een woord of woorden die exact in de pagina naam staan.
2. Ga naar een pagina: Klik simpelweg op de pagina naam om de Pages tab te verlaten en de pagina te bekijken. Eenmaal op de pagina kan je de content van je website aanpassen zoals je gewend bent in een text editor.
3. Pas pagina instellingen aan: Als je met je muis over een pagina gaat in de lijst, zie je de "Settings" knop verschijnen. Hier kan je vitale pagina instellingen aanpassen zoals de SEO instellingen: meta title en description maar ook de Open Graph instellingen zoals: title, description en image.

Managing page settings

Omdat deze pagina settings zo belangrijk zijn voor search en social, gaan we er hieronder wat dieper op in en laten we zien hoe je het beste uit deze settings kan halen.

SEO Settings

SEO staat voor "search engine optimization". SEO is het bouwen en verbeteren van websites om er voor te zorgen dat ze makkelijker worden gevonden in zoekmachines zoals Google en Bing.

In de settings van elke pagina kan je de volgende pagina specifieke SEO settings aanmaken en aanpassen.

1. Meta title: Een pagina titel speelt een hele belangrijke rol in de zichtbaarheid en performance binnen een zoekmachine. Omdat a) het vertelt de zoekmachine waar de pagina over gaat en b) dit is waar zoekmachine gebruikers op klikken om je website te bezoeken. Zorg ervoor dat je woorden gebruikt in de titel die mensen gebruiken om jouw business te omschrijven. Een ideale pagina titel is tussen de 55 tot 60 karakters lang.
   ‍
   Voorbeeld Als ik een website zou maken voor een tuiniersbedrijf in Zuid-Holland, dan zou mijn homepage titel "Tuiniersbedrijf Zuid-Holland" zijn. Andere pagina's zouden dan kunnen zijn "Tuiniersbedrijf Rotterdam" en "Tuiniersbedrijf Den Haag".
   ‍
2. Meta description: De description (beschrijving) maakt het mogelijk iets meer details mee te geven over je pagina (ongeveer 150 karakters). Het is belangrijk voor SEO maar een stuk minder belangrijk dan de titel.
   
   

De Search Result Preview laat je zien hoe de content er uit komt te zien in de Google zoekresultaten met deze settings. Als je ziet dat er tekst weg valt in de preview, wil je de tekst inkorten zodat het wel past.

‍

Open Graph (OG) settings

Open Graph settings zijn vergelijkbaar met SEO settings, alleen worden deze gebruikt voor socials zoals Instagram, Twitter, Facebook en LinkedIn. Als je gebruikt maakt van deze socials heb je Open Graph al vaak in actie gezien.

In de meeste gevallen kan je gewoon de checkbox aanvinken om dezelfde content te gebruiken die je hebt ingevuld bij de SEO settings, maar voel je ook zeker vrij om het aan te passen naar je wensen.

Open Graph maakt het ook mogelijk om een afbeelding toe te voegen naast je titel en description.

Collections tab

De Collections tab is vergelijkbaar met de Pages tab, alleen laat het alleen je Collection content zien die ik voor je heb aangemaakt met het CMS.

Als je op een Collection klikt, opent een nieuw tab met een lijst met alle items binnen de Collection.

Om een new item aan te maken binnen deze Collection, klik je op de + New knop en vul je de verschillende velden in, let goed op de hulp tekst en andere benodigdheden om het beste resultaat te krijgen.

Wat je ziet in een specifiek Collection item wordt bepaald door de structuur van de Collection waar het item onder valt, maar sommige elementen zal je vaker tegen komen:

1. Back button: Klik hier op om terug te gaan naar de lijst met items in deze Collection
2. View item button: Deze licht grijze knop klapt het CMS in om het item wat je op dit moment bekijkt live op je website te bekijken. Als je wilt kan je hier je content aanpassen in plaats van in het dashboard.
3. Status: Laat de huidige status zien van het item wat je bekijkt. De status kan zijn: Published, Not Published en Draft.
4. Draft checkbox: Vink deze checkbox aan als je nog niet klaar ben met het aanmaken of aanpassen van je huidige item. Alles wat niet aangevinkt is als draft wordt Published op het moment dat iemand op de Publish knop drukt!
5. Changelog: Terwijl je aanpassingen maakt binnen het CMS wordt bijgehouden hoeveel items en pagina's er zijn veranderd tot dat je op Publish klikt. Je kan op de Changelog klikken om te zien welke items en pagina's zijn aangepast en als je met anderen werkt kan je ook zien wie de aanpassingen heeft gedaan.
6. View Site: Klik hier om je website te zien. Je kan alle links op je website gebruiken om te navigeren tussen pagina's in deze view.

De Save en Publish knoppen zijn voor zichzelf sprekend. Let wel op dat je twee keer op Publish moet klikken om je actie te bevestigen.

Hoe publishing werkt in je CMS

Elke keer dat je op Publish klikt in je CMS, wordt je hele website opnieuw live gezet. Als je weet dat anderen ook aan de website werken en je klaar bent om te publiceren, kan het handig zijn om aan de anderen te vragen of ze ook zo ver zijn.

Forms tab

Jouw CMS kan een Forms tab bevatten. Als dit het geval is kan je hier wat basis informatie van de opgestuurde forms bekijken, maar je bent hier waarschijnlijk om de complete form data te downloaden. In de gedownloade CSV file (een formaat dat werkt met alle grote spreadsheet apps), kan je alle opgestuurde informatie bekijken.

Het maken en beheren van content 

Je CMS geeft je twee mogelijkheden om de content die al op je site staat aan te passen:

1. Op de live web pagina zelf
2. Op de Collection items tab

We lopen beide (extreem simpele) manieren om content aan te passen door, beginnend met het aanpassen op de live web pagina.

On-page aanpassen

Het aanpassen op de live pagina is erg intuïtief met je CMS, maar er zijn een paar dingen die je moet weten.

Tekst aanpassen

Als je voor het eerst inlogt in je CMS, zal je op je live website het CMS dashboard (de grijze balk) ingeklapt zien onderaan je scherm.

Als je tekst ziet die je wilt aanpassen, hover je er over heen met je muis. Als er een licht grijze outline met een potlood icoon in de rechter bovenhoek verschijnt, kan je dit element aanpassen. Klik gewoon in de box en begin met typen.

Het aanpassen van tekst werkt zoals in Microsoft Word of Google Docs, maar het stijlen van je tekst — dik-, schuingedrukt of onderstreept — werkt net even anders. (Maar als je Medium heb gebruikt zal het je bekend voorkomen.)

Om tekst op te maken, selecteer je het zodat er een grijze toolbar verschijnt die je de volgende opties geeft:

• B voor dikgedrukt
• I voor schuin
• Chain link icoon om een link toe te voegen
• H1-H6 om verschillende headings toe te passen. Het nummer geeft het belang aan van de heading met H1 als meest belangrijk en H6 als minst belangrijk. In het plaatje hierboven is de gebruikte header "Content patterns" een H2. Let op dat de meeste pagina's maar één H1 hebben, dus je zal deze niet vaak gebruiken.
• “ om een block quote aan te maken, dit is het beste te gebruiken voor lange quotes.

Tekst kan ook worden opgemaakt met de volgende toetsen combinaties:

• Command/Control + B voor dikgedrukt
• Command/Control + I voor schuin
• Command/Control + K om een link toe te voegen

Om een toetsen combinatie te gebruiken, houd je Command (op Mac) / Control (op Windows) gewoon ingedrukt, dan druk je de andere toets in (B, I of K) en daarna laat je ze weer los.

Let op: Soms heeft een tekstveld minder opties dan die hierboven genoemd. Dit is waarschijnlijk bewust gedaan door mij maar als je meer opmaak opties wilt, laat het me weten!

Links toevoegen

Jouw CMS maakt het mogelijk om verschillende typen links toe te voegen voor verschillende doeleinden.

Als je een link toevoegt zal de default je vragen om een URL toe te voegen om naar te linken, maar als je op het link icoon klikt aan de linkerkant, kan je kiezen uit verschillende opties:

1. External: linkt de bezoeker naar een andere pagina op het web, vaak een andere website, maar je kan dit ook gebruiken om te linken naar een pagina op je eigen site.
2. Page: linkt de bezoeker naar een andere pagina op jouw eigen site, als je dit selecteert zie je een lijst met de pagina's op jouw eigen site.
3. Section: linkt de bezoeker naar een andere sectie op dezelfde pagina die je op dit moment bekijkt, als je dit selecteert zie je een lijst met de pagina's op jouw eigen site.
4. Email: linkt naar de bezoekers default email app zodat er een mail kan worden gestuurd naar het door jou opgegeven email adres.
5. Tel: maakt het mogelijk voor de bezoeker om het door jou aangegeven telefoon nummer te bellen door op de link te klikken of tikken, dit is vooral handig voor bezoekers op hun smartphone.

Elk link typen biedt zijn eigen customization opties. Klik op het tandwiel icoon om te zien wat er mogelijk is voor jouw huidige link type.

Meer text editing opties

Sommige tekst velden op jouw website (meestal de langere) hebben extra opmaak mogelijkheden.

Als je op enter drukt om een nieuwe paragraaf te beginnen, kan je een klein + icoon zien. Klik hier op om de toolbar te openen en hierin zie je de volgende opties.. 

Laat je een afbeelding uploaden.

Laat je een video invoegen. Deze video moet online staan op een platform zoals YouTube of Vimeo — je kan hier niet een video bestand van je computer uploaden.

Laat je "rich media" embedden via een link. Er zijn allemaal verschillende objecten die je kan embedden met deze functie hieronder de meest populaire:

• Imgur albums
• Google maps
• Scribd books
• SlideShare presentaties
• Giphy GIFs
• SoundCloud audio

Laat je een lijst met opsommingstekens toevoegen.

Laat je een genummerde lijst toevoegen.

Alles wat je zojuist hebt gelezen over tekst editen op de pagina kan je ook toepassen in het Items tab van het CMS.

Buttons aanpassen

Het is ook mogelijk om buttons aan te passen in het CMS. Hover met je muis over de button die je wilt aanpassen en zoek het tandwiel icoon rechtsboven. Klik op het tandwiel icoon en twee opties worden zichtbaar.

1. Edit link settings laat je de link bestemming aanpassen als gebruikers op de button klikken.
2. Edit text laat je de tekst aanpassen in de button.

Afbeeldingen aanpassen

Je kan afbeeldingen op jouw website ook vervangen met het CMS. Hover simpelweg over de afbeelding die je wilt updaten en klik dan op het afbeelding icoon.

Dit opent de file finder op jouw computer, waar je de afbeelding naar keuze kan selecteren.

Let op: Soms zullen er visuele stijlen zijn toegepast op de afbeelding, dit betekent dat als je de afbeelding upload er nog dingen aan kunnen veranderen zoals de grootte, kleur of schaduw.

Collection items beheren in bulk

Soms wil je meerdere items tegelijk verwijderen, archiveren of publiceren. In deze situatie kan je op de Select... button klikken om de status van meerdere items aan te passen, net zoals in bijvoorbeeld Gmail. Dit kan vooral handig zijn als je bijvoorbeeld een serie artikelen gelijktijdig wilt publiceren.

Nieuwe content aanmaken

Je kan het CMS gebruiken om nieuwe content aan te maken via je Collections, dit maakt het super makkelijk om nieuwe blog posts, menu items, product of service pagina's toe te voegen zolang je maar de juiste Collections hebt!

Dit zou allemaal redelijk intuïtief moeten zijn en de labels en beschrijvende tekst voor elk veld zouden je goed op weg moeten helpen. Maar toch zijn er een paar punten die moeite van het vermelden waard zijn:

Het Name field

Het Name field is een default voor alle Collections en heeft drie functies:

1. De titel van het item op jouw website
2. De bron van de URL van het item op jouw website
3. De titel van het item in het CMS

Het is mogelijk dat er voor item 1 en 2 verschillende velden zijn.

Image fields

Overal waar je ziet staan "Drag & Drop Image Here" is een image field. Je kan een afbeelding vanuit een andere app op je computer het CMS inslepen of je klikt op de "Upload an Image" link om de afbeelding te uploaden via je computers file management systeem.

Let op dat jouw CMS afbeeldingen groter dan 4MB niet aan kan. Als jouw bestand groter is dan dat kan je Photoshop of een online tool zoals TinyPNG of Compressor om je bestand onder de 4MB te krijgen. Bedenk wel dat hoe groter de afbeelding, hoe langer het duurt om te laden, dus probeer je afbeelding zo klein mogelijk te krijgen zonder te veel kwaliteit in te leveren.

Het is ook jouw verantwoordelijkheid om te checken of je wel de juiste rechten hebt om een afbeelding te gebruiken.

Reference fields

Als je een veld ziet met een vergrootglas icoon aan de rechterkant dan heeft jouw Collection een Reference of Multi-Reference field. Dit maakt het mogelijk om content van de ene Collection te importeren in een andere Collection, hier wordt vaak gebruik van gemaakt bij categorieën en tags (die veel voorkomen in blogs).

Om een Reference field te gebruiken, klik je gewoon in het veld en selecteer je de juiste referentie voor jouw nieuwe item. Als je de juiste referentie voor jouw nieuwe pagina niet kan vinden, kan het zijn dat je een nieuw item moet aanmaken in de Collection waar je naar wilt verwijzen.

Dit kan uitgelegd zijn in de hulp tekst voor jouw Collection item, maar als dit niet het geval is neem dan contact met mij op voor verdere hulp.

Option field

Het Option field is vergelijkbaar met References, alleen is deze niet gelinkt aan een ander Collection item. Dus je kan gewoon klikken in het veld en de juiste optie kiezen voor de nieuwe content. Als je een nieuwe Option nodig hebt voor je content, neem dan contact met ons op.

Video field

Het Video field laat je een video toevoegen aan je nieuwe content. Het werkt via het ophalen van jouw content van een publiek video platform zoals YouTube of Vimeo, je kunt dus geen video bestand uploaden. Als je een video bestand hebt dat je op jouw site wilt zetten, uploadt het op YouTube of een andere service en kopieer de URL in het Video field.

Let op: je hebt geen embed code nodig gegenereerd door services zoals YouTube, de URL is genoeg.

Switch field

Het Switch field is een simpele aan/uit of ja/nee knop die een functionaliteit activeert of deactiveert op jouw website. Als je niet zeker bent hoe dit werkt op jouw website, vraag het dan aan ons.

Color field

Het Color field maakt het mogelijk om een vleugje kleur toe te voegen aan je content op een manier bepaald door de websites designer. Dit veld maakt het mogelijk om visueel een kleur te kiezen, uit de "color picker" of om een "hex code" in te voeren — een numerieke waarde voor de kleur.

Het kan zijn dat je even moet wennen aan het gebruik van de "color picker", maar dit gaat snel genoeg. De balk aan de linkerkant staat voor het hele spectrum aan beschikbare kleuren — als je hier klikt wordt de "color swatch" aangepast naar een reeks van kleurtonen in die regio. Het midden gebied is waar je de exacte kleur kiest die je wilt. De balk aan de rechterkant geeft de "opacity" weer, dit bepaald hoe transparant de kleur is.

Als je veel met kleuren gaat werken op je website, kan het handig zijn om de Chrome / Firefox plugin "ColorZilla" te gebruiken, dit maakt het mogelijk om een kleur die je tegenkomt op een website te kopiëren en dan te plakken in de "color picker".

Het managen van je edit workflow

Als je de enige persoon ben die werkt binnen het CMS op jouw website, dan zal je geen problemen hebben met het schrijven, aanpassen en publiceren binnen het CMS.

Maar als je schrijf en edit team groter is dan één persoon, dan is het slim om samen te werken binnen een andere tool voor het schrijven, delen en editen van content.

Waarom? De twee grootste redenen hiervoor zijn:

1. De meeste schrijf tools bieden meer gedetailleerde samenwerk en deel opties, zoals het bijhouden van wijzigingen en het achterlaten van opmerkingen.
2. Het is altijd goed om een backup kopie te hebben van alles wat je op jouw website publiceert (voor het geval dat iemand per ongeluk iets verwijdert)

Aanbevolen schrijf en edit tools

Hier delen we een aantal schrijft tools voor een goede schrijf ervaring, makkelijke samenwerking en goed werkend met jouw CMS, dit zie je vooral terug in het behouden van de opmaak als je content copy paste naar het CMS.

• Google Docs
• Quip
• Evernote
• Draft

Wij raden het niet aan om gebruik te maken van Microsoft Word.

Handige toetsen combinaties

Schrijven wordt een stuk sneller als je, je vingers op de toetsen kan houden. Deze toetsen combinaties maken dit mogelijk:

• Command/Control + B voor dik gedrukt
• Command/Control + I voor schuin gedrukt
• Command/Control + K om een link toe te voegen
• Command/Control + Z ongedaan maken

Gebruik Command op Macs en Control op Windows.