Heb je een prachtige verzameling projecten die je aan de wereld wilt laten zien, maar merk je dat bezoekers door de bomen het bos niet meer zien? Het presenteren van je werk is essentieel voor elke ondernemer, maar de manier waarop je dit doet bepaalt of een potentiële klant blijft plakken of direct weer wegklikt. In dit artikel ontdek je een slimme methode om structuur aan te brengen in je visuele presentatie zonder dat je daarvoor een ingewikkelde programmeur hoeft te zijn.

Wat is de divi portfolio module precies?

De divi portfolio module is een krachtig onderdeel van de divi builder waarmee je jouw werk op een visueel aantrekkelijke manier kunt tonen. In de basis haalt deze module informatie op uit de sectie projecten binnen je wordpress dashboard. In plaats van dat je elke afbeelding handmatig moet plaatsen en linken, automatiseert deze module het proces door je meest recente werk in een raster of een lijst te tonen. Dit bespaart je enorm veel tijd bij het bijhouden van je website.

Wanneer we spreken over een filterbaar portfolio, bedoelen we een systeem waarbij de bezoeker boven de afbeeldingen op verschillende categorieën kan klikken. Als iemand bijvoorbeeld alleen je grafische ontwerpen wil zien, klikt diegene op de knop grafisch ontwerp en verdwijnen alle andere projecten direct uit beeld. Dit zorgt voor een interactieve ervaring die de gebruiksvriendelijkheid van je website aanzienlijk verhoogt.

Het belang van een overzichtelijk portfolio

Een rommelig portfolio kan potentiële klanten afschrikken omdat ze niet snel kunnen vinden wat ze zoeken. Stel je voor dat je een aannemer bent die zowel badkamers als dakkapellen plaatst. Een klant die alleen geïnteresseerd is in een nieuwe badkamer, wil niet door twintig foto’s van daken scrollen voordat hij een relevante afbeelding vindt. Door gebruik te maken van de filterbare portfolio module in divi, bied je direct overzicht.

Daarnaast draagt een goed gestructureerd portfolio bij aan je online vindbaarheid. Wanneer je jouw projecten categoriseert, help je zoekmachines zoals google te begrijpen waar je website over gaat. Voor meer informatie over hoe je teksten en modules optimaal inricht voor zoekmachines, kun je kijken naar onze divi tekst module opmaak tips voor seo. Het correct inzetten van deze elementen zorgt ervoor dat je niet alleen een mooie, maar ook een goed presterende website hebt.

Stap 1: je projecten voorbereiden in wordpress

Voordat je de module op een pagina kunt plaatsen, moet er natuurlijk wel inhoud zijn om te tonen. In wordpress vind je in het linkermenu een kopje genaamd projecten. Dit is een speciaal type bericht dat door divi wordt gebruikt. Het is belangrijk dat je hier begint met het aanmaken van je verschillende werken.

• Ga naar projecten en kies voor nieuwe toevoegen.
• Geef je project een duidelijke titel die beschrijft wat je hebt gedaan.
• Voeg een uitgelichte afbeelding toe aan de rechterkant van het scherm; dit is de foto die in het overzicht verschijnt.
• Maak aan de rechterkant categorieën aan, zoals fotografie, webdesign of advies.
• Wijs elk project toe aan één of meerdere categorieën.

Zonder deze categorieën zal de filterfunctie later niet werken, omdat de module dan simpelweg geen groepen heeft om tussen te schakelen. Zorg er ook voor dat je afbeeldingen van hoge kwaliteit zijn, maar vergeet niet ze te optimaliseren voor snelheid. Een handige tip hiervoor is het gebruik van moderne formaten, waarover je meer leest in onze gids over divi afbeeldingen optimaliseren voor webp formaat.

Stap 2: de filterbare portfolio module toevoegen

Nu je projecten klaarstaan met de juiste categorieën, is het tijd om de module op je pagina te plaatsen. Open de pagina waar je het portfolio wilt tonen en activeer de visual builder van divi. Zoek naar de module genaamd filterbaar portfolio (filterable portfolio). Let op dat je niet de standaard portfolio module kiest, want die heeft de filterknoppen aan de bovenkant niet.

