KRISTOFORE-BOOK WEBDESIGN

WIJ HEBBEN HET WIEL AL VOOR JE UITVONDEN

i

KRISTOFORWebdesign made simple

kristofor publishing

Dit e-book mag uiteraard vrij gedeeld worden, maar, alleen als dit als een document gebeurt. Ik hoop dat dit e-book je een web-site brengt die jou verder helpt en die helemaal is zoals jij!

Heb je hulp nodig? Mailen kan altijd naar post@kristofor.nl.

VoorwoordVoordat we in de wereld van webdesign storten, eerst dit.

Kijk rond.

Niks is zo frustrerend als ergens mee aan de slag gaan en je komt er halverwege achter dat je toch een andere domein naam wilt, dat je toch een andere kant op wilt gaan, of….wat het ook is. denk goed na voordat je begint aan je website.

Want, als je bent begonnen is het daar. In een keer staat jouw bedrijfsnaam daar gepubli-ceerd. Ook al kan iedereen plotseling de journalist uithangen, het is wel een publicatie!

In dit e-book is in stappen uitgelegd hoe je zelf je website kan maken met hulp van Wordpress. Als je de stappen rustig leest, Volg deze stappen en het moet helemaal goed komen met je! Lukt het toch niet helemaal? Dan kan je ons altijd mailen op post@kristofor.nl.

Simpel webdes ignAls ondernemer heb je helemaal geen zin om na te denken over een website. En al helemaal niet om tussen al die webdesigners te kiezen.

Daarom hebben wij het heel simpel voor je gemaakt. Of je maakt zelf je website met hulp van dit gratis e-book. Of wij doen het voor je voor €300. Makkelijk toch?

Kristofor - we love simplicity

KRISTOFOR

VEILS

Stap 1 . K ij k rond & besl i s wat voor soor t webs i te jouw voorkeur heef tJe eerste stap is om eens goed rond te kijken. Wat vind jij een mooie website? Hoe vind je het lettertype ,wat zijn de basis kleuren? Vind je dat het ontwerp past bij het bedrijf?

VoorbeeldenIk vind bijvoorbeeld Nasty Gal een mooie website. Eigenlijk heel sim-pel, maar door het mooie beeldgebruik, waarbij niet alles perfect uitgelijnd is, is het een catchy website. Precies zoals Nasty Gal is.

Refinery 29 is ook een favoriet! Mooie combinatie van lettertype, met serif & zonder serif (serif is het dwarsstreepje op een letter). Daarnaast veel groot beeld, goed gebruik van kopteksten. Maar, het allerbelan-grijkste, de container van de website is heel simpel. Zwart menu, veel wit gebruik.

Wat ik een hele vervelende site vind is de vernieuwde Linda site. Enorm veel kolommen, die ook nog eens onafhankelijk van elkaar bewegen, heel veel informatie…Ik kom hier niet graag.

Nu jij! Wat vind jij een prettige site? Misschien kan je eens een paar avonden gewoon een beetje surfen. Rond kijken. En meteen opschri-jven waar je je prettig bij voelt.Let op kleuren, tekstgebruik, vormgeving (blokken, rechtlijnig, menu-inhoud, …).

5KRISTOFOR

Stap 2. Aan de s lagJij hebt je avonden goed gespendeerd. Van nutteloos surfen in de avond werd het in een keer een bezigheid waarvoor je werd beloond, good for you!

Jij hebt nu ontdekt wat je mooi vind en hopelijk ook datgene wat jij voor ogen ziet voor je eigen website. Onthou dat.

DomeinnaamUiteraard heb je tijdens je surf avondjes ook bedacht wat je een moo-ie domeinnaam vind. Er zijn mensen die bij een bloemenhandel iets met een bloem erin willen verwerken en bij een hoveniersbedrijf iets met hovenier. Dit zou de vindbaarheid via Google verhogen.

Dat is zo, maar als jij alleen voor lokaal gebruik een website nodig hebt en mensen gaan naar je website toe voor een online bestelling maakt het echt niet uit wat jij als naam hebt bedacht. Het belangrijk-ste is dat je vindbaar bent. Je bekendheid vergroot je door marketing, offline promotie, mond-tot-mond revlame, ga maar door!

