Op deze pagina heb ik een overzicht gemaakt van alle divi modules die we ter beschikking hebben om onze webpagina’s vorm te geven.Werken met modules is zeer belangrijk om webpagina’s te maken die op alle toestellen goed weergegeven kunnen worden. De modules regelen alle inhoud zodat alles altijd goed zichtbaar en bruikbaar is op zowel desktop als smartphone.

Het ordenen van de modules is ook belangrijk. Op een smartphone zullen de modules meestal onder mekaar zichtbaar zijn, terwijl op desktops de modules over de breedte van het scherm worden getoond. Hiervoor bestaan er verschillende indelingen zoals secties, rijen, kolommen, etc…

We beginnen met het eerste onderdeel:

FULLWITH MODULES: dit zijn modules die de volledige breedte van het scherm gebruiken

Wil je meer informatie over hoe je een module moet configureren, dan kan je in google altijd divi + de naam van de module ingeven om meer info te krijgen in een filmpje wat er allemaal mogelijk is met deze module. (vb: divi fullwith header module, geeft info over het gebruik van onderstaande module)

Je kan de fullwith image module zien onder deze tekst. Er zijn veel aanpassingsmogelijkheden, maar het belangrijkste is dat deze module zich aanpast op elk scherm waarop wordt gekeken.

Hieronder zie je de fullwith map module. Deze module werkt enkel met een google API key die ik nog niet heb aangevraagd. Maar als je dit nodig hebt, heb je hiermee enorm veel mogelijkheden om locaties te tonen.

hieronder zie je de fullwith menu module. Deze toont 1 van de gedefinieerde menu’s uit het systeem. (een menumoet je eerst definiëren voor je hem kan gebruiken)

Hieronder zie je de projectmodule. Deze toont projecten per categorie of alle projecten tesamen.

Hieronder zie je de fullwith Post slider. Dit dient om alle blogs weer te geven in een sliderstructuur. Je kan ook uitfilteren per categorie

Hieronder zie je de fullwith post titel settings, die kan gebruikt worden om in samenwerking met andere modules een titel toe te voegen

hieronder zie je de fullwith slider. Dit is de module die op onze klimaan pagina bovenaan staat en onze bezoekers toelaat om snel naar bepaalde belangrijke onderdelen te surfen. Niet onbelangrijk, inplaats van een foto als achtergrond kunnen we ook filmpjes als achtergrond gebruiken.

Dit waren alleFULLWITH MODULES. We gaan voort met de

REGULAR MODULES. 

Deze modules kunnen onder, maar ook naast mekaar worden geplaatst. De module zal zich dan aanpassen naar de breedte die hij toegewezen krijgt. Bij vertonen op smartphone worden de naast mekaar geplaatste modules meestal onder mekaar getoond.

Hieronder staat de Blog post module. De afbeelding neemt de breedte die jij hebt toegewezen. Je kan ook kiezen hoeveel posts je weergeeft. In dit voorbeeld heb ik 1 ingesteld, omdat dit anders een zeer lange module wordt.

hieronder staat de comments module. Comments zijn momenteel niet gedefinierd op onze site.

hieronder staat de contact form module. Deze module wordt niet gebruikt in ons systeem. Wij gebruiken een extra plugin genaamd “contact form 7”, die veel meer mogelijkheden heeft dan deze module. Toch is de opmaak van deze module veel mooier. We kunnen dit aanpassen door CSS (Cascading style sheets) toe te passen op Contact form 7.

Hieronder zie je (met moeite) de divider module. Deze trekt een lijn tussen verschillende modules

Hieronder zie je de “filterable portfolio module”. Gebruikers kunnen hiermee de projecten filteren per categorie. Deze module kan zeer lang worden en dus heb ik maximum 1 post gedefinieerd. De module past zich aan aan de breedte die is toegewezen.

Hieronder zie je de image gallery module. Deze toont foto’s.

hieronder zie je de image module. Deze toont een foto. Het is belangrijk om foto’s in modules te gebruiken en niet constant tussen de tekst, omdat deze module de foto’s veel beter aanpast naar het gebruikte scherm dan foto’s in tekst.

hieronder zie je de map module. Deze is gelijk aan de fullwith map module, behalve dat hij zich gaat aanpassen als er andere modules naast worden geplaatst. Op dit moment is de google API key niet geconfigureerd, dus zie je geen gegevens

hieronder zie je de portfolio module, ik heb weer maar 1 post gedefinieerd, omdat deze anders heel, heel lang kan worden.

Hieronder zie je de post navigation module. Deze toont enkel de naam van de vorige post of volgende post. Als je dan het aantal posts van de vorige module aanpast, kan de gebruiker toch navigeren in de verschillende posts.

Hieronder zie je de post slider module. Deze laat toe om te “sliden” tussen de verschillende posts. Je kan ook enkel posts van een bepaalde categorie tonen.

hieronder zie je de search module. Je ziet dan een invoerzone en een zoekknop. Deze module is zeer krachtig om inhoud te zoeken op de site.

Hieronder zie je de pricing module. Deze dient om de prijs van verschillende diensten of artikelen mooi weer te geven.

Hieronder zie je de shop module. Deze is extreem uitgebreid, maar momenteel niet geconfigureerd, daarom zie je momenteel maar gewoon een “shortcode”, dit is het wordpress systeem om verschillende technologie in pagina’s te integreren ([ ])

Hieronder zie de “sidebar” module. Deze maakt een sidebar op elke pagina waar ze wordt geplaatst, zodat gebruikers makkelijker de inhoud van de site kunnen verkennen. De inhoud van de sidebar, wordt zoals de menu’s gedefinieerd in de native wordpress.

Hieronder zie je de social media module: hij plaatst icoontjes van de sociale media (fb, twitter, instagram, etc..)

Hieronder zie je de team members module. We hebben er verschillende die de medewerkers van klimaan op verschillende manieren kunnen weergeven

Team members grid module

Team members horizontal grid module

Team members list module.

Team members slider module

team members table module.

YDe tekstmodule bestaat natuurlijk ook. Dit is de meestgebruikte module.

Hieronder zie je de video module. Hij laat toe om een video af te spelen, maar past zich ook aan aan beeldschermafmetingen en andere modules

Hieronder zie je de video slider module. Hij laat toe om verschillende video’s in hetzelfde frame te tonen. Je kan zelf kiezen hoeveel video’s je wil configureren.

Dit is het overzicht van alle verschillende modules. Er zijn echter enorm veel configuratiemogelijkheden en dat is de kunst. Ik stel voor om nooit tekstkleuren aan te passen, maar de css style van het thema te volgen. Enkel op die manier blijft de site mooi 1 geheel, anders gaat elke pagina er anders uitzien..