Elementor en WordPress is een gouden combinatie. WordPress is het meest gebruikte CMS om een website in te maken, daardoor is er de meeste vrijheid om de site aan te passen naar je wensen. Er zijn een flinke hoeveelheid plugins gratis te downloaden en alles wat niet standaard beschikbaar is is te bouwen of kun je laten maken door een developer. Elementor sluit perfect aan bij WordPress. Elementor is een pagebuilder waarmee je je website voor 100% zelf kunt ontwerpen. Elementor is dus eigenlijk een uitbreiding van je standaard WordPress omgeving.
Elementor en wordpress werken naadloos samen om er voor te zorgen dat jij zelf een prachtige site kunt ontwerpen en bouwen. De combinatie is te gebruiken voor mensen met weinig kennis van webdesign en coderen maar ook voor online marketing agentschappen is het een perfecte keuze. Elementor is een open source platform waardoor developers zelf aanpassingen kunnen maken aan het systeem.
Inhoudsopgave
WordPress en Elementor installeren op je website
De eerste stap bij het maken van een website is het installeren van WordPress op je domein. Je zal dus eerst een Domeinnaam moeten registreren. Voor beginnende websites raden wij Neostrada als hosting platform aan. Neostrada bied goedkope hosting met een prettige klantenservice. Ook kun je via hun Cpanel eenvoudig je wordpress instalatie doen. Je kunt hier de prijzen van hosting en het registreren van een domeinnaam checken: Neostrada.nl
Na het registreren van een domeinnaam moet je wordpress op je site zetten. In het kort kan dit door via Cpanel naar de softaculous installaties te gaan en daar je wordpress op je domein te zetten. De lange versie kun je op de wordpress installatie pagina lezen.
Wanneer je wordpress geinstalleerd hebt ga je naar website.nl/wp-admin, voer je je inloggegevens in en dan ben je ingelogd op je “schone” wordpress installatie. Nu je ingelogd bent moet je een aantal zaken regelen. Je moet Elementor installeren, de standaard pagina’s die in je site staan verwijderen, en het juiste template kiezen.
Kies het juiste template voor elementor
Een template is een sausje van design dat over je website heen gegoten wordt. Een template bepaald normaliter hoe je site er uit ziet. In het geval van een elementor site wil je echter juist zelf je design maken, je wil daarom dus een template dat zo min mogelijk in de weg zit, weinig functies heeft en vooral heel snel kan laden. Wij hebben twee templates die we regelmatig gebruiken. We zijn begonnen met Astra maar inmiddels heeft elementor ook een eigen template dat gratis te installeren is.
Hello elementor
Hello elementor is een template dat door elementor voor elementor gemaakt is. Het template is snel en heeft weinig functies, het is een perfect template wanneer je van plan bent je eigen header en footer te maken. Wil je liever een header en footer door je tema laten maken dan is dit niet de beste optie.
Astra
Astra is een template dat iets uitgebreider is maar nogsteeds razend snel werkt. Astra heeft instellingen om een header en een footer te maken zodat jij je enkel nog hoeft te richten op het produceren van de pagina’s.
Thema installeren
Een template installeren doe je door in te loggen in je site, vervolgens klik je op weergave > Thema’s en zoek je het thema dat jij wil installeren. Na de installatie klik je op activeren zodat het thema zichtbaar wordt op je site.
Maak je eerste pagina in elementor
Een pagina maak je door te klikken op pagina’s > Nieuwe pagina. Je geeft vervolgens je pagina een naam. Check altijd even of het standaard template op “elementor volledige breedte” staat. Vervolgens klikt je op “bewerken met elementor”. Het welkomsscherm kun je wegklikken.
Standaard blokken
Links van de pagina zie je alle elementor blokken staan. Zie je deze niet dan klik je rechts naast elementor op de 9 blokjes. Je krijgt dan alle elementen te zien. Je kunt beginnen met een kop in je site te slepen. Vervolgens kun je helemaal los gaan met allerlei elementen aan je pagina toevoegen, op de manier waarop jij het er mooi uit vind zien.
De blokken die wij vaak gebruiken zijn de kop, tekstbewerker, afstandshouder en inner sectie.
Kop: De kop zorgt er voor dat je een titel kunt toevoegen. Let er op dat je bovenste titel in je pagina altijd een h1 is die omschrijft waar de pagina over gaat
Tekstbewerker: Wil je stukken tekst toevoegen dan is de tekstbewerker je beste vriend, je plaatst hem meestal onder een kop.
Scheiding/Afstandshouder: Wil je ruimte tussen twee elementen creeren dan plaats je er een afstandshouder tussen. Je kan vervolgens aangeven hoe veel afstand er moet zijn.
Scheiding: Liever een wat hardere scheiding? bijvoorbeeld tussen twee delen van je pagina, gebruik dan de scheiding. Dit is een afstandshouder waar ook een lijn in verwerkt zit.
Rijen, kolommen
Elementor werkt (zoals het grootste gedeelte van het internet) met rijen waarin kolommen geplaatst kunnen worden. Een rij is een gedeelte dat van links naar rechts gaat waarbinnen je de mogelijkheid hebt om verschillende elementen te plaatsen. Wil je twee elementen naast elkaar plaatsen dan zul je moeten gaan werken met kolommen. Wil je vervolgens binnen een kolom nogmaals een opsplitsing maken in meer kolommen dan maak je gebruik van het inner sectie element. Een nieuwe rij toevoegen doe je door op de paarse plus in je pagina te klikken. Je krijgt vervolgens verschillende structuren te zien met verschillende kolom formaten. in veel gevallen zul je gewoon een simpele rij willen hebben met maar 1 kolom. Dat is ook de eerste optie. Als je meer kolommen wil dan klik je op de juiste structuur en worden de kolommen automatisch aangemaakt.
Basisinstellingen elementor
Elementor heeft een aantal basisinstellingen die handig zijn om te gebruiken. Deze instellingen zijn voor een deel onder het kopje Elementor in je website te vinden. Een ander deel kun je vinden wanneer je daadwerkelijk de website aan het maken bent.
Stijl instellingen. (elementor > instellingen > Stijl)
Je kan een standaard lettertype, content breedte en de ruimte tussen je elementor blokken aanpassen. Als je dit aanpast zal dit overal op je site aangepast worden (mits je niet in de instellingen van een bepaald blok dit overschrijft). De breedte van je inhoud staat standaard op 1140 pixels, Persoonlijk vinden wij dat wat weinig, er zijn veel monitoren die een flink stuk groter zijn, Wij zetten onze sites meestal op 1400 pixels breed. De site zal uiteraard automatisch kleiner gemaakt worden als je deze bekijkt op een kleinere monitor. We raden je wel aan de site niet breder te zetten dan de monitor is waarop je de site aan het maken bent, je krijgt dan namelijk een verkleinde weergave te zien tijdens het bewerken en dat zorgt er voor dat je eigenlijk niet weet hoe de site er op grote monitoren uit ziet.
Standaard kleuren
De standaard kleuren van je site kun je instellen als je een pagina aan het bewerken bent met elementor. Je doet dit door naar een pagina te gaan > Bewerken met elementor > klik links bovenin op de 3 streepjes > standaardkleuren. Hier kun je voor de hele site je primaire, secundaire, tekst en accent kleuren instellen. Ook kun je de kleurenkiezer instellen. Dit zijn een soort snelkoppelingen van veelgebruikte kleuren. We raden je aan sowieso de hoofdkleuren van je site hier in te zetten zodat je deze kleuren altijd snel bij de hand hebt.
Standaard lettertypes
De standaard lettertypes gaan op een soortgelijke manier. Wederom ga je naar een pagina > bewerken met elementor > rechts bovenin op de 3 streepjes > standaard lettertypen.
Templates maken in elementor (alleen voor elementor pro)
Waar elementor zich onderscheid van veel andere pagebuilders is op het gebied van templates maken. Een template is een design dat op meerdere delen van de website terug komt. Je hoeft dit dus maar een keer te maken en kan het vervolgens overal op je site terug laten komen. Ook hoef je het template dus maar een keer aan te passen wanneer je op al je pagina’s dezelfde wijziging wil doorvoeren. Templates (of eigenlijk themes) kun je terugvinden onder templates > Theme Builder.
Heb je geen elementor pro maar wil je toch een header en footer maken dan kun je hier een plugin voor downloaden. Deze plugin heet Elementor header footer en is op de wordpress site te vinden.
Nieuw thema toevoegen
Wil je een sectie maken die overal op je website terug komt dan klik je op templates > Theme builder. Vervolgens klik je op “Nieuwe toevoegen”. Je geeft het type template aan dat je wil maken en geeft het een naam. Als je op template aanmaken klikt wordt je doorgestuurd naar de Elementor builder. Eenmaal aangekomen in de builder kun je een pagina produceren die overal op je site terug komt. Hier onder de uitleg voor enkele specifieke paginatypes.
Header template maken
De header van je site bevat meestal een logo en een menu. Als je een nieuw thema hebt aangemaakt maak je een nieuwe sectie/rij. In de meeste gevallen maak je een sectie met twee kolommen, links zet je je logo en rechts voeg je het element “Nav Menu” toe. Als je nog geen menu hebt gemaakt kun je dit doen in Weergave > Menu’s. Uiteraard kun je de elementen stijlen zoals jij dat wil. Top tip voor het maken van een header, als je op de rij klikt (de 6 puntjes in de blauwe balk) en dan naar geavanceerd > Bewegings effecten > sticky navigeert kun je het menu sticky aan de top van je pagina maken. Als je dan naar beneden scrollt zal je altijd je menu bovenin je beeld blijven zien.
Footer template maken
De footer is het onderste gedeelte van je site. Meestal zet je hier je contactgegevens in samen met wat informatie over je site zoals de privacy verklaring en de sitemap. Je maakt wederom een nieuwe sectie en zet hier twee kolommen in. In de ene kolom zet je al je site informatie, bijvoorbeeld met de “pagina’s” widget van wordpress, in de andere kolom zet je je contactgegevens. In de meeste gevallen is je footer redelijk donker, op die manier sluit je je pagina visueel mooi af. De achtergrond van het blok donker maken doe je als je klikt op de rij en vervolgens bij stijl de achtergrondkleur te bewerken.
Elementor vs Elementor pro
Elementor en elementor pro hebben redelijk wat verschillen. Met de gratis variant kun je een redelijk eind komen maar je zal extra plugins nodig hebben om alle functionaliteiten die de gratis versie niet heeft toe te voegen. Zo kun je bijvoorbeeld toch een header en footer template maken als je er een plugin voor installeert, kun je een contactformulier toevoegen met Contact form 7 en kun je een 404 pagina maken met de smart custom 404 plugin. Hier onder een overzicht van de 10 belangrijkste functies van elementor.
| Elementor opties | Gratis | Betaald |
|---|---|---|
| Drag & Drop builder | Ja | Ja |
| Templates | ja (minder) | ja (veel) |
| Afbeelding slides | nee | ja |
| Canvas template | ja | ja |
| Formulieren | nee | ja |
| Theme builder | nee | ja |
| 404 pagina | nee | ja |
| E-commerce (webshop) | nee | ja |
| Integraties (mailchimp, Facebook etc) | nee | ja |
Beste plugins om te installeren voor SEO
Hoewel elementor al vrij uitgebreid is is er nog veel winst te halen door extra plugins te installeren. Zo kun je de afbeeldingen optimaliseren, gebruikersdata bijhouden en je mobiele pagina’s sneller maken. Hier onder een overzicht van de belangrijkste plugins om te installeren:
- Yoast seo
- AMP
- Smush
- WP Fastest Cache
- Google Analytics
Alternatieven voor elementor
Weet je nog niet helemaal zeker of elementor in combinatie met wordpress de beste optie is voor je project dan raden we je aan om te kijken bij onze gratis website software pagina waar we je uitleggen welke website software het meest geschikt is per projecttype.