Nou, hehe, Jij gaat nu eerst echt aan de slag. Op naar stap 3, de juiste volgorde!

7KRISTOFOR

Stap 3 . De ju i s te volgorde: domein vas t leggen & 1-cl ick ins tal lat ie 1.Ga naar TransIP toe om je domein vast te leggen met daaraan een hostingpakket (Small is prima). Ik vind TransIP goed: nooit offline, een snelle help-desk, en 1-click Wordpress installatie (belangrijk!). Er zijn vast anderen, maar op dit moment ben ik nog heel tevreden over TransIP.

2. Nu je dit hebt gedaan, blijf je even bij TransIP han-gen. Ze bieden namelijk een 1-click wordpress installatie aan. Doen - je kan het maar weer gehad hebben. Jij gaat namelijk je website in Wordpress bouwen, dus dit heb je sowieso nodig.

Even ie t s over Wordpress .Misschien denk je nu - nou, daar was ik nog helemaal niet over uit - een website in Wordpress. Dat is gratis - en gratis kan nooit iets zijn. Nou, bij gratis is er inderdaad altijd een addertje onder het gras (bij dit e-book hoop ik bijvoorbeeld dat je voor altijd aan Kristofor blijft denken).

In de internetwereld zijn er wel degelijk heel veel gratis items te vinden. Wordpress is een open-source programma. Heel veel mensen, contributors, schrijven mee aan Wordpress om deze voor zoveel mogelijk gebruikers beschikbaar te laten zijn. Waar deze contributors hun geld mee verdienen kan bijvoorbeeld zijn met betaalde plugins (extra betaalde toevoeging aan een web-site) of ze werken bijvoorbeeld bij een IT bedrijf die Open Source stimuleren. Op deze manier is Wordpress een van de meest doorontwikkelde open-source software programma’s in de wereld met de meest geavanceerde beveiliging, op to date design technieken, ga maar door!Voor de mensen die denken dat Wordpress alleen voor bloggers is…tja, dat is wel echt iets van vroeger.

9VEILS

Stap 4 . J ij hebt een webs i te Ja, zo snel kan het gaan. Je hebt van TransIP allerlei mails gekregen met inlogcodes enz. Bewaar dit allemaal goed. Bewaar uiteraard ook het wacht-woord dat je zojuist voor je Wordpress account hebt in-gevuld. We gaan nu namelijk naar je website toe om de boel wat op te fleuren.

Loginwww.jouwwebsitedomeinnaam.nl/wp-login.php

--> Vul je gebruikersnaam & wachtwoord in.

Daar ben je dan. Back-office in je eigen bedrijf. Je gaat nu het thema installeren en de nodige plugins.

Thema ins tal leren & act iverenOp Themeforest zijn ontzettend veel thema’s te vinden. Ik kies mees-tal hetzelfde thema (Flatsome) en pas deze aan naar behoefte. Dit thema vind ik heel goed, omdat het een eenvoudig ogend thema is, heel makkelijk in gebruik en je kan het nodige aanpassen.

Welk thema je ook hebt gekozen, download deze (nadat je hebt betaald) via de link die je hebt gekregen en upload hem naar je web-site. Weergave —> thema’s —> thema uploaden (bovenin). Kies je ZIP file en je thema wordt in je website ingeladen. Vervolgens activieer je je thema.

11KRISTOFOR

P lugins ins tal leren & act iverenJe krijgt nu vanzelf een aantal vragen of je bepaalde plugins erbij wilt installeren. Dit kan je zeker doen, gewoon op OK drukken.Dit zijn plugins die nodig zijn voor het goed functioneren van je thema. Bijna alles gaat vanzelf - daar houden we van!

De volgende plugins heb ik standaard op al mijn websites staan:AKISMET - tegen spam. GOOGLE ANALYTICS & SEO YOAST - voor een goede Google rankingNINJA FORMS - formulieren makenW3 TOTAL CACHE - voor een snelle website

