01. Aan de slag

Het beheer van uw nieuwe website begint met de toegang tot het ingebouwde content management systeem (kortweg CMS). En dat proces begint meestal met een e-mail van Cafe Grafiek. Het ziet er waarschijnlijk een beetje zo uit:

‍

Wanneer u op die knop klikt, wordt u naar het CMS van uw website gebracht - dat er in eerste instantie net zo uit zal zien als uw nieuwe website. Alleen ziet u nu een grijze balk onderaan, met een eenvoudig formulier.

‍

‍

Vul vervolgens de verplichte velden in om uw account aan te maken, en log in.

‍

Uw content management systeem zou er nu net zo uit moeten zien als uw website - behalve dat er een werkbalk is met twee browser-achtige tabblade: PAGES en COLLECTIONS, plus een reeks pictogrammen. Ik leg dat hieronder allemaal uit.

‍

Neem nu even de tijd om een bladwijzer voor deze pagina te maken, zodat u er later gemakkelijk naar kunt terugkeren. In de meeste browsers kun je een pagina bookmarken door Command/Control + B ingedrukt te houden.

‍

Anders kun je altijd terugkeren naar het content management systeem van je site door simpelweg de URL in te typen en dan /?edit toe te voegen aan het eind. Dus als de URL van uw website uwwebsite.com is, gaat u gewoon naar uwwebsite.com/?edit om in te loggen en te beginnen met bewerken. Wanneer u later terugkeert naar uw site, ziet u mogelijk een klein potloodpictogram rechtsonder, waarop u kunt klikken om in uw CMS te springen. Wees gerust dat enkel diegenen met toegang tot het CMS dit icoontje zullen zien! Met de basisprincipes uit de weg, laten we ons nu verdiepen in het CMS zelf.

02. Uw CMS leren kennen

Nu u een account hebt aangemaakt voor het CMS van uw site en weet hoe u er op elk moment weer in kunt komen, laten we de interface zelf eens leren kennen.

‍

‍

Laten we beginnen met de twee tabbladen aan de linkerkant, PAGES en COLLECTIONS. Dit zijn de twee standaardtabbladen van uw CMS. U kunt meer tabbladen openen, zoals u later zult zien, maar deze twee zullen er altijd voor u zijn.

‍

Pages tabblad

‍

Het tabblad PAGES bevat, zoals u zich wellicht kunt voorstellen, een lijst van de pagina's van uw site. Het zal verdeeld zijn in minstens twee secties, maar waarschijnlijk meer: 

‍

1. Statische pagina's: dit zijn pagina's die ik buiten je Collecties om heb gebouwd. Dit kunnen bijvoorbeeld je homepage, Over pagina, Diensten/Producten, Contact, etc. zijn.
2. Collectiepagina's: dit zijn pagina's die gegenereerd worden vanuit je Collecties, en kunnen dingen omvatten als een blog, helpcentrum, documentatie, en meer. Deze worden vermeld met hun Collection naam, zoals dit: Blog Pagina's. 
   ‍

Wat u kunt doen in de PAges tab

In het tabblad PAGES kunt u verschillende dingen doen:

‍

1. Zoek een pagina op naam: Typ de naam van een pagina in de zoekbalk om hem te vinden. Let op dat dit een exact-match search is, en dat alleen de naam van de pagina wordt doorzocht, dus u moet een woord of woorden invoeren die exact in de naam van de pagina voorkomen.
2. Ga naar een pagina: Klik gewoon op de paginanaam in de lijst om het tabblad Pagina's samen te vouwen en de pagina te bekijken. Zodra u daar bent, kunt u inhoud aan uw website toevoegen en bewerken, net zoals u in een tekstverwerker schrijft.
3. Pagina-instellingen beheren: Wanneer u met uw cursor over een pagina in de lijst gaat, ziet u een knop met het label "Settings" verschijnen. Daar kun je belangrijke pagina-instellingen beheren, zoals SEO meta titel en beschrijving, Open Graph titel en beschrijving, en Open Graph afbeelding.
   ‍

Pagina-instellingen beheren

Omdat deze pagina-instellingen zo belangrijk zijn voor search en social media, gaan we wat dieper in op wat elk van deze instellingen eigenlijk inhoudt, en hoe je er het beste uit kunt halen.

‍

SEO-instellingen

SEO staat voor "search engine optimization". Het is de praktijk van het bouwen en verbeteren van websites om hun kansen om gevonden te worden door zoekmachines zoals Google, Bing, enz. te verbeteren.

