Je reguliere website omzetten naar Elementor Pro

Je reguliere WordPress of Wix website omzetten naar Elementor Pro. Waarom?

Je hebt een website, tenminste, ik denk dat dit een goed uitgangspunt is, wanneer je dit artikel leest. En je hebt natuurlijk zo’n handige website gebouwd in WordPress, Wix of een willekeurig andere toepassing waarmee je zelf je website kan beheren.

En dan lees je opeens een blogartikel van iemand zoals ik over Elementor en Elementor Pro. Je vraagt je wellicht af wat Elementor Pro zo veel beter maakt dan de website die je al hebt. Hoewel ik je website niet heb gezien en daar niet direct op kan antwoorden, kan ik je wel vertellen wat Elementor Pro meer biedt dan Wix of een standaard WordPress-site.

Over het omzetten van een Wix naar een WordPress website heb ik in het verleden al vaker geschreven. Met een aantal goede redenen om dit te doen. Hierbij adviseerde ik je ook, dit alleen te doen, wanneer je direct ook Elementor Pro gaat gebruiken, omdat je anders als Wix gebruiker toch wel heel veel gemak inlevert.

Maar waarom zou je in vredesnaam een bestaande WordPress website om willen zetten naar een Elementor Pro website die er net zo uit zou zien als je bestaande site?

Daar is een aantal goede redenen voor te geven. Laten we eens met een paar heel belangrijke beginnen.

1. Moderne websites hebben een dynamische vormgeving

Laten we eens met een heel eenvoudig voorbeeld beginnen. Een webshop op het gebied van mode. Het mag duidelijk zijn, dat in de zomer andere kleding verkocht wordt, dan in hartje winter. Tenminste, dat is in Nederland zo, dank zij ons klimaat. Zomers wil je dus een heel andere uitstraling van je website hebben, dan ’s winters. En dat betekent vaak, dat je niet alleen de content maar vooral ook de rest van je vormgeving aan wilt passen. En om dit makkelijk te doen, heb je toch echt een pagebuilder nodig.

Natuurlijk wil dat nog niet zeggen, dat je specifiek Elementor nodig hebt. Want er zijn op dit moment letterlijk honderden page builders voor WordPress beschikbaar. Om maar eens een paar bekende te noemen: WP Bakery (voorheen Visual Composer), Divi, MotoPress, Beaver Builder, Thrive, Generate Press, Oxygen, Brizy, Themify Builder… en natuurlijk Elementor.

Voor zo’n dynamische pagina heb je dus een page builder nodig. Dat is duidelijk. Maar waarom Elementor (Pro)?

2. Elementor (Pro) is een tweede generatie page builder

Heb je wel eens van de ‘wet van de remmende voorsprong’ gehoord? Op het moment dat je de eerste bent, dan maak je fouten waar niet alleen jij, maar ook je concurrenten kunnen leren. Elementor was allesbehalve de eerste page builder voor WordPress. Integendeel. Ze zijn een relatief late speler op de markt. Maar inmiddels wel de grootste.

Wat heeft die ‘eerste generatie’ pagebuilders als Divi, MotoPress en WP Bakery dan zo fout gedaan? Dat is eigenlijk in één simpele term samen te vatten.

Shortcodes.

Een page builder heeft een manier nodig om HTML naar jouw browser te kunnen sturen. En die vroege page builders die deden (en doen, om compatible te blijven met oudere installaties) dat allemaal door shortcodes te genereren. Een shortcode is eigenlijk een heel vereenvoudigde functieaanroep.

Stel je voor, ik wil YouTube opnemen in mijn pagina. Vandaag de dag gaat dat automatisch, maar zo’n 8 jaar geleden had ik daar een shortcode voor nodig, die geïmplementeerd werd door een plugin. Eén van die plugins was YouTuber. En ik kon mijn video’s simpel in een pagina opnemen met een shortcode als (vergeef me dat ik de exacte syntax niet meer weet)

[youtuber url="https://youtube.com/?v=rgderfe" width="800"]

Daarmee vertelde ik de plugin dat de YouTube video van een specifieke url met een specifieke breedte getoond moest worden. De plugin riep daarna een PHP functie aan, die alle HTML genereerde om een YouTube video op deze manier te laten zien.

