Dankzij het Internet kan je als zelfstandige-zonder-personeel thuis geld verdienen! Met een eigen website die niet alleen webwinkel functionaliteit heeft, maar ook de mogelijk om zelf online marketing uit te voeren.

Maar voordat je denkt je kan lekker thuis blijven, niets doen, en veel geld laten binnenkomen … laat je niet vergissen!

Net als een drukke baan, vergt een eigen bedrijf ook veel tijd. Maar de voordeel van zelfstandig zijn is de flexibiliteit om zelf je uren in te delen. Bijv. je kan wachten totdat baby op een oor ligt en evt. ‘s avonds (na bedtijd) rustig doorwerken.

Let wel: er zijn voor-/nadelen om voor jezelf te werken die je goed moet overwegen om de juiste beslissing te kunnen nemen.

Hoe krijg je het voor mekaar om een succesvolle website en bedrijf op te bouwen?

• De Kamer van Koophandel geeft uitstekend advies voor startende ondernemers
• Daarnaast heb je een professionele website nodig die je zelf online kan hanteren (zogeheten cms website)
• Ook heb je kennis nodig over hoe je je bedrijfsdoelen aan je website kan passen met o.a. tips over online marketing

Wil je een professionele en succesvolle website laten maken, dan ben je bij Marvic Webdesign aan het goed adres!

In 2001 zijn wij zelfstandige ondernemers geworden. Pas in 2006 zijn wij begonnen met het maken van websites voor andere bedrijven.

De kennis die wij als ondernemers met succesvolle websites hebben opgebouwd delen wij graag met onze klanten via een zogeheten “website starterskit” die de 5 stappen tot succes uitlegd.

5 Stappen tot Succes

1. Onderzoek van klanten, concurrentie, producten en/of diensten
2. Planning van het (online) bedrijfswebsite
3. Implementeren van het bedrijfs-/websiteplan
4. Marketing van de website
5. Het succes analyseren

Elke stap is cruciaal voor het aanhoudend succes van jouw bedrijf en website.

Wil je ook zelfstandige ondernemer worden en een succesvolle bedrijfswebsite opbouwen?

Neem nu contact met ons op.

CMS houdt in dat je zelf je website kan onderhouden via een online gebruikerspaneel.

De url om in te loggen wordt tijdens het maken van de website naar je opgestuurd en je dient dit goed te bewaren.

Wij maken twee gebruikers aan: één voor de administratieve functies en de ander om teksten en/of foto’s te uploaden.

Meestal logt je in met de tweede gebruikersnaam tenzij een admin. taak uitgevoerd moet worden.

Ben je je wachtwoord even kwijt? Dan klik op Wachtwoord vergeten? en een nieuwe zal per e-mail aangevraagd en bevestigd worden.

Bij succesvol inloggen beland je op de dashboard. Hier zie je een overzicht van de WordPress versie 2.7.1 dashboard.

Er zijn drie kolommen op de dashboard. De menu aan de linkerkant, een overzicht van berichten, pagina’s, categorieën, tags en reacties in het midden en een optie om even snel een berichtje te plaatsen aan de rechterkant.

Op de menu, zal je waarschijnlijk Berichten en Pagina’s het meest gebruiken, alsook eventuele Reacties beoordelen. Weergave is waar het design wordt bewaard en veranderd. Plug-ins zijn de extra functionaliteit op je website, zoals contactformulieren, fotogalerijen, enz. Uitleg over de rest van de menu vindt je terug onder de categorie training.

Let wel: als je iets fout doet bij weergave, plug-ins of tools, kan je hele website kapot gaan! Dus niet aankomen zonder goede kennis van html, css en php!! Alleen admin accounts hebben toegang tot deze opties.

In de midden kolom, onder het overzicht van berichten, enz. zie je ook recente reacties en meldingen van WordPress. Aan de rechterkant zie je ook recente concepten (indien toepasselijk) en andere ontwikkeling berichten van WordPress (ter informatie).

De dashboard is overzichtelijk en makkelijk in gebruik. Heb je ergens anders geklikt en wil hiernatoe terug komen? Klik op Dashboard links bovenaan. Uit veiligheidsredenen vergeet niet om uit te loggen nadat je klaar bent met het toevoegen/veranderen van de inhoud op je website.

1. Typ de titel in (bijv. Contact Opnemen)
2. Typ de inhoud van de pagina in
3. “Meer-tag” invoegen om de introductie van de rest af te scheiden
4. Moeder-pagina selecteren, indien nodig voor een kind-pagina
5. Pagina volgorder veranderen, indien gewenst
6. Reactie instellingen veranderen
7. Klik op Publiceren
8. KLAAR IS KEES!

Zo voeg je een nieuwe pagina toe. Wil je meer uitgebreid instructies? Volg deze makkelijke stappen hieronder. 

Op de Dashboard, klik op Nieuwe Toevoegen onderaan Pagina’s. Dan zie je een blanco pagina. Typ een titel voor de pagina in, alsook een korte introductie tot de pagina. De rest van de inhoud volgt daarna, en eindelijk kan je de body van de introductie afscheiden met het toevoegen van een “Meer-tag”. Indien nodig, kan je een moeder pagina selecteren en de volgorder van deze pagina veranderen. Ten laatste, zet de vinkjes uit naast Reacties en Pings toestaan. Klik op Publiceren.

