Elementor Pro mobiel aanpassen: zo maak je je website responsive
Een website die er op desktop fantastisch uitziet, kan op een smartphone of tablet behoorlijk tegen vallen. Het kan zo erg zijn dat teksten buiten het scherm vallen of dat afbeeldingen veel te groot (of juist veel te klein) zijn. Maar dat zijn pas de problemen die je meteen ziet.
Want ook als alle elementen wel lekker binnen het scherm vallen en er op het eerste oog goed uit zien, kan de hele mobiele weergave toch rommelig en onhandig zijn. En gelukkig kun je daar gemakkelijk iets aan doen!
Met een paar slimme instellingen in Elementor Pro zorg je ervoor dat je website op elk scherm haarscherp, overzichtelijk en snel werkt.
In dit artikel:
- Volgorde van elementen aanpassen voor mobiel design
- Marge & Padding optimaliseren voor mobiel
- Typografie schalen voor mobiel (VOLGT)
Zo pas je de volgorde van Elementen aan in Elementor Pro
Het is echt niet nodig om twee verschillende containers op te maken, eentje voor desktop weergave, eentje voor mobiele weergave. Met een simpel knopje draai je de volgorde helemaal om. En het is ook mogelijk om een aangepaste volgorde in te stellen, waarbij je de elementen helemaal door elkaar husselt.
Volgorde van elementen omdraaien binnen een container
- Schakel over naar de Mobiele weergave
- Selecteer de container waarin je de volgorde van elementen wil veranderen.
- Ga in het linkerpaneel naar het tabblad Stijl en dan door naar Layout.
- Zoek bij de container-instellingen voor Richting.
- Kies voor Omgekeerde Kolom
Bekijk de stappen in deze video:
Elementen een aangepaste volgorde geven in Elementor pro
- Schakel over naar de Mobiele weergave
-
Bepaal de volgorde waarin je de elementen wilt gaan weergeven.
Let op: Je doet de instellingen per element - Selecteer het eerste element en ga in het linkerpaneel naar het tabblad Stijl en dan door naar Layout.
- Zoek bij de instellingen naar Volgorde
- Kies voor het potloodje, aangepaste volgorde
- Zet een voor een alle elementen op de gewenste plek.
Bekijk de stappen in deze video:
Marge & Padding optimaliseren voor mobiel
Grote marges en/of paddings tussen containers zorgen op desktop juist voor rust en witruimte. Maar diezelfde ruimte kan er op mobiel voor zorgen dat je bezoekers eindeloos moeten scrollen. En dat willen we niet.
Als jij bent begonnen met desktop design en daarin de marges hebt ingesteld, worden deze automatische meegenomen naar de mobiele weergave. Gelukkig pas je dit op een andere schermmaat gemakkelijk aan:
Marge en/of padding op mobiel anders instellen
- Schakel over naar de Mobiele weergave
- Selecteer de container waarvan je de marge en/of padding wilt aanpassen.
- Ga in het linkerpaneel naar het tabblad Stijl en dan door naar Afstand
- Zoek naar de onderdelen Marge en Padding. Je ziet hier vooringevuld de instellingen zoals deze voor desktop zijn gedaan.
- Overschrijf deze met instellingen die passen bij de mobiele weergave.
Bekijk de stappen in deze video:
