Doe het merendeel zelf

Inleiding

Hier vind je alle informatie om snel, eenvoudig en gratis je eigen professionele website met WordPress te maken.
Hiervoor heb je geen technische kennis nodig, alleen voldoende tijd en een beetje doorzettingsvermogen.
Het maken van een website bestaat uit de volgende onderdelen:

  1. ontwerpen: maak een blauwdruk hoe je website in hoofdlijnen moet uitzien
  2. technische installatie: regel domein en hosting (incl. WordPress) en stel WordPress initieel goed in
  3. bouwen: maak of wijzig de content van je website, dit is het leukste deel (teksten, afbeeldingen, etc…)
  4. technisch beheren:  updaten, backups maken en analyseren van je website
  5. basis tutorial: een filmpje waarin m.n. de werking van de plugin Elementor goed uitgelegd wordt;
    waar mogelijk wordt naar deze basis tutorial verwezen (incl. start- en eindtijd)

Elk van bovenstaande onderdelen wordt hierna gedetailleerd uitgewerkt.

Wij zijn ervan overtuigd dat iedereen met de informatie op deze site zelf een professionele website kan maken.
Als je ergens toch niet helemaal uitkomt, dan is “google and youtube your best friend”, maar ook vind je diverse forums op internet (bijv. bij WordPress).
En kom je er dan nog steeds echt niet uit, dan kun je nog altijd tegen een kleine vergoeding hulp via zoom krijgen door Webateljee.

1. Ontwerpen van de website

Voor een professionele website is een goed ontwerp cruciaal en met je huisstijl toon je de ziel van je bedrijf.
Het ontwerp kun je nóoit volledig uitbesteden. Jij bent ook zelf nodig, want niemand kent jouw business zo goed als jij.

Stappenplan bij het ontwerpen

Heb je nog geen logo? Zorg dan eerst dat je er een hebt!
Met een goed logo weerspiegel je de ziel van je bedrijf. Zowel door de vormen als de kleuren.

Maak een huisstijl oftewel bepaal de kleuren en lettertypes die perfect bij de website passen.
De basis voor je huisstijl is je logo. Doe eventueel inspiratie op bij concurrenten (een v/d volgende stappen) of bekijk goede kleurencombinaties op colourlovers

P.S. De kleuren en lettertypes van websites kun je achterhalen via de css code, maar ook met gratis tools:

Belangrijk is eerst het doel van je website te bepalen.
Wil je bijv. een uitgebreide webshop of wil je alleen maar je contactgegevens tonen.

Pas daarna kun je bepalen welke functionaliteiten voor jou van belang zijn en hoe je ze wil tonen.
Veel gebruikte functionaliteiten zijn:

  • landingspagina (home) voor een heldere indruk
  • uniforme  header (met hoofdmenu) en footer voor alle pagina’s
  • fotogalerij voor sfeerimpressies
  • contactpagina (info om te mailen, bellen of bezoeken)
  • etc…

Zoek ter inspiratie minimaal 3 aansprekende websites van concurrenten en noteer wat jou daar het meest aanspreekt betreffende:

  • de door hún gebouwde functionaliteiten en de indeling ervan
  • (en zeker als je geen eigen huisstijl hebt)
    de door hun gebruikte huisstijl voor achtergronden, hoofdmenu, buttons, titels/headings, gewone content en afbeeldingen overlays

Tip! Maak nóoit een kopie van andere websites, maar gebruik ze wél als inspiratiebron.

Het ontwerp eindresultaat moet minimaal bestaan uit:

  • Het logo
  • De kleuren die je gaat gebruiken
    (achtergronden, hoofdmenu, buttons, titels/headings, gewone content)
  • De lettertypes die je gaat gebruiken
    (titels/headings, hoofdmenu, buttons, foto overlays en gewone content)
  • Welke pagina’s met per pagina de functionaliteiten en in hoofdlijnen de indeling

2. Technisch installeren website en uitleg indeling WordPress

Er zijn vele bedrijven waar je een domeinnaam en een goéde hosting kunt regelen. Dit is helaas nóoit gratis (zie tip hieronder).
Zodra dit geregeld is, is het verstandig nog enkele initiële settings in WordPress in te stellen.

Tip! profiteer mee met onze zeer voordelige groepshostings bij Vimexx (met Nederlandstalige ondersteuning). Doordat we de kosten delen is iedereen zeer voordelig uit. En Webateljee doet dan ook meteen de héle technische installatie voor je, zodat je direct aan de slag kunt met bouwen.

Stappenplan bij het bouwen van de website