Typ de titel in (bijv. Contact Opnemen)

De titel van je pagina komt op de menu te staan, dus moet het kort en krachtig zijn anders kan het een negatieve impact op de menu hebben wegens de breedte. Om webbezoekers meer informatie over de pagina te geven, kan je uiteraard een sub-header in de body van de pagina schrijven.

Standaard wordt de titel van de pagina ook de URL van de pagina, een zogeheten permalink (“permanent link”). De titel kan enige tijd veranderd worden, maar de url / permalink moet eigenlijk niet meer veranderen nadat de website live is. Omdat het de URL betreft, zou webbezoekers de pagina niet meer terug kunnen vinden. Ken je het probleem al: “Foutmelding 404 – Niet Gevonden”?

Tip: als je de URL wil veranderen, dan moet je het in het begin doen d.w.z. terwijl je bezig met de klad ben. Zodra de pagina gepubliceerd is dan laat de permalink staan om te voorkomen dat jouw webbezoekers een foutmelding krijgen.

Typ de inhoud van de pagina in

Normaalgesproken worden pagina’s gebruikt voor “staticshe informatie” zoals een contact pagina, juridische mededelingen, of de Over Ons pagina. Maar ze kunnen ook gebruikt worden om producten te tonen of voor fotogalerijen. Hier zijn enkele tips over hoe je een pagina schrijft:

• Voordat je een nieuwe pagina maakt, is het veel makkelijker om vooraf te bepalen hoe de informatie vertoond moet worden.
• Typ eerst de tekst in op de juiste volgorde, dan voeg evt. thumbnails, grotere foto’s en/of fotogalerijen aan de pagina to.
• Maak het makkelijk voor je bezoekers een blik te werpen op de informatie met korte alinea’s.
• Zodra de gezochte woorden zijn gevonden, kunnen ze dan met gerust de informatie lezen.
• Verdeel de informatie in een goed logisch manier.
• Gebruik sub-headers bij het verdelen van verwante alinea’s.
• Typ een introductie or korte alinea eerst in, een volg daarna met de rest van de tekst.

“Meer-tag” invoegen om de introductie van de rest af te scheiden

Je maakt het makkelijker voor je webbezoekers om informatie op te zoeken als je de introducties van de rest van de artikelen afscheiden. Hoe zo? Wanneer men iets in het zoekbalkje intypt, dan krijgt hij/zij een lijst van alle pagina’s en/of berichten die de zoekterm(en) bevatten, op datum gerangschikt.

Als je geen “Meer-tag” toevoegt, dan zie je bezoeker een zeeeer lange lijst van elke volledige pagina. Meer een of twee pagina’s is het niet te erg, maar met vele pagina’s kan het heel moeizaam worden om iets te vinden.

De introductie dient dus een overzicht van het artikel te geven. Die kan je van de rest van de pagina afscheiden met een zogeten “Meer-tag”. Het klein icoontje bovenaan de post tussen de woordenboek (aan de rechter kant) en link knopjes. Enkele tips:

• Meestal is het makkelijker om de “Meer-tag” als laatst toe te voegen … nadat de rest van de inhoud goed op zijn plek zit.
• Wil je de woorden “lees verder …” op dezelfde zin als de introductie hebben, dan klik rechts naast de laatste woord, druk op de spatiebalk en dan klik op “Meer-tag invoegen”.
• Wil je de woorden “lees verder …” op de volgende zin hebben, dan klik rechts naast de laatste woord, druk op <Enter> voor een nieuwe alinea en dan klik op “Meer-tag invoegen”.
• Daarna zie je een stippe lijn met de woord “More”
• Een probleempje met italics (en andere tekst stylen) … soms als je een “Meer-tag” invoegd naast woorden die in italics (of kopteksten) zijn geschreven, dan kan de html codes verwisseld worden. Dit betekent dat op de zoekresultaten / categorie pagina’s de rest van de teksten in dezelfde stijl vertoond zullen worden. Je kan dit voorkomen om de stijl toe te passen NADAT de meer-tag ingevoegd is.

Moeder-pagina selecteren, indien nodig voor een kind-pagina

Standaard worden alle nieuwe pagina’s als moeder-pagina’s ingesteld. Maar als deze pagina een kind (sub-pagina) van een andere pagina is, dan moet je de moeder pagina rechts aan de pagina selecteren.

Stel dat je de relatie van de pagina later wil veranderen? Het is ontzettend makkelijk, gewoon nieuwe relatie instellen en op bijwerken klikken. Maar … let op: de url van de pagina zal veranderen! Dus eventuele links naar deze pagina zullen niet langer goed zijn, en je webbezoekers zullen waarschijnlijk een foutmelding krijgen, “404 pagina niet gevonden”. Een goede planning vooraf is dus belangrijk.

Tevens kan je sub-sub-pagina’s maken zoals kleinkinderen, bijvoorbeeld:

Moeder pagina
-  Kind pagina
    – Kleinkind pagina

Pagina volgorder veranderen, indien gewenst 

Pagina’s worden automatisch op getalwaarde en dan alfabetisch gerangschikt. Standaard krijgt elke nieuwe pagina de waarde van 0. Dus als je de volgorde van de pagina’s wilt veranderen, dan moet je de getalwaarde veranderen.

Bijv. de eerste pagina krijgt een 1, de tweede een 2, enz. totdat je tevreden bent met de volgorde.