EventueelQTRANSLATE X - voor een meertalige websiteWOOCOMMERCE - voor een online shopMAILPOET NEWSLETTERS - voor mooie nieuwsbrieven

Vervolg plugins ins tal lat ie - waar v ind ik d ie plugins?In het menu links zie je al je plugins staan. Plugins —> nieuwe installeren.

In het zoekveld de naam van je plugin invullen, dan komt deze vanzelf boven drijven.

Let wel goed op dat je de juiste plugin installeert. Alle plugins die ik gebruik worden door 1000’en mensen gebruikt, dit is een goede indica-tor dat je de juiste te pakken hebt.

Nadat al je plugins zijn geinstalleerd ga je ze allemaal aktiveren. Nu krijg je heel wat vragen. Is best spannend, maar we komen er wel uit! Bij Akismet moet je nu bijvoorbeeld een API sleutel aanmaken, dat wijst vanzelf; bij SEO Yoast ga je werken aan je SEO, een goede vindbaarheid dus. Dat kan je nu doen, maar alles kan ook altijd later.

Als alle plugins zijn geinstalleerd - heb je het vervelendste werk wel gehad!Je website is nu nog een kale bedoening, en ziet er nog erg templaterig uit.

Hier gaan we wat aan doen, maar nog even niet. Eerst gaan we je website een beetje vullen met menu’s & widgets.

je hebt het gedaan - top!

13KRISTOFOR

STAP 5. Eers t de vaste i tems vul len

Wat i s waar in WordpressIk vind Wordpress niet altijd even overzichtelijk ingedeeld. Hierbij een opsomming wat je waar kunt vinden.

Pagina’s & BerichtenJe hebt Pagina’s & Berichten. Berichten zijn meer bedoeld om korte stukjes nieuws op je site te zetten. Deze komen allemaal bijelkaar op een aparte pagina, de blog pagina. Pagina’s zijn wat minder tijdsgebonden. Je maakt bijvoorbeeld een pagina met daarin een verhaal

over jezelf, de algemene voorwaarden en een FAQ pagina bijvoorbeeld

Menu’s Hier maak je je header menu, je topbar, je Footer menu (helemaal onderin), maar ook menu’s die je in je sidebar wilt zetten. Ik heb bijvoorbeeld een menu voor mijn help pagina’s en een aantal aparte menu’s in de Footer

Widget’s Widget’s zijn open ruimtes in je website die altijd vast gevuld worden. Bij een website zie je altijd dezelfde Footer ruimte, dat komt omdat deze gevuld is met behulp van widgets, waardoor je website op elke pagina hetzelfde uiterlijk heeft. Zo ook met Zijbalken. Je kunt een zijbalk widget aanmaken, zodat je een Twitter feed kan laten zien, menu’s erin wilt zetten, of je Facebook pagina bijvoorbeeld.

De menu’s Het is handig om eerst alle menu’s voor elkaar te hebben. Teken voor jezelf eerst uit wat je in je Header wilt hebben, wil je iets in je Topbar hebben, wil je footers & moet daar een menu in komen?

Ga naar Weergave —> Menu, vervolgens naar tabblad Locaties beheren. Maak nieuwe menu’s aan & geef ze een handige naam zodat je weet waar ze terecht komen.

Deze menu’s moeten gevuld worden, zodat je bezoekers makkelijk alles kunnen vinden. Je kunt een menu vullen met pagina’s, categorieën, tags, van alles. Dit is uiteraard heel erg persoonlijk, dus iets om goed over na te denken. Kijk goed met welk menu je bezig bent. Is het de header, je footer menu, enz. Je kunt ook een heel nieuw menu maken, die je bijvoorbeeld via een widget in je Footer gaat zetten (zie linker pagina als je nu de draad kwijt bent).

Nu jij je menu’s af hebt, is het tijd om je Footers eens lekker te vullen.

Ga naar Weergave —> Widgets. Je ziet nu rechts balkjes met Footer 1, Footer 2, Product Zijbalk, Zijbalk…

De Zijbalk komt op je Blogpagina, de Shop Zijbalk is voor in je Shop als je die hebt, Footer 1 & 2 zijn 2 Footers (optioneel uiteraard).

