Naar de hoofdinhoud
Tips voor de mobiele versie

Worden units anders of niet getoond op mobiel? Hier lees je waarom, om welke units het gaat en hoe je dit kunt oplossen.

Maartje Daems avatar
Geschreven door Maartje Daems
Meer dan een week geleden bijgewerkt

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.

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?

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


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!

Was dit een antwoord op uw vraag?