Hoe maak je een website responsive in Divi?

1 Feb 2023 | webdesign

website responsive in divi

Tegenwoordig kun je niet zonder mobielvriendelijke website. Want ongeveer de helft van je bezoekers bekijkt je site op een telefoon. Daarom is het belangrijk dat het design van je website zich aanpast, aan verschillende apparaten. Responsive webdesign noemen we dat. Maar hoe maak je een website responsive in Divi? In dit artikel krijg je de uitleg!

Soms kom je ze nog weleens tegen: websites die niet zijn aangepast aan mobiele telefoons of tablets. Super jammer is dat, want een mobiel design dat ontbreekt of niet werkt, jaagt bezoekers weg. Daarom is een aantrekkelijk responsive design heel belangrijk.

Test het maar eens uit: bezoek bijvoorbeeld deze website op je desktop en op je mobieltje. Dan zie je dat het design er anders uitziet op de twee apparaten. Dat komt omdat de layout is aangepast voor mobiele toestellen. De website die je nu bekijkt is in het populaire WordPress-thema en bouwer Divi gebouwd. Divi heeft namelijk een heel handige tool om je website klaar te maken voor mobiel gebruik! Daarnaast is dit superfijne software om mee te werken: je ziet direct resultaat, what you see is what you get.

Moet je nog starten met Divi? Je kan in Divi ook hele mooie blogs maken. Lees hier hoe je met Divi een geweldige blog maakt!

Responsive website in Divi bekijken

Voor je erin vliegt, is het handig om eerst de desktopversie van je website te maken. Als deze klaar is, dan kun je deze gaan aanpassen voor tablets en telefoons. Vaak kun je je website in WordPress mobielvriendelijk maken via de customizer of systeemaanpasser, maar bij Divi werkt dat net even anders.

Op deze manier kun je in Divi het design op verschillende toestellen bekijken:

  1. Ga naar de pagina die je wilt aanpassen.
  2. Klik boven in het scherm op ‘open visual builder’.
  3. Als deze is geopend, dan zie je beneden een paarse bol met drie witte stippen staan. Klik daarop.
  4. Links verschijnt een zwart balkje met witte icoontjes. Je herkent de desktop, het tablet en de mobiele telefoon. Door daarop te klikken, zie je de lay-out van je site voor deze apparaten.

Belangrijke opmerking: dit kan er altijd anders uitzien dan op jouw eigen apparaten, je ziet hier een simulatie. Voor je je website lanceert, test je dit best eventjes uit op de verschillende beelddragers.

In je mobiele versie zien je header (het bovenste stuk van je website) en je menu er anders uit. Wil je weten hoe je een mooie mobiele header in Divi maakt? Lees hier hoe je een geweldig uitklapmenu voor mobiele apparaten in Divi kan maken!

Responsive website in Divi aanpassen in het algemeen

Als je bovenstaande stappen hebt uitgevoerd, zie je dat Divi het design automatisch aanpast aan verschillende apparaten. Soms gaat dat automatisch al goed, maar heel vaak moet je dingen aanpassen.

Wil je het webdesign voor tablet of mobiele telefoon in Divi aanpassen? Dan kan dat op twee manieren:

  1. Via het zwart balkje zet je de visual builder op tablet view of mobile view. Vervolgens schuif je over het onderdeel van Divi dat je wilt aanpassen en klikt erop.
  2. Je werkt standaard vanuit desktop view, je bezoekt het gedeelte wat je wilt aanpassen en klikt erop.

Beide manieren kunnen en beide manieren kunnen even goed werken.

Responsive webdesign in Divi aanpassen per sectie, rij of module

Dit is het gedeelte waarbij je goed moed moet opletten: heb je een specifiek design gemaakt dat enkel voor een bepaald type apparaat geldt? Volg dan deze voorbeeldstappen om de marges van de tekst aan te passen per apparaat:

  1. Bezoek de module, bijvoorbeeld ‘text’.
  2. Ga naar het tabblad design.
  3. Klik op ‘spacing’ en ga naar ‘margin’.
  4. Schuif over de witruimte rechts van het woord ‘margin’ en klik op het icoontje van de mobiele telefoon.
  5. Nu kun je per apparaat de marges van de tekst aanpassen.

