Elementor WordPress - uitgelichte_afbeelding

Is Elementor de beste WordPress page builder?

Voor website redacteuren, content-editors en zelfstandige ondernemers is het wellicht de beste uitvinding sinds gesneden brood: page builders voor het CMS.

Elementor voor WordPress, is op dit moment helemaal hot! Om je beetje wegwijs te maken binnen deze populaire WordPress page builder hebben we de plugin eens goed onder de loep genomen.

Wat kun je er precies mee? Wat zijn de voor- en nadelen? En hoe verhoudt het zich tot andere populaire page builders voor WordPress? Je vindt de antwoorden in het onderstaande artikel.

Snelle navigatie

Page builders, wat een uitvinding!

Voor iedereen die wel regelmatig content op websites aanpast, maar zich liever niet uren in ingewikkelde code begeeft, is een page builder ideaal.

Zowel CMS’en als plugins streven daarbij naar optimaal gebruiksgemak.

Het systeem dat uiteindelijk de meeste functies biedt in een relatief simpele interface, is bereikbaar voor de grootste groep consumenten.

Die groep, waar jij als lezer wellicht ook deel van uitmaakt, wil namelijk zo snel en simpel mogelijk websites kunnen maken en onderhouden.

Wie het creëren en aanpassen van complexe, visuele producten het eenvoudigst mogelijk weet te maken, verwerft een cruciaal marktaandeel.

Zoals de meeste visual editors, is Elementor bij uitstek bedoeld voor wie geen professionele webdesigner is – al is er ook een Pro versie – en/of geen zeeën van tijd heeft.

Elementor WordPress banner

Met andere woorden: voor wie het beheer en maken van webpagina’s geen dagtaak is. Zonder kennis van code nodig te hebben tuig je met Elementor volwaardige en visueel aantrekkelijke webpagina’s op.

Vooruitlopend op de review kunnen we stellen dat Elementor prima past in de hierboven geschetste ontwikkeling. Begonnen in 2016 en begeeft zich nu (begin 2019) al rap richting één miljoen gebruikers.

Die de WordPress plugin bovendien waarderen met gemiddeld een indrukwekkende 4,8 (op basis 5).

Een populaire plugin dus, met een grote en groeiende user base.

Downloadstatistieken - Elementor WordPress page builder plugin

Downloadstatistieken – Elementor WordPress page builder plugin

Laten we eens kijken, waarom de Elementor page builder zo populair is.

Elementor WordPress plugin – De Basics

Elementor is een plugin waarin je visueel je webcontent aanpast. Jij ziet het dus zoals de gebruikers van je website het zien. Daarbij omzeil je niet alleen de onderliggende code, maar in de meeste gevallen ook de HTML.

Als je de plugin geïnstalleerd hebt, vind je de editor bovenaan elke pagina in WordPress.

Eenmaal in de editor maak je gebruik van de zgn. drag en drop functie. Via het menu links sleep je content-boxen naar de gewenste plek en voeg je de content toe.

In de bovenstaande video is te zien hoe de menu widget van Elementor werkt. 

Heel eenvoudig dus en op zich niet uniek. Het drag en drop-menu pas je eenvoudig aan in grootte, door te slepen met de muis.

De drag en drop-editor werkt met secties en boxen. Het werkt het eenvoudigst door je pagina eerste te vullen met secties – er zijn er twaalf beschikbaar – en deze later te vullen met content-boxen.

Elementor - Secties & Content Boxen

Elementor – Secties & Content Boxen

Premade Elementor templates

Per sectie kies je een bepaalde vormgeving, die wordt toegepast op alle content binnen die sectie. Tenminste, als je met niets begint.

Vanzelfsprekend heb je ook de beschikking over een indrukwekkend aantal (ruim 300) premade templates, waarin de layout al grotendeels voor je is ingevuld.

Een niet te onderschatten voordeel. Want een dergelijk aantal templates vergroot de kans dat er tenminste één ook daadwerkelijk aansluit bij je wensen en je niet vanaf nul iets hoeft op te bouwen.

Ideaal dus voor wie juist een page builder kiest op basis van gemak en tijdsbesparing.

Elementor biedt bovendien ruime keuze aan verschillende widgets. Inclusief WordPress widgets en eventuele andere widgets die je geïnstalleerd hebt.

