Start een chat.
Bel ons.
WhatsApp ons.
Maak een ticket aan.
Je bouwt een pagina in Divi die er op desktop strak uitziet. Daarna open je dezelfde pagina op je telefoon en ineens is de titel te groot, staat er te weinig witruimte tussen blokken of valt een knop net niet lekker in beeld. Dat is precies het moment waarop responsive editing in Divi belangrijk wordt.
Bij Webtify zien we vaak dat ondernemers vooral op hun laptop aan de site werken en pas later ontdekken dat mobiel ander gedrag vraagt. Gelukkig maakt Divi het vrij toegankelijk om per schermformaat aanpassingen te doen, zonder dat je meteen met maatwerkcode hoeft te werken.
Wat is responsive editing in Divi?
Responsive editing in Divi betekent dat je instellingen kunt aanpassen voor verschillende schermformaten, zoals desktop, tablet en telefoon. Denk aan tekstgroottes, marges, padding, uitlijning of zelfs de volgorde waarin onderdelen op mobiel zichtbaar zijn.
Volgens de documentatie van Elegant Themes kun je in Divi 5 met de Responsive Editor waardes voor meerdere breakpoints vanuit één venster bekijken en aanpassen. Daarbij erven kleinere schermen standaard de desktopwaarde, totdat je voor tablet of mobiel een aparte waarde instelt.
Waarom is het zo handig?
Een website hoeft niet op elk apparaat exact hetzelfde te ogen. Wat op een breed scherm rustig en ruimtelijk voelt, kan op mobiel juist te groot of te krap zijn. Responsive editing helpt je om die verschillen gericht op te lossen.
We krijgen bij Webtify vaak de vraag waarom een pagina “ineens rommelig” oogt op mobiel, terwijl hij in de builder goed leek. In de praktijk zit dat vaak niet in een fout, maar in het ontbreken van aparte instellingen voor kleinere schermen.
Wat je ermee kunt aanpassen
Responsive editing is vooral handig voor onderdelen die visueel veel impact hebben. Bijvoorbeeld:
- kopgroottes en regelhoogte
- padding en marges
- uitlijning van tekst of knoppen
- kolombreedtes en stapeling
- zichtbaarheid of volgorde van content op mobiel
Dat sluit goed aan op bredere keuzes in je ontwerp. Lees daar ook meer over in onze blog over webdesign principes.
Hoe werkt responsive editing in Divi praktisch?
In Divi open je eerst de instellingen van een sectie, rij, kolom of module. Bij veel opties zie je een responsive-icoon. Zodra je daarop klikt, kun je aparte waardes invullen voor desktop, tablet en telefoon. In Divi 5 laat de Responsive Editor die waardes overzichtelijk in één paneel zien.
Stel dat je een H1-kop op desktop op 48px zet. Op tablet laat je die misschien overerven, maar op telefoon maak je hem 32px. Zo blijft de kop krachtig, zonder dat hij te dominant wordt op een klein scherm.
Zo pak je het slim aan
- bouw eerst een nette desktopversie
- controleer daarna tablet en mobiel apart
- pas alleen aan wat echt nodig is
- begin met typografie en witruimte
- test altijd ook knoppen, formulieren en rijen met meerdere kolommen
Te veel losse mobiele uitzonderingen maken een pagina namelijk onnodig ingewikkeld. Vaak bereik je al veel met een paar gerichte aanpassingen in tekstgrootte, spacing en kolomopbouw.
Waar gaat het vaak mis?
Een veelgemaakte fout is dat alles handmatig per apparaat wordt overschreven. Dan verlies je overzicht. Elegant Themes geeft juist aan dat Divi standaard werkt met overerving: tablet en mobiel nemen de desktopwaarde over, tenzij je die specifiek wijzigt. Dat is handig, zolang je het bewust gebruikt.
Een tweede valkuil is dat ondernemers alleen naar tekst kijken. Maar responsive gedrag zit ook in kolommen, beeldverhoudingen en tussenruimte. Zeker bij complexere layouts in Divi 5 is het slim om ook de structuur zelf kritisch te bekijken. Gebruik je Divi intensief, dan zijn ook onze uitleg over Divi 5 en wat de Divi Visual Builder precies is nuttig om erbij te pakken.
Wanneer is responsive editing echt onmisbaar?
Voor simpele pagina’s met weinig modules kom je vaak al ver zonder veel aparte instellingen. Maar zodra je werkt met hero-secties, meerdere kolommen, call-to-actions of lange salespagina’s, wordt responsive editing al snel onmisbaar.
Bij Webtify zien we dat vooral mobiel het verschil maakt in conversie. Een knop die net te laag staat, een tekstblok dat te lang oogt of witruimte die niet klopt, kan al genoeg zijn om onrust te geven. Dat raakt niet alleen het ontwerp, maar uiteindelijk ook hoe goed je pagina werkt. In dat opzicht sluit dit onderwerp ook aan op wat CRO op een website betekent.
Een goede Divi-pagina is pas af als hij op elk scherm klopt
Hoe werkt responsive editing in Divi? Simpel gezegd: je past per schermformaat instellingen aan, zodat je website niet alleen op desktop, maar ook op tablet en mobiel goed oogt en prettig werkt. Divi maakt dat proces laagdrempelig, vooral met de Responsive Editor in Divi 5.
Werk je regelmatig in Divi, dan is dit geen extra stap maar gewoon onderdeel van goed websitebeheer. Door bewust te kijken naar tekst, spacing en layout per apparaat, maak je pagina’s die rustiger ogen en beter presteren.
Responsive editing in Divi betekent dat je instellingen per schermformaat kunt aanpassen, zoals voor desktop, tablet en telefoon. Zo zorg je dat onderdelen zoals tekst, witruimte en kolommen op elk apparaat goed werken.
Je vindt responsive instellingen in de module-, rij-, kolom- of sectie-instellingen. Bij veel opties staat een responsive-icoon waarmee je aparte waardes kunt instellen voor verschillende apparaten.
Meestal pas je zaken aan zoals lettergroottes, regelhoogte, marges, padding, knopuitlijning en kolomopbouw. Dat zijn onderdelen die op mobiel vaak anders moeten werken dan op desktop.
Nee, dat hoeft niet. Divi werkt standaard met overerving. Dat betekent dat tablet en mobiel de desktopinstelling overnemen, totdat je zelf een aparte waarde invult voor een kleiner schermformaat.
Omdat een pagina die alleen op desktop goed oogt, op mobiel alsnog onrustig of onhandig kan zijn. Responsive editing helpt je om je website gebruiksvriendelijker, rustiger en conversiegerichter te maken op elk apparaat.
