Het wordt hoog tijd om deze add-on onder de aandacht te brengen. Wij gebruiken deze nu bijna op elke website. Of het nu gaat om een blog website of een webshop; in dit artikel laten we je zien waarom de Listings functie van JetEngine je tijd gaat besparen en meer mogelijkheden biedt.
Wat zijn Listings?
Met een listing toon je bepaalde post types van je website. De meest voorkomende zijn de blog- en nieuwsartikelen, maar je kunt ze bijvoorbeeld ook gebruiken voor andere post types zoals vacatures, teamleden, cases, diensten of (web)shop producten. In Elementor Pro gebruik je hiervoor posts widget.
De posts widget van Elementor is een prima widget voor een standaard website. Maar als je hier al een tijdje mee werkt, vind je de lay-out mogelijkheden wellicht iets beperkt. Met de listing functie van JetEngine kun je custom skins (listings) maken voor het weergeven van je post types.
De voordelen van JetEngine – listings
1) Alle dynamische content weergeven
De listing maak je gewoon met Elementor. Je maakt één item die vervolgens via de listing gedupliceerd wordt voor alle posts. Dit betekent dat je ook alle beschikbare dynamische content kunt inladen in de listing. Voor Mister Kerstboom maakten wij bijvoorbeeld een custom listing voor de weergave van de producten in de shop. Zo wilden we bijvoorbeeld de hoogte en de diameter (producteigenschappen) weergeven in de listing. Maar ook een vergelijkingsknop (ook een plugin van Jet) en favorieten wilden we tonen. Ook wilden we dat de boom veel meer de aandacht zou trekken in plaats van de titel. Dat is hiermee goed gelukt.
In principe kun je dus alle dynamische content in de listing tonen. Denk bijvoorbeeld aan ingesteld custom fields. Zo hebben wij op onze website een custom post type ‘Testominals’, waarin de onderstaande extra velden hebben ingevoegd:
- Naam
- Functie
- Aantal sterren
Om de testimonials te tonen, hebben we onderstaande listing gemaakt.
Volledige content tonen (niet klikbaar)
Een ander bijkomend voorbeeld is dat de listing niet klikbaar hoeft te zijn. Dit is wel waar je het doorgaans voor gebruikt, maar in het voorbeeld hierboven, de testimonials, wilden we alleen de volledige content tonen. Je kunt dan ook niet verder klikken.
2) Vrijheid in vormgeving (opmaak met Elementor)
Je hebt ook meer vrijheid in de vormgeving. De plaats van de titel, de grootte van de afbeelding of je maakt zelf een badge voor de listing. Zo maakte we voor Straverf Portraits & Paintings bijvoorbeeld een listing waar de status (custom taxonomie voor ingesteld) van het kunstwerk onderaan elk werk wordt getoond. Met behulp van dynamische kleuren, is de badge voor ‘verkocht’ rood en voor ’te koop’ groen. Ook had deze klant de wens om de prijzen voor zijn werken voor deze product-categorie niet te tonen. Dat hebben we ook ingesteld.
Slider functionaliteit
Dit is een functie die ik nog steeds mis in de post widget van Elementor, maar gelukkig wel in JetEngine zit: de slider functie. Handig als je niet alle posts onder elkaar wilt weergeven, maar juist in een slider. Zoals wij met de testimonials hebben gedaan.
3) Specifieke posts weergeven
Met JetEngine kun je niet alleen kiezen welke post type je wilt weergeven, maar je kunt ook extra filters toepassen. Dit is bijvoorbeeld handig als je gerelateerde content wilt tonen. Meestal doe je dit bij blogartikelen bijvoorbeeld op basis van categorie. Maar wat als je alles binnen een bepaalde categorie wilt tonen van hetzelfde type content? Bijvoorbeeld alleen video content in de categorie ‘Marketing’. Dan kun je dit instellen met de Listing widget van JetEngine.
Voor Mister Kerstboom hebben we dit gedaan voor gerelateerde producten. Zo wilden we bomen tonen van dezelfde hoogte in dezelfde categorie. Zodat de bezoeker goed alternatieven kan bekijken. Op de single product pagina hebben we daarom onderstaande alternatieven toegevoegd (hier zie je ook de slider functionaliteit terugkomen).
4) Een listing voor de hele website en archiefpagina’s
Nog een hele goede reden om JetEngine listings te gebruiken; je maakt namelijk één listing die je overal op de website kunt toevoegen. Pas je de stijl aan, dan is het overal aangepast. Op onze eigen website hebben we voor de blogartikelen ook gebruik gemaakt van JetEngine listing. De belangrijkste reden hiervoor is dat je deze ook kunt gebruiken voor de archiefpagina’s. Je geeft dan aan in Listing widget, dat je deze als archief wilt gebruiken. Wanneer je werkt met Elementor Pro heb je een aparte ‘Archive widget’. Die heeft dezelfde lay-out mogelijkheden als de posts widget, maar die styling kun je niet kopiëren tussen de widgets.
Waarvoor kun je listings nog meer gebruiken?
De listing functionaliteit van JetEngine kun je voor alle post types gebruiken. Denk bijvoorbeeld ook aan een autodealer die bepaalde specificaties in de listing wil weergeven. Of een makelaar die specificaties van het huis wil tonen. Of voor events waarin je prijs, datum en locatie wilt tonen. Ik kan zo nog wel even doorgaan.
Ongetwijfeld kun je nog veel meer met de listing functie, maar dit zijn voor ons de belangrijkste functionaliteiten.
Hopelijk heeft dit artikel je geïnspireerd om aan de slag te gaan met JetEngine!
