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.

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.

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.
​

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 de 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. Je voegt deze unit toe op de volgende manier:

1. Klik op het Plusje onderaan je pagina in de Page Builder.

2. Klik op Content en dan op Simple content.

3. Selecter het tekstvak en klik op het afbeelding-icoontje:

4. Selecteer de gewenste afbeelding. En bouw de unit verder af door een titel, ondertitel, bullet-points, beschrijving en / of tekst toe voegen.

Met deze workaround kan je er dus voor zorgen dat jouw pagina nét zo mooi is op de mobiel als op de dekstop!