‍

In de instellingen van elke pagina, kunt u de volgende pagina-specifieke SEO instellingen maken en bewerken:

‍

1. Meta titel: De titel van een pagina speelt een zeer belangrijke rol in de zichtbaarheid en prestaties ervan in zoekmachines, zowel omdat het a) zoekmachines vertelt waar de pagina over gaat en b) is waar zoekmachinegebruikers op zullen klikken om uw site te bereiken. Zorg ervoor dat de titel het soort woorden bevat dat mensen gebruiken om uw bedrijf te beschrijven. Idealiter zou de titel van een pagina ongeveer 55 tot 60 tekens lang moeten zijn.
   
   Voorbeeld Als ik een website bouw voor een gazononderhoudsbedrijf uit de San Francisco Bay Area, zou ik mijn homepage waarschijnlijk de titel "SF Bay Area Lawn Care" geven. Dan heb ik misschien andere pagina's zoals "Berkeley Gazononderhoud" en "El Cerrito Gazononderhoud.
   ‍
2. ‍Meta beschrijving: In de beschrijving kun je wat meer details over je pagina kwijt (ongeveer 150 tekens). Het is belangrijk voor het zoeken, maar lang niet zo belangrijk als de titel.
   ‍

De Search Result Preview secties laten je zien hoe de inhoud die je hebt ingevoerd eruit zal zien op een Google zoekresultaten pagina. Als er iets van je tekst wordt afgesneden in het voorbeeld, moet je de tekst bijsnijden om het te laten passen.

‍

Open Graph (OG) Instellingen

Open Graph-instellingen lijken erg op SEO-instellingen, behalve dat ze worden gebruikt door sociale netwerken als Facebook, Twitter en LinkedIn. Als je een van deze sociale netwerken gebruikt, heb je Open Graph al vaak aan het werk gezien. In de meeste gevallen kun je gewoon het selectievakje aanvinken om dezelfde inhoud te gebruiken als je SEO-titel en -beschrijving. Maar voel je vrij om het aan te passen, als je dat wilt. Open Graph geeft je ook de mogelijkheid om een afbeelding op te geven die samen met je titel en beschrijving moet worden weergegeven.

‍

Collections tabblad

‍

Het tabblad Collections lijkt erg op het tabblad Pages, maar het toont alleen uw Collection inhoud - de dingen die ik heb gemaakt met het CMS. Als je op een collectie klikt, kom je op een nieuw tabblad met een lijst van alle items in de collectie. 

‍

‍

Om een nieuw item binnen deze Collectie aan te maken, klikt u op de knop + Nieuw en vult u de verschillende velden van het item in, waarbij u goed let op de helptekst en andere vereisten voor elk item.   

‍

Wat u ziet binnen een individueel Collection-item zal veranderen op basis van de structuur van de Collection waartoe het behoort, maar u zult verschillende elementen steeds opnieuw zien: 

‍

1. Terugknop: Klik hierop om terug te gaan naar de lijst met items in deze Collection
2. View item knop: Deze lichtgrijze knop klapt het CMS samen om u het item te laten zien dat u op dat moment bekijkt, direct op uw live website. Als u wilt, kunt u de inhoud daar bewerken in plaats van in dit paneel.
3. Status: Toont de huidige status van het item dat u bekijkt. Statussen zijn Gepubliceerd, Niet gepubliceerd, en Concept.
4. Draft checkbox: Vink dit selectievakje aan als u nog niet klaar bent met het maken of bewerken van het huidige item. Alles dat niet gemarkeerd is als klad zal gepubliceerd worden als iemand op de Publiceer knop klikt!
5. Changelog: Terwijl u wijzigingen aanbrengt binnen uw CMS, zal het bijhouden hoeveel items en pagina's u hebt gewijzigd totdat u op Publiceren klikt. U kunt op de changelog klikken om een lijst te zien van items en pagina's die ongepubliceerde wijzigingen hebben, samen met wie ze heeft gemaakt, als u mede CMS gebruikers heeft.
6. View Site: Klik hierop om uw website te bekijken. U kunt alle links op uw website gebruiken om tussen pagina's te bewegen in deze weergave.

De SAVE en PUBLISH knoppen zouden redelijk vanzelfsprekend moeten zijn. Let er alleen op dat u twee keer op Publiceren moet klikken om uw actie te bevestigen.

‍

Hoe publiceren werkt in uw CMS