Controleer dit voordat je opslaan drukt. Je doet dat door na het invullen van de waarden te klikken op de verschillende icoontjes van het type apparaat. Overigens, je kan deze stappen toepassen op ongeveer alle modules, rijen, kolommen en secties.

Divi theme and builder is één van mijn favoriete tools. Benieuwd naar meer? Ontdek hier mijn favoriete tools voor zowel webdesign als fotografie.

Speciaal webdesign creëren voor bepaalde apparaten

Met bovenstaande stappen kun je al een heel eind komen. Maar soms bots je op de beperkingen van dat systeem en is het beter om in je pagina een deels aangepast design te maken voor een mobieltje of tablet. Dat komt soms eenmaal nu net even beter uit, zoals bij grote omslagfoto’s bovenaan pagina’s met tekst erin. Onderstaande voorbeeldstappen gelden voor het aanpassen van omslagfoto’s met tekst, maar kunnen evengoed toegepast worden op andere elementen uit de visual builder.

  1. Open de visual builder op de pagina die je wilt aanpassen.
  2. Schuif met je cursor totdat je het blauw schermpje van de sectie ziet verschijnen.
  3. Klik op het tandwieltje voor de instellingen.
  4. Ga naar het tabblad ‘advanced’ en klik op ‘visibility’.
  5. Nu kun je aangeven voor welk type toestel je dit wilt blokkeren, bijvoorbeeld de telefoon. Klik op opslaan.
  6. Schuif terug met je cursor totdat het blauw schermpje van de cursor opnieuw verschijnt en klik op het symbooltje ‘dupplicate section’.
  7. Ga je sectie designen en geef via het tabblad ‘advanced’ aan waar je dit deel niet wilt laten zien. Als je nu desktop en tablet aangeeft, verschijnt deze layout enkel op mobiel.

Conclusie

Zo zijn er dus in Divi verschillende manieren om je website mobielvriendelijk te maken. Ik zou zeggen: bouw eerst je desktopversie. Als deze klaar is, bekijk je deze op je mobiele telefoon en zoek je uit waar je design niet klopt of niet mooi is. Dat ga je proberen aan te passen via de settings van het onderdeel zelf. Lukt dat niet? Maak dan specifieke content voor bepaalde type apparaten. Ik wens je hier heelveel succes mee!

Is jouw website mobielvriendelijk? En hoe heb je dat gedaan?

Dit artikel bevat een affiliate link. Kijk hier voor meer informatie.

Vond je dit artikel interessant? Deel het via de knoppen op social media!

Op de hoogte blijven? Schrijf je in en ontvang telkens mijn nieuwste blogs in je mailbox!

Lees hier meer

Fietsen in Brussel als ondernemer

Is fietsen in de Belgische en Europese hoofdstad levensgevaarlijk? Die tijd ligt gelukkig al een paar jaar achter ons. Deze stad per fiets doorkruisen is niet alleen duurzaam en een snelle manier om je te verplaatsen, het is ook nog eens een goede work-out. Twijfel je over fietsen in Brussel?...

Digital cleanup van je e-mail, website en cloud

Wist je dat je ook digitaal een ecologische voetafdruk hebt? Deze kan behoorlijk groot zijn voor een persoon of onderneming. Waarom is dat? Hoe kun je deze verkleinen? Lees dit artikel en doe mee aan de digital cleanup van je e-mail, website en cloud!De digitale ecologische voetafdruk is voor...

Welke bouwer is het beste: Divi of Elementor?

Zowel Divi als Elementor zijn razend populaire WordPress-themabouwers. Je kan er min of meer hetzelfde mee, maar ze werken alle twee wel heel anders. Maar welke is nu voor jou het beste? Die keuze is vooral persoonlijk. Aan de hand van de voor- en nadelen van dit artikel kun je kiezen of Divi...

Pin It on Pinterest

Share This