Zelf je Elementor Widgets maken – en meer…

Toen ik een twee jaar geleden mijn eerste ervaringen met Elementor opdeed had ik niet verwacht dat Elementor zo populair zou worden. Het is inmiddels de meest gebruikte page builder wereldwijd. Toch heb je met Elementor de nodige beperkingen. De widgets zoals deze met de plugin meekomen zijn krachtig maar zien er toch redelijk standaard uit, er rekening mee houdend, dat je steeds meer Elementor sites tegen zal komen.

Maar je kan natuurlijk ook zelf je Elementor widgets maken. Elementor heeft een vrij open interface en een goede ondersteuning vanuit de gebruikersgroepen. Op de site van Elementor staat in detail uitgelegd hoe je zelf een widget maakt… maar daar moet je zelf wel voor programmeren in PHP. En niet iedereen kan dit.

Heel toevallig liep ik onlangs tegen een aanbieding op AppSumo aan. Een uitbreiding op Elementor, waarmee je -onder meer- zelf je widgets kan maken. En je hoeft helemaal niets van PHP te weten. Kennis van HTML, CSS en eventueel JavaScript is overigens wel nodig.

Elementor Widgets maken met de Widget Builder

De plugin ElementsKit maakt dit namelijk mogelijk. Een onderdeel van deze plugin is de zogenaamde ‘Widget Builder’. Nu is één waarschuwing op zijn plaats. We zijn in WordPress gewend, dat op het moment dat iets een ‘builder’ wordt genoemd, dat het visueel werkt met drag and drop. Dat doet de Widget Builder niet.

Maar wil je Elementor Widgets maken op de ‘gebruikelijke’ manier, dan zal je behoorlijk wat code moeten schrijven om de opties-dialoog voor de widget te maken. En al die code is PHP code.

Deze complete ‘opties-dialoog’ kan je heel makkelijk via drag and drop maken, maar de widget zelf zal toch hand gecodeerd moeten worden. Hoe werkt dit dan?

HTML, CSS en JavaScript

Wil je je eigen Elementor Widgets maken met JavaScript dan moet je in ieder geval enige vaardigheden met HTML, CSS en JavaScript hebben. Met behulp van deze scripts bouw je namelijk je widget.

Hierboven zie je de builder in actie. De builder bestaat uit een drietal kolommen. In de eerste kolom heb je de gebruikelijke Elementor properties. In de tweede kolom is het invulformulier wat je met behulp van die properties aan het bouwen bent en in de derde kolom is de editor zelf.

Deze editor bestaat uit een viertal tabbladen. In deze afbeelding zie je de HTML tab, dat is het tabblad waar alle werkelijke actie plaats zal vinden. De overige tabs (met de CSS code en de JavaScript code) zijn eigenlijk min of meer ‘hulp tabs’. Je doet hier wel je code in, maar de ‘macro substitutie’ die ik hieronder uit ga leggen werkt niet in die tabs.

Een simpele knop

Stel, ik wil een heel simpele HTML knop maken. Veel knoppen op webpagina’s zijn niet echt knoppen, maar mooi opgemaakte links. Dat gaan we dus ook met onze knop doen. We houden de knop omwille van het voorbeeld super simpel: Je kan alleen de tekst instellen.

Zo’n knop zou er ongeveer zo uit komen te zien in HTML:

<div class="wxp-btn-container">
   <a href="https://google.com">Mijn tekst</a>
</div>

Zoals ik al zei, een knop is een veredelde link. De werkelijke magie zit hem in de CSS daarachter

.wxp-btn-container a {
   display: block;
   border: 2px solid black;
   padding: 10px;
}

En voila, hier heb je een heel basale knop.

Tot nu toe is het nog geen ‘widget’, het is gewoon een knop. Maar stel nu, dat ik het mogelijk wil maken om de tekst zelf in te stellen. Dat kan vrij makkelijk. Ik voeg via de editor een ‘Text’ veld toe. Dat veld noem ik bijvoorbeeld ‘btn_text’. Zodra ik dat doe zie ik twee dingen gebeuren : In de tweede kolom wordt een ‘Text’ veld visueel toegevoegd en in de rechter kolom in de editor zie ik {{btn_text}} toegevoegd.

Het volgende wat ik doe is in de HTML ‘Mijn tekst’ vervangen door {{btn_text}}

Zo dus:

<div class="wxp-btn-container">
   <a href="https://google.com">{{btn_text}}</a>
</div>

Deze widget komt gewoon tussen mijn andere Elementor Widgets te staan.

En voortaan kan ik de knop tekst aanpassen door de juiste waarde in het property panel in te geven. Makkelijk toch?

Natuurlijk is dit knop voorbeeld niet erg nuttig, Elementor heeft al een knop, en die kan veel meer, maar wanneer je ingewikkeldere HTML code met verschillende instellingen regelmatig wilt gebruiken in de site, dan is deze Widget Builder een uitkomst.

Een fraaie toepassing van zo’n maatwerk widget heb ik onlangs moeten maken voor een leasebedrijf. Afhankelijk van een eigen bijdrage en een lease termijn moest in de prijskolom direct het maandbedrag getoond worden.

Dit is niet iets waar ‘standaard widgets’ voor zijn. Dus ik heb dit als maatwerk voor de klant moeten maken.

Deze maatwerk widget is niet gemaakt met de Widget Builder, maar als ik die in die tijd tot mijn beschikking zou hebben gehad, had ik heel wat uurtjes kunnen besparen.

Een widget collectie

Dit is één onderdeel van ElementsKit. Maar voor mij wel het onderdeel wat ervoor zorgt, dat deze add-on voor Elementor boven veel andere add ons te verkiezen is.