Let wel: de volgorde van de pagina’s zijn relevant tot hun moeder-/kind-/kleinkindrelatie . Als je de volgorde van sub-pagina’s wilt veranderen, dan heeft het alleen betrekking tot de volgorde binnen die specifieke relatie. 

Reactie instellingen veranderen

Qua reacties worden de instelling standaard ingesteld om reacties, pings en trackbacks toe te staan. Voor je berichten is dit een heel goed idee want het verhoogt de interactie met je webbezoekers. Maar voor de meeste pagina’s is beter om geen reacties daarop te krijgen.

Onderaan de pagina zie je opties voor reacties. Misschien is het alleen een grijze balk? Dan klik op het balkje om de instellingen te verander. Vink beide opties uit, voor “Reacties toestaan” en “Pings en Trackbacks toestaan”.

Concept, voorbeeld & klik op publiceren

Terwijl je een nieuwe pagina schrijvt, kan je het als klad (concept) bewaren. Klik op voorbeeld om te zien hoe het eruitziet. Zodra je tevreden bent, kan je op publiceren klikken.

Publiceren = LIVE

De pagina wordt zichtbaar voor webbezoekers pas als je op Publiceren drukt.

1. Bovenaan typ de titel in (bv. hoe schrijf je een nieuw bericht)
2. Typ een introductie alinea in
3. Typ de rest van het bericht in
4. Beëindig met een sterke conclusie
5. Voeg evt. thumbnails, foto’s en/of fotogalerij toe
6. Voeg de “Meer” tag toe om de intro van de rest af te scheiden
7. Typ relevante tags in voor het bericht (nieuwe of kies uit populairste tags)
8. Selecteer geschikte categorieën om verwante berichten te linken
9. Klik op Publiceren
10. KLAAR!

Hierboven zijn de basis stappen om nieuwe berichten (ook posts genoemd) toe te voegen. Zoek je meer details? Volg de uitgebreide instructies hieronder in om z.sm. nieuwe posts te schrijven en publiceren. 

Op de Dashboard, klik op Nieuwe maken bij Berichten. Daarna krijg je een blanco pagina. Typ een titel in, de introductie alinea en ga dan verder met de rest van de inhoud van het bericht. Als laatste kan je een “meer-tag” invoegen, tags selecteren/intypen en categorieën selecteren. Je kan een voorbeeld van de pagina bekijken (optioneel) en klik dan op Publiceren.

Bovenaan typ de titel in

Typ een goed beschrijvende titel voor je bericht in, die webbezoekers een goed idee zal geven over de inhoud van de pagina. Het is beter om dit niet te lang te maken … 5 tot 7 woorden zijn meer dan genoeg. Deze titel wordt automatisch gebruikt voor de URL, oftewel de permalink (Permanent Link in het engels).

In de toekomst kan je beide de titel en permalink veranderen, maar het is niet verstandig om dit te doen. Vooral de permalink moet niet veranderd worden. Dit te voorkomen dat eventuele links naar deze pagina (url) niet meer gevonden zullen worden.

Enige bezoekers zullen dan een foutmelding krijgen als ze op zo’n link klikken, zoals: “Error 404 – Pagina/bestand niet gevonden”. Misschien is het met je al gebeurd ergens anders op het Internet?

Tip: als je de URL wilt veranderen, dan doe dat in het begin, terwijl het bericht nog een klad is. Nadat je tevreden bent en het bericht is gepubliceerd, dan is het beter om de permalink (URL) niet meer te veranderen.

Typ een introductie alinea in

Deze introductie speelt een belangrijke rol op je website. Zodra iemand op een categorie of tag klikt, dan worden alle berichten vertoond. Gebruikt je webbezoeker het zoekbalkje, dan worden de pagina’s ook weergegeven.

De intro dient een indicatie van de pagina inhoud te geven, waardoor je webbezoeker sneller kan beslissen of die pagina/bericht de informatie heeft waarnaar hij/zij op zoek is.

Dus om zoeken voor je webbezoekers makkelijker te maken, moet je een “meer-tag” invoegen om de intro van de rest van de inhoud af te scheiden. Dan ziet de bezoeker een korte alinea en een link met “lees verder …” De meer-tag is een knopje tussen de woordenboek en link knopjes op de rij tussen de titel en de tekstbewerker.

Tips voor de “Meer-tag”

• Je kan makkelijker de meer-tag invoegen nadat de layout van de pagina tekst goed is.
• Wil je de woorden “lees verder” op dezelfde zin hebben als de intro? Ga naar de laatste woord van de intro, druk op het spatiebalk, en dan op het Meer-tag invoegen knopje.
• Wil je de woorden “lees verder” op de volgende regel hebben? Ga naar de laatste woord van de intro, druk op <Enter> en dan op het Meer-tag invoegen knopje.
• Dan zie je een stippelijn met de woord “more”
• Een probleempje met italics (of kopteksten) .. als de laatste woorden in de intro geïtaliseerd zijn, dan kan de html codes gewisseld worden waarbij de teksten op een categorie pagina daarna allemaal in italics verschijnen. Je kan dit voorkomen om eerst de meer-tag in te voegen en dan de woorden te italiseren.

Typ de rest van het bericht in

Nu moet je de rest van de inhoud intypen. Het liefst scannen webbezoekers de pagina eerst om te zien wat voor informatie erbij staat. Ze hebben het haast en willen snelle antwoorden vinden. Gun dit aan hun!

Gebruik kopteksten om de onderwerpen te organiseren. Plan het bericht met zorg en bespaar je webbezoeker tijd. Als het te lang is, dan zullen ze verder door-klikken naar een andere website.

Naast het gebruik van kopteksten, kan je ook korte alinea’s schrijven. Twee of drie zinnen per alinea? Bij korte zinnen, kan je ook opsommingstekens gebruiken (het vierde knopje van links).

Controleer je teksten en voeg eventuele foto’s, grafieken of een fotogalerij toe op de juiste plaats. Je kan afbeeldingen eerst invoegen, maar het kan verwarrend worden als je de tekst later veranderen of rondslepen.

Typ relevante tags in voor het bericht (nieuwe of kies uit populairste tags)

Waarom tags gebruiken? Het laat je bezoekers verwante berichten vinden en maakt je website meer dynamisch! Een categorie is een algemene onderwerp, terwijl tags specifiek tot berichten horen.

Je kan uit de populairste tags kiezen (klik op de link) of typ de woorden in de je wilt. Verdeel de woorden met een comma en druk op <Enter>. Als je per ongeluk met op <Enter> drukt, dan wordt de tag “Nieuwe tag toevoegen” bijgevoegd. Dit kan je verwijderen door op de kleine x-je te klikken.

Tip: als je de eerste letters van een tag intypt, en een tijdje wacht, dan zie je een lijst van alreeds gebruikte tags. Klik op een woord om het toe te voegen. Zo kan je dezelfde woorden gebruiken om verwante berichten aan elkaar te koppelen.

Selecteer geschikte categorieën om verwante berichten te linken

Categorieen geven je website hierarchie en structuur en zijn belangrijk voor de navigatie van de informatie. Standaard wordt er één categorie aangevinkt. Desgewenst kan je deze uitvinken en andere aanvinken. Selecteer geschikte categorieën voor het bericht dat je schrijft.

Concept, Voorbeeld & Publiceren

Het is beter om een klad te gebruiken wanneer je een nieuw bericht schrijft, want concepten zijn niet zichtbaar op je website. Klik op voorbeeld om het te bekijken. Wanneer je tevreden bent, klik op Publiceren.

Publiceren = LIVE

Het bericht is alleen zichtbaar wanneer je het inderdaad publiceert. Anders blijft het staan als concept in het dashboard.

Een van de meest verwarrende dingen van het content management systeem is het verschil tussen een pagina en een bericht. Wanneer moet je een pagina of juist een bericht gebruiken?

• Pagina’s zijn echter bedoeld voor “statische informatie” (zoals home, contact, over ons)

• Berichten daarentegen geven ondersteunende informatie en de laatste nieuws

Hoogstwaarschijnlijk is de menu op je website zo ingesteld dat de pagina’s eerst verschijnen en daarna de categorie links naar de berichten (ook bekend als posten).

Als je op een categorie link klikt dan zie je een categorie pagina met verwante posten. Berichten worden vertoond op basis van de publicatie datum met de nieuwste berichten bovenaan en de oudste berichten onderaan.

Technisch gezien is het grootst verschil dat een pagina GEEN categorie of tag kan bevatten zoals berichten kunnen.

Als er geen pagina’s waren, dan zou de website net als een blog lijken, en dat is niet erg bevordelijk voor een professionele website.

Wij gebruiken dus de beste eigenschappen van berichten en de strakke indeling van pagina’s om een professionele, goed vindbare website te bouwen.

Pagina’s Uitgelegd

Gebruik pagina’s om overzichten van je producten en/of diensten te tonen. Ook kan je pagina’s gebruiken voor je klantenservice of Algemene Voorwaarden pagina’s. Soms worden pagina’s ook gebruikt om een fotogalerij website te bouwen (zie Marvic.biz Photography ter voorbeeld).

Leer hier hoe je een nieuwe pagina kan maken.

Berichten Uitgelegd

Posts zijn informatieve artikelen over je producten/diensten, persberichten, updates, laatste nieuws, enz. en je kan ze per categorie en met tags indelen.

Leer hier hoe je een nieuw bericht schrijft.

Je kan links op afbeeldingen en woorden plaatsen. De menu aan de rechter kant is een klassieke voorbeeld van tekst links binnen een website, maar “bekijk onze website starterkit“ is ook een tekst link. Hieronder zie je hoe een tekst link wordt gemaakt.

Wat is het verschil tussen interne en externe links?

• Interne links zijn links tussen de pagina’s of jouw website
• Externe links zijn links naar pagina’s op andere websites
• Beide interne en externe links worden op hetzelfde manier gemaakt behalve één kleine instelling … het doel (of target).
• Opent de link in dezelfde venster, dan wordt de huidige pagina vervangen door de nieuwe (handig bij navigeren op een website)
• Maar als de link naar een externe (andere) website doorverwijst, dan is het beter om een nieuwe pagina te openen.
• De webbezoeker heeft dan twee pagina’s openstaan op zijn computer: de oorspronkelijke pagina op jouw website en de nieuwe pagina van de link.
• Zo voorkom je onnodige verlies van webbezoekers.
• Hij/zij kan zelf weg klikken wanneer ze klaar zijn.

Tekst links op Woorden

Links horen op webpagina’s en maken navigatie mogelijk. Ook geven links je webbezoekers verdere toelichting op bepaalde onderwerpen.

