Maatwerk widgets voor Elementor

Maatwerk widgets voor Elementor – Wat zijn de mogelijkheden?

Elementor is een krachtige plugin om zelf je website layouts mee te maken, of dit voor klanten te doen. De keerzijde is echter, dat de meeste ‘elementen’ van je Elementor pagina (die Elementor heel verwarrend ‘widgets’ noemt… widgets hebben al een betekenis in WordPress zelf) toch wel een aardig standaard uiterlijk krijgen.

Natuurlijk, er zijn honderden, zo niet meer, add-ons voor Elementor beschikbaar, maar zoals ik al eerder heb besproken: Iedere plugin (en een Elementor add-on is gewoon een plugin) heeft -hoe klein dan ook- een negatieve impact op je performance.

Binnen Elementor zie ik -wanneer ik kijk naar sites die ik in onderhoud krijg- soms een hele ‘clutter’ van verschillende plugins omdat plugin A zo’n fraaie tab widget heeft, plugin B een mooie prijslijst en plugin C toch wel heel fraai geanimeerde knoppen. Dat iedere plugin deel uitmaakt van een ‘bundel’ van 40 of meer widgets en hierdoor je site met soms honderden ongebruikte plugins wordt belast lijkt minder ter zake te doen.

Gelukkig zijn er enkele add-on makers voor Elementor die dit probleem begrijpen, en in plaats van grote bundels met widgets uit te brengen, komen ze met specifieke, doelgerichte add ons.

Maar wat nu, als je bij al deze ‘extra’ plugins nog steeds niet kan vinden wat je zoekt. Bijvoorbeeld omdat jouw wens eigenlijk wel heel specifiek is. Jij wilt bijvoorbeeld een widget hebben, die informatie uit een database laat zien. Of je zoekt een pricing table widget met een heel specifieke vormgeving.

Alternatieve oplossingen

In sommige gevallen is het mogelijk, dat er al in je behoefte is voorzien.

De eerste stap is natuurlijk te kijken naar de verschillen tussen Elementor en Elementor Pro. Gebruik jij alleen de gratis versie van Elementor, dan kan een kleine investering in de Pro versie al heel wat problemen oplossen.

Wanneer je bijvoorbeeld specifieke gegevens wilt tonen uit een database, dan is het heel goed mogelijk, dat je al goed uit de voeten kunt met Elementor zelf. Want wist je, dat Elementor (RAD) bijvoorbeeld ook goed geschikt is voor Rapid Application Development? Ik heb in de laatste jaren tientallen toepassingen gemaakt, waarbij de klant dacht, dat er ingewikkeld programmeerwerk zou moeten komen, maar waar bleek, dat de standaard beschikbare functionaliteiten van Elementor al voldoende waren. Soms is het een kwestie van het product goed leren kennen.

Wil je echt een complete maatwerk widget, dan hoeft het niet eens zo’n grote investering in tijd en geld te zijn. De ‘Widget Builder’ van ElementsKit kan in veel gevallen uitkomst bieden. Met HTML/CSS kan je hier al behoorlijk wat bereiken zonder een regel te programmeren.

Heb je te maken met bestaande widgets, maar ‘mis’ je de mogelijkheid om bepaalde zaken in te stellen, dan kan ook met MicroThemer al het gewenste effect verkregen worden. Met MicroThemer kan je namelijk de CSS van je website aanpassen, zonder zelf ook maar een regel CSS te begrijpen!

Maar wat nu wanneer je echt iets specifieks wilt. Iets waar geen standaard widgets of zelfs maar add-on widgets voor beschikbaar zijn? Wat dan?

Dan is de enige mogelijkheid die overblijft het (laten) ontwikkelen van één of meerdere maatwerk widgets voor Elementor. Maar wat komt daar bij kijken?

Maatwerk widgets voor Elementor

Een Maatwerk widget voor Elementor is niets meer of minder dan een andere add-on voor Elementor. Maar met één verschil. Jij laat hem op maat bouwen, of je doet het zelf.

Wat komt er eigenlijk allemaal kijken bij het bouwen van een ‘echte’ Elementor Widget.

Allereerst kennis van de onderliggende programmeertal PHP. Met de ‘Widget Builder’ in ElementsKit kan je met alleen HTML en CSS (en eventueel JavaScript) een eigen widget ‘bouwen’, maar de functionaliteit van zo’n widget is beperkt. Met een ‘echte’ Elementor widget wordt er direct gecommuniceerd met WordPress en Elementor en heb je veel meer mogelijkheden.

Een tweede belangrijk punt is dan ook kennis van de WordPress en Elementor API, ofwel de ‘Application Program Interface’. Stel je voor dat je een widget zou willen hebben, die laat zien wat de configuratie van je webserver is. Je moet dus weten hoe je WordPress deze gegevens op kan laten vragen en door kan geven aan Elementor.

Het bouwen van Maatwerk Widgets voor Elementor is dus niet iets, wat je op een regenachtige middag aan de hand van YouTube filmpjes even doet. Je hebt hier de hulp van een WordPress developer met aanvullende kennis over Elementor voor nodig. Gelukkig voor jou heb je die al gevonden toen je dit artikel begon te lezen.

De specificaties

Het maakt niet uit of je een maatwerk widget zelf wilt gaan bouwen, of wilt laten bouwen, maar de eerste stap is de specificaties voor je widget duidelijk te krijgen. Wat wil je, dat de bezoeker te zien krijgt? Waar moet deze informatie vandaan komen?