Ik heb in het verleden meerdere collecties met widgets besproken en eigenlijk verschillen deze allemaal niet al te veel van elkaar. Je krijgt gewoon een collectie met widgets die je andere opties geven dan Elementor zelf al aanbiedt. Er is vaak geen ‘beter’, of ‘slechter’, maar het is gewoon een kwestie van smaak. Welke prijstabel vindt jij mooier? Wat is jouw favoriete manier om tab bladen te tonen?

De werkelijke waarde van deze add ons zit hem volgens mij in wat er meer wordt geboden dan de widget collectie. En een aantal plugins komt hier in mijn optiek sterk naar voren. Ik heb de Dynamic Content plugin al eens besproken, evenals de PiotNet AddOn For Elementor. Beide plugins voegen wezenlijke functionaliteit toe aan Elementor.

ElementsKit doet dat ook. Eén van die functionaliteiten is dus de hierboven besproken Widgets Builder. Met behulp hiervan kan je voorbeeld code in HTML / CSS makkelijk aanpassen om als widget te kunnen gebruiken in Elementor.

Maar ElementsKit heeft meer leuke dingen.

Mega menu’s

Eén van mijn grote uitdagingen met Elementor in het begin was het gebruik van Mega menu’s. Mocht je niet op de hoogte zijn, wat een Mega Menu is: Het is een menu waarbij je als je over een optie gaat je niet een rechthoek met een aantal opties onder elkaar te zien krijgt, maar een compleet panel.

En niet altijd alleen met ‘aanklikbare’ opties, maar ook zaken als zoek-dialogen of een lijst met de meest recente posts inclusief afbeelding. Want in een mega menu kan je in principe iedere widget plaatsen.

Een mega menu is vooral populair in webshops. En daar bouw ik er nogal wat van.

Deze plugin heeft een heel bruikbare mega-menu optie, en hier krijg je in de toekomst zeker meer over te horen.

Cross-site copy / paste

Eén ding wat helaas niet mogelijk is met Elementor is een widget via copy paste ‘over te zetten’ naar een andere site. Natuurlijk. Wanneer je maar één site hebt, is dat niet relevant, maar wanneer je -zoals ik- meerdere sites hebt en/of sites voor klanten bouwt, kan het heel wat tijd besparen, wanneer je met copy/paste een widget van één site naar een andere kan verplaatsen.

Header and Footer builder

De Header and Footer Builder is een fraai alternatief voor de standaard header en footer van the theme builder. Het heeft meer opties en werkt allemaal wat fraaier. Het is ook heel handig, wanneer je geen Elementor Pro hebt.

Want de header and footer builder heeft Elementor Pro niet nodig… Dus heb je in principe een vrij eenvoudige site, maar je wilt wel de headers en footers van je standaard thema vervangen, dan is dit de plugin voor jou!

Widget Library

Deze plugin komt met een aantal widgets. Wat heel aardig is. Maar wat het werkelijk leuk maakt, is dat deze plugin ook een tabblad met een ‘widget library’ toevoegt aan je standaard Elementor Library. In deze Widget Library worden de widgets zoals ze voorkomen in ElementsKit getoond, maar in een groot aantal verschillende stijlen. Dus in plaats van je widget stap voor stap op te maken, kan je alvast een ‘basisstijl’ kiezen en die vervolgens aanpassen.

Enkele kritische kanttekeningen

Eigenlijk het onderdeel waar ik het minst over te spreken ben is de Widget collectie die met deze plugin meekomt. En met name alle ‘post related’ widgets, de widgets waarmee de posts zichtbaar gemaakt worden op een pagina.

En dat zijn er nogal wat.

Deze widgets missen twee zaken die ik zelf toch heel essentieel vind. Allereerst de mogelijkheid om voor de ‘featured image’ zelf de grootte van de te gebruiken afbeelding te kiezen. De plugin neemt namelijk de ‘midden’ resolutie, die in sommige gevallen wat vaag uit kan vallen. De afbeeldingen in de blogoverzichten zien er daardoor wat minder fris en scherp uit.

Een tweede is het ontbreken van eenzelfde mogelijkheid om voor die afbeeldingen een beeldverhouding te kiezen. Zoals je op mijn blog kan zien, zijn alle afbeeldingen in de overzichten even groot. Dat staat netjes in een lijst. In de blogoverzichten van ElementsKit moet je letterlijk alle afbeeldingen in dezelfde beeldverhoudingen hebben opgeslagen om hetzelfde effect te krijgen.

Algehele conclusie

De werkelijke uitblinker in deze plugin is de Widgets Builder. Dit is voor mij een reden geweest om ElementsKit te kopen en ook te gaan gebruiken. Dit maakt deze plugin meer dan de moeite waard. De andere functies zijn ‘nice to haves’.

Het is dus beslist geen plugin die ik ‘iedereen aan zou raden’, maar wel een plugin die ik je aan zou raden, indien je wat handigheid met HTML hebt en jouw site(s) een wat andere look dan de ‘Oh, dit is een Elementor site’ wilt geven.

Een concurrerende widget builder

Lees ook mijn artikel over de Widget Creator van Unlimited Elements.

Meer weten over Elementor?

Wil je meer weten over Elementor en misschien zelfs hoe je zelf je Elementor Website kan bouwen? Kijk dan eens naar de ‘Basiscursus Bouw zelf je WordPress Website met Elementor Pro‘. Of je kan deelnemen aan de cursus Elementor voor Gevorderden, zelf Elementor widgets maken is één van de onderdelen van deze cursus.

Wil je in drie maanden een pad volgen van ‘Elementor Newbee’ tot een aankomend Elementor expert, dan moet je beslist ook eens een blik werpen op het aanbod van klassikale cursussen van WordXPression.