Elementor (Pro) voor WordPress – review

Op deze website (online vibes) heb ik Elementor geïnstalleerd en ben overgestapt op de Pro-versie hiervan.

In deze review ga ik niet alles uitleggen in detail hoe je het moet gebruiken, want dat wordt een beetje veel. Daarvoor neem je beter een kijkje bij de tutorials. In deze review zal je meer lezen over welke functies je kan gebruiken en of deze makkelijk werken.

Wat is Elementor?

Elementor is een drag-en-drop pagebuilder voor WordPress. Het is een plugin die je installeert om je pagina-layouts te gaan maken. Het handige is dat je helemaal geen kennis nodig hebt van programmeren of webontwikkelaar hoeft te zijn. Iedereen kan het gebruiken.

Elementor is dus geen theme zoals sommige denken maar een plugin. Dat wil zeggen dat je het in combinatie kan gebruiken met eender welk theme jij wilt gaan gebruiken of je al geïnstalleerd hebt.

Elementor is bovendien gratis in gebruik. Wil je extra mogelijkheden dan is er ook de Pro versie, maar daarover dadelijk meer.

Kunnen 5 miljoen mensen fout zitten?

Elementor groeit ontzettend hard. De pagebuilder bestaat nog maar sinds 2016 en ondertussen zijn er al meer dan 5 miljoen websites waarop het geïntstalleerd is. Meer dan 4800 mensen hebben het trouwens met 5 sterren gewardeerd. De gemiddelde waardeering is 4,8 / 5 (5240 mensen hebben review achter gelaten).

Elementor heeft trouwens ook een actieve Facebook-community met 63.000 leden waar je met al je vragen terecht kan en waar je elkaar kan helpen.

Er zijn regelmatig updates, niet alleen om het op de nieuwe updates van van WordPress af te stemmen of qua veiligheid, maar ook vaak nieuwe functies die het gebruik van Elementor alleen maar verbeteren. Hierbij wordt er geluistert naar wat de community wilt.

Eigenlijk doen ze veel meer dan ze zouden moeten doen, gewoon een pagebuilder zijn. Recent hebben ze ook een expert platform opgericht om professionals die met Elementor werken in contact te brengen met mensen die zo iemand nodig hebben (voor design, ontwikkeling of marketing).

Voor mij mochten er iets meer marketinggerichte templates zijn, zoals voor webinars, verkoop ebooks, optinpagina’s, cursus pagina’s,… Maar sinds ik Elementor gebruik zijn er al wel wat nieuwe hierbij gekomen, dus ik hoop dat dat alleen maar uitgebreider zal worden.

Elementor page builder

Een drag-and-drop page builder wil zeggen dat je pagina’s kan gaan bouwen door er elementen op te slepen. Je maakt bijvoorbeeld een rij met 2 kolommen. In de eerste kolom sleep je het element afbeelding en in de tweede kolom een element tekst. De rij kan je vervolgens een achtergrondkleur geven.

Je ontwerpt je pagina front-end. Dat wil zeggen dat je ziet wat je aan het doen bent en tekst kan aanpassen in de gemaakte layout. Je kan alles aanpassen, volgorde van de rijen, kleuren van achtergronden, knoppen en tekst,…

Je gebruikt een pagebuilder om snel een mooie pagina aan te kunnen maken én om deze volledig te kunnen personaliseren.

Teksten kan je niet enkel wijzigen en vet of cursief zetten. Je bent enorm vrij in je aanpassingen, je kan het lettertype wijzigen, kleuren veranderen, letters uit elkaar of dichter op elkaar zetten, regelafstand vergroten,…

Als designer maakt me dat enorm blij om hierin creativiteit te hebben.  Pas hier wel mee op dat je geen 10 verschillende lettertypes en 50 verschillende kleuren gebruikt, gewoon omdat het kan. Je website mag nog wel professioneel overkomen i.p.v. te lijken op de kleurboek van een kleuter.

Elementor Templates

Als je pagina’s gaat maken via de Elementor page builder kan je vanaf nul starten, met een blanco blad. Maar als je het makkelijker en sneller wilt, dan kan je gebruik maken van templates. Dat zijn layouts die klaar staan en waar je enkel de tekst en beelden hoeft aan te passen. Er zijn o.a. pagina’s voorzien voor een homepage, landingspage, FAQ, over ons, contact.

Behalve volledige pagina’s kan je ook blokken templates vinden. Dat zijn stukjes die je kan gebruiken bij het aanpassen van een pagina. Enkele voorbeelden: Call-to-action, hero, overzicht van klanten, contact,…

Als je zo’n kant-en-klare template gebruikt wilt dat niet zeggen dat dat zo vast staat. Je kan er naar hartelust rijen en blokken van verwijderen of er juist aan toevoegen zodat het volledig wordt zoals jij wilt.

Heb je nu zelf de perfecte pagina gemaakt (vertrokken vanaf een blanco pagina of vanaf een template van elementor) dan kan je deze ook opslaan om achteraf als eigen template te gebruiken. Dit is vooral handig als je meerdere soortgelijke pagina’s hebt, die in dezelfde layout of stramien moeten komen. Bijvoorbeeld je verkoopt een ebook. Je maakt een salespage om je ebook te verkopen. Als je later een tweede ebook hebt, wil je die pagina waarschijnlijk in dezelfde layout en op dezelfde manier opgebouwd. Je kan dus vertrekken van de template die je hebt opgeslagen en bijv. de naam “ebook” hebt gegeven.

Elementor pro vs gratis versie

Elementor kan je gratis gebruiken en voor de meesten is dat ook voldoende. Maar er is ook een pro-versie beschikbaar die je meer mogelijkheden biedt. Zelf heb ik deze aangeschaft voor deze en nog andere sites.

De prijs van Elementor pro is voor 1 website $49, voor 3 sites $99 en onbeperkt is $199

Bovendien heb je een 30-dagen geld terug garantie. Je betaalt jaarlijks en je krijgt zo voor dat jaar dan ook support erbij.

Wat heb je extra als je voor de pro gaat?

Meer widgets

Meer elementen (widgets) om te gebruiken in de builder. In de gratis versie kan je de standaard elementen van Elementor gebruiken en ook de WordPress widgets. In de Pro versie heb je meer mogelijkheden: posts, portfolio, galerij, formulier, login, slider, navigatie menu, animated headline, prijslijst, prijstabel, flipbox, call to action, carrousel met beelden of testimonials, reviews, inhoudstabel, aftellen, deelknoppen, blokquote, Facebook knop, facebook reacties.

Veel meer templates

Er zijn veel meer templates van pagina’s en blokken waaruit je kan kiezen. Zo zal je website sneller klaar zijn. Bovendien komen er regelmatig nieuwe templates bij. 

Theme builder

Dit vind ik echt ge-ni-aal. Je kan je eigen theme gaan samenstellen, inclusief header & footer. Want vaak zie je wel een leuk theme, maar dan is het blogoverzicht of de blogpagina niet naar je zin. Of de header is niet zoals jij het graag zou willen, maar je legt je er maar bij neer. 

Dat hoeft niet meer bij deze theme builder, aangezien je alles zelf kan gaan aanpassen.

Hoe werkt de theme builder?

Deze vind je bij Templates – Theme Builder

Klik op “Nieuwe toevoegen”

Je hebt nu de keuze uit:

• Pagina
• Sectie
• Popup
• Header (het bovenste gedeelte van je site, waarin je menubalk staat)
• Footer (het onderste gedeelte van je site, waarin bijv. je adresgegevens staan, enkele belangrijke links, social media knoppen,…)
• Single (kies uit bericht, pagina of 404)
• Archive (het overzicht van je blogberichten, het overzicht van een bepaalde categorie,…)

Geef je template een naam.

Je komt nu in de template bibliotheek uit bij wat je nodig hebt. Heb je voor Header gekozen, dan zie je nu allemaal headers, heb je voor single-bericht gekozen, dan kan je nu kiezen uit vooringestelde blogpagina’s.

Kies eentje die jij leuk vindt en pas deze naar keuze aan. Zodra je klaar bent, klik je op “Publiceren”.

Dan ga je bepalen waar deze template moet verschijnen.

Als je de layout van je blogpost bepaald hebt, dan kan je kiezen voor Include – Berichten – All

Theme style

Een nieuwe functie van Elementor is Theme Style. Hiermee kan je het basisuiterlijk van je thema bepalen. 

• Achtergrond: kleur, verloop, afbeelding
• Typography: kleur en lettertype van de bodytekst, links en titels (h1 t.e.m. h6)
• Knoppen: lettertype, schaduw, achtergrondkleur, rand of niet, radius, padding
• Formulier: label (lettertype en kleur) en veld (lettertype, kleur, schaduw, rand, radius)
• Afbeelding: rand, radius, opacity, schaduw, blur, helderheid, contrast, verzadiging, hue

Popup builder

Met Elementor pro hoef je geen aparte popup plugin aan te schaffen. Er zit namelijk een builder bij waarmee je zelf de popups kan gaan maken. Je hebt keuze uit heel wat templates: tekst met knop, inschrijfformulier, met afteller erbij,… die je uiteraard ook weer kan gaan aanpassen.

Voor een popup kan je enkele dingen instellen:

• Conditie: op welke pagina’s moet de popup getoond worden. Je kan dat voor de hele site doen, enkel bij de blogbericht of juist op een hele specifieke pagina. Zodat je popup relevant is voor de info die je toont.
• Trigger: Wanneer opent de popup? Als de pagina laadt (na een bepaald aantal seconden), als je scrolt, wanneer iemand de pagina wilt sluiten,… 
• Geavanceerde regels: Toon de popup pas na x aantal pagina’s bekeken te hebben, nadat ze eerst een andere specifieke url bekeren hebben, verbergen voor gebruikers die ingelogd zijn, wel of niet op mobiel