Voor alle secties en boxen geldt natuurlijk dat je ze ook individueel kunt aanpassen en vormgeven. Dit doe je door ze simpelweg te selecteren.

Je krijgt dan linksboven een menu aangeboden waarin op toegankelijke wijze je opties worden weergegeven.

Omdat Elementor een visuele editor is, zie je direct de gevolgen van je aanpassingen.

De basis interface van Elementor is niet fundamenteel verschillend van andere visual editors voor WordPress. Toegankelijk, intuïtief en met een niet al te steile leercurve.

Elementor - Premade Templates

Elementor – Premade Templates

Je kunt de plugin dus gewoon installeren en ermee aan de slag gaan. De wijzigingen die je aanbrengt zie je direct, maar pas als je ze opslaat worden ze definitief.

Daarmee kun je veilig je eigen vaardigheid aanscherpen en de resultaten van je werk beoordelen, zonder problemen te creëren die je zelf niet kunt oplossen.

Samenstelling van het menu

Zoals de meeste visual editors beschikt Elementor over een (schaalbaar) menu aan de linkerzijde van je scherm.

Met het menu helemaal linksboven (in de paarse Elementor balk) selecteer je ofwel de pagina-instellingen.

Hier zitten bepaalde vormgevingsopties en instellingen voor de gehele pagina. Ofwel elementen óp de pagina. Dat betreft dus secties en boxen die je sleept naar de pagina.

Linksonder vind je een aantal andere belangrijke opties. Allereerst de exit/preview knop. Een knop om vanuit weergave op verschillende devices te werken.

Vanzelfsprekend is Elementor responsive. Met deze optie bekijk je de pagina direct zoals deze wordt weergeven op andere devices. De desktopweergave is standaard.

Ook toegankelijk vanuit het menu linksonder is het overzicht van templates en, niet onbelangrijk, de grote groene save knop.

Wijzigen zijn pas definitief als je ze opslaat. Zelfs dan kun je ze eenvoudig terugdraaien met het versiebeheer in bij de pagina-instellingen (in de paarse balk linksboven).

Specifieke elementen in Elementor

Templates

Hierboven zijn we al even kort ingegaan op de Elementor templates. Op zichzelf een vrij standaard onderdeel van een visual editor.

De templates van Elementor zijn echter geheel aanpasbaar en uitbreidbaar.

Op basis van je eigen ontwerpen kun je dus templates toevoegen, terwijl je ook bestaande templates aanpast en opslaat (als nieuw template).

Dit maakt Elementor geschikt voor zowel ervaren als minder ervaren gebruikers.

Beginners – of wie er gewoon niet te veel tijd aan kwijt wil – pakken een bestaand template en tweaken dat naar hun voorkeur.

Ervaren gebruikers maken hun eigen templates, afgestemd op hun voorkeuren.

En de templates beperken zich zeker niet tot de website waar je dan aan werkt.

Met Elementor zet je templates eenvoudig over van de ene naar de andere site met de Elementor WordPress plugin. Een krachtige functionaliteit voor gebruikers die meerdere websites beheren.

In de bovenstaande video is te zien hoe je Elementor templates import- en exporteert. 

Teksten aanpassen

Een andere leuke feature is het aanpassen van tekst in de editor.

Opvallend veel page builders gebruiken daarvoor een pop-up constructie. Waarbij je klikt op het tekstblok en een edit-module verschijnt. Die extra tussenstap is niet nodig en weinig intuïtief.

Zo zijn blijkbaar ook de ontwikkelaars van Elementor van mening.

In Elementor pas tekst gewoon direct aan door deze te selecteren. Om de geselecteerde tekst heen verschijnen dan vanzelf enkele opmaakopties.

Qua intuïtiviteit en gebruiksvriendelijkheid valt ook revisiehistorie op.

Met andere woorden: het overzicht van alle wijzigingen die jij en andere editors gedaan.

Archivering is natuurlijk niet de voornaamste functie hiervan. Wel het herstellen van fouten. Want ondanks de toegankelijkheid en gebruiksvriendelijkheid van Elementor is fouten maken onvermijdelijk.

Soms zelfs zodanig dat een reguliere aanpassing of het niet opslaan van je wijzigingen niet voldoende is.

Dan ga je via de paarse Elementor balk linksboven eenvoudig naar revisiehistorie. Daar zet je de pagina eenvoudig terug naar een eerdere versie.

Ook de scope van Elementor is groter dan die van veel andere visual editors. Zo pas je ook eenvoudig footers en headers aan.

In ruime integratiemogelijkheden met andere plugings en software (MailChimp, ActiveCampaign, WooCommerce, WP Rocket, etc.) is Elementor zeker niet uniek. Maar het is wel goed om te weten.

Ook goed om te weten is dat Elementor heel goed is ingericht om je webshop mee vorm te geven. De benodigde widgets daarvoor zijn volop aanwezig.

Mocht je ooit besluiten om te stoppen met Elementor en de plugin geheel uit WordPress te verwijderen; dat kan eenvoudig zonder een ‘graf’ aan overbodige code achter te laten.

Iets dat bijvoorbeeld wel geldt voor WPBakery Page Builder en Divi Builder en dat is volgens ons een hele grote pré voor Elementor.

Responsiveness

Hoe schalen jouw webpagina’s op verschillende beeldformaten en devices? Een responsive website is natuurlijk de standaard. Dat geldt dus ook zeker voor pagina’s gemaakt met Elementor.

De opdeling van content in secties en boxen, maakt het niet alleen voor jou makkelijker.

Ook de gebruiker van je webpagina krijgt een leeservaring die prettiger is. Want naar gelang het beeldformaat kan er natuurlijk met de secties geschoven worden, zonder dat content wordt afgebroken of onnatuurlijk wordt weergegeven.

Hoe die weergave er precies uitziet, bekijk je eenvoudig zelf met de daarvoor bedoelde optie in het menu linksonder.

Qua responsiveness heeft Elementor nog een unieke troef in handen: je kunt per device wijzigingen aanbrengen in de pagina.

Los dus van de responsiveness die automatisch is ingebouwd en het kunnen previewen daarvan, kun je ook naar eigen inzicht wijzigingen aanbrengen in de weergave voor een bepaald soort device of bepaald formaat.

Vaak om de weergave nog even net iets mooier te maken. Want automatisch schalen voorkomt dat je content van het scherm valt, maar niet per se dat de uitlijning of de ruimte tussen content helemaal natuurlijk oogt.

Daar kun je met Elementor dus op checken en direct op handelen voor een bepaalde weergave. Dat gaat zo ver dat je zelfs voor kunt kiezen om content of elementen op een bepaald formaat niet weer te geven.

In de bovenstaande video is te zien hoe je je website responsive maakt m.b.v. Elementor. 

Kosten

De standaarduitvoering van de Elementor WordPress Editor is helemaal gratis. :-)

Je voegt ‘m simpel toe aan WordPress, zoals je dat met elke andere plugin doet. Zoals gezegd is er ook een Pro variant. Die is voor de gevorderde gebruiker of voor degene die net wat meer uit de Elementor page builder wil halen.

De Pro-versie kost enkele tientjes per jaar, voor een enkele website. Hieronder staat een aantal functionaliteiten die de Elementor WordPress Editor Pro biedt:

• Meer contentblokken en standaardtemplates;
• Het toepassen van custom CSS in elk contentblok;
• Aanpassen van webformulieren binnen de Elementor-omgeving;
• Volledige integratie met WooCommerce.

Maar de belangrijkste functie van Elementor Pro is volgens ons de mogelijkheid om je eigen Elementor theme te bouwen. Dat doe je eveneens met een toegankelijke drag en drop functie.

Cursus Elementor

Wie kennis heeft van CSS of een webshop heeft, is vaak professioneel bezig met webdesign. Voor deze doelgroep biedt Elementor Pro, buiten de hierboven genoemde extra’s, nog veel meer leuke en vooral nuttige functionaliteiten.

Mocht je die kennis niet hebben, treur dan niet. In onze nieuwe WordPress cursus Elementor komt de basis plug-in uitgebreid aan de orde.

In de vervolg cursus Elementor leren we je een complete website bouwen met behulp van de Elementor Pro plugin.

Voor- en nadelen

Voordelen

• Beschikbaar in 23 talen, waaronder Nederlands;
• Enorm eenvoudig in het gebruik;
• Gratis (basisversie);
• Realtime preview;
• Toegankelijke revisiehistorie met eenvoudig herstel van vorige versies;
• Eenvoudig helemaal opnieuw beginnen met pagina’s, zonder hinder van hardnekkige stijlelementen uit je WordPress Theme.

Nadelen

• Er zijn nog wat onopgeloste problemen met hyperlinks. Het customizen daarvan werkt nog niet helemaal zoals het moet en ook worden deze nog niet goed overgenomen uit je huidige theme.
• De opmaak van tekst is een beetje buggy. Het duurt soms even voordat je aanpassingen consequent zijn doorgevoerd en soms gebeurt dit helemaal niet.
• Ondanks het ruime aanbod widgets, ontbreekt een fatsoenlijke tabel. Is natuurlijk op te lossen met een externe widget, maar een tekortkoming is het wel.

Conclusie

Je zou prima kunnen betogen dat er betere (visual) content editors beschikbaar zijn voor WordPress.

Afhankelijk van je gebruiksdoel en hoeverre je een meer ervaren gebruiker bent. Maar voor de gemiddelde gebruiker is Elementor hde beste page builder die momenteel beschikbaar is.

De (gratis) basisversie is naar onze mening vrijwel ongeëvenaard, in termen van wat je krijgt zonder extra kosten te hoeven maken.

In bredere zin kun je stellen dat waar de kracht van Elementor zit – gebruiksvriendelijkheid en héél veel mogelijkheden voor een gratis page builder – ook de zwakte zit. Er ontbreekt een zekere focus, die sommige andere editors wel hebben. Bijvoorbeeld op blogs of e-commerce.

Maar de plugin is aan een gigantisch snelle ontwikkeling bezig, hierdoor zijn er steeds vaker en sneller verbeteringen en aanpassingen beschikbaar. Naar ons idee zullen deze “zwakkere punten” , snel tot de verleden tijd behoren.

Een visual editor is een must have voor elke webbeheerder die niet goed in de code zit. En als je er dan toch een moet gebruiken, gebruik er dan een die gratis is en goede reviews krijgt.

Meer weten over Elementor of een Elementor cursus volgen? Zie onderstaande links:

Download Elementor || Cursus Elementor

WP Rocket - Caching PluginIedereen die een WordPress website heeft, wil uiteindelijk dat de website snel laadt, het liefst heel snel.

Dat is voor de gebruikers van je website erg prettig, maar ook voor jou. Het is allang geen geheim meer dat Google trage websites lager rankt in de zoekresultaten. Een lagere ranking betekent dat er minder mensen je website weten te vinden en dat wil je natuurlijk niet.

Je website versnellen met de WP Rocket plugin

In dit blog geef ik een review van één van onze favoriete plugins, WP rocket. WP rocket is een zgn. caching plugin en die zorgen ervoor dat je website een stuk sneller gaat laden dan zonder zo’n plugin, mits je deze wel goed instelt.

Als je in Google zoekt naar ‘Wat is caching’  krijg je het volgende antwoord:

Caching is een alternatieve vorm van gegevensopslag, die het opnieuw downloaden van dezelfde informatie of het opnieuw moeten uitvoeren van complexe berekeningen kan voorkomen. Veel browsers werken met een cache.

Kort samengevat doet een caching plugin voor je website, wat je browser voor je doet als je naar een website surft waar je al eerder bent geweest. De website zal veel sneller laden dan de 1e keer dat je keer deze bezocht. Van elke bezoeker op jouw website wordt de pagina al opgeslagen, zodat deze sneller getoond kan worden aan een nieuwe bezoeker, met als resultaat dat je gehele website een stuk sneller wordt.

Het fijne aan de WP Rocket plugin vind ik dat de deze alle mogelijkheden biedt om je website te versnellen, maar er sinds de vernieuwde interface (vanaf versie 3.0) met name voor zorgt dat zowel ervaren als onervaren WordPress gebruikers hun weg makkelijk weten te vinden.

Uiteraard zijn er ook van andere caching plugins te vinden, vele hiervan zijn gratis. Dat een voordeel is t.o.v. WP Rocket waar wel kosten aan verbonden zitten. Een groot nadeel hiervan is dat je zelf het meeste uitzoekwerk mag doen, mochten er probleem ontstaan..

WP Rocket - Features

Alle features die de WP Rocket caching plugin biedt in vergelijking met de concurrentie

Zelf hebben we op onze website in het verleden geëxperimenteerd met Super Cache en W3 total Cache, maar ik vond het heel lastig deze plugins goed in te stellen en liep regelmatig tegen problemen aan. Daarnaast kan de user-interface en het gebruiksgemak van deze plugins kan echt niet tippen aan de nieuwe versie van WP Rocket.

Met WP Rocket laadt onze website 466% sneller!

Voordat ik je meer vertel over de diverse instellingen van WP Rocket, laat ik zien wat het verschil is met de WP Rocket plugin aan of uit op onze eigen website. We hebben de website getest via Pingdom en een screenshot gemaakt van de verschillende resultaten.

Pingdom Tools - WP Rocket geactiveerd

Onze website, met de WP Rocket plugin geactiveerd.

Pingdom Tools - WP Rocket - gedeactiveerd

Onze website, met de WP Rocket plugin gedeactiveerd.

Een snelle rekensom leert dat als de plugin aan staat, de website maar liefst 466% sneller laadt dan zonder activatie van WP Rocket. Daarnaast verkleint de plugin ook de totale bestandsgrootte met en heeft het minder request vanuit de server nodig. Dat zijn toch resultaten die wat zeggen, lijkt me zo.

Maar, wat doet WP Rocket nou precies?

In principe is WP Rocket een caching plugin, maar zorgt er daarnaast voor dat er tal van kleine optimalisaties worden uitgevoerd op je website.

Standaard doet het deze 5 dingen, zodra je de plugin activeert:

  • Pagina caching (statische HTML-bestandscache)
  • Browser caching (op Apache, indien beschikbaar op de server)
  • GZIP-compressie (op Apache, indien beschikbaar op de server)
  • Cross-Origin-ondersteuning voor webfonts (op Apache)
  • Detectie en ondersteuning voor verschillende externe plug-ins, thema’s en hosting omgevingen

Vervolgens kun je binnen de interface de volgende instellingen zelf regelen:

  • Cache preloading – hiermee kunt je de cache opbouwen, zodat je website consistent en snel i
  • Minification – dit helpt bij het verkleinen en combineren van je CSS en JS-bestanden.
  • Vraagteken strings verwijderen uit statische bronnen
  • Lazy load – dit vertraagt ​​het laden van afbeeldingen of video’s onder de vouw totdat een gebruiker de pagina begint te scrollen
  • Uitstellen van JS loading
  • Uitschakelen van emojis/embeds
  • Combineren van Google Fonts files

Zodra je WP Rocket geïnstalleerd en geactiveerd hebt zullen alle functies die ik hierboven heb beschreven automatisch geïmplementeerd worden binnen je website.

In het beginscherm van het dashboard kun je gemakkelijk de cache van de gehele website legen of de complete site in één keer preloaden. Om je een algemene indruk van alle (soms wat geavanceerde) mogelijkheden te geven die deze geweldige plugin je biedt, zal ik de instellingen hieronder met je doornemen.

WP Rocket - Dashboard versie 3.0

Het vernieuwde dashboard van WP Rocket vanaf versie 3.0

Basis caching opties van WP Rocket plugin

Als je het tabblad cache selecteert kun je zelf bepalen de caching van de pagina werkt op basisniveau.

Daarbij heb je de volgende mogelijkheden:

  • Mobiele gebruikers opnemen / uitsluiten van de caching
  • Ingelogde gebruikers opnemen of uitsluiten om pagina’s in de cache te zien
  • Caching voor HTTPS-pagina’s inschakelen mocht je een SSL-certificaat gebruiken.
  • Instellen hoe lang een pagina in de cache blijft. De standaardinstelling is 10 uur.

WP Rocket - Caching Opties

File Optimization

Binnen dit tabblad zijn de instellingen voor minificatie en CSS & JS (Javascript) optimalisatie in te stellen.

  • Minificatie verkleint de grootte van de code van de site door onnodige tekens (witruimte) te verwijderen zonder dat dit invloed heeft op de werking van je website.
  • Concatenation (aaneenschakeling) vermindert het aantal bestanden op uw site door meerdere CSS / JS-bestanden samen te combineren.

Verder zijn er nog een aantal wat geavanceerdere zaken in te stellen op deze pagina zoals:

Uitschakelen van CSS / JS met render-blocking
Combineren van Google Fonts-bestanden (handig als je meerdere Google-lettertypen de website gebruikt)
Verwijderen van query-strings uit statische bronnen (het effect hiervan zal niet groot zijn, maar het kan je GT-metrix score verbeteren)

Mijn advies is om zoveel mogelijk van de voorgestelde opties te activeren. Belangrijk is om dit steeds per optie te doen, vooral bij de geavanceerde opties. Je zult ook merken dat WP Rocket zelf met het advies komt om het te testen en bij eventuele problemen de optie af te zetten.

WP Rocket - Waarschuwing CSS bestanden verkleinen

Media en Lazy Loading

Via het tabblad Media kun je “lazy loading”voor afbeeldingen en / of video’s inschakelen, en WordPress emoji’s en insluitingen uitschakelen.

Een van de functies die hier echt goed is, is de optie om YouTube-video-iframes te vervangen door een statische voorbeeld afbeelding. Als je veel YouTube-video’s op je site insluit, is dit een geweldige manier om je site te versnellen zonder veel bruikbaarheid te verliezen.

Preloaden

Zonder de site vooraf in te laden (preloaden) bouwt de site alleen de cache voor een pagina wanneer iemand ook daadwerkelijk deze pagina bezoekt. Met preloading zorg je ervoor dat alle bezoekers deze cache pagina zien door de cache zelf te cachen in plaats van te wachten tot iemand de pagina bezoekt.

Een van de voordelen van WP Rocket is dat het je twee verschillende manieren biedt om je cache vooraf te laden. Je kunt preloaden met een sitemap of via een preload-bot. De eerste heeft mijn eigen voorkeur omdat dit vrij simpel zonder problemen is uit te voeren. Het gebruik van een preload-bot kan problemen veroorzaken op de wat zwakkere (budget) servers.

Geavanceerde instellingen

Als algemene gebruiker zul je deze tab zelden of nooit gebruiken. Voor de geavanceerde gebruiker biedt WP Rocket uitgebreide regels en instellingen zodat je nog meer controle hebt over verschillende cache instellingen.

Database – Optimaliseer je database

Naarmate een site langer bestaat, slaat een database een wirwar op van revisies, gedelete comments en andere troep die je database daardoor steeds meer vervuild. In dit tabblad kan je met 1 klik je gehele database opschonen. Ideaal toch! Dat scheelt je weer een extra plugin ;).

WP Rocket - Database Opschonen

CDN – Content Delivery Network

Als je een CDN gebruikt om de wereldwijde levering van de site te versnellen, kan WP Rocket ook daarmee helpen. Simpel uitgelegd kun je ervoor zorgen dat je de afbeeldingen van je website vanuit een andere server ophaalt. Hierdoor wordt je eigen server minder belast en zal de website weer sneller werken.

Zo kun je bijvoorbeeld één CNAME gebruiken voor uw afbeeldingen en een andere voor de rest van uw bestanden.

Als je gebruik maakt van Cloudflare bevat WP Rocket ook een speciale Cloudflare-add-on die je kan helpen bij het instellen Cloudflare en waarmee u bepaalde aspecten van de Cloudflare-service rechtstreeks vanuit de WP Rocket-interface kunt bedienen.

Conclusie

WP Rocket is één van de plugins waar we al een langere tijd gebruik van maken en nog steeds heel erg tevreden over zijn. De plugin wordt niet voor niets standaard meegeleverd (inclusief optimalisatie) bij onze hosting- en onderhoudspakketten vanaf Swipe Business.

Eerlijk is eerlijk, er zijn andere caching plugins te gebruiken. Een voordeel t.o.v. WP Rocket is dat deze plugins geen geld kosten, althans niet voor de aanschaf van de plugin.

Maar onderschat niet de tijd die je nodig zult hebben deze plugins te leren kennen, binnen een interface die vele malen minder inventief en overzichtelijk is. De tijd die je hier waarschijnlijk aan kwijt zult zijn, is de $39 dollar die WP Rocket jaarlijks kost, zeker meer dan waard.

Mocht je tijdens het instellen van de plugin tegen problemen aanlopen, dan heb je toegang tot een snelle en zeer betrokken klantenservice.

Website van WP Rocket Plugin 

Hostingpakketten Swipe Media (incl. WP Rocket)