De domeinnaam is de naam van je website (bijv. www.google.nl).
In de Basis tutorial (start 5:16 – 18:42) wordt uitgelegd hoe je een domeinnaam en hosting kunt regelen, echter helaas alleen bij Siteground als hosting.

De hosting server is de fysieke machine waar de hele website op staat, zodat bezoekers die kunnen raadplegen.
Bij 95% van de hosting bedrijven kun je heel eenvoudig WordPress installeren.
Daarbij kun je bij veel hosting bedrijven meteen al invullen:
het Domain (domein), de Site-Title (titel site met daarin, belangrijk voor google, de belangrijkste producten/diensten event. gevolgd door resp. ” | ” en de bedrijfs- of domeinnaam; liefst elk z.n. beginnen met hoofdletter), de Tagline (kort maar krachtig de inhoud van de site), de Site-Language (meestal: [Nederlands]) en een Email-Adress (van het hoofdaanspreekpunt t.b.v. event. probleem constateringen).
En ook het secure (lees: https://..) maken kun je dan ook meestal al meteen gratis regelen! 

In de Basis tutorial (start 5:16 – 18:42) wordt uitgelegd hoe je een domein en hosting met WordPress kunt regelen, echter helaas alleen bij Siteground als hosting. Maar wij raden toch liever een hosting aan met Nederlandstalig ondersteuning.

Hetgeen de bezoekers zien als ze je site bezoeken, is de zgn. frontend; hetgeen jij als administrator ziet, is de zgn. backend.
De initiële indeling van de backend ziet als volgt uit:

  • Dashboard: totaaloverzichtje; de blokken kun je wisselen en open/dicht klappen
    (meldingen kun je eventueel negeren/verwijderen)
  • Berichten: nieuwsberichten aanmaken/wijzigen
  • Media: hier staan alle afbeeldingen en filmpjes die gebruikt (kunnen) worden in berichten en pagina’s
  • Pagina’s: webpagina’s aanmaken/wijzigen
  • Weergave: het gebruikte thema aangeven en instellen; en het hoofdmenu samenstellen
    (het thema bepaalt de look & feel van je website)
  • Plugins: plek om hulpprogramma’s voor allerlei extra functionaliteiten in te zetten; deze zijn vaak gratis
  • Gebruikers: aangeven wie toegang heeft tot de backend en met welke rol;
    jouw bij Profiel / Toon-naam… ingevulde naam zie je rechtsboven (en anderen zien hem in bijv. blogs);
    ook jouw event. afbeelding bij Profiel / Profielfoto (aanmelden in Gravatar) zie je rechtsboven
  • Instellingen: WordPress instellingen

NB Als een nieuwe plugin wordt toegevoegd leidt vaak tot het uitbreiden van die backend.
Welke plek in bovenstaandde indeling verschilt per plugin.

Voordat je begint met bouwen raden we in een initiële WordPress installatie aan eerst de volgende instellingen aan te passen in de backend uitgaande van een Nederlandse installatie:

Let op! vergeet niet telkens alle wijzigingen in WordPress te bevestigen

  • Berichten: verwijder alle eventuele berichten
  • Media: verwijder alle eventuele media bestanden
  • Pagina’s: verwijder alle eventuele pagina’s (en maak prullenbak leeg) 
  • Weergave: als gratis thema raden wij aan Astra te installeren (en activeren);
    verwijder de andere thema’s behalve Twenty Twenty (één reserve thema is goed voor je zoekscore);
    ga naar Customiser / Header / Site-Identiteit en: laad het Logo en Favicon (z.s.m maken we nog een afbeeldingen blog met o.a. pixlr)
  • Plugins: verwijder alle eventuele plugins (eerst deactiveren); en wij raden aan de volgende gratis plugins te installeren (en activeren):
    Antispam-Bee (antispam), Elementor (page builder), Limit-Login-Attempts-Reloaded en Wordfence (beveiliging), UpdraftPlus (backups) en WP-Forms-Lite (contactformulieren)
  • Instellingen / Algemeen: vul in: Tijdzone: “Amsterdam, Datumnotatie: “…[j F Y]” en Tijdnotatie: “…[H:i]”;
    PS De URL‘s, Sitetitel, Ondertitel, Site-taal en E-mailadres zijn meestal al ingevuld (zie: “Regelen hosting incl.  WordPress”) en als daar site secure gemaakt is, dan dienen de 2 URL’s ook met “https://” te beginnen
  • Instellingen / Permalinks: selecteer “Berichtnaam”

3. Bouwen van de website

Een goed ontwerp maakt het bouwen van de site veel gemakkelijker.
Met onderstaande stappen kun je eenvoudig zelf een professionele website bouwen.

Let op! vergeet niet telkens alle wijzigingen in WordPress te bevestigen

Stappenplan bij het bouwen van de website

We gaan hieronder er van uit dat Astra als theme gekozen is en dat de plugin Elementor reeds geïnstalleerd en dat beiden geactiveerd zijn.

Voeg bij Pagina’s de pagina’s toe vanuit je ontwerp (bijv. Home, Diensten, Portfolio, Over ons en Contact)

ga naar WeergaveMenu en maak een menu met Menunaam bijv. “hoofdmenu”;
selecteer alle pagina’s die je aan het menu wil toevoegen m.u.v. de home pagina en klik op [Aan menu toevoegen];
zet de pagina’s in de goede volgorde (submenu’s zijn mogelijk!);
kies als Locatie-tonen “Hoofdmenu”;

Ga naar Instellingen / Lezen en selecteer als Homepagina-toont: “Een statische pagina” en selecteer de juiste Home pagina en eventueel Blog pagina (als je ook een Blog pagina met nieuwsberichten maakt).

We gaan ervan uit dat het Astra thema reeds geactiveerd is (zie bij § WordPress-initieel-goed-instellen: Weergave).

Ga naar Weergave / Customiser / Header en wijzig (voor de header die je op elke pagina krijgt) bij resp.:
Site-Identiteit: kies bij Sitetitel en Ondertitel tussen wel of (meestal) niet weergegeven
Hoofd-header*): zet event. rand (+kleur) onder de header en bij Mobiele-Header (voor gsm’s): kies de positie van het logo t.o.v. het menu
Hoofdmenu / Sub-menu: zet event. rand om en scheidingslijnen binnen het submenu (indien subpagina’s zijn aangemaakt)
Hoofdmenu / Mobiel-menu: wijzig event. Breekpunt (hamburgermenu op kleiner scherm) en vul als Menulabel: “MENU” en kies Knopstijl: “Vullen”
Ga naar Weergave / Customiser / Sidebar en kies: Standaard: “Rechter sidebar” en bij de rest: “Standaard”, behalve bij Pagina’s: “Geen sidebar”
Ga naar Weergave / Customiser / Footer*) / Footerbalk: zet hierin de tekst die je wilt voor de footer die je op elke pagina krijgt en zet event. rand (+kleur) boven de footer; en ook de achtergrondkleur, tekstkleur en kleur van event. linkjes kun je wijzigen
Ga naar Weergave / Customiser / Globaal / Container: Kies Breedte (bijv. 1020), en kies: Layout: “Ingesloten” en bij de rest: “Standaard”, behalve bij Opmaak-pagina’s: “Volledige breedte / Ingesloten”

