Elementor: een WordPress website maken zonder code

Met de komst van pagebuilders zoals Elementor is het voor mensen die geen code kunnen mogelijk geworden om zelf aanpassingen te doen aan het design van hun website.

Ik ben zelf geen fan pagebuilders omdat het ten koste gaat van de performance van je website en omdat er tegenwoordig in mijn ogen betere alternatieven zijn. Maar ik begrijp waarom pagebuilders nog steeds zo populair zijn onder veel mensen.

Als je toch een WordPress website wilt gaan maken met een pagebuilder, dan raad ik je aan om te beginnen met Elementor.

Elementor is een veel gebruikte pagebuilder, heeft de krachtigste gratis versie en vind ik persoonlijk het meest gebruiksvriendelijk en daarom het meest geschikt voor beginners.

Elementor

Elementor heeft een gratis en een pro versie (vanaf $49 per jaar). In dit artikel zal ik beide laten zien, zodat je kan kijken of deze plugin iets voor jou is.

Zoals met de meeste plugins heeft de pro versie meer functionaliteiten, daarom begin ik eerst met de gratis versie.

Ik raad je ook aan om te beginnen met een gratis versie zodat je kan kijken of je het een prettige manier van werken vindt. Je kan dan eventueel later altijd nog upgraden naar een betaalde versie als je meer functionaliteiten nodig hebt.

Elementor installeren

Je kan Elementor installeren door in je dashboard naar plugins > nieuwe plugin te gaan en vervolgens te zoeken op ‘elementor’.

Met meer dan 5 miljoen installaties is het een erg populaire pagebuilder.

Nadat je de plugin hebt geactiveerd kan je bij de instellingen bepalen of elementor moet werken bij pagina’s, berichten of beide.

Als je vervolgens een nieuwe pagina of bericht opent zie je de optie ‘Bewerk met Elementor’.

Je hoeft dus niet perse al je pagina’s met Elementor te maken. Je kan er bijvoorbeeld voor kiezen om je blog artikelen gewoon met de standaard WordPress editor te maken en enkel bepaalde landingspagina’s met Elementor.

Er opent zich vervolgens een scherm waarbij je de pagina kan opmaken in Elementor.

Elementor bestaat uit secties, kolommen, rijen en elementen.

Je kan ervoor kiezen om van ‘scratch’ je pagina zelf op te bouwen of een template te importeren en deze vervolgens aan te passen.

Pagina instellingen

Door linksonder op het ‘tandwieltje’ te klikken kan je bepaalde pagina instellingen doen.

Je kan hier onder andere ervoor kiezen om de pagina titel te verbergen en het lay-out van de pagina aanpassen. In dit voorbeeld kies ik voor ‘Elementor volledige breedte’.

Handmatig een pagina maken

Om te beginnen klik je op het paars plusteken midden in de pagina.
Je krijgt dan de keuze om de structuur te bepalen. Dit is vergelijkbaar met kolommen in Gutenberg.

In dit voorbeeld laat ik zien hoe je een header kan maken, bijvoorbeeld voor op je homepage. Ik kies daarom voor 1 kolom.

Je kan vervolgens de juist aangemaakte ‘sectie’ bewerken op 3 gebieden:

Lay-out: hier kan je onder andere de breedte bepalen, de tussenruimte tussen kolommen, de hoogte en de uitlijning.
Stijl: hier kan je onder andere de achtergrond bepalen.
Geavanceerd: hier kan je onder andere de marge en padding bepalen.

Ik geef de sectie bij stijl even de kleur blauw, zodat duidelijk de veranderingen zichtbaar zijn.

Om de header zo breed als de pagina te maken kies ik bij lay-out voor ‘volledige breedte’ en ‘sectie uitrekken’.

Vervolgens sleep je een ‘element’ naar keuze naar je zojuist gemaakte (blauwe in mijn geval) kolom.

In dit voorbeeld kies ik voor ‘Kop’:

Om onder de titel een button toe te voegen versleep je het element ‘knop’ onder de titel.

En op het moment dat je de knop selecteert, kan je aan de linkerkant allerlei instellingen van de knop bepalen.

Als je header vervolgens klaar is kan je weer een nieuwe ‘sectie’ toevoegen door op het paarse pluksteken te klikken. Als voorbeeld kies ik nu voor 3 kolommen en voeg daar wat tekst en titels aan toe.

Op deze manier kan je vervolgens je hele pagina opbouwen zoals gewenst.
Op zich werkt dit wel snel omdat je eenvoudig elementen en secties kan dupliceren, opslaan en verwijderen.

Dit voorbeeld dat ik in een paar minuten heb gemaakt ziet er dan als volgt uit.

Het prettige hieraan vind ik dat je zowel aan in de tekstbewerker als rechtstreeks in het element zelf de inhoud kan aanpassen. En dat je gelijk ziet hoe het eruit komt te zien.

Templates importeren

Het is ook mogelijk om complete templates te importeren. Klik hiervoor op het grijze mapje naast het plusje:

Je kan een of meerdere blokken toevoegen en zo je pagina opbouwen met door Elementor gestylde blokken.

Je kan er ook voor kiezen om complete pagina’s te importeren.

Er zijn ook wel gratis en betaalde plugins te vinden waarmee je nog meer templates kan kiezen. Voorbeelden hiervan kan je wel vinden op de blog van Elementor zelf.

Als je eenmaal een blok of pagina hebt geïmporteerd kan je je eigen teksten en afbeeldingen invoeren. En eventueel dingen verwijderen/toevoegen.

Ik denk dat Elementor vooral populair is vanwege deze templates. Zelfs met de gratis plugin heb je dus binnen een paar klikken een design die je alleen nog hoeft aan te passen waarvoor je verder geen enkele technische kennis nodig hebt.

Elementor pro

Naast de gratis versie is er ook een betaalde versie van Elementor. De vanafprijs is $49 (voor 1 website).

Ik zal hieronder een aantal voordelen van de Pro versie laten zien ten opzichte van de gratis variant.

Meer templates
Met de Pro versie heb je toegang tot veel meer templates. Volgens hun eigen website zijn dat er 300 (en de gratis versie 30).

Daarnaast heeft de Pro versie ook ‘Websites kits’. Dit zijn meerdere templates in dezelfde stijl.

Je kan dan bijvoorbeeld een ‘over ons’ pagina van het ‘restaurant kit’ toevoegen maar ook een homepage, menu pagina, reserveerpagina, etc.

Het resultaat is dus een website die volledig in dezelfde stijl is. Op het moment van schrijven zijn er 17 verschillende website kits, maar ze werken dit geregeld bij.

Meer elementen

Met de Pro versie krijg je ook toegang tot veel meer elementen. In mijn ogen wel veelal dingen waarvoor je Elementor niet nodig hebt omdat je ze met andere (gratis en betaalde) plugins beter kan maken zoals formulieren en popups.

Daarnaast zijn er wat elementen met animaties. Persoonlijk ben ik geen fan van animaties omdat het in mijn ogen niet professioneel oogt en je website kan vertragen.

Wat ik wel mooi vind zijn de prijslijsten en prijstabellen.

Prijslijst

Prijstabel

Formulieren

Dit zijn echter allemaal dingen die je ook wel eenvoudig met Gutenberg kan maken, zonder daar geld voor uit te hoeven geven. Ik denk alleen dat meer mensen het eenvoudiger vinden om het met een pagebuilder te maken, maar persoonlijk vind ik Gutenberg juist prettiger werken puur omdat ik dat gewend ben. Het is dus vooral een persoonlijke voorkeur en gewenning.

Theme builder

De belangrijkste reden om Elementor Pro in plaats van de gratis versie te gebruiken is in de meeste gevallen de theme builder.

Die dingen die je tot nu toe hebt gezien kan je allemaal ook zonder een pagebuilder maken.

Met de themebuilder kan je echter ook je header en footer aanpassen, het lay-out van WooCommerce pagina’s, blog templates, archief pagina’s, etc.

Ik ben zelf een liefhebber van Gutenberg maar dat heeft nog niet zulke uitgebreide mogelijkheden om alle onderdelen van je website aan te passen zoals de theme builder van Elementor. Er gaan wel geruchten dat WordPress bezig is om dit mogelijk te maken met Gutenberg.

Stel je wilt de pagina maken waar je blogartikelen op worden getoond, dan klik je op ‘archive’ en kiest het gewenste template uit.

Zelfde geldt voor je header en footer.

Je kiest bijvoorbeeld een header uit een van de vele templates en past de inhoud aan.

Vervolgens wordt je nieuwe header op iedere pagina getoond.

En zo bouw je dus heel snel je website helemaal van scratch zonder op enig moment code te hoeven gebruiken.

Conclusie

Ik ben van mening dat je met Gutenberg een meer toekomst bestendige website maakt met een betere performance dan met welke pagebuilder dan ook.

Als je om welke reden dan ook geen liefhebber bent van Gutenberg en liever met een pagebuilder werkt, raad ik Elementor aan. Hiermee kan je zonder te hoeven programmeren complete websites naar wens maken.

Elementor heeft een gratis versie die voor veel mensen krachtig genoeg is om eenvoudig een mooie website te maken. Eventueel kan je later besluiten up te graden naar de Pro versie vanaf $49 per jaar om nog meer uit je website te kunnen halen.

Plaats een reactie