Zelf doen

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 passie en 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”, en bovendien kun je ook diverse forums vinden op internet (bijv. bij WordPress).
En kom je ergens toch nog niet uit? Neem vrijblijvend contact op.

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 technisch installeren 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. berichten die je maakt);
    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 bouwer / Logo en: laad het Logo en Favicon (zie ook: kennis bericht Afbeeldingen en andere media bestanden)
  • Plugins: verwijder alle eventuele plugins (eerst deactiveren); wij raden aan de volgende gratis plugins te installeren (en activeren):
    Antispam-Bee (antispam), Elementor Website Builder (page builder), Limit-Login-Attempts-Reloaded en Wordfence Security (beveiliging), UpdraftPlus WordPress Backup (backups) en Contactformulier WPForms (contactformulieren)
    PS Enkele plugins hoeven alleen geïnstalleerd en geactiveerd te worden. Op de plugins waar je wel wat zelf nog wat moet doen zijn klikbaar voor meer informatie.
  • 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 de site daar al secure gemaakt is, dan dienen de 2 URL’s met “https://” te beginnen
  • Instellingen / Permalinks: selecteer “Berichtnaam” voor een betere google ranking.

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 (zou je eventueel kunnen doen als je ook een pagina maakt met een overzicht voor nieuwsberichten).

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

Enkele instellingen met Astra

Met Astra kun je enkele instellingen doen die dan gelden voor je hele website: 

  • Wel/niet sidebar tonen
    Een sidebar is de ruimte rechts of links van een gewone of berichten pagina die is voorzien voor nog andere content (zie ook: kennisbericht Widgets maken, inladen of plaatsen).
    Wij zelf tonen nooit een sidebar op de gewone pagina’s, maar wel op de berichten pagina’s e.d.
    Dat kun je als volgt instellen: Ga naar Weergave / Customizing / Zijbalk en kies: Standaard: “Rechter sidebar” en bij de rest: “Standaard”, m.u.v. Pagina’s, kies daar: “Geen sidebar”.
  • Bepaal de container breedte**) en indeling
    Een container is de gereserveerde ruimte voor alle content tussen de linker en rechter kantlijn.
    De breedte stel je als volgt: Ga naar Weergave / Customizing / Globaal / Container: Kies Breedte (bijv. 1020).
    De indeling stellen wij vervolgens altijd als volgt in: kies bij
    Layout: “Ingesloten” en bij de rest: “Standaard”, behalve bij Opmaak pagina: “Volledige breedte / Ingesloten”
  • Standaard lettertypes en kleuren instellen
    Je kunt instellen welke lettertypes en (achtergrond)kleuren je standaard wil gebruiken in het thema. Deze instellingen gelden in ieder geval zeker voor alle content die je niét met een pagebuilder maakt zoals bijv. Elementor. Dus bijv. wél voor de header en footer, tenminste als je die met Astra maakt. In de meeste pagebuilders kun je apart de standaard kleuren en lettertypes instellen.
    Instellen van de standaard lettertypes en kleuren in Astra kan via Weergave / Customizing / Globaal.

De header/menu en  footer maken

Wij maken zelf altijd een vaste header met een menu en een footer die gelden voor alle pagina’s van de website, voor een optimaal overzicht. Dit kun je doen met Astra, maar dat kan ook met plugins*). Als je dit wilt doen met Astra:

  • Een header/menu maken
    Ga naar Weergave / Customizing / Header en wijzig 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 eventueel 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”
  • Een footer maken
    Ga naar Weergave / Customiser / Footer en wijzig bij resp.:
    – kies bij Footerbalk om wel/niet een regel met exact 4 blokken te maken waarin je diverse widgets kunt plaatsen (zie ook kennisbericht Widgets maken, inladen of plaatsen)
    – daaronder kun je bij Footerbalk een blok met extra tekst zetten bijv. copyright, disclaimer, etc.: kies als instellingen event. een rand (+kleur) boven; en kies een achtergrondkleur, tekstkleur en kleur voor de (hover) links

*) Met bijvoorbeeld de plugin Elementor-Header,Footer&Blocks kun je een Header en Footer, gebaseerd op Elementor als page builder. Dit is zeker aan te raden als je Astra te beperkt vindt voor de header of footer

**) In de meeste page builders (bijv. Elementor) kun je nog eens apart de container breedte instellen, maar wij adviseren de containerbreedte die gelijk aan die van het thema te houden voor een rustig beeld

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:..:..).
Samenvatting van 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
– als je bij een element kiest rechtermuisklik / Kopieëren dan kun je bij ander element via rechtermuisklik / Plak stijl de opmaak kopieëren

Contenu de va-et-vient

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:

  • ………… (volgt zsm!)

 

Basis tutorial

Ferdy Korpershoek heeft een goede tutorial gemaakt hoe je gratis je eigen website kunt maken. Hierin wordt m.n. de plugin Elementor goed uitgelegd. Elementor is een pagebuilder. De tutorial van Freddy is zeker de moeite waard als je Elementor nog niet kent.
Maar zodra je eenmaal een beetje bekend met Elementor, dan kun je beter kennis bericht Plugin Elementor gebruiken. Dit kennis bericht bevat een gestructureerde samenvatting, zodat je niet telkens de hele tutorial hoeft te doorzoeken.

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!

Verbetersuggesties ?

Deze website hebben we met passie en zorg voor je samengesteld.
Om zelf te oefenen kun je vele filmpjes vinden op Youtube.
Deze pagina is een gestructureerde samenvatting voor het maken van je eigen gratis website.
Heb je verbetersuggesties? Graag! Gebruik dan het contactformulier.

fr_FRFrançais