• Selecteer de woord(en) die je wil gebruiken als tekst link
• Klik op de link knop (het klein schakel icoontje tussen de “rechts uitlijnen” en “meer-tag invoegen” knopjes)
• Een pop-up venster verschijnt (zie afbeelding hieronder)
• Plak de url van de link in bij Koppelings-URL
• Kies het doel: óf koppeling openen in hetzelfde venster óf koppeling openen in een nieuw venster
• Titel en Class kan je negeren
• Klik op Invoegen
• Deze verandering opslaan.

Tip #1: Bij het selecteren van je woorden, plaats je cursor rechts naast de laatste letter van de woord(en) en beweeg je muis naar links, totdat alles gehighlight is. Want als je van links naar rechts beweegt, dan wordt de spatie ook meegenomen in de link … en dat ziet er niet uit.

Tip #2: Je kan ook de pijltjes gebruiken om te navigeren – <Ctrl>+<links/rechts pijl> beweegt de muis een woord tegelijk. <Shift>+<links/rechts pijl> beweegt de muis een letter tegelijk … goed voor precisie werk.

Links op Afbeeldingen

Links op afbeeldingen kunnen op dezelfde manier gemaakt worden, maar dit onderwerp wordt ook verder uitgelegd op “Voeg logo’s/banners van externe websites toe”.

Hoe bewerk je een link?

Wil je misschien een link veranderen naar een andere URL? Of heb je vergeten om de link in een nieuwe venster te laten openen? Dan kan je het heel makkelijk veranderen. Plaats je cursor ergens op de tekst link, en klik weer op de “link toevoegen/bewerken” knopje. Maak de veranderingen en klik op “Bijwerken”.

Hoe verwijder je een link?

Dit is heeeel makkelijk. Plaats je cursor ergens op de link en dan klik op het “link verwijderen” knopje, tussen de “link toevoegen/bewerken” en “meer-tag invoegen” knopjes. Hupsa Kees!

Maar wat is het verschil tussen foto’s, logo’s, grafieken en thumbnails? En waarom zijn ze belangrijk?

De rol van foto’s

“A picture tells a 1000 words!” [Een afbeelding vertelt een duizend woorden]

De kracht van een foto’s is om de boodschap van een pagina in één ogenblik te vertellen!

De afmeting van foto’s kunnen behoorlijk veranderen, en de groote hangt af van het doel:

• grotere foto’s worden meestal zelfstandig in het bericht of de pagina gebruikt, zonder links, zoals op onze home pagina “wat zijn uw doelen“
• zijn er meerdere grote foto’s dan kan je beter een fotogalerij gebruiken met kleine thumbnail foto’s ter voorbeeld
• midden grote foto’s kunnen ook iets extras toevoegen
• wordt de foto als een link naar een andere pagina gebruikt dan gebruik een kleine thumbnail
• i.p.v. logo’s kan je ook kleine schermafdrukken gebruiken om naar externe websites te linken

Voordat je een foto toevoegt, moet je dus de rol van de foto eigenlijk eerst beslissen.

De rol van thumbnails

Thumbnails zijn kleine afbeeldingen die webbezoekers leiden van de ene pagina naar de volgende. Thumbnails worden ook gebruikt voor fotogalerijen en geven je webbezoekers een overzicht van te grote foto’s.

De rol van logo’s

Logo’s zijn grafieken met de naam van een bedrijf en worden meestal om een website geplaatst om webbezoekers te laten zien welke merken jouw website aanbiedt, of met welke andere bedrijven jouw bedrijf te werk gaat. Het doel is om vertrouwen in de webbezoeker op te wekken.

Uiteraard moet je geen logo op jouw website plaatsen als het niet van toepassing is, want logo’s zijn auteursbeschermd. Bijv. plaats geen logo van Quick-step op jouw website staan als je geen Quick-step laminaat verkoopt! Anders kan het juridische gevolgen hebben …

De rol van grafieken

Grafieken zijn ondersteunende afbeeldingen voor jouw website. Bijv. een cirkeldiagram of histogram kan makkelijk (financiele) cijfers laten zien. Vaak zijn grafiekjes ook buttons of slagzinnen (teksten geschreven in een mooie lettertype) of “call-to-action” (roepen tot actie zoals: “koop nu!”) grafieken. Die kan je zelf maken in bijv. Paint of andere (foto)bewerkingsprogramma’s. Wij gebruiken Adobe Fireworks om grafieken te maken.

Alle foto’s en afbeeldingen spelen een grotere rol in jouw website, maar ze moeten waarde toevoegen en de bezoeker niet afleiden.

Wij raden je aan om eerst de teksten te schrijven, en daarna een bijpassende afbeelding toe te voegen.

Op eerste gezicht lijken ze op elkaar, maar de achterliggende techniek is heel anders. Een gewone website wordt met statische pagina’s gemaakt, terwijl een CMS (content management systeem) website met dynamische pagina’s wordt gemaakt. Het concept wordt hieronder verder uitgelegd.

Gewone Websites

Zoals in de introductie aangegeven, wordt een gewone website met “statische” pagina’s gebouwd. Dit betekent dat elke pagina een vaste header, menu, footer en natuurlijk de inhoud bevat. De webmaster moet alles zelf maken en daarna de pagina naar de website server uploaden. Zodra de pagina geupload is, verschijnt het live op het Internet, mits je de URL kent.