Je kunt ook nog extra Widgets aanmaken (voor als je er lekker in zit) via Weergave —> Widget Areas, als je bijvoorbeeld 2 verschillende zijbalken wilt hebben.

Je ziet op de pagina ook allemaal balkjes met Kalender, Archief, Aangepast Menu. Deze balkjes kan je verschuiven naar een van de widgets rechts. Probeer gewoon eens van alles uit, dan zie je vanzelf wat er allemaal gebeurt. De menu’s die je hebt aangemaakt staan onder Aangepast Menu. Zet deze maar eens in de Footer wid-get!

Let op! Vergeet niet op save te drukken als je iets in je Widget hebt veranderd, anders is al je werk voor niks.

TE INGEWIKKELD? STEL JE VRAAG VIA DE MAIL .

15KRISTOFOR

topbar

header & logo

content & s idebar

footer

Stap 6 Des ignen

Nu je al iets meer een gevulde website hebt, kunnen we aan de slag met de Theme Options. Met het thema dat je gekozen hebt, krijg je altijd een aantal opties mee voor het instellen van kleuren, let-tertype, zijbalken. Dat soort dingen. Bij elke thema is dit een beetje an-ders, ik bespreek het hier voor het Flatsome theme.

Ga naar Weergave —> Theme Options. Hier staan alle opties die je met het Thema kan doen. Zoals Footers aanpassen, Headers, lettertype, enz.

Logo, Icons en andere Layout opt ies .Aan het begin van de ontwikkeling van je website heb je goed nagedacht wat je precies zou willen met je site. Kleuren. Lettertypes. Wel of geen footer. Haal dat nu terug & ga het toepassen!Teken het anders even uit, hiernaast zie je waar headers, footers, e.d. terecht komen.

Bij de Heels’R Us website heb ik ervoor gekozen om te top bar zwart te maken, logo links neer te zetten, daarnaast de header, allemaal met een witte achtergrond. Het blog gedeelte heeft aan de rechterkant een menu, met daarin Twitter, Instagram en oudere berichten. De Footer is hier niet zicht-baar, maar deze hebben bij Heels’R Us ook een witte achtergrond.

Voor jouw website kan je kiezen om helemaal geen topbar te hebben. Bijvoorbeeld als je een heel eenvoudige website wilt, gewoon om te laten zien wie je bent. Dan is het al voldoende om alleen een header menu te laten zien. Wil je dat jouw logo eruit knalt zet deze dan in het midden neer, met hieronder de header. De footers kan je ook helemaal weglaten, of juist een andere kleur geven als contrast. Ik heb op de meeste pagina’s geen zij menu, alleen op de blog pagina en de informatiepagina’s zoals voorwaarden, verzenden, retouren, dat soort zaken waarbij je veel informatie binnen krijgt.

Ga hier eens lekker mee oefenen, op de volgende manier:

Weergave —> theme options. Ga alle tabjes langs, verander dingen, en kijk wat je er-van vind. Hou wel je voorkeuren in je achterhoofd!

Onder de tab Logo and Icons kan je jouw logo uploaden, de Layout kan je kiezen tussen een full width of een meer ingekaderd model, Fonts kan je uitkiezen. Ga er gewoon eens op je gemakje door-heen!

Je moet hier een beetje je eigen weg in vinden, dat kost wat tijd, maar dan leer je wel goed je eigen website kennen en zie je wat goed werkt en wat niet.

17KRISTOFOR

Stap 7 Wordt het al wat?Nou…als het goed is heb je nu een website met een menu bovenin, eventueel een topbar met daarin wat tekst, één of twee footers met 1 of meerdere kolommen, een gekleurde website of juist neutraal wit.

Ik ben benieuwd!

De inhoud: Pagina’sNu is het tijd om je pagina’s aan te maken. De volgende pagina’s heeft bijna elke website:Algemene VoorwaardenPrivacy Policy & Cookie BeleidContactOverCredits

Bij een shop heb je ook nog: Bestellen & Betalen, Verzenden, Retour & Omruilen, Account Menu