Zodra je de module hebt geplaatst, verschijnt er een instellingenvenster. Hier kun je aangeven hoeveel projecten je in totaal wilt tonen. Ook kun je selecteren welke categorieën wel of niet getoond moeten worden in de filters. Dit is handig als je op een specifieke pagina bijvoorbeeld alleen je diensten voor de zakelijke markt wilt laten zien, terwijl je op een andere pagina je particuliere werk toont.

Stap 3: de lay-out en styling aanpassen

De standaardinstelling van de module is vaak een lijstweergave, maar de meeste mensen geven de voorkeur aan een raster (grid). Dit kun je aanpassen onder het tabblad ontwerp (design) bij de optie lay-out. Hier kies je voor de optie raster om je projecten in mooie kolommen naast elkaar te tonen.

Onder het tabblad ontwerp kun je werkelijk alles aanpassen aan de huisstijl van je bedrijf. Denk hierbij aan:

• De kleur van de filtertekst wanneer deze actief is.
• Het lettertype en de grootte van de projecttitels.
• De tussenruimte tussen de verschillende afbeeldingen.
• De styling van de paginering als je veel projecten hebt.

Het is cruciaal dat de filters goed leesbaar zijn op alle apparaten. Soms kan het voorkomen dat de visual builder niet direct reageert zoals je wilt. Mocht je tegen technische problemen aanlopen tijdens het ontwerpen, raadpleeg dan onze handleiding over het divi visual builder wit scherm oplossen om snel weer aan de slag te kunnen.

Geavanceerde instellingen voor een professionele look

Wil je jouw portfolio naar een hoger niveau tillen? Kijk dan eens naar de overlay instellingen. Dit is de kleur en het icoon dat verschijnt wanneer een bezoeker met de muis over een projectafbeelding beweegt. Je kunt hier bijvoorbeeld een vergrootglas tonen of een link-icoon. Door een subtiele kleurtransparantie in te stellen die past bij je logo, creëer je een zeer professionele uitstraling.

Een ander belangrijk aspect is de metadata. Dit is de extra informatie die onder de titel van een project staat, zoals de datum of de categorie. In veel gevallen ziet een portfolio er rustiger uit als je deze metadata uitschakelt. Dit kun je doen in het tabblad inhoud onder het kopje elementen. Hier kun je simpelweg de vinkjes weghalen bij de zaken die je niet wilt tonen.

Tips voor een snelle en responsieve weergave

Een filterbaar portfolio bevat vaak veel afbeeldingen, wat de laadtijd van je pagina kan beïnvloeden. Zorg er daarom altijd voor dat je afbeeldingen niet groter zijn dan nodig. Als je portfolio in een raster van drie kolommen staat, hoeven de afbeeldingen meestal niet breder te zijn dan 800 pixels. Grotere bestanden vertragen de ervaring van je mobiele gebruikers aanzienlijk.

Test je portfolio ook altijd op een smartphone. In de divi builder kun je onderaan het scherm schakelen tussen desktop, tablet en mobiele weergave. Soms staan de filterknoppen op mobiel te dicht op elkaar of worden de afbeeldingen te klein. Je kunt in de ontwerpinstellingen specifieke aanpassingen doen die alleen gelden voor mobiele apparaten, zodat je portfolio overal perfect tot zijn recht komt.

Conclusie over de divi portfolio module

Het maken van een filterbaar portfolio in divi is een uitstekende manier om je professionaliteit te tonen en je bezoekers een fijne ervaring te bieden. Door de stappen van het voorbereiden van projecten, het toevoegen van de juiste module en het verfijnen van het ontwerp te volgen, creëer je een dynamisch onderdeel op je website dat echt indruk maakt. Onthoud dat de kracht zit in de details: goede categorieën, geoptimaliseerde afbeeldingen en een styling die naadloos aansluit bij je merk.

Mocht je na deze uitleg nog vragen hebben of hulp nodig hebben bij het inrichten van je wordpress website, dan staan de experts van prospects4u altijd voor je klaar om je te ondersteunen bij het realiseren van je online ambities.