Webmasters gebruiken meestal een zogeheten template om de algemene elementen (menu, header, footer) op elke pagina toe te voegen. Statische pagina’s vergen veel meer tijd om gebouwd te worden, en zijn moeilijker te onderhouden want je moet altijd op de webmaster wachten.

Een redelijke kennis van html, css, ftp en andere programma’s is noodzakelijk.

CMS Websites

Pagina’s van CMS websites worden integendeel dynamisch gebouwd. Dit is een hersenbreker … de pagina bestaat niet TOTDAT de webbezoeker de pagina via een link of URL oproept. Dan wordt al de stukken verzameld en opgeleverd als één pagina in de webbrowser.

Een soort “Big Mac” kan je zeggen - net als de sla, tomaat, bollen, en hamburgers apart liggen, zo liggen de header, footer, menu en inhoud ook apart. Ze staan klaar voor verzameling om als één geheel gepresenteerd te worden.

De inhoud van de pagina’s (teksten, foto’s, enz.) liggen op een database die bij de installatie wordt gemaakt. De vormgeving oftewel “thema” wordt door een designer gemaakt met behulp van CSS (Cascading Style Sheets). Hierdoor kan de inhoud van de vormgeving gescheiden worden. 

De onderhoud van een CMS website is veel makkelijker want de klant krijgt een inlogcode en voegt zelf zijn/haar tekst of foto’s toe, zelfs twee uur ‘s nachts!

De enige nadeel van een CMS website t.o.v. een html statistche website is dat het ietjes langer kan duren om te downloaden. De statische pagina is al gemaakt en wordt sneller gedownload. Maar een pagina uit een cms website moet eerst opgebouwd worden en de database geraadpleegd. Voor de meeste mensen is dit een klein prijsje voor het gebruikersgemak.

Hoe krijg je een CMS website?

Er zijn talloze webdesigners die cms websites aanbieden. Ook zijn er webdevelopers die een cms (de software zelf) voor je zal bouwen. Deze laatste optie kan tonnen kosten. Wij bouwen websites met een zogeheten open-source software, WordPress, waarbij je niets voor de cms hoeft te betalen. Je betaalt dus alleen voor onze tijd om je website te maken.

Bekijk eens onze website starterskit voor maar EUR 550,00!

Je krijgt een uniek design (geen templates), cms en database wordt geinstalleerd met een contactformulier en fotogalerij, de eerste 10 pagina’s wordt geplaatst om de indeling aan te geven en je krijgt toegang tot de “Training voor Succes” website voor 9 maanden. Training over hoe je het systeem gebruikt vind je hier.

1. Wat is het doel van de afbeelding?
2. Foto bewerken (afmeting aanpassen)
3. Afbeelding in bericht of pagina toevoegen
4. Maak een link (optioneel)
5. Klad opslaan of pagina bewerken

Wat is het doel van de afbeelding?

De klus wordt veel makkelijker als je vooraf het doel van de afbeelding besluit, alsook waar het op de pagina moet verschijnen, want zo kan je de afmeting bepalen. Bij voorbeeld:

• kleine afbeeldingen kunnen links of rechts van de tekst geplaatst worden (ong. 75 tot 150 pixels breed), of
• middelgrote afbeeldingen geven een grotere impact, maar ze zijn nog klein genoeg om de tekst aan de linker of rechter kant te laten vloeien (e.g. 130 – 350 pixels wide)
• grote afbeeldingen zonder tekst aan geen van beide kanten – de maximum breedte van de foto wordt bepaald door de breedte van de kolom voor je tekst

Foto bewerken (afmeting aanpassen)

Je kan de afmeting van je foto’s aanpassen, afhankelijk van het doel zoals hierboven uitgelegd, met je favoriete fotobewerkingsprogramma zoals Photoshop, Paint, Picasa, VSO Image Resizer, …

Foto in bericht of pagina toevoegen

Zodra de afbeelding de juiste afmeting heeft, dan kan je het aan de pagina/bericht toevoegen. Plaats je cursor op de bovenkant van waar de foto moet komen.

• Klik op “Afbeelding toevoegen” naast Uploaden/Toevoegen bovenaan de bewerkingsbalk.
• Kies “Browseruploader” (je kan “Flash-uploader” gebruiker, maar soms werkt het niet helemaal 100% en dat kan tot frustratie leiden).
• Selecteer je foto op je computer en klik op uploaden.
• Dan zie je een kleine versie van de afbeelding met de naam van het bestand als titel.
• Verander de titel in iets herkenbaar voor je lezers en de zoekmachines (dit wordt vertoond wanneer de muis over de thumbnails beweegt).
• Voeg een onderschrift toe die onderaan de foto vertoont zou worden (optioneel)
• Selecteer de uitlijning van de foto in verhouding tot de tekst onmiddelijk na de foto’s.
• * “Links” laat de tekst aan de rechterkant van de foto vlooien, goed voor kleiner foto’s / thumbnails
• * “Rechts” laat de tekst aan de linkerkant van de foto vlooien, goed voor kleiner  foto’s / thumbnails
• * “Geen” laat geen tekst aan beide kanten vertonen, de foto verschijnt aan de linkerkant van de kolom, goed voor grote foto’s
• * “Gecentreerd” plaatst de foto in het midden van de kolom, goed voor grote foto’s
• Selecteer “volledige grootte” bij Afmeting
• Klik op “Invoegen in bericht”
• Dan zie je je foto in de pagina / bericht.
• Sla deze verandering op – klik op “Opslaan als concept” of “Bericht bijwerken”