Woocommerce

Woocommerce is een shopping plugin. Met Elementor pro kan je deze aan je eigen wensen laten voldoen qua layout, zowel voor het overzicht van alle producten als een specifiek uitgelicht product.

Mobile responsive

Elementor is standaard mobile responsive. In deze tijd kan dat natuurlijk ook niet meer anders. De meerderheid van je bezoekers zullen namelijk via hun smarthphone op je website terecht komen.

Heel handig is dat je een preview van je pagina kan bekijken voor zowel desktop, tablet als mobiel.

Wat zelfs nog leuker is, is deze feature: soms wil je het net wat anders hebben op mobiel. Dan kan je kiezen voor de preview op mobiel en vervolgens ook settings aanpassen. Deze settings worden dan enkel voor de mobiele versie gebruikt.

Zo gebruik ik soms minder witruimte op mobiel dan dat je op desktop ziet. Je wilt namelijk dat een bezoeker zonder scrollen al het belangrijkste ziet.

Verder kan je ook elementen of secties verbergen op mobiel. Mobiele lezers hebben vaak wat minder tijd om een hele lange pagina door te lezen, dus daar zou je enkel de hele belangrijke blokken kunnen delen. Ook voor popups kan je kiezen om deze wel te tonen op desktop en tablet maar niet op mobiel.

Snel werken

We hebben allemaal tijd te kort, tijd die je liever besteed aan leuke dingen dan aan uren prutsen op je computer om iets gedaan te hebben.

Daarom is het ook belangrijk dat een pagebuilder ervoor zorgt dat alles makkelijker en sneller gaat. Dat er handige features in zitten om het nog net wat praktischer aan te pakken. En dat is zeker het geval bij Elementor. Sterker nog, bij hun updates zit er steeds wel iets bij wat jou weer tijd kan besparen.

Het is heel makkelijk om Elementor te installeren. Dat doe je net zoals elke andere plugin. Ook Elementor pro kan je makkelijk opladen via de gekochte ZIP-file. Als je eerst al de gratis versie geïnstalleerd hebt is dat geen probleem, want de pro is een add-on op de gratis versie, je hebt beide dus nodig. 

Wat enorm veel tijd uitspaart is de “Vinder”. Met een hele omweg kan je steeds naar de pagina gaan die je wilt bewerken, deze aanpassen en dan terug naar je pagina-overzicht en zo weer een nieuwe pagina te zoeken die je wilt aanpassen.

Maar als je in Elementor via het menu naar Vinder gaat of via Cmd + E (mac) of Ctr + E (windows) kan je iets intypen, zo kom je snel op de juiste pagina, template, header, footer terecht die je wilt bewerken.

Ben jij iemand zoals mij die graag snelkoppelingen gebruik, dan heb je hier een overzichtje. Je kan dit ook steeds in Elementor zelf raadplegen als je Cmd + ? (Mac) Of Ctr + ? (Windows) typt.

Met de navigator krijg je een overzicht van alle secties die je gebruikt en de elementen hierin. Op deze manier kan je makkelijk een stuk dat bovenaan staat naar beneden slepen. Als je datzelfde op de pagina zou doen (zonder navigator), kan bij een lange salespage een eeuwigheid duren omdat je dan doorheen de volledige tekst moet slepen.

Je kan eigen gemaakte tempates via shortcodes gaan invoegen in bijvoorbeeld blogberichten of op pagina’s, zo moet je niet steeds opnieuw hetzelfde werk doen.

Elementor hello theme

Zoals ik al zei kan je Elementor met eender welk theme dat je wilt gebruiken. Maar sinds kort heeft Elementor ook een eigen theme: Hello Theme. Dit is een vrij naakt theme (een starter theme) zodat het heel snel is. De bedoeling is dat je deze via de theme builder van Elementor Pro van een design kan voorzien.

Aangezien het door dezelfde ontwikkelaars gemaakt is als de plugin werkt het theme en de plugin naadloos op elkaar. Er is ook rekening gehouden met populaire plugins (yoast, woocommerce,…) zodat het theme compatibel is en geen conflicten vertoont.

Het gebruik van dit theme is gratis.

Op deze website gebruik ik Elementor Hello theme in combinatie met Elementor Pro.

Elementor – mijn ervaring

Zelf heb ik de pagebuilder Divi ingeruild voor Elementor. Op één van mijn sites heb ik dit nog niet overgezet en merk ik dat het veel stroever werkt en ik veel meer tijd kwijt ben om mijn pagina te bewerken. Dus ook op die site ga ik binnenkort de overstap maken van Elementor.

Ik heb meerdere pagebuilders gebruikt en er was geen één die zo vlot en intuïtief werkte als Elementor. In mijn omgeving zijn er ook enkele mensen voor hun site mee aan de slag gegaan. Mensen die geen ervaring hadden met het maken van websites en dat ging ook enorm vlot.

Nog vragen over Elementor? Stel ze hier dan kan ik het artikel met relevante info updaten.