Daar ben je wel even zoet mee ;). Daarnaast komen natuurlijk nog de pagina’s over jouw bedrijf, je produkten, een portfolio.

Maak een nieuwe pagina aan via Pagina’s —> Nieuw pagina. Geef het een goede titel & schrijven maar in dat grote witte vlak!Rechts staat de knop bewaren, en…jij hebt een pagina aangemaakt.

Als je zo de gewenste pagina’s hebt aangemaakt, kan je deze aan-vullen in de menu’s die je al eerder hebt gemaakt. Dit zie je direct terug op je website als je een pagina in je header plaatst bijvoorbeeld.

19KRISTOFOR

Stap 8 . Je blog

beginnen

Of je nu wel of niet gaat bloggen, ook al is het maar een keer per maand…Bloggen laat zien dat je aktief bezig bent met je bedrijf. Wat je bezig houdt, heb je misschien wat nieuwe publicaties. Zijn er nieuwe ontwik-kelingen?

Het hoeft zeker niet, maar handig is het wel!

Zo maak je een blogBerichten —> nieuw berichtJe kunt je berichten indelen in categorien, tags, enz.

Om je blog zichtbaar te laten zijn voeg je de blogpagina toe aan een van je aangemaakte menu’s, bijvoorbeeld in de Header of de Top-bar.

21KRISTOFOR

Stap 9. Het e inde van het beginJe hebt je menu’s af met daarin de pagina’s. Je blog heeft ook al wat leuks te melden.

Het i s nooi t afHelaas is een website nooit af. Net als je werk. Wat je vandaag mooi vind, is volgende week niet meer je van het. Maar dat maakt het ook zo leuk (dat vindt Kristofor in ieder geval).

Het allerbelangrijkste is dat je site overzichtelijk blijft. Hier zijn een aantal tips waar ik altijd aan blijf denken als ik een website ontwikkel en onderhoud.

Als jij je hieraan houdt, blijft je website altijd helemaal van nu!

1. Zorg voor een clear view: minimaal, simpel, basic kleurgebruik/ vast aantal kleuren. Echt waar.2. Gebruik vaste lettertypes in al je uitingen (on- & off line). 3. Maak gebruik van grote beelden. Pluis je foto archief uit en plaats deze bij relevante teksten. Handig, want dan worden die foto’s ook eens gebruikt.4. Een website is slechts een drager. Het gaat echt om de inhoud…pas bij een goede inhoud zal je website je boodschap nog beter gaan uitdragen. 5. Let op kopteksten & normale teksten. Als je niet weet wat ik hi-ermee bedoel, is het handig om dit even op te zoeken. Schrijf voor jezelf op wanneer je wat gaat gebruiken als je teksten schrijft. Dan blijft je site mooi een geheel.6. De meeste tekst is teveel. Ga schrijven, deleten en dan nog meer deleten. Bezoekers gaan niet urenlang je website bekijken. Ook al is het nog zo interestant. Echt niet.

23KRISTOFOR

Gefel ic i teerdGefeliciteerd met jouw zelf gemaakte website! Hij is vast nog niet af, en er moet altijd iets gebeuren, maar met zo’n opzet ben je echt al heel erg ver!

Heb je liever nog wat ondersteuning? Mail dan naar Kristofor, wij helpen graag!

Ken jij het webpakket van Kristofor al?

WEBPAKKET KR ISTOFOR

€300

voor een s impele webs i te .

Je kan je webs i te dan zel f u i tbre iden , of als je je later bedenkt kan je al t ijd weer contact met ons opnemen om te k ij ken wat je anders wi l t .

Wij z ijn n ie t zo van het uur t je factuur t je .

Ben je bl ij? Dan kan je al t ijd een

EXTRA DONATIE GEVEN.

25KRISTOFOR

Over Kr i s to forWeer je meer weten wat Kristofor doet? Bekijk dan haar website, www.kristofor.nl

Dit e-book is geschreven door Kristalize Janse. Wil je ook een e-book? Mail dan!

Credi t sAlle afbeeldingen zijn afkomsting van Unsplash.

KRISTOFOR