Zelf je website maken met Wordpress en Elementor 2021

In deze les gaan we een domeinnaam en hostingabonnement registreren bij Vimexx.

We loggen in bij DirectAdmin en gaan controleren of het SSL-certificaat werd geïnstalleerd door Vimexx. Zoniet, maken we dit in orde.

Daarna installeren we WordPress op je domein.

Korte rondleiding aan de backend (achterkant) van WordPress. Hierbij krijg je wat meer informatie over de gebruikersinstellingen.

Tevens zetten we al enkele instellingen juist voor de start van het ontwerpen van de website.

In deze les installeren doen we al enkele voorbereidingen vooraleer we onze website beginnen te bouwen. We installeren het thema Astra.

Tevens installeren we ook enkele plugins : Really Simple SSL, Elementor, Essential Addons for Elementor.

In deze les gaan we alle pagina’s en subpagina’s aanmaken in WordPress.

In de vorige les hebben we alle pagina’s en subpagina aangemaakt in WordPress. Nu gaan we deze koppelen aan het hoofdnavigatiemenu in WordPress.

We gaan het lettertype en de kleuren van het navigatiemenu aanpassen via de customizer. Tevens voegen we een “Reservatie” knop toe aan de header.

Ook gaan we een logo maken en toevoegen aan de header van de website.

In navolging van de vorige les maken we ook een mobiel menu aan in WordPress.

Smush is een WordPress plugin die automatisch afbeeldingen comprimeert wanneer je afbeeldingen toevoegt aan de website. Dit zorgt ervoor dat de afbeeldingen niet te groot zijn en de website niet te traag gaat laden.

In deze les gaan we de globale kleuren en lettertypes die we gebruiken op de website vastzetten. Hierdoor zullen we in de volgende lessen veel vlotter onze website kunnen bouwen.

Vanaf deze les gaan we aan onze website beginnen bouwen met Elementor. In deze les gaan we de header van de homepage maken. We gaan een foto plaatsen die zo breed is als het scherm en voorzien deze van een titel.

In deze korte les maken we de “Over Ons” sectie van de homepage.

In deze les maken we de “Ons Menu” sectie van de homepage. Het is de bedoeling om op onze website 4 menupagina’s te voorzien : Lunch, diner, desserts en drank.

In de “Ons Menu” sectie voorzien we voor ieder menu een afbeelding met een link naar de desbetreffende menupagina. Op de 4 afbeeldingen passen we een kleine animatie toe. Ik ga jullie tevens laten zien hoe jullie je workflow kunnen vergroten door te kopiëren en plakken.

In deze sectie gaan we de reviews of recensies van onze klanten voorzien. Deze sectie bestaat uit verschillende widgets van Elementor. Op deze manier leer je vlot met Elementor werken.

In deze superkorte les voorzien we een kleine subtiele animatie, om de Review sectie een klein beetje levendiger te maken.

Omdat we op onze website ook een blogpagina of nieuwspagina willen hebben, gaan we in deze les categorieën en blogberichten toevoegen aan WordPress. Naderhand maken we dan een sectie op de homepage waar de recentste berichten in terecht komen. Ook de blogpagina of nieuwspagina nemen we nog onder handen.

Nadat we in de vorige les categorieën en blogberichten hebben aangemaakt, gaan we ons in deze les bezighouden met de blogsectie of nieuwssectie van de homepage.

In deze sectie verschijnen de recentst geplaatste berichten, met een link naar het nieuwsbericht.

In deze les behandelen we een hele belangrijke sectie, nl. de info sectie. In deze sectie plaatsen we algemene gegevens ivm het restaurant, zoals adresgegevens en de openingsuren. Op deze manier hoeft de klant niet lang te zoeken naar de informatie die hij nodig heeft.

In deze les gaan we de footer van de website maken. De footer is het onderste gedeelte van de website wat op iedere pagina terugkomt. We voorzien daar ook een footer menu met een link naar de reservatiepagina en naar de privacy policy. Ik laat je hierbij ook nog zien hoe en waar je gemakkelijk een privacybeleid kan maken.

Omdat ik niet 100% tevreden ben over de footer die we in de vorige les hebben gemaakt, gaan we hier toch nog enkele aanpassingen aan doen. We gaan de mogelijkheden van het Astra-thema nog wat verder uitdiepen.