Omdat je in stap 1 de foto’s tot de juiste afmeting heb gemaakt, nu kan je het op “volledige grootte” invoegen. Let wel: het is beter om geen grote foto’s te uploaden want die vreten de harde schijf ruimte van je hostingpakket en maken het downloaden zeer traag, dus je webbezoekers een lange tijd zouden moeten wachten voordat ze de foto’s kunnen bekijken.

Nu moet je je foto kunnen zien op de juiste plek.

Maak een link (optioneel)

Ga eerst na de website pagina waarnatoe je wil linken – óf bij je eigen website, óf bij een andere website. Kopieer de URL (http:// …) en ga terug naar de post. Klik op de afbeelding die de link moet krijgen.

Wij vinden het makkelijker om afbeeldingen een link te geven op hetzelfde manier als wat je met tekst doet d.w.z. via het link knopje. Klik op de afbeelding en dan klik op de kleine ketting schakel knopje.

A nieuwe venster wordt vertoond, waarbij je de URL in kan plakken. Als het een externe website link betreft, en niet een pagina op jouw website, dan selecteer “Koppeling openen in nieuwe venster” bij Doel. Anders kan je het op “Niet ingesteld” laten. Klik op Invoegen.

Klik op “Bericht bijwerken” en controleer dat de foto nogsteeds goed laadt en dat de link op de juiste pagina terecht komt.

Problemen voorkomen

Als je de foto op de pagina moet verplaatsen, kan je het meestal slepen, maar dit werkt niet altijd zoals het hoort. Soms blijven de links of andere html codes zitten en kunnen wat frustraties opleveren. Wij vinden het toch makkelijker om de foto te verwijderen en bij de juiste plek opnieuw toe te voegen.

Maar dit keer, hoeft je de foto niet van je computer weg te halen, maar ga naar “media” om je foto te vinden. Tenzij je een heel andere foto wil toevoegen!

Stappen voor het toevoegen van een fotogalerij

1. Je foto’s bewerken / verkleinen
2. Galerij maken
3. Foto’s in de galerij uploaden
4. Verander de titel van de galerij
5. Voeg een beschrijving van de galerij toe
6. Map scannen voor nieuwe foto’s (indien nodig)
7. De volgorde van je foto’s veranderen (optioneel)
8. Verander de Alt + Title tekst alsook Description
9. Maak een nieuwe post/pagina met de “magische code” om je galerij te tonen
10. Tags en categorieën toevoegen (alleen posts)
11. Voorbeeld tonen (optioneel) en dan publiceren (nieuw) of updaten (bestaande)

Je foto’s bewerken / verkleinen

Gebruik je favoriete foto bewerkingsprogramma (Paint, Picasa, Photoshop, VSO Image Resizer, enz.) om de afmeting van je foto’s te verkleinen. Je kan het makkelijker maken om door de foto’s te navigeren of bekijken door de foto’s niet hoger dan 575 pixels te laten maken … uit ervaring lijkt het de beste compromi voor de verschillende scherm resoluties. Sommige mensen hebben brede, korter monitors terwijl andere juist kleiner, langer schermen waarop ze je foto’s gaan bekijken.

Hoe groot kan de foto’s zijn?

Bij het uploaden van je foto’s zal je een maximum getal zien (in Megs of pixels) dat je kan updaten. Liever vriendelijk tegen je bezoekers doen en denk aan kB’s – je galerijen laden veel sneller als je elk foto minder dan 300 kB is (ons doel is voor minder dan 100 kB per foto). Nog een voordeel van kleinere foto’s is dat het minder ruimte neemt op het hostingpakket d.w.z. je zou niet snel je pakket moeten upgraden en meer betalen.

• 640 x 480 voor liggende foto’s
• 380 x 560 voor staande foto’s

Galerij maken

Op het Dashboard bij de linkermenu, klik op Gallery, en dan op Add Gallery / Images. Typ dan een naam in voor de galerijmap bv. 090123-parijs-project of iets dergelijks dat je makkelijk kan herkennen … zonder spaties!! Dan, zeer belangrijk, klik op het knopje Add Gallery. Als je nu op <enter> druk, verdwijnt je teksten en de galerij wordt niet aangemaakt.

Als de galerij succesvol is gemaakt, krijg je een bevestiging bovenaan, met een referentie voor de fotogalerij (galleryID) … schrijf dit neer – je hebt het nodig om de galerij binnen een post/pagina te tonen.

Foto’s in de galerij uploaden

Op dezelfde scherm, klik op de Upload Images tab, dan selecteer en upload de afbeeldingen voor deze galerij. NB. selecteer de nieuwe galerij van de drop-down menu zodat de foto’s daarheen kunnen anders. Doe je dit niet, dan worden er geen foto’s geupload. Natuurlijk kan je ook proberen om alle foto’s in een map te plaatsen en dan de map te uploaden, of een gecomprimeerd bestand.

Met de browser upload optie, kan je foto’s een-voor-een uploaden. Met de flash upload optie, kan je meerdere foto’s uploaden. Klik op de eerste foto, dan ga naar de laatste foto en druk op de <Shift> toets terwijl je op de foto klikt. Alle foto’s worden gehighlight, dan kan je op Upload klikken.

Verander de titel van de galerij

Nadat de foto’s zijn geupload, dien je de galerij te bewerken. De beschrijving van je galerij wordt weergegeven als het bij een Album wordt toegevoegd. Ga naar Manage Gallery onder Gallery. Als jouw website meerdere gebruikers heeft, dan kan je alleen je eigen galerij bewerken. De titel komt automatisch van de naam die je het net gaf. Nu kan je het meer vriendelijk laten ogen, met spaties. Meestal krijgt je fotogalerij dezelfde titel als je post.

Tip: zie je allen een grijze balk “Gallery Settings” i.p.v. de titel, dan klik op het balkje, de rest zal verschijnen.

Voeg een beschrijving van de galerij toe

Deze beschrijving wordt weergeven als de fotogalerij bij een album wordt toegevoegd. Maar het is ook handig bij het onderhouden van je fotogalerijen om te zien waarover specifieke galerijen gaan, vooral als je veel hebt!

NB: VERANDER DE PATH (url) NIET!!! Als je dit veranderd, dan zal WordPress je foto’s niet meer kunnen terugvinden.

Afhankelijk van de instellingen op jouw website en fotogalerij, kan je de “Page Linked to” instelling veranderen of laten staan op “Not Linked” – dit wordt verder uitgelegd bij het bouwen van de website. De eerste foto wordt standaard gekozen als de thumbnail voor de album, maar je kan het hier veranderen indien gewenst.

Tip: Klik op “Save Changes” bij enige verandering!! Deze plug-in geeft je geen waarschuwing dat de veranderingen niet zijn opgeslaan. De galerij gaat dus terug naar de vorige versie, zonder veranderingen!

Map scannen voor nieuwe foto’s (indien nodig)

Als je foto’s via een (gecomprimeerd) map hebt geupload, dan kan je scannen voor nieuwe foto’s. Dit kan ook gebeuren als er enige problemen met de upload zijn geweest. Let wel: eerst klik op Opslaan om evt. veranderingen in de titel of beschrijving te behouden.

De fotogalerij plug-in gaat op zoek naar nieuwe foto’s en kleine afbeeldingen (thumbnails) worden ook gemaakt. Dit kan een tijdje nemen, dus laat het zijn ding doen … tot 100%. Daarna zie je de thumbnails van alle foto’s, gerangschikt op de naam van de foto.

De volgorde van je foto’s veranderen (optioneel)

Je kan de volgorde van de foto’s veranderen – klik op “Sort Gallery”. Dan zie je een andere venster met kleine vierkante foto’s. Sleep de foto’s tot de juiste positie. De foto wordt verplaatst wanneer je een “I” stipje tussen twee foto’s ziet. Geen stipje, geen verplaatsing.

Tip: je kan geen foto naar de laatste positie slepen. Het werkt gewoon niet. Sleep dus de foto op een na laatste en sleep de laatste foto tot een andere positie. Voila! Zo krijg je een foto op de laatste plek.

Verander de Alt + Title tekst alsook Description

De alt tekst (bovenste rij) wordt weergegeven wanneer een bezoeker zijn/haar muis over de thumbnail foto beweegt. Maar deze beschrijving geeft ook de zoekmachines inzicht op de foto. In de tweede zijn (description) kan je de caption intypen die onderaan de vergroting wordt vertoond. Je kan de tekst van de eerste regel kopieren en dan hier plakken.

Vergeet niet je veranderingen op te slaan!!

Als je ergens anders klikt voor het opslaan, dan verloor je je veranderingen. Je bent gewaarschuwd.

Tip voor techneuten: je kan simpele html codes gebruiken bij de beschrijving zoals <strong>… </strong> voor vetgedrukte tekst, <br> voor een nieuwe regel en<em> … </em> voor italics. Links kunnen ook gemaakt worden met <a href=”url”> … </a>.

Maak een nieuwe post/pagina met de “magische code” om je galerij te tonen

Nadat de fotogalerij is bewerkt en je hebt captions en titels voor elke foto gemaakt (en opgeslaan) dien je een bericht (of pagina) te maken om je fotogalerij te tonen. Plaats je cursor op de juiste plek waar je de fotogalerij wil toevoegen. Druk op <Enter> om een nieuwe regel te maken, dan typ de “magische code” in.

Onthoud je stap 2? Maak een fotogalerij? Je zou de galerijID neerschrijven. Nu dien je het hier in te typen.

Het geeft niet als je de galerijID niet hebt, je kan het weer bij Gallery terugvinden – ga naar Manage Gallery om een lijst van alle fotogalerijen te zien. In de eerste kolom zie je de verschillende id’s. Goed, he?

In de nieuwe regel, typ [ gallery=id# ] in zonder spaties!! Ik moest de spaties gebruiken om WordPress niet te laten denken dat het een echte galerij is. Dus als de id van je galerij nummer 9 is, dan typ je [ gallery=9 ] in zonder spaties.

Tags en categorieën toevoegen (alleen posts)

Als je de fotogalerij bij een bericht (en geen pagina) toevoegd, dan kan je als laatste de tags en categorieen instellen m.b.t. dit bericht en galerij.

Voorbeeld / Publiceren

Je kan een voorbeeld van de pagina bekijken of gewoon op Publish drukken. Dan kan je de fotogalerij bekijken.