Je hebt misschien al door dat er een verschil kan zitten in de weergave op de desktop en mobiele versie. In dit artikel ga ik je uitleggen wat de reden hiervan is en hoe je jouw pagina het beste kunt stijlen voor de mobiele versie.
Inhoud
De reden
Een mobiel heeft uiteraard een veel kleiner scherm dan je computer. Hierdoor is het niet effectief om precies dezelfde website te tonen op zowel desktop als mobiel. Afbeeldingen worden daarom op mobiel gecomprimeerd voor een betere laadtijd.
Welke units worden anders getoond?
Background units (Hero with BG-Image / Content with BG-image / Video Hero with BG Image)
Video units (Background Video / Full-Screen BG Video / Half-Screen BG Video / Background Video with Popup)
Testimonials (Testimonial Slider)
Hoe komen de units eruit te zien?
Even een voorbeeld... 👇
In dit voorbeeld is gebruik gemaakt van de Hero BG Image unit - deze wordt in zijn geheel weergegeven op de desktop, maar gecentreerd op de mobiele versie.
Het kan ook zijn dat jouw afbeelding wordt vervangen voor een zwarte achtergrond, zoals bij de Full-Screen -of Video Background units 👇
De resolutie of grootte kan je niet aanpassen, dus ga ik je nu een mooie workaround uitleggen, zodat jij straks een strakke pagina hebt voor de mobiele pagina :-)
De oplossing
Het is mogelijk om een pagina te bouwen, die alleen zichtbaar is voor de desktop óf alleen de mobiele versie. Zo maak je onderscheid en kun je jouw mobiele versie optimaliseren.
Bij het aanmaken van een unit kan je aangeven of deze alleen getoond mag worden op mobiel 📱 of desktop 💻 . Dat doe je door in de Build Modus naar rij instellingen te gaan en op één van deze icoontjes in de unit te klikken:
Om jouw background afbeelding toch te tonen op de mobiele versie, kan je gebruik maken van de Simple Content unit - dé unit die je volledig kunt stijlen naar wens.
1. Klik op + Nieuwe rij toevoegen > Content > Simple Content:
2. Voeg je titel toe en selecteer het tekstvak om vanuit de toolbar op het afbeelding-icoontje te klikken:
3. Selecteer de gewenste afbeelding en maak gebruik van de toolbar voor bijvoorbeeld opsommingstekens. Bouw vervolgens van boven naar beneden:
Titel
Afbeelding
Beschrijving / Tekst
Opsommingstekens
Button
Mijn voorbeeld is nogal saai en niet bijzonder op de mobiele versie. Met de juiste content kan jij het voor elkaar krijgen om een prachtige pagina in elkaar te zetten. Voor nu gebruik ik onze homepage van imu.nl even als voorbeeld. Benieuwd naar het resultaat? 👇
Het resultaat
Met deze workaround kan je er dus voor zorgen dat jouw pagina nét zo mooi is op de mobiel als op de dekstop!