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.
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:
- Ga naar de pagina die je wilt aanpassen.
- Klik boven in het scherm op ‘open visual builder’.
- Als deze is geopend, dan zie je beneden een paarse bol met drie witte stippen staan. Klik daarop.
- 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:
- 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.
- 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:
- Bezoek de module, bijvoorbeeld ‘text’.
- Ga naar het tabblad design.
- Klik op ‘spacing’ en ga naar ‘margin’.
- Schuif over de witruimte rechts van het woord ‘margin’ en klik op het icoontje van de mobiele telefoon.
- 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.
- Open de visual builder op de pagina die je wilt aanpassen.
- Schuif met je cursor totdat je het blauw schermpje van de sectie ziet verschijnen.
- Klik op het tandwieltje voor de instellingen.
- Ga naar het tabblad ‘advanced’ en klik op ‘visibility’.
- Nu kun je aangeven voor welk type toestel je dit wilt blokkeren, bijvoorbeeld de telefoon. Klik op opslaan.
- Schuif terug met je cursor totdat het blauw schermpje van de cursor opnieuw verschijnt en klik op het symbooltje ‘dupplicate section’.
- 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.