Een aardig voorbeeld is de widget voor het leasebedrijf wat ik noemde in het artikel over de ‘Widget Builder’. Zij moesten als eerste de specificaties voor de widget in orde hebben, voor ik aan de slag kon gaan. Want het berekenen van het maandbedrag voor de leaseprijs is een eenvoudige formule, maar niet een formule die ik zomaar uit mijn mouw zou kunnen schudden. Het is immers hun formule.

Zorg dus dat je weet waar de informatie die je nodig hebt te vinden is. Natuurlijk kan een WordPress professional je er mee helpen, maar in de meeste gevallen komt het toch op jou neer.

Mate van flexibiliteit

Onderdeel van de specificaties, maar toch een heel belangrijk onderdeel is de gewenste flexibiliteit van je plugin. In een Elementor Widget kan je heel veel instellen, maar het toevoegen van deze ‘instelpunten’ kost tijd… en tijd is geld in de wereld van het programmeren.

In Elementor Widgets kan je enorm veel instellen met betrekking tot de vormgeving: Font, kleur, achtergrondkleur… maar heb je dat allemaal nodig?

Standaard zullen de verschillende onderdelen van een widget de globale instellingen van je site volgen. En in 90% van de gevallen is dat precies wat de klant wil. De ‘noodzaak’ om meer in te kunnen stellen, is vooral wanneer je jouw maarwerk widgets ook op andere sites zou willen gebruiken. Bijvoorbeeld wanneer je een WordPress professional bent, die sites voor anderen bouwt.

Mate van herbruikbaarheid

Wat ook van belang is, is in hoeverre een Elementor widget ook daadwerkelijk herbruikbaar zou moeten zijn. Je hebt niet altijd maatwerk widgets voor Elementor nodig, voor een oplossing binnen Elementor. Is het een éénmalig iets, dan valt te overwegen of het niet beter is om in plaats van een Elementor widget een shortcode op maat te laten ontwikkelen. Afhankelijk van de complexiteit kan je dit een half uur tot enkele uren ontwikkeltijd besparen.

Budget

En de hamvraag is natuurlijk: Wat heb je ervoor over? Maatwerk widgets voor Elementor zijn niet goedkoop. En dat is ook logisch, want je vraagt een programmeur om enkele uren van zijn tijd hieraan te besteden. Reken erop dat je voor een eenvoudige widget toch minimaal 2 uur ontwikkeltijd nodig hebt. Voor meer complexe widgets kan het navenant duurder worden. Communiceer duidelijk met de ontwikkelaar wat jouw budget is. Hij of zij kan je vaak aanwijzigen geven als ‘wanneer je deze functionaliteiten laat vallen, kan je zoveel besparen’. Indien mogelijk probeer een ‘fixed price’ afspraak te maken. Belangrijk voor zo’n fixed price afspraak is echter, dat je de functionaliteiten goed weet te communiceren.

Enkele voorbeelden van maatwerk widgets voor Elementor

In veel gevallen blijkt een gewenste maatwerk widget voor Elementor ook anders oplosbaar te zijn. In sommige andere gevallen beslist niet.

De meeste voorbeelden van nuttige, noodzakelijke maatwerk widgets voor Elementor die ik tegenkom zijn vooral te vinden binnen WooCommerce. En dat is niet zo verbazingwekkend, omdat met name WooCommerce toch wel heel veel uitbreidingen heeft die zichtbaar zijn aan de kant van de klant. Maar wanneer je Elementor Pro en WooCommerce samen gebruikt, dan spelen niet alle plugins goed samen met deze combinatie… ze laten hun output zien op plaatsen waar jij dat liever niet hebt.

Wil je meer controle over de layout van je product en gebruik je Elementor Pro, dan kan een maatwerk widget voor Elementor de oplossing zijn.

Een tweede voorbeeld is een site waar ik op dit moment voor een klant aan aan het werken ben. De klant gaat via zijn (besloten) site educative kaartspelen aanbieden aan zijn doelgroep. Die verschillende kaartspelen hebben verschillende mogelijkheden en functies. Soms moeten er vragen worden beantwoord, soms moeten er dingen in een afbeelding worden ‘ontdekt’… De templates voor die kaarten kunnen dus iedere keer net iets anders zijn. Omdat de klant zelf de functionaliteit achter die kaarten niet kan programmeren, hebben we gekozen voor het bouwen van een aantal Elementor Widgets die de klant zelf kan ‘draggen en droppen’ en zo zelf de kaarten op kan bouwen.

En een derde functionaliteit is voor een site van mijzelf. Deze site is nog niet online, maar het is een site waar ik mijn favoriete recepten wil gaan delen met de wereld (ik kook graag). In deze site worden de ‘gerelateerde recepten’ niet getoond door de standaard ‘Post’ widget van Elementor, maar door een eigen widget, die een ander algoritme gebruikt om te zoeken wat ‘gerelateerd’ is (om te voorkomen, dat een vegetariër als ‘gerelateerde’ recepten alleen maar vleesgerechten te zien krijgt).

Wat kost nu zo’n ‘maatwerk widget’.

Wat een maatwerk widget kost is deels afhankelijk van de tijd die er mee gemoeid is. Een widget die naar inschatting 5 uur of minder ontwikkelwerk kost, kan worden verrekend met een support strippenkaart.

Is het 10 uur of meer, dan is het een ‘fixed price’ gebaseerd op mijn gebruikelijke tarief voor programmeerwerk (ook dat vind je op de informatiepagina over de support strippenkaart).

Is het naar inschatting tussen de 5 en 10 uur, dan zal het uurtarief ergens tussen beide uitersten inliggen.

Wil je meerdere widgets laten ontwikkelen zal de tijdsinvestering per widget worden bekeken om het uiteindelijke tarief te bepalen.

Meer interesse? Neem dan eens contact op.