Afbeeldingen in je Divi thema gebruik je zo

Een aantal klanten van ISI Media gebruikt Divi als thema voor de vormgeving van de WordPress-website. Divi heeft veel modules, en dat maakt het soms lastig om te bepalen welke bestandsindelingen je moet gebruiken voor afbeeldingen en illustraties. In deze gids leggen we je uit welke bestandsformaten, welke resolutie en welke afmetingen je het beste kunt gebruiken.

Optimaliseer je afbeeldingen voor het Divi thema
Het vinden van de beste afmetingen voor de website die met het Divi-thema werkt, zijn er enkele factoren van belang.

• Aspect ratio ofwel beeldverhouding
  De (verhouding tussen) de hoogte en breedte van de afbeelding.
• Kolomindeling van een pagina
  De indeling in kolommen van een pagina bepaalt wat de maximum breedte van de afbeelding moet zijn.
• Responsiviteit
  Verschillende schermformaten zorgen voor andere breedtes/hoogte van de afbeeldingen
• Modules
  Er zijn meerdere Divi-modules waarbinnen je afbeeldingen kunt gebruiken. Ook de modules zelf hebben hun eigen ideale afmetingen.

Aspect ratio

De aspect ratio of beeldverhouding drukt de proportionele dimensies van de breedte en hoogte van een beeld(scherm) uit. De twee populairste beeldverhoudingen zijn 4:3 en 16:9. De twee meest gebruikte beeldverhoudingen zijn 4:3 en 16:9. Dit ken je wel van je televisie of pc-monitor.

Het getal links van de dubbele punt staat voor de breedte (x-as) en het getal rechts van de dubbele punt is de hoogte (y-as). De 3:4 beeldverhouding is in Divi handig voor het weergeven van portretten, maar meestal zul je 16:9 gebruiken.

Wil je de aspect ratio voor je afbeelding berekenen, kun je hier terecht: https://andrew.hedges.name/experiments/aspect_ratio/ of hier https://calculateaspectratio.com/

 

Kolomindeling

Binnen Divi kun je een pagina opdelen in kolommen. Deze kolommen vul je vervolgens met modules, zoals de afbeeldingenmodule. Ik ga uit van de standaardbreedte van 1080px. Pas je zelf je breedte van je website aan, dan wijzigen deze getallen een klein beetje.

 

De volgende afmetingen volgen de 16:9 beeldverhouding standaard (in pixels). Dit is handig om je foto’s geschikt te houden voor mobiel gebruik.

1 kolom: 1080 x 608
1/2 kolom: 510 x 287
1/3 kolom: 320 x 181
1/4 kolom: 225 x 128
2/3 kolom: 700 x 394
3/4 kolom: 795 x 447

De volgende afmetingen volgen de 4:3 beeldverhouding standaard (in pixels):

1 kolom: 1080 x 810
1/2 kolom: 510 x 384
1/3 kolom: 320 x 241
1/4 kolom: 225 x 170
2/3 kolom: 700 x 526
3/4 kolom: 795 x 597

Afmetingen van je foto’s voor de verschillende Divimodules

 

Module afbeeldingen

Wanneer je module Afbeeldingen gebruikt, volg je de 16:9 en 4:3 afmetingen hierboven per kolomindeling. Bijvoorbeeld: als je 2 kolommen gebruikt met een 4:3 verhouding, wordt je afbeelding 510x384px

Het nadeel is dat het de kolombreedte niet vult op kleinere schermen zoals tablets. Wanneer de schermafmeting onder het breekpunt van 1080px zakt, verandert de 4-koloms layout in een 2-koloms layout. Deze indeling met 2 kolommen biedt ruimte voor een beeldformaat met een breedte van 370px. Dus als je de afbeelding de kolombreedte op tabletdisplays wilt, gebruik dan een afbeeldingsgrootte van 370px in plaats van de 225px breedte.

Wil je de maximale breedte van een kolom op ieder device weten, adviseert Divi de volgende formaten voor elke kolomopmaak.

Voor 16:9 beeldverhouding:

1 kolom: 1080 x 608
2/3kolom: 770 x 433
3/4 kolom: 770 x 433
1/2kolom: 770 x 433
1/3kolom: 770 x 433
1/4kolom: 370 x 208

 

Voor 4:3 beeldverhouding:

1 kolom: 1080 x 810
2/3 kolom: 770 x 578
3/4 kolom: 770 x 578
1/2 kolom: 770 x 578
1/3 kolom: 770 x 578
1/4 kolom: 370 x 278

Module Slider en Post Slider Achtergrondafbeeldingen

De slider backgrounds moeten minimaal dezelfde breedte hebben als de kolom waar je ze in plaatst. De afmeting van de afbeelding is daarmee gelijk aan de afmetingen voor de kolommen die hierboven staan.