*) Mocht je vinden dat de Header of de Footer van het Astra thema voor jou te beperkt is, dan kun je beiden ook helemaal maatwerp maken met de plugin Elementor-Header,Footer&Blocks. Controleer dan wel heel goed dat alles correct responsive werkt!
Z.s.m maken we nog een blog over de plugin Elementor-Header,Footer&Blocks.

De werking van de plugin Elementor wordt goed uitgelegd in de basis tutorial (start: bij Pagina’s eerst kiezen bij Home pagina: “Met Elementor bewerken” 1:09:43 – 1:..:..). Enkele belangrijke punten:
– ga naar Hamburger (linksboven) / Gebruiker-voorkeuren en zet Bewerken-functies aan, dan zie je meer functies als je over een bewerk-knop hovert
– 

Inhoud wissel

Het stappenplan om een website te bouwen is zeer uitgebreid, maar wij zetten alle stappen op een rij om je eigen professionele website te bouwen.

4. Technisch beheren van de website

Zodra je als admin inlogt in je WordPress dashboard zie je linksboven of er updates nodig zijn. Is dat zo, dan doe je de volgende handelingen:

Omdat er bij het updaten sporadisch is mis kan gaan, dien je eerst een backup te maken. Je kunt hiervoor plugin Updraft gebruiken.

Zodra je als admin inlogt in je WordPress dashboard zie je linksboven of er updates moeten gebeuren. Updates dienen als volgt te gebeuren:

 

Basis tutorial

Ferdy Korpershoek heeft een van de beste tutorials gemaakt om gratis je eigen website te maken. 

PS Als je de video van Ferdy ook goed vindt, vergeet dan niet hem te liken. Want zo kunnen makers van gratis tutorials er toch nog wat mee verdienen!

nl_NLNederlands