5 manieren om je site mobiel vriendelijk te maken met Elementor

Nu meer en meer mensen gebruik maken van hun mobiele telefoon of tablet om op het internet te gaan, is het super belangrijk om het design van je website ‘responsive’ te maken.

Wat is Responsive Design?

In de context van een website betekent responsive dus dat de site reageert op verschillende aspectratio’s, dat wil zeggen dat hij er niet hetzelfde uitziet op een ander apparaat, maar zich aanpast aan het apparaat van de bezoeker.

Met een responsief design ga je alle onderdelen van je website herschikken om ze aan te passen aan een anders ingericht scherm – desktop, tablet (768px), en mobiel (360px).

Elementor heeft makkelijke ingebouwde functies om je website aan te passen aan de verschillende schermen.

Onderaan in de linker beneden hoek kan je de schermpictogrammen terugvinden. Door deze te selecteren kan je de preview van je website zien in desktop, tablet of mobiel modus.

1. Typografie aanpassen

De opmaak van je tekst op je website is heel belangrijk. Het geeft de bezoeker meteen een gevoel over je website. Komt je tekst professioneel over? Ziet hij er netjes en verzorgd uit?

Je tekst moet op elk device goed overkomen. Omdat de grootte van het scherm desktop/tablet/mobiel anders is, gaan we er ook voor moeten zorgen dat onze teksten hieraan aangepast zijn.

Voor de gewone tekst grootte, is dit meestal geen probleem. Het probleem zit hem vooral in de headers (H1 – H6). Meestal wordt voor H1 een vrij groot lettertype gekozen, wat mooi is op desktop. Op mobiel echter, vult de tekst de helft van het scherm.

Wat je dan zeker niet mag doen, is je H1 omzetten naar pakweg een H3 omwille van je SEO.

Beter is om voor je verschillende schermgroottes je lettertype aan te passen.

Dit kun je op deze manier doen:

Ga naar de ‘stijl’ tab in je element => typorgrafie => kies bij de afmetingen het tablet of mobiel icoontje, wijzig de afmetingen

Video afspelen

2. Kolommen omdraaien

Kolommen kunnen weergaveproblemen veroorzaken als ze niet zijn geoptimaliseerd voor de verschillende schermgroottes.

Standaard stapelt Elementor de kolommen onder elkaar op mobiele apparaten. Dit betekent dat de kolommen niet worden samengedrukt en dat de inhoud leesbaar blijft.

Elementor stapelt de rechter kolom onder de linker kolom.

Wat voor deze kolom op desktop…

Dit resultaat geeft op mobiel…

De foto komt onder te tekst. Als je dit niet wil, kun je de kolommen omdraaien voor tablet of mobiel.

Ga naar de ‘Geavanceerd’ tab in de sectie of binnenste sectie waarin je kolommen zich bevinden => Responsive => selecteer ‘kolommen omdraaien’ voor de devices waarvoor je de kolommen wil omdraaien.

Video afspelen

3. Hoogte en breedte aanpassen

Secties

Elementor bouwt de basisstructuur voor je content met behulp van secties, of rijen. De rijhoogte staat automatisch op ‘standaard’ ingesteld, maar dit kan je ook per apparaat aanpassen

Ga naar je sectie = > layout tab => Hoogte => Min. Hoogte en stel in voor je apparaat.

Video afspelen

Kolommen

Voor de kolommen kunnen we de breedte en uitlijning van de kolom gaan aanpassen.

Ga naar je kolom => layout tab

Video afspelen

4. Padding en marges aanpassen

We kunnen ook de marges en paddings aanpassen, zodat onze gegevens netjes op de verschillende schermen te zien zijn.

De marge is de ruimte tussen elementen, terwijl padding de ruimte is tussen de randen van een element en de inhoud.

Ga naar de ‘Geavanceerd’ tab in de sectie => Geavanceerd => pas je marges en paddings aan voor het gekozen apparaat.

5. Elementen tonen of verbergen

Sommige elementen zijn niet geschikt voor mobiel omdat ze te veel bandbreedte opslorpen. Denken we maar aan een grote video. Deze elementen zou je dan kunnen verbergen voor mobiel.

Wil je toch iets tonen, zou je bv. Voor mobiel een foto kunnen plaatsen en deze dan weer voor je desktop verbergen.

Door hiermee te spelen,  kan je je website optimaal instellen voor elk apparaat.

Klik op het element dat je wil verbergen => Geavanceerd tab => Responsive => activeer de verbergen optie voor het apparaat waarop je dit element wil verbergen.

Je zult in de preview modus merken, dat dit element in het grijs komt te staan.

Video afspelen

Ik hoop dat deze blog je een stapje dichter heeft gebracht om je website gebruiksvriendelijker te maken voor tablet en mobiel.

Heb je nog vragen? Heb je graag hulp?

Dan kan je me steeds contacteren via https://projectan.be/contact/ of een mailtje sturen aan tania@projectan.be

Wist je dat ik een 1-1 coaching geef om een kickstart te maken met je WordPress website? Kijk hier wat ik je te bieden heb: https://projectan.be/1-1-coaching/

Share on facebook
Share on linkedin
Share on whatsapp
Share on email
Share on print
Mobiel vriendelijk
Wil je Pro Tips meteen in je email ontvangen? Schrijf je hier in.