Elke keer dat u op PUBLISH klikt in uw CMS, wordt uw hele website opnieuw gepubliceerd. Als u weet dat anderen aan de site werken wanneer u klaar bent om te publiceren, kunt u hen vragen of ze klaar zijn om hun wijzigingen live te laten gaan.

‍

Forms tabblad

Uw CMS kan een tabblad FORMS bevatten. Als dat het geval is, kunt u basisinformatie bekijken van formulieren die mensen hebben ingediend, maar het is vooral handig als u de volledige formuliergegevens kunt downloaden. In het gedownloade CSV-bestand (een formaat dat werkt met alle grote spreadsheetprogramma's) kunt u alle ingediende informatie zien.

‍

03. Creëren en beheren van inhoud 

Uw CMS geeft u twee manieren om inhoud die al op uw site staat te bewerken: 

‍

1. Rechtstreeks op uw live webpagina
2. Binnen uw COLLECTION-items tab zal ik u door beide (zeer eenvoudige) manieren van bewerken leiden, te beginnen met on-page bewerken.

Ik zal je door beide (zeer eenvoudige) manieren van bewerken leiden, te beginnen met on-page bewerken.

‍

On-page bewerking

Bewerken direct op de pagina is vrij intuïtief met uw CMS, maar er zijn een paar dingen die u moet weten.

‍

Tekst bewerken

Wanneer u voor het eerst inlogt op uw CMS, ziet u uw live website met het CMS paneel (de grijze balk) ingeklapt onderaan uw scherm. Als u tekst ziet die u wilt bewerken, ga er dan met uw cursor overheen. Als er een lichtgrijze omlijning verschijnt met een potloodicoontje rechtsboven, kunt u die inhoud bewerken. Klik gewoon in het vak en begin te typen! Het bewerken van tekst werkt net als in Microsoft Word of Google Docs, maar het opmaken van je tekst - vet maken, cursiveren, etc. - werkt net even anders. (Maar als je al eens Medium hebt gebruikt, zal het heel vertrouwd aanvoelen).

‍

Om tekst te stijlen, selecteert u deze eerst. Er verschijnt dan een grijze werkbalk met de volgende opties:

‍

• B om VET te maken
• I om cursief te zetten
• Kettingkoppeling icoon om een link in te voegen
• H1-H6 om de verschillende niveaus van kopteksten te creëren. Het nummer geeft het niveau van belangrijkheid van elke rubriek aan, waarbij H1 het belangrijkst is, en H6 het minst belangrijk. In de afbeeldingen in deze sectie is de zin "Inhoudspatronen" een H2. Merk op dat de meeste pagina's maar één H1 hebben, dus die zul je waarschijnlijk niet vaak gebruiken.
• " om een blokcitaat te maken. Dit wordt het best gebruikt voor lange citaten.

U kunt ook tekst stijlen met de volgende toetscombinaties:

‍

• Command/Control + B om VET te zetten
• Command/Control + I om cursief te zetten
• Command/Control + K om een link te make

Om een toetscombinatie te gebruiken, houdt u Command (op de Mac) / Control (op Windows) ingedrukt, drukt u vervolgens op de lettertoets (B, I, of K) en laat u deze los. Opmerking: Soms geeft een tekstveld minder opties dan de hierboven genoemde. Dit is waarschijnlijk met opzet gedaan, maar als je meer stylingopties nodig hebt, laat het me weten!

‍

Links invoegen

Met uw CMS kunt u verschillende soorten koppelingen toevoegen om verschillende functionaliteiten te bereiken.

‍

Wanneer u een link wilt invoegen, geeft de werkbalk standaard een URL op om naar te linken, maar als u op het link-icoon links klikt, kunt u uit verschillende andere opties kiezen: 

‍

1. Extern: linkt een bezoeker naar een andere pagina op het web, vaak op een andere website, maar u kunt dit ook gebruiken om naar een andere pagina van uw eigen site te linken.
2. Pagina: linkt een bezoeker naar een andere pagina van uw site. U ziet hier een vervolgkeuzelijst met de pagina's van uw site.
3. Sectie: linkt een bezoeker naar een andere sectie van dezelfde pagina die hij op dat moment bekijkt. U ziet hier een vervolgkeuzelijst met de secties van uw pagina.
4. E-mail: linkt een bezoeker naar zijn standaard e-mailprogramma, zodat hij een e-mail kan schrijven naar het door u opgegeven adres.
5. Tel: stelt een bezoeker in staat te bellen naar het telefoonnummer dat u opgeeft. Dit is vooral handig voor mensen die uw site bezoeken vanaf een mobiel apparaat.

Elk linktype biedt zijn eigen aanpassingsmogelijkheden. Klik op het tandwielpictogram om te zien wat er beschikbaar is voor uw huidige linktype.

‍

Meer tekstbewerkingsopties

‍

Sommige delen van de tekst op uw website (meestal langere passages) bieden extra mogelijkheden.

‍

Wanneer u op enter/return drukt om een nieuwe paragraaf te beginnen, ziet u misschien een klein + pictogram. Klik erop om de werkbalk te openen en de volgende opties te zien. 

‍

Hiermee kunt u een afbeelding uploaden.

‍

‍

Hiermee kunt u een video invoegen. Dit moet een video zijn die gehost wordt op een platform zoals YouTube of Vimeo - u kunt geen videobestand uploaden vanaf uw computer.

‍

Hiermee kun je "rijke media" invoegen, via een link. Er zijn allerlei soorten objecten die je met deze functie kunt insluiten, maar hier een paar van de meest populaire:

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

Hiermee kunt u een lijst met opsommingstekens toevoegen.

‍

Hiermee kunt u een genummerde lijst toevoegen.

‍

Alles wat u zojuist heeft gelezen over het bewerken van tekst op de pagina, geldt ook wanneer u in het Items tabblad van het CMS bent.

‍

Knoppen bewerken

‍

U kunt ook knoppen bewerken in het CMS. Beweeg uw cursor over de knop en zoek naar het tandwiel icoon in de rechterbovenhoek. Klik op het tandwiel icoon en je ziet twee opties:

‍

1. Edit link settings laat je de pagina aanpassen waar de knop kijkers naartoe brengt.
2. Edit text laat u de tekst van de knop wijzigen.

‍

Afbeeldingen bewerken

U kunt ook afbeeldingen op uw site vervangen met het CMS. Beweeg uw cursor over de afbeelding die u wilt updaten, klik dan op het afbeelding icoontje. Dit zal de bestandszoeker van uw computer openen, waar u elke gewenste afbeelding kunt selecteren. Opmerking: Soms worden bepaalde visuele stijlen automatisch toegepast op de afbeelding die u uploadt, dus wees niet verbaasd als uw afbeelding plotseling van grootte verandert, een gekleurde rand of schaduw krijgt, enz.

‍

Beheren van Collection items in bulk

Soms wilt u meerdere items tegelijk verwijderen, archiveren of publiceren. Op die momenten kunt u op de knop Selecteren... klikken om de status van meerdere items te wijzigen, net als in Gmail. Dit kan vooral handig zijn als je meerdere met elkaar verbonden stukken (zoals een serie artikelen) in één keer wilt publiceren.

‍

Nieuwe content creëren

U kunt uw CMS gebruiken om nieuwe inhoud te produceren via elk van uw Collecties, dus het is super eenvoudig om een nieuw blogbericht, menu-item, product- of servicepagina te maken - wat uw Collecties ook mogelijk maken!

‍

Dit zou allemaal vrij intuïtief moeten zijn, en de labels en beschrijvende tekst voor elk veld zouden u ook enorm moeten helpen. Maar er zijn een paar dingen die de moeite waard zijn om te vermelden:

‍

The Name field

Het veld Name is een standaard voor alle Collecties, en het doet meestal drievoudig werk als:

‍

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

Er kunnen echter afzonderlijke velden voor de punten 1 en 2 zijn.

‍

Image fields

Overal waar u "Drag & Drop Afbeelding Hier" ziet, kijkt u naar een afbeelding veld. U kan ofwel een afbeelding van een andere applicatie op uw computer naar het CMS slepen, of klikken op de "Upload een afbeelding" link om het te uploaden via het bestandsbeheersysteem van uw computer. Merk op dat uw CMS niet overweg kan met afbeeldingsbestanden van meer dan 4MB. Als je bestand groter is dan dat, kun je Photoshop of een online programma zoals TinyPNG of Compressor gebruiken om je bestanden onder die drempel te krijgen. Hou er wel rekening mee dat hoe groter de afbeelding is, hoe langer het duurt om ze te laden, dus probeer je afbeeldingen zo klein mogelijk te maken zonder aan kwaliteit in te boeten. Het is ook aan u om ervoor te zorgen dat u het recht heeft om alle afbeeldingen op uw website te gebruiken.

‍

Referentievelden

Als u velden ziet met een vergrootglasicoontje aan de rechterkant, dan heeft uw collectie een referentie- of Multi-Reference-veld. Hiermee kunt u inhoud importeren van de ene collectie in de andere, die kan worden gebruikt om dingen zoals categorieën en tags (veel voorkomende blog functies) aan te drijven. Om een referentieveld te gebruiken, klik je in het veld en selecteer je de juiste referentie voor je nieuwe item. Als u niet de juiste referentie ziet voor uw nieuwe pagina, kan het zijn dat u een nieuw item moet maken in de Collectie waar dit veld naar verwijst. Dit kan worden uitgelegd in de help tekst voor je Collection item, maar als dat niet het geval is, neem dan contact met me op voor hulp. 

‍

Option veld

Het Optie veld werkt ongeveer hetzelfde als Referenties, maar is niet verbonden met een ander Collectie item. Je kunt dus gewoon in het veld klikken en de juiste optie kiezen voor de nieuwe inhoud. Als je een nieuwe optie nodig hebt die bij je inhoud past, neem dan contact met me op.

‍

Video veld

Het video veld laat je een video toevoegen aan je nieuwe inhoud. Het werkt door uw inhoud te halen van een publieke video host zoals YouTube of Vimeo, dus u kunt niet zomaar een videobestand uploaden. Als je een videobestand hebt dat je op je site wilt hebben, upload het dan naar YouTube of een andere service, kopieer en plak dan de URL in het Video veld. Opmerking: je hebt de embed code die gegenereerd wordt door diensten zoals YouTube niet nodig, enkel de URL.

‍

Switch Veld

Het veld Schakelaar is een eenvoudige aan/uit, ja/nee schakelaar die functionaliteit op uw website in- of uitschakelt. Als u niet zeker weet hoe dit werkt op uw site, vraag het me.

‍

Kleurveld

Met het veld Kleur kunt u een vleugje kleur aan uw inhoud toevoegen op een manier die de ontwerper van uw site bepaalt. In het veld zelf kunt u een kleur visueel kiezen, uit de pipet, of een zogenaamde "hex code" invoeren - een numerieke weergave van de kleur.

‍

Het gebruik van de kleurkiezer kan in het begin even wennen zijn, maar u zult het snel onder de knie krijgen. De balk links vertegenwoordigt het hele spectrum van beschikbare kleuren - als u hier klikt, wordt de kleurstaal in het midden bijgewerkt met een reeks tinten in het gebied waar u hebt geklikt. Het middelste gebied is waar u de exacte kleur kiest die u wilt. De balk aan de rechterkant vertegenwoordigt de opaciteit van de kleur, die bepaalt hoe transparant de kleur is. Als je veel met kleur gaat werken op je site, kun je de Chrome / Firefox plugin ColorZilla gebruiken, waarmee je in principe elke kleur die je op het web ziet kunt kopiëren en in de color picker plakken.

‍

Uw redactionele workflow beheren

Als u de enige bent die met het CMS op uw website werkt, zult u prima kunnen schrijven, bewerken en publiceren, allemaal binnen het CMS. Maar als uw schrijf- en redactieteam groter is dan één persoon, zult u waarschijnlijk een andere tool willen gebruiken voor het schrijven, delen, bewerken en samenwerken aan content. Waarom? Nou, er zijn twee grote redenen:
‍

1. De meeste schrijftools bieden meer gedetailleerde samenwerkings- en bewerkingsopties, zoals wijzigingen bijhouden en commentaar geven
2. Het is altijd goed om back-ups te maken van alles wat u op uw website publiceert (voor het geval iemand per ongeluk iets verwijdert)
   ‍

Aanbevolen schrijf- en bewerkingshulpmiddelen

Hier zijn een paar schrijftools die een geweldige schrijfervaring bieden, gemakkelijk samenwerken met anderen en goed samenwerken met uw CMS, in die zin dat u geen opmaak verliest wanneer u inhoud van hen kopieert en plakt in het CMS.

• Google Docs
• Quip
• Evernote
• Draft

Ik raad niet aan Microsoft Word te gebruiken.

‍

Handige sneltoetsen

Schrijven gaat een stuk sneller als je je vingers op de toetsen kunt houden. Deze toetscombinaties helpen u daarbij:

‍

• Command/Control + B om vet te zetten
• Command/Control + I om cursief te maken
• Command/Control + K om een link te maken
• Command/Control + Z om ongedaan te maken wat je net deed

Gebruik Command op de Mac, en Control op Windows.

‍

‍