De hoogte van je slider wordt bepaald door de inhoud van de schuifbalk, dus het kan nodig zijn om de hoogte van je achtergrondafbeelding aan te passen.

De volgende afbeeldingsafmetingen volgen de 16:9 beeldverhouding standaard:

1 kolom: 1080 x 608
3/4 kolom: 795 x 447
2/3 kolom: 700 x 394
1/2 kolom: 510 x 287
1/3 kolom: 320 x 181
1/4 kolom: 225 x 128

De volgende beeldverhoudingen volgen de 4:3 beeldverhouding standaard:

1 kolom: 1080 x 810
3/4 kolom: 795 x 597
2/3 kolom: 700 x 526
1/2 kolom: 510 x 384
1/3 kolom: 320 x 241
1/4 kolom: 225 x 170

Als je de slider breder dan je kolom wil laten zijn op mobiele apparaten, gebruik dan:

 Voor 16:9 beeldverhouding:

1 kolom: 1080 x 608
2/3 kolom: 770 x 433
3/4 kolom: 770 x 433
1/2 kolom: 770 x 433
1/3 kolom: 770 x 433
1/4 kolom: 370 x 208

Voor 4:3 beeldverhouding:

1 kolom: 1080 x 810
2/3 kolom: 770 x 578
3/4 kolom: 770 x 578
1/2 kolom: 770 x 578
1/3 kolom: 770 x 578
1/4 kolom: 370 x 278

 

Module Volle Breedte Achtergrondafbeeldingen

De breedte van je ‘fullwidth slider’ wordt bepaald door de breedte van je browser. Voor grotere monitoren is het veilig om een beeld te gebruiken dat 1920px breed is. De hoogte van de slider kun je aanpassen al naar gelang je eigen behoefte

Module Slider en Post Slider Uitgelichte Afbeelding (featured image)

Afbeeldingen met dia’s verschijnen alleen in sliders die in de kolom 1, ⅔ of ¾ kolom staan. Pas de slides aan voor desktop- en mobiele apparaten:

1 kolom: 450
3/4 kolom: 330
2/3 kolom: 320

Is je browser minder dan 768px breed, dan wordt de slider niet getoond.

Module blogs Uitgelichte afbeeldingen  / op volle breedte

De uitgelichte afbeeldingen moeten net zo breed zijn als de kolom waar ze in staat. Als je bijvoorbeeld een blogmodule gebruikt in een tweederde kolom met een rechter zijbalk, dan moet je een afbeelding gebruiken die minstens 700px breed is, omdat dat de breedte is van een tweederde kolom in Divi.

1 kolom: 1080
3/4 kolom: 795
2/3 kolom: 700
1/2 kolom: 510
1/3 kolom: 320
1/4 kolom: 225

 

Module blogs Uitgelichte afbeeldingen  / raster (grid)-modus

Breedte: Gelijk aan de grootte van de enkele kolombreedte van je bericht (standaard 795px).

1 kolom: 1080
3/4 kolom: 795
2/3 kolom: 700
1/2 kolom: 510
1/3 kolom: 320
1/4 kolom: 225

Bij een 16:9 aspect ratio, adviseer ik zelf 795x447pixels voor blogs / nieuwsartikelen in deze grid-modus gebruikt.

Algemene richtlijnen voor achtergrondafbeeldingen

Wanneer je een achtergrondafbeelding bij een module gebruikt, moet de achtergrondafbeelding altijd minstens even breed zijn als de kolom waarin deze zich bevindt. Volg dan de richtlijnen voor Divi’s kolombreedtes:

Bij de volgende modules gebruik je een 1920px brede achtergrondafbeelding:

• Header op volle breedte
• Volledige breedte Portefeuille
• Volledige breedte slider
• Berichttitel op volle breedte
• Afbeelding op volledige breedte

Het is ook belangrijk te weten dat voor deze modules de hoogte van de achtergrondafbeelding wordt bepaald door de hoeveelheid inhoud, zodat je de hoogte zelf kunt aanpassen.

Achtergrondafbeelding op volledige grootte

Aangezien de meeste monitoren de 4:3 en 16:9 beeldverhouding volgen en slechts 1280px of 1920px breed zullen zijn, adviseert Divi deze afmetingen:

16:9 – 1920 x 1080
4:3 – 1280 x 960 (aanbevolen voor portretten)

Logo’s

Met de fullwidth header module kun je een logo plaatsen binnen de header – het gebied met logo en menu bovenaan.

Hier zijn geen standaardafmetingen voor. Hou het logo groot genoeg om duidelijk te kunnen zien op grote desktops, maar klein genoeg om op kleinere apparaten zoals smartphones te passen.

Een voorbeeld is 93x43px. Dit zijn de afmetingen van het Divi-logo.