De homepage is nu helemaal klaar, dus hoog tijd om aan de volgende pagina te beginnen. In deze les gaan we ons bezighouden met de Over Ons pagina. Op deze pagina zetten we de medewerkers in de kijker.

Boven aan de pagina voorzien we een soort slideshow van verschillende foto’s waarbij je een eerste indruk krijgt van het restaurant.

Daaronder voorzien we cards met de foto van de medewerkers. Wanneer je over zo’n card gaat met je muis, krijg je meer informatie over de werknemer.

In deze les maken we de menupagina en haar subpagina’s. Ik leer je in deze les ook hoe je een template kan opslaan en hoe je een template kan importeren. Op deze manier kan je die template ook gebruiken op een andere website.

Op de foto’s pagina voorzien we een aantal sfeerfoto’s van het restaurant. We plaatsen deze in een fotogallerij met lightbox effect. Op de header voorzien we een inglijdende tekst.

Op de contactpagina voorzien we vanboven als header een Google maps. Er wordt een contactformulier geplaatst waarbij we gebruik maken van de plugin Contact Form 7.

Tevens voorzien we een Google Recaptcha om spam zoveel mogelijk te voorkomen.

De wijzigingen die je kan doen aan de blogpagina in de gratis versie van Elementor zijn helaas miniem. In deze les leer je hoe je deze wijzigingen kan doen met behulp van de Customizer in het Astra-thema. We nemen zowel de archive page als de single page onder handen.

Als header voorzien we in de reservatiepagina een YouTube filmpje. Wanneer deze niet geladen kan worden, zal er een afbeelding verschijnen om dit op te vangen.

We installeren een plugin waardoor de klant gemakkelijk een reservatie kan maken.

De beveiliging van je website is heel belangrijk. Naast een goed, uniek paswoord, het regelmatig updaten van WordPress, plugins en thema’s is het belangrijk om je website goed te beveiligen. We gebruiken hiervoor de populaire plugin Wordfence. Je leert de basis om Wordfence goed in te stellen.

Nadat je een website hebt gemaakt, wil je ook dat deze gevonden wordt in Google. Yoast SEO is een plugin waarmee je je website kan optimaliseren. We doorlopen de Configuratiewizard en optimaliseren de pagina’s en berichten.

De hostingfirma maakt normaal gezien dagelijks een backup van je website (is natuurlijk afhankelijk welke hostingfirma je hebt). We raden aan om ook zelf regelmatig een backup van je website te maken, die je buiten je hostingserver opslaat. We gebruiken hiervoor de plugin BackWPup en slaan de backup op in onze Dropbox.

In deze cursus hebben we gebruik gemaakt van WordPress en de gratis versie van Elementor. Met deze gratis versie kan je al een hele mooie website maken.

Met de Pro versie zijn er echter nog veel meer mogelijkheden. Dat ontdek je in deze korte presentatie.

In deze les gaan we Elementor Pro aanschaffen, installeren en activeren.

In les 27 maakten we reeds een contactformulier, maar toen met de externe plugin Contact Form 7. Met Elementor Pro heb je de mogelijkheid om rechtstreeks een contactformulier te maken zonder externe plugins.

In les 22 en 23 maakten we met behulp van de customizer van het Astra thema de footer van de huidige website. Met Elementor Pro gaan we nu echter een Footer template maken. We importeren een bestaande template die we dan kunnen gaan aanpassen.

In elementor Pro heb je de mogelijkheid om Lottie Animations toe te voegen. Dat gaan we dan ook doen in deze les.

In les 28 maakten we de blogpagina van onze website. In deze les gaan we met behulp van Elementor Pro een single post template importeren en aanpassen.

In les 28 maakte we met behulp van de customizer de archive page voor onze nieuwsberichten. Je merkte toen echter dat er weinig mogelijkheden waren om de nieuwspagina aan te passen.

Nu gaan we met behulp van Elementor Pro een template importeren en deze aanpassen naar onze noden.

Met Elementor Pro heb je zelfs de mogelijkheid om popups te maken voor op je website. In deze les gaan we een popup maken en laat ik je ook de mogelijkheden zien, waar en wanneer de popup zal verschijnen.