Het probleem met shortcodes voor page builders is dat je om een complete pagina te bouwen ook heel veel HTML nodig hebt. En daarmee ook behoorlijk wat shortcodes. En veel shortcodes wil zeggen veel aanroepen van PHP functies. Je loopt op die manier de server eigenlijk enorm te belasten.

Toen de makers van Elementor met Elementor begonnen wisten ze, dat het pad met shortcodes niet het goede pad was. WP Bakery, Divi en kornuiten hadden dit inmiddels wel duidelijk gemaakt.

Dus ze moesten een andere oplossing bedenken. En die oplossing was eigenlijk even eenvoudig als geniaal.

Want waar heb je die shortcodes voor nodig? Om makkelijk de instellingen voor een bepaald onderdeel van een pagina op te kunnen slaan. Maar diezelfde informatie kan je ook op een andere manier opslaan.

Elementor gebruikt een heel andere aanpak. Naast de pagina zoals deze in HTML wordt opgeslagen slaat Elementor in een aparte variabele in een enorm ingewikkelde structuur alle eigenschappen van je pagina op. Tot in het kleinste detail. Die waarden worden alleen ingelezen, wanneer de pagina wordt aangepast. Want dan zijn ze alleen van belang. Sla jij een pagina op, dan wordt die structuur met al die waarden gebruikt om HTML te generen, en opgeslagen.

Dit zorgt ervoor, dat -behalve shortcodes die jij zelf via een ‘shortcode’ widget toe zou voegen- Elementor geen shortcodes hoeft aan te roepen.

En dat zorgt er weer voor, dat er maar heel weinig PHP functies aangeroepen te worden om jouw Elementor pagina te laden op de website.

Heeft dat geen risico’s?

Jazeker! Het is mij aardig wat keren overkomen, dat ik een pagina aanpaste, en daarna die aanpassingen niet kon zien in de website zelf. Om wat voor reden dan ook, had Elementor gehikt bij het opslaan, en was deze ‘out of sync’ met de HTML pagina die erbij hoorde. Elementor heeft een ‘reparatie tool’ onder de instellingen, waarbij je alle broncode opnieuw kan genereren.

Maar sinds versie 3.0 is mij dat niet meer overkomen. De kinderziektes lijken uit Elementor, het reparatietooltje is er nog steeds.

3. Elementor Pro maakt talloze plugins overbodig

Een tweede performance killer voor een WordPress websites is het fenomeen ‘plugins’. Natuurlijk, plugins maken WordPress heel flexibel, maar ook topzwaar. Vooral omdat veel WordPress gebruikers de gewoonte hebben om rucksichtslos plugins te installeren, zodra ze een nieuwe functie nodig hebben in de website.

Ik voer wel eens klusjes uit voor andere WordPress professionals. Nog niet zo gek lang geleden had mijn waarde collega een website nieuw in beheer gekregen, met wel een enorme hoeveelheid plugins. Het verzoek was eens kritisch naar de gebruikte plugins te kijken, om te zien wat nu allemaal wel en niet nodig was.

Het bleek dat er heel wat plugins waren met een overlappende functionaliteit. Kortom, waarbij plugin A niet nodig was, omdat plugin B diezelfde functies ook had.

Daarnaast een aantal gevallen, waarbij een toch wel topzware plugin was gekozen voor maar een heel klein deel van de functionaliteit. Dit soort zaken vind ik vooral terug bij mensen die zelf hun WooCommerce shop hebben gebouwd.

Het aardige van Elementor Pro is dat hier enorm veel functionaliteit al is ingebouwd, die je anders via een plugin zou moeten implementeren. Het begint al met iets simpels als de ingebouwde ‘share buttons’ voor social media. Vrijwel iedereen heeft sharebuttons voor social media. En de meeste mensen gebruiken hier een plugin voor. Maak je gebruik van Elementor Pro, dan zitten die share buttons al ingebouwd.

Dat betekent niet alleen, dat je geen extra plugin hoeft te installeren, maar ook dat je deze share buttons zichtbaar kan maken, zoals je het zelf wilt! Zie jij ze bijvoorbeeld liever als floating panel op je website, dan is dat geen enkel probleem. Wil je liever bij het verlaten van een blogpost in een ‘exit pop up’ jouw bezoeker vragen jouw blogpost alsnog te delen? Met Elementor kan je ook onbeperkt je eigen pop up’s maken!

4. Elementor Pro is super gebruikersvriendelijk!

Niet iedere page builder is eenvoudig om mee te werken. Elementor daarentegen is behoorlijk intuitief. Oh, ze hadden zonder meer een aantal zaken heel wat beter op kunnen lossen volgens mij, maar het is toch één van de meest gebruikersvriendelijke page builders die ik tot nu toe tegen ben gekomen.

En ik heb er toch aardig wat bekeken in de afgelopen jaren. Laten we eens een blik werpen op de gebruikersinterface van Elementor.

Nieuwe elementen toevoegen aan een pagina is eenvoudig het element vanuit het panel links ‘slepen’ naar de plaats op de pagina waar je dit wilt hebben.

Wil je de instellingen voor een bepaald element aanpassen, dan klik je op dat element en in hetzelfde panel links wordt nu het ‘instellingen’ panel voor dat element -in Elementor een widget genoemd- zichtbaar.

Je ziet hierboven, om de widget die ik aan het bewerken ben, staat een roze rand. In het linker panel zie ik de tekst staan om te bewerken en kan ik ook enkele andere instellingen aanpassen.

Vrijwel iedere Elementor widget heeft drie tabs in het panel staan. ‘Layout’, ‘Stijl’ en ‘Gevorderd’. In ‘Layout’ geef je de meeste gegevens over de inhoud van je widget in. Onder ‘Stijl’ stel je zaken als kleur en lettertypen in en onder ‘Gevorderd’ staan instellingen voor de ruimte tussen widgets, eventuele animaties en nog veel meer.

5. Naast een page- is Elementor Pro ook een theme builder

De werkelijke waarde van Elementor ligt er hem echter niet de mogelijkheid om pagina’s te maken, maar om je hele thema door Elementor te laten beheren. Elementor heeft daarvoor zelf een lichtgewicht thema ontwikkeld. ‘Hello Elementor’.

Ik merk dat het vaak wat lastig is voor mensen om het verschil tussen een theme builder en een page builder te bevatten. Het is eigenlijk heel eenvoudig.

Wanneer je naar mijn blog kijkt, dan zie je dat deze blogpost en deze blogpost in grote lijnen toch wel erg op elkaar lijken. Ondanks het feit dat de inhoud totaal anders is.

Dat komt omdat alle blogposts gebruik maken van hetzelfde template, eenzelfde manier om de inhoud te tonen.

Nu is traditioneel in WordPress het template altijd een zaak van de programmeur geweest: Die bepaalde waar de titel, een uitgelichte afbeelding en andere elementen moesten staan. In Elementor Pro heb je dank zij de theme builder hier helemaal zelf de controle over.

Je kan met Elementor Pro dus compleet zelf bepalen, wat er zichtbaar moet worden in je thema. En dat is eigenlijk best wel een heel krachtig hulpmiddel.

En omdat je dit zelf kan bepalen, heb je direct ook heel wat minder plugins nodig. Want laten we nu eens kijken wat je zoal op een blogpagina kan zetten, los van de blog content zelf.

We beginnen met de rechter sidebar. Daar begin ik met een aantal ‘share buttons’. Dat is meestal iets wat je implementeert met behulp van een plugin. En dan bepaalt de maker van de plugin in grote mate, hoe de buttons eruit zien. Zo bespaar je al minimaal één plugin.

Dan komt een zoekfunctie. Dat is ook mogelijk met een standaard WordPress widget.

Daaronder de inhoudsopgave. Dat zou een tweede plugin worden, maar hier kun je gewoon een Elementor widget voor gebruiken.

Dan volgen enkele standaard widgets van WordPress zelf, tot we bij het opt-in formulier komen. Dat zou een derde plugin worden, maar hier is het ook weer Elementor zelf.

Kom je over de helft van de pagina dan kun je bijvoorbeeld een ‘slide in’ laten verschijnen. Bijvoorbeeld om mensen uit te nodigen zich op jouw nieuwsbrief in te schrijven. Een ‘slide in’ is een variatie op een pop up. Ook hier bespaar ik een plugin. Dat is vier.

Scroll ik door tot onder de commentaren dan plaats je daar ‘related posts’… dat is inderdaad een vijfde plugin.

Om een blogpagina als deze te bouwen zou je dus minimaal 5 extra plugins nodig hebben. Plugins die bovendien een stuk minder flexibel zijn. Al deze functies kun je echter integreren in je thema dank zij de Elementor Theme Builder.

6. Elementor Pro biedt krachtige marketing tools

Eén van de redenen dat ik enthousiast ben over Elementor Pro is omdat Elementor Pro toch wel heel krachtige marketing tools biedt.

Veel mensen onderschatten het belang van een goede product pagina. Omdat Elementor Pro een groot aantal widgets specifiek voor WooCommerce heeft, heb je een hoge mate van vrijheid bij het bouwen van je product pagina’s. En soms kunnen kleine veranderingen in een product pagina al tot grote verschillen in je omzet leiden.

Ok, dat is niet de sterkste marketing tool die Elemenor Pro je biedt, maar toch wel een heel wezenlijke.

Wat krijg je nog meer.

Ik heb het al enkele malen genoemd, maar de pop up’s in Elementor Pro zijn eigenlijk onmisbaar op een moderne website. Vooral omdat niet alle pop ups ook daadwerkelijk ‘up poppen’, maar ook als slide ins, floating form of op welke andere manier dan ook getoond kunnen worden.

Vooral op landing pages mag eigenlijk een pop up niet ontbreken. Wanneer ik een betaalde advertentiecampagne opzet, stuur ik het verkeer naar een landing page. Verlaat iemand die pagina, dan komt een exit pop up om alsnog -tegen een beloning natuurlijk- om het email adres te vragen.

Vijf procent van degenen die de pagina verlaten, is bereid om toch een email adres achter te laten. Dat zijn toch altijd weer wat extra leads.

7. Heb je een webshop? Met Elementor Pro maak je de look en feel een stuk flitsender

Sinds Elementor 3.6 is het layout systeem van Elementor (Pro) drastisch herschreven. Dit maakt het onder andere mogelijk om creatiever te zijn met de product overzicht pagina, bijvoorbeeld door een afwisselende layout te presenteren.

Wil je nog tien andere redenen om Elementor Pro en WooCommerce met elkaar te combineren? Dan heb ik die alvast voor je op een rijtje gezet!

8. AI ondersteuning voor Elementor Pro

Hoewel je hier een apart abonnement voor af moet sluiten en het geen deel maakt van je standaard Elementor licentie, is er een AI ondersteuning voor Elementor Pro beschikbaar. Enkele jaren gelden, toen het pas beschikbaar werd, heb ik hier een blogartikel over geschreven. Die ontwikkelingen zijn echter hard gegaan, en binnenkort schrijf ik hier een nieuw artikel over, met de mogelijkheden die Elementor vandaag de dag biedt. Om je een aantal aardige voorbeelden te geven met betrekking tot de extra ondersteuning die AI je biedt:

Elementor AI co-pilot

Sinds Elementor 3.20 beschikt Elementor over de zogenaamde ‘co-pilot’ functie. De ‘co-pilot’ is een handige functie die -rekening houdend met de inhoud en vormgeving van je website- suggesties doet, hoe een volgend onderdeel van je pagina er uit zou kunnen komen te zien.

Genereren van uitgelichte afbeeldingen

Kan je de juiste afbeelding voor je blogartikel niet vinden? Op basis van de beschrijving kan je een afbeelding laten genereren.

In je standaard sidebar van je Gutenberg editor zie je bij de uitgelichte afbeelding de tekst staan ‘Genereer met Elementor AI’. Wanneer je dit aanklikt zal Elementor AI op basis van jouw prompt een passende afbeelding genereren.

Genereren van een samenvatting

Je kan ook een samenvatting voor het blogartikel laten genereren door AI. Dat gaat helaas nog niet helemaal foutloos. Standaard zal jouw Nederlandstalige blogartikel in het Engels worden samengevat. Gelukkig biedt het ook een extra optie, om die samenvatting weer naar het Nederlands te vertalen.

Genereren van JavaScript of CSS code

Door een prompt in te geven als ‘Zorg dat deze foto sepia kleurt wanneer iemand er met de muiscursor overheen gaat’, genereert Elementor AI de JavaScript of CSS code die hiervoor nodig is. Zo kan je eenvoudige acties die je anders zou moeten (laten) programmeren zonder zelf te kunnen programmeren toch toepassen.

9. Elementor Pro is inmiddels een industriestandaard geworden

Tot grote spijt van al die mensen die een hekel hebben aan Elementor Pro: Het is inmiddels toch echt een industriestandaard geworden. Er is geen page builder met zo’n groot aantal add ons als Elementor. En wanneer je kijkt naar de thema’s in de WordPress repository, dan zie je dat op het moment van schrijven ‘Hello Elementor’ het op drie na meest gebruikte thema is.

Dat het een industriestandaard is geworden heeft natuurlijk ook zijn nadelen. Weet je nog wat ik eerder schreef over mensen die plugins met overlappende functionaliteiten installeren? Ik kom het steeds vaker tegen, dat mensen die Elementor (Pro) gebruiken Elementor add-on X geïnstalleerd hebben voor de fraaie tabbladen, add-on Y vanwege de call to action boxes en add-on Z vanwege de image slider. Of met andere woorden, het ‘ophopen van plugins’ begint ook hier, en doet het grote voordeel van Elementor Pro teniet.

Aan de positieve kant zie je dat vrijwel iedere serieuze plugin ook standaard Elementor widgets mee installeert. Zo komt de ‘MotoPress Hotel Booking Plugin‘ samen met een aantal widgets om jouw B&B / Hotel boekingen systeem makkelijk te integreren in je Elementor pagina’s.

Wat ook heel mooi is, is dat vrijwel iedere grote sales funnel plugin zoals CartFlow, StudioCart en WooFunnels Elementor(Pro) prima ondersteunt.

Kortom, met Elementor Pro voeg je heel wat functionaliteit toe aan je website. En dan heb ik het nog niet eens over ‘Dynamic tags’ gehad.

Jouw website naar Elementor Pro?

Maar stel nu. Je hebt een website en je wilt deze migreren naar een Elementor Pro website. Hoe diep moet je dan in de buidel tasten?

Niet zo diep hoor. Ben je eigenlijk best tevreden met de vormgeving van je huidige website, maar niet met de uitbreidingsmogelijkheden, dan kan je vaak al binnen één strippenkaart van 10 uur jouw hele site om laten zetten naar een Elementor Pro site.

Meer informatie

En hoe gaat dit in zijn werk?

Wanneer je ervoor kiest om jouw huidige website naar Elementor Pro om te laten zetten, dan kan je via het contactformulier een belafspraak met mij maken. Of wanneer je in de chat ziet, dat ik online ben, natuurlijk gelijk een chat starten. Ik kijk dan eerst naar je site, en geef aan hoeveel uur het ongeveer zou kosten je site na te bouwen met Elementor. Wanneer je accoord gaat met het voorstel schaf je online de strippenkaart aan, en beginnen we. Mocht er nog uren op een bestaande strippenkaart hebben, dan kunnen we natuurlijk direct beginnen.

Dat nabouwen gebeurt op een aparte server, jouw site blijft dus gewoon online beschikbaar. Is de site klaar en ben je tevreden, dan wordt de site overgezet. Hierbij kun je kiezen de site bij WordXPression te hosten, of gewoon bij de hosting te blijven waar je al bent.

Interesse? Wacht dan niet langer en neem contact op.

Ben jij een webdesigner?

Ben jij een webdesigner, maar werk jij nog niet met Elementor Pro? Wist jij, dat inmiddels meer dan 8% van alle WordPress websites met Elementor Pro zijn gemaakt? En aangezien 43% van alle websites in WordPress zijn gemaakt, wil dat dus zeggen, dat 3,44% van alle websites wereldwijd in Elementor Pro zijn gemaakt. Dat is dus behoorlijk wat.

Kijken we naar de top 1 miljoen websites, dan ligt dit percentage iets lager. Houd hier rekening mee, dat in dit ‘op 1 miljoen’ websites, WordPress zelf ook minder vertegenwoordigd is.

Wat zijn de meest populaire page builders binnen die top 1 miljoen?

• Elementor met ‘Hello Elementor’ wordt op 1,24% van de websites gebruikt.
• Divi en Astra worden ieder bij 0,97% van de websites gebruikt
• GeneratePress wodt bij 0,73% gebruikt
• Newspaper op 0,48% van de sites.

(bron Buildwith.com via WPZoom)

Het marktaandeel van Elementor is nog steeds groeiende.

Wil jij jouw vaardigheden uitbreiden met Elementor Pro, dan heb ik voor jou de cursus ‘Elementor Pro voor Designers‘ die je in korte tijd de kennis en vaardigheden bijbrengt om snel en efficient met Elementor Pro op een professionele manier aan de slag te kunnen gaan.

Wil je klaar zijn voor de toekomst? Neem